<template>
	<view class="personal">
		<u-form
			labelPosition="top"
			:model="userInfo"
			:rules="rules"
			ref="uForm"
			labelWidth="120"
		>
			<u-form-item label="姓名" prop="name" borderBottom>
				<u-input v-model="userInfo.name" border="none" />
			</u-form-item>
			<u-form-item label="性别" prop="sex">
				<u-cell
					size="large"
					isLink
					@click="show = true"
				>
					<view slot="title">
						<view>{{userInfo.sex ? '男' : '女'}}</view>
					</view>
				</u-cell>
				<u-action-sheet
					:actions="[{name: '男'},{name: '女'}]"
					:show="show"
					@select="setSex"
					:safeAreaInsetBottom="true"
					cancelText="取消"
					round="20"
					@close="show=false"
				/>
			</u-form-item>
			<u-form-item label="年龄" prop="age" borderBottom>
				<u-input v-model="userInfo.age" border="none" disabled placeholder="输入身份证识别" />
			</u-form-item>
			<u-form-item label="手机号码" prop="phoneNumber" borderBottom>
				<u-input v-model="userInfo.phoneNumber" border="none" />
			</u-form-item>
			<u-form-item label="身份证号" prop="idNo" borderBottom>
				<u-input v-model="userInfo.idNo" border="none" @blur="getAgeFromIdCard" />
			</u-form-item>
		</u-form>
		<view class="br"></view>
		<view class="footer">
			<u-button @click="submit" type="primary" shape="circle">保存</u-button>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:{},
				show: false,
			}
		},
		onLoad() {
			this.$http.get('/person/person/details', {}).then(res => {
				this.userInfo = res.data
			})
		},
		methods: {
			setSex(e){
				this.userInfo.sex = e.name == '男' ? true : false
				this.show = false
			},
			getAgeFromIdCard(idCard) {
			    // 验证身份证号格式（简单验证）
			    if (!/^\d{17}[\dXx]$/.test(idCard)) {
			        return uni.showToast({
			        	title: '请输入正确的身份证号',
			        	icon: 'none'
			        })
			    }
			    // 提取出生日期部分
			    let birthStr = idCard.substring(6, 14);
			    // 解析为年、月、日
			    let birthYear = parseInt(birthStr.substring(0, 4));
			    let birthMonth = parseInt(birthStr.substring(4, 6));
			    let birthDay = parseInt(birthStr.substring(6, 8));
			    
			    // 获取当前日期
			    let today = new Date();
			    let currentYear = today.getFullYear();
			    let currentMonth = today.getMonth() + 1; // 月份从0开始，需加1
			    let currentDay = today.getDate();
			    
			    // 计算年龄
			    let age = currentYear - birthYear;
			    
			    // 若当前月份小于出生月份，年龄减1
			    if (currentMonth < birthMonth) {
			        age--;
			    } 
			    // 若月份相同但日期小于出生日，年龄减1
			    else if (currentMonth === birthMonth && currentDay < birthDay) {
			        age--;
			    }
				if (age > 0) {
					this.userInfo.age = age
				} else {
					uni.showToast({
						title: '身份证信息错误',
						icon: 'none'
					})
				}
			},
			submit(){
				if (!this.userInfo.name) {
					return uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					})
				}
				if (!this.userInfo.sex) {
					return uni.showToast({
						title: '请选择性别',
						icon: 'none'
					})
				}
				if (!this.userInfo.age) {
					return uni.showToast({
						title: '请输入正确的身份证号',
						icon: 'none'
					})
				}
				if (!this.userInfo.phoneNumber) {
					return uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
				}
				const reg = /^1[3-9]\d{9}$/;
				if (!reg.test(this.userInfo.phoneNumber)) {
					return uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
				}
				if (!this.userInfo.idNo) {
					return uni.showToast({
						title: '请输入身份证号',
						icon: 'none'
					})
				}
				const reg2 = /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
				  if (!reg2.test(this.userInfo.idNo)) {
					return uni.showToast({
						title: '请输入正确的身份证号',
						icon: 'none'
					})
				  }
				this.$http.post('/person/u', this.userInfo).then(res => {
					uni.showToast({
					  title: `修改成功`,
					  icon: 'none',
					});
					setTimeout(()=>{
						uni.navigateBack()
					},500)
				})
			}
		}
	}
</script>

<style lang="scss">
.personal{
	background: #fff;
	min-height:100vh;
	padding:0 30rpx;
	.br{
		height: calc(200rpx + env(safe-area-inset-bottom));
	}
	.footer{
		position: fixed;
		bottom: calc(env(safe-area-inset-bottom) + 40rpx);
		width: 690rpx;
	}
}
</style>
