<template>
	<view class="UserAdd">
		<view class="top">
			<view style="font-size: 40rpx;padding: 40rpx;">人员基本信息</view>
			<view style="text-align: center;">
				<uni-icons type="personadd" style="color: #fff;margin-top: 4rpx;margin-left: 4rpx;"
					size="80"></uni-icons>
			</view>
		</view>
		<view style="padding: 40rpx; margin-top: 40rpx;">
			<view class="title">姓名</view>
			<input v-model="Info.name" class="input" placeholder-style="color:#ccc;" placeholder="请输入姓名" />
			<view class="title">电话</view>
			<input v-model="Info.tel" class="input" type="tel" placeholder-style="color:#ccc;" placeholder="请输入电话" />
			<view class="title">性别</view>
			<radio-group @change="SexChange" style="display: flex;margin: 40rpx 20rpx 40rpx -10rpx;">
				<label class="radio_row">
					<view>
						<radio value="1" :checked="Info.sex == '1'" />
					</view>
					<view>男</view>
				</label>
				<label class="radio_row">
					<view>
						<radio value="2" :checked="Info.sex == '2'" />
					</view>
					<view>女</view>
				</label>
			</radio-group>
			<view class="title">证件号码</view>
			<input v-model="Info.id_number" class="input" placeholder-style="color:#ccc;" placeholder="请输入证件号码" />
			<view @click="Save()" class="button">保 存</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		PersonSave,
		PersonGetDetail
	} from "@/api"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	let Info = ref({});
	const GetDetail=()=>{
		PersonGetDetail({
			id: Info.value.id
		}).then(res => {
			if (res.status) {
				 Info.value=res.data.info
				 
			}
		
		})
	}
	const Save = () => { 
		if (Info.value.name == undefined) {
			uni.showToast({
				title: '姓名不能为空',
				icon: 'none'
			});
			return false
		}
		if (Info.value.tel == undefined) {
			uni.showToast({
				title: '电话不能为空',
				icon: 'none'
			});
			return false
		}
		if (Info.value.sex == undefined) {
			uni.showToast({
				title: '请选择性别',
				icon: 'none'
			});
			return false
		}
		if (Info.value.id_number == undefined) {
			uni.showToast({
				title: '请输入证件号码',
				icon: 'none'
			});
			return false
		}
		
		PersonSave({
			info: Info.value
		}).then(res => {
			if (res.status) {
				uni.showToast({
					title: res.msg
				});
				uni.redirectTo({
					url: '/pages/user/list'
				})
			}

		})
	}
	const SexChange=(e)=>{
		Info.value.sex=e.detail.value
	}
	onLoad((e)=>{
		if(e.personid){
			Info.value.id =e.personid
			GetDetail()
		}else{
			Info.value.id = 0
		}
		
	})
</script>

<style scoped>
	.UserAdd {
		background-color: #fff;
		height: calc(100vh);
	}

	.top {
		height: 180rpx;
		background-color: #53cdf9;
		padding-top: 110rpx;
		color: #fff;
		display: flex;
		font-weight: 700;
	}

	.title {
		font-size: 36rpx;
		font-weight: 700;
		color: #333;
	}

	.input {
		margin-top: 20rpx;
		margin-bottom: 30rpx;
		border: 0rpx;
		border-bottom: 1rpx solid #b0e2f9;
		height: 80rpx;
	}

	.button {
		width: 100%;
		background-color: #00BBF9;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: #fff;
		font-weight: 700;
		border-radius: 50rpx;
		margin-top: 80rpx;
	}
	.radio_row{
		display: flex;
		margin-left: 20rpx;
	}
</style>