<script setup>
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2023年4月12日 21:39:00
	 */
	import {
		ref,watch
	} from 'vue'
	import {
		UserPersonCreateAction,
		UserPersonUpdateAction,
		UserPersonCountAction,
		UserPersonInfoAction,
		$image,
		$response
	} from '@/api'
	import $api from '@/api/api.js'
	import {
		onShow
	} from '@dcloudio/uni-app'

	const $props = defineProps({
		id: {
			type: String,
			default: '0'
		}
	});
	onShow(() => {
		UserPersonCount()
		UserPersonInfo()
		setTitle()
	})
	const setTitle = () => {
		let title = '修改体检人'
		if (Number($props.id) === 0) {
			title = '添加体检人'
		}
		uni.setNavigationBarTitle({
			title: title
		})
	}
	
	const default_user_person_info = {
		id: 0,
		name: '',
		id_number: '',
		birthday: '',
		sex_select: 0,
		sex_name: '男',
		sex: 1,
		phone: '',
		relationship_select: 0,
		relationship_name: '本人',
		relationship: '本人',
		marriage_select: 1,
		marriage_name: '未婚',
		marriage: 2,
		default: 2,
	}
	const marriage_arr = [{
		label: '已婚',
		value: 1
	}, {
		label: '未婚',
		value: 2
	}]
	const marriageChange = (e) => {
		let index = Number(e.detail.value)
		user_person_info.value.marriage_select = e.detail.value
		user_person_info.value.marriage_name = marriage_arr[index].label
		user_person_info.value.marriage = marriage_arr[index].value
	}

	const sex_arr = [{
		label: '男',
		value: 1
	}, {
		label: '女',
		value: 2
	}]
	const sexChange = (e) => {
		let index = Number(e.detail.value)
		user_person_info.value.sex_select = e.detail.value
		user_person_info.value.sex_name = sex_arr[index].label
		user_person_info.value.sex = sex_arr[index].value
	}

	const relationship_arr = [{
		label: '本人',
		value: '本人'
	}, {
		label: '父母',
		value: '父母'
	}, {
		label: '祖父母',
		value: '祖父母'
	}, {
		label: '外祖父母',
		value: '外祖父母'
	}, {
		label: '兄弟姐妹',
		value: '兄弟姐妹'
	}, {
		label: '亲戚',
		value: '亲戚'
	}, {
		label: '朋友',
		value: '朋友'
	}, {
		label: '其他',
		value: '其他'
	}]
	const relationshipChange = (e) => {
		let index = Number(e.detail.value)
		user_person_info.value.relationship_select = e.detail.value
		user_person_info.value.relationship_name = relationship_arr[index].label
		user_person_info.value.relationship = relationship_arr[index].value
	}

	const user_person_info = ref(JSON.parse(JSON.stringify(default_user_person_info)))
	const UserPersonInfo = async () => {
		if (Number($props.id) === 0) {
			user_person_info.value = JSON.parse(JSON.stringify(default_user_person_info))
		} else {
			const response = await UserPersonInfoAction({
				id: Number($props.id)
			})
			$response(response, () => {
				let relationship = 0
				for (let i in relationship_arr) {
					if (relationship_arr[i].value === response.data.info.relationship) {
						relationship = Number(i)
						break;
					}
				}
				user_person_info.value = {
					id: response.data.info.id,
					name: response.data.info.name,
					id_number: response.data.info.id_number,
					birthday: response.data.info.birthday,
					sex_select: Number(response.data.info.sex) === 1 ? 0 : 1,
					sex_name: Number(response.data.info.sex) === 1 ? '男' : '女',
					sex: response.data.info.sex,
					phone: response.data.info.phone,
					relationship_select: relationship,
					relationship_name: response.data.info.relationship,
					relationship: response.data.info.relationship,
					marriage_select: Number(response.data.info.marriage) === 1 ? 0 : 1,
					marriage_name: Number(response.data.info.marriage) === 1 ? '已婚' : '未婚',
					marriage: response.data.info.marriage,
					default: response.data.info.default,
				}
			})
		}
	}

	const birthdayChange = (e) => {
		console.log(e)
	}
	
	//新增模式下，监听身份证输入，自动填写生日
	watch(()=>user_person_info.value.id_number, (newVal, oldVal) => {
		  if(Number($props.id) === 0){
			  if(newVal.length==18){
			  			  user_person_info.value.birthday= newVal.substring(6,10)+'-'+newVal.substring(10,12)+'-'+newVal.substring(12,14)
			  }else{
			  			  user_person_info.value.birthday=''
			  }
		  }
	      
	});
	const birthday_ref = ref(null)
	const birthdayRef = (e) => {
		birthday_ref.value = e
	}
	const birthdayClick = () => {
		birthday_ref.value.show()
	}
	const defaultChange = (e) => {
		user_person_info.value.default = e.detail.value ? 1 : 2
	}

	const readmeClick = () => {
		uni.$lu.jump({
			jump_type: 3,
			jump_path: $api('Readme'),
			login_type: 1
		})
	}
	const UserPersonCount = async () => {
		const response = await UserPersonCountAction()
		$response(response, () => {
			if (response.data.default === 0) {
				user_person_info.value.default = 1
			}
		})
	}

	const saveClick = async () => {
		if(tongyi.value!='tongyi'){
							uni.showToast({
							         title: "请阅读并同意用户协议",
							         icon:'none'
							       })
								   return false;
						}
		const response = !user_person_info.value.id ?
			await UserPersonCreateAction(user_person_info.value) :
			await UserPersonUpdateAction(user_person_info.value)
		$response(response, () => {
			uni.navigateBack({
				delta: 1
			})
		})
	}
	let tongyi=ref(false)
			const tongyiclick=(e)=>{
				tongyi.value=e.detail.value 
			}
</script>
<template>
	<view>
		<uni-datetime-picker :ref="birthdayRef" class="input_line_datetime_picker_wrapper" type="date" :clear-icon="false"
			v-model="user_person_info.birthday" @change="birthdayChange" />
		<view class="input_wrapper">
			<view class="input_line_wrapper">
				<view class="input_line_title_wrapper">姓名</view>
				<view class="input_line_input_wrapper">
					<input type="text" v-model="user_person_info.name" placeholder="请输入">
				</view>
			</view>
			<view class="input_line_wrapper">
				<view class="input_line_title_wrapper">性别</view>
				<view class="input_line_input_wrapper">
					<picker @change="sexChange" :value="user_person_info.sex_select" :range="sex_arr" range-key="label">
						<view>{{ user_person_info.sex_name || '请选择' }}</view>
					</picker>
				</view>
				<view class="input_line_icon_wrapper">
					<image :src="$image('/storage/assets/mp/user/箭头@2x.png')"></image>
				</view>
			</view>
			<view class="input_line_wrapper">
				<view class="input_line_title_wrapper">婚姻状况</view>
				<view class="input_line_input_wrapper">
					<picker @change="marriageChange" :value="user_person_info.marriage_select" :range="marriage_arr"
						range-key="label">
						<view>{{ user_person_info.marriage_name || '请选择' }}</view>
					</picker>
				</view>
				<view class="input_line_icon_wrapper">
					<image :src="$image('/storage/assets/mp/user/箭头@2x.png')"></image>
				</view>
			</view>
			<view class="input_line_wrapper">
				<view class="input_line_title_wrapper">证件号</view>
				<view class="input_line_input_wrapper">
					<input type="text" v-model="user_person_info.id_number" placeholder="请输入">
				</view>
			</view>
			<view class="input_line_wrapper">
				<view class="input_line_title_wrapper">生日</view>
				<view @click="birthdayClick()" class="input_line_input_wrapper">
					{{ user_person_info.birthday || '请选择' }}
				</view>
				<view class="input_line_icon_wrapper">
					<image :src="$image('/storage/assets/mp/user/箭头@2x.png')"></image>
				</view>
			</view>
			<view class="input_line_wrapper">
				<view class="input_line_title_wrapper">手机号</view>
				<view class="input_line_input_wrapper">
					<input type="text" v-model="user_person_info.phone" placeholder="请输入">
				</view>
			</view>
			<view class="input_line_wrapper">
				<view class="input_line_title_wrapper">关系</view>
				<view class="input_line_input_wrapper">
					<picker @change="relationshipChange" :value="user_person_info.relationship_select" :range="relationship_arr"
						range-key="label">
						<view>{{ user_person_info.relationship_name || '请选择' }}</view>
					</picker>
				</view>
				<view class="input_line_icon_wrapper">
					<image :src="$image('/storage/assets/mp/user/箭头@2x.png')"></image>
				</view>
			</view>
			<view class="input_line_wrapper">
				<view class="input_line_title_wrapper">是否默认</view>
				<view class="input_line_input_wrapper">
					<switch @change="defaultChange" :checked="Number(user_person_info.default) === 1"
						style="transform:scale(0.6)" />
				</view>
			</view>
		</view>
		<view class="break_block_wrapper"></view>
		<!-- <view @click="readmeClick()" class="readme_wrapper">添加或修改体检人信息</view>
		<view @click="readmeClick()" class="readme_wrapper">
			即代表您已同意
			<text class="blue_text_wrapper">《用户服务协议》</text>
			和
			<text class="blue_text_wrapper">《隐私协议》</text>
		</view> -->
		<view style="display: flex; padding-left: 30rpx; align-items: center;">
							<view>
								<checkbox-group @change="tongyiclick">
									<label>
										<checkbox value="tongyi" />已阅读并同意
									</label>
									 
								</checkbox-group>
							</view>
							<view @click="readmeClick()" class="readme_wrapper">
				
								<text class="blue_text_wrapper">《用户服务协议》</text>
								和
								<text class="blue_text_wrapper">《隐私协议》</text>
							</view>
						</view>
		<view @click="saveClick()" class="add_button_wrapper">保存</view>
		<view class="blank_wrapper"></view>
	</view>
</template>
<style>
	page {
		background: #ffffff;
		width: 750rpx;
		overflow-x: hidden;
		overflow-y: auto;
	}
</style>
<style scoped>
	.break_block_wrapper {
		height: 30rpx;
	}

	.readme_wrapper {
		font-size: 26rpx;
		line-height: 50rpx;
		margin-left: -10rpx;
	}

	.blue_text_wrapper {
		color: blue;
	}

	.add_button_wrapper {
		width: 580rpx;
		height: 90rpx;
		background: linear-gradient(-90deg, #23D3AF, #0DC5CF);
		border-radius: 45rpx;
		margin: 100rpx auto 0;
		text-align: center;
		line-height: 90rpx;
		font-size: 31rpx;
		font-weight: 500;
		color: #F6FDFD;
	}

	.input_line_datetime_picker_wrapper {
		position: fixed;
		width: 0;
		height: 0;
		top: -100rpx;
		left: -500rpx;
		z-index: 999999;
	}

	.input_line_icon_wrapper image {
		width: 11rpx;
		height: 18rpx;
		display: block;
	}

	.input_line_icon_wrapper {
		position: absolute;
		right: 40rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 11rpx;
		height: 18rpx;
	}

	.input_wrapper {
		margin-top: 20rpx;
	}

	.input_line_input_wrapper picker {
		width: 510rpx;
		height: 100%;
		line-height: 110rpx;
	}

	.input_line_input_wrapper input {
		width: 510rpx;
		height: 100%;
		line-height: 110rpx;
	}

	.input_line_input_wrapper {
		position: relative;
		width: 510rpx;
		height: 100%;
	}

	.input_line_input_wrapper {
		font-size: 30rpx;
		color: #222222;
	}

	.input_line_title_wrapper {
		width: 170rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #222222;
	}

	.input_line_wrapper {
		display: flex;
		height: 110rpx;
		align-items: center;
		line-height: 110rpx;
		width: 690rpx;
		margin: 0 auto;
		border-bottom: 1rpx #EBEBEB solid;
		position: relative;
	}
</style>