<template>
	<!-- 我的/设置/修改资料 -->
	<view class="edit-info">
		<view style="padding-bottom: 200rpx;">
			<u-cell-group :border='false'>
				<u-cell title="姓名" size="large" :border='false' :titleStyle="{fontSize:'32rpx',color:'#9CA3AF'}"
					@click="handleName">
					<view class="input-val" style="width: 400rpx;" slot="value">
						{{userInfo.name}}
					</view>
					<u-icon slot="right-icon" name="edit-pen" size="26" color="#9CA3AF"></u-icon>
				</u-cell>
				<u-cell title="身份证号" size="large" :border='false' :titleStyle="{fontSize:'32rpx',color:'#9CA3AF'}"
					@click="handleIdcard">
					<view class="input-val" style="width: 350rpx;" slot="value">
						{{userInfo.idcard}}
					</view>
					<u-icon slot="right-icon" name="edit-pen" size="26" color="#9CA3AF"></u-icon>
				</u-cell>
				<u-cell title="手机号" size="large" :border='false' :titleStyle="{fontSize:'32rpx',color:'#9CA3AF'}"
					@click="handleMobile">
					<view class="input-val" style="width: 350rpx;" slot="value">
						{{userInfo.contact_mobile}}
					</view>
					<u-icon slot="right-icon" name="edit-pen" size="26" color="#9CA3AF"></u-icon>
				</u-cell>
				<u-cell title="性别" size="large" :border='false' :titleStyle="{fontSize:'32rpx',color:'#9CA3AF'}"
					@click="handleSex">
					<view class="input-val" style="width: 350rpx;" slot="value">
						{{userInfo.sex?sexList[userInfo.sex-1]:''}}
					</view>
					<u-icon slot="right-icon" name="edit-pen" size="26" color="#9CA3AF"></u-icon>
				</u-cell>
				<u-cell title="生日" size="large" :border='false' :titleStyle="{fontSize:'32rpx',color:'#9CA3AF'}">
					<view class="input-val" style="width: 350rpx;" slot="value">
						<uni-datetime-picker ref="birth" type="date" :clear-icon="false"
							v-model="userInfo.birthday">{{userInfo.birthday}}
						</uni-datetime-picker>
					</view>
					<u-icon slot="right-icon" name="edit-pen" size="26" color="#9CA3AF" @click="handleBirth"></u-icon>
				</u-cell>
				<u-cell title="学历" size="large" :border='false' :titleStyle="{fontSize:'32rpx',color:'#9CA3AF'}"
					@click="handleEmotion">
					<view class="input-val" style="width: 350rpx;" slot="value">
						{{userInfo.degree?educationList[userInfo.degree-1]:''}}
					</view>
					<u-icon slot="right-icon" name="edit-pen" size="26" color="#9CA3AF"></u-icon>
				</u-cell>
				<u-cell title="政治面貌" size="large" :border='false' :titleStyle="{fontSize:'32rpx',color:'#9CA3AF'}"
					@click="handleJob">
					<view class="input-val" style="width: 350rpx;" slot="value">
						{{userInfo.political?politicalList[userInfo.political-1]:''}}
					</view>
					<u-icon slot="right-icon" name="edit-pen" size="26" color="#9CA3AF"></u-icon>
				</u-cell>
				<u-cell title="安置地" size="large" :border='false' :titleStyle="{fontSize:'32rpx',color:'#9CA3AF'}"
					@click="showCity">
					<view  class="input-val" style="width: 450rpx;" slot="value">
						{{userInfo.to_province_name}}-{{userInfo.to_city_name}}-{{userInfo.to_area_name}}
					</view>
					<u-icon slot="right-icon" name="edit-pen" size="26" color="#9CA3AF"></u-icon>
				</u-cell>
				<u-cell v-if="userInfo.reside_province_name" title="现居住地" size="large" :border='false'
					:titleStyle="{fontSize:'32rpx',color:'#9CA3AF'}" @click="showReside">
					<view class="input-val" style="width: 450rpx;" slot="value">
						{{userInfo.reside_province_name}}-{{userInfo.reside_city_name}}-{{userInfo.reside_area_name}}
					</view>
					<u-icon slot="right-icon" name="edit-pen" size="26" color="#9CA3AF"></u-icon>
				</u-cell>
				<u-cell title="详细地址" size="large" :border='false' :titleStyle="{fontSize:'32rpx',color:'#9CA3AF'}"
					@click="handleDetail">
					<view class="input-val" style="width: 450rpx;" slot="value">
						{{userInfo.detail}}
					</view>
					<u-icon slot="right-icon" name="edit-pen" size="26" color="#9CA3AF"></u-icon>
				</u-cell>
				<u-cell title="入伍时间" size="large" :border='false' :titleStyle="{fontSize:'32rpx',color:'#9CA3AF'}">
					<view class="input-val" style="width: 350rpx;" slot="value">
						<uni-datetime-picker ref="birth" type="date" :clear-icon="false"
							v-model="userInfo.join_time">{{userInfo.join_time}}
						</uni-datetime-picker>
					</view>
					<u-icon slot="right-icon" name="edit-pen" size="26" color="#9CA3AF" @click="handleBirth"></u-icon>
				</u-cell>
				<u-cell title="退役时间" size="large" :border='false' :titleStyle="{fontSize:'32rpx',color:'#9CA3AF'}">
					<view class="input-val" style="width: 350rpx;" slot="value">
						<uni-datetime-picker ref="birth" type="date" :clear-icon="false"
							v-model="userInfo.retire_time">{{userInfo.retire_time}}
						</uni-datetime-picker>
					</view>
					<u-icon slot="right-icon" name="edit-pen" size="26" color="#9CA3AF" @click="handleBirth"></u-icon>
				</u-cell>
				<u-cell title="人员类别" size="large" :border='false' :titleStyle="{fontSize:'32rpx',color:'#9CA3AF'}"
					@click="handleCategory">
					<view class="input-val" style="width: 350rpx;" slot="value">
						{{userInfo.category?categoryList[userInfo.category-1]:''}}
					</view>
					<u-icon slot="right-icon" name="edit-pen" size="26" color="#9CA3AF"></u-icon>
				</u-cell>
				<u-cell title="健康状态" size="large" :border='false' :titleStyle="{fontSize:'32rpx',color:'#9CA3AF'}"
					@click="handleHealth">
					<view class="input-val" style="width: 350rpx;" slot="value">
						{{ userInfo.health?healthList[userInfo.health-1]:''}}
					</view>
					<u-icon slot="right-icon" name="edit-pen" size="26" color="#9CA3AF"></u-icon>
				</u-cell>
				<u-cell title="职业技能培训意向" size="large" :border='false' :titleStyle="{fontSize:'32rpx',color:'#9CA3AF'}"
					@click="handlePurpose">
					<view class="input-val" style="width: 350rpx;" slot="value">
						{{userInfo.purpose}}
					</view>
					<u-icon slot="right-icon" name="edit-pen" size="26" color="#9CA3AF"></u-icon>
				</u-cell>
			</u-cell-group>
		</view>
		<!-- 底部操作 -->
		<view class="fixed">
			<view class="set-button">
				<button @click="submit" class="button">确认</button>
			</view>
		</view>
		<!-- 昵称 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="输入昵称" :value="userInfo.name" placeholder="请输入内容"
				@confirm="nameConfirm"></uni-popup-dialog>
		</uni-popup>
		<!-- 身份证号 -->
		<uni-popup ref="idcardDialog" type="dialog">
			<uni-popup-dialog :before-close='true' ref="inputClose" mode="input" title="输入身份证" :value="userInfo.idcard"
				placeholder="请输入内容" @close="idcardClose" @confirm="idcardConfirm"></uni-popup-dialog>
		</uni-popup>
		<!-- 手机号码 -->
		<uni-popup ref="mobileDialog" type="dialog">
			<uni-popup-dialog :before-close='true' ref="inputClose" mode="input" title="输入手机号"
				:value="userInfo.contact_mobile" placeholder="请输入内容" @close="mobileClose"
				@confirm="mobileConfirm"></uni-popup-dialog>
		</uni-popup>
		<!-- 详细地址 -->
		<uni-popup ref="detailDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="输入详细地址" :value="userInfo.detail" placeholder="请输入内容"
				@confirm="detailConfirm"></uni-popup-dialog>
		</uni-popup>
		<!-- 意向 -->
		<uni-popup ref="purposeDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="输入职业技能培训意向" :value="userInfo.purpose"
				placeholder="请输入内容" @confirm="purposeConfirm"></uni-popup-dialog>
		</uni-popup>
		<!-- 安置地城市选择 -->
		<liuChooseAddress ref="scroll" @change='chooseSuccess'></liuChooseAddress>
		<!-- 现居地城市选择 -->
		<liuChooseAddress ref="scrolls" @change='chooseSuccesss'></liuChooseAddress>
	</view>
</template>

<script>
	import {
		register,
		infoEdit,
		preInfo,
	} from "@/api/login.js"
	import liuChooseAddress from '@/components/liu-choose-address/liu-choose-address.vue'

	import {
		rsaEncrypt
	} from '@/utils/lib/rsa.js';

	export default {
		components: {
			liuChooseAddress
		},
		data() {
			return {
				userInfo: {
					code: "", //登录code
					org_id: "", //机构ID 默认1
					name: "", //姓名
					idcard: "", //身份证号
					sex: "", //性别 1.男 2.女
					birthday: "", //出生日期
					degree: "", //学历 1.博士研究生 2.硕士研究生 3.本科 4.大专 5.高中 6.初中及以下
					political: "", //政治面貌 1.中共党员 2.中共预备党员 3.中共团员 4.群众
					to_province_code: "", //省代码 安置地
					to_province_name: "", //省名称 安置地
					to_city_code: "", //市代码 安置地
					to_city_name: "", //市名称 安置地
					to_area_code: "", //区县代码 安置地
					to_area_name: "", //区县名称 安置地
					category: "", //人员类别 1.退役军官 2.退役士兵
					join_time: "", //入伍时间
					retire_time: "", //退役时间
					health: "", //健康状态 1.健康或良好 2.一般或较弱 3.有慢性病 4.患有大病 5.残疾
					reside_province_code: "", //省代码 现居住地
					reside_province_name: "", //省名称 现居住地
					reside_city_code: "", //市代码 现居住地
					reside_city_name: "", //市名称 现居住地
					reside_area_code: "", //区县代码 现居住地
					reside_area_name: "", //区县名称 现居住地
					detail: "", //详细地址 现居住地
					contact_mobile: "", //联系电话
					purpose: "" //职业技能培训意向
				},
				form: {
					username: 'MrThinco',
					sex: 0,
					emotion: 1,
					job: 0,
					birth: '2020-10-10',
					city: '四川成都'
				},
				sexList: ['男', '女'],
				// 1.博士研究生 2.硕士研究生 3.本科 4.大专 5.高中 6.初中及以下
				educationList: ['博士研究生', '硕士研究生', '本科', '大专', '高中', '初中及以下'],
				//政治面貌 1.中共党员 2.中共预备党员 3.中共团员 4.群众
				politicalList: ['中共党员', '中共预备党员', '中共团员', '群众'],
				// 人员类别
				categoryList: ['退役军官', '退役士兵'],
				healthList: ['健康或良好', '一般或较弱', '有慢性病', '患有大病', '残疾'],
				// cityDefault: [0, 0, 1],
				// 按钮配置
				btnStyle: {
					width: "90%",
					height: "75rpx",
					background: "linear-gradient(to right, #00B7FF, #006EEF)",
					color: "#FFFFFF",
					fontSize: "30rpx",
				},
				isPickerVisible: false, // 控制选择器显示状态
				selectedAddress: '', // 存储选择的地址
				pageType: 'edit'
			}
		},
		onLoad(options) {
			console.log(options,'');
			if (options.type && options.type == 'register') {
				this.userInfo.org_id = 1
				this.userInfo.code = options.code
				this.pageType = options.type
				uni.setNavigationBarTitle({
					title: '用户注册'
				});

			} else {
				this.getPreInfo()
				uni.setNavigationBarTitle({
					title: '修改资料'
				});
			}

		},
		methods: {
			getPreInfo() {
				uni.showLoading({
					title: '加载中...'
				})
				preInfo().then(res => {
					uni.hideLoading()
					this.userInfo = res.data
					this.userInfo.org_id = 1
					this.userInfo.name = ''
					this.userInfo.idcard = ''
					this.userInfo.contact_mobile = ''
				})
			},
			// 修改昵称
			handleName() {
				this.$refs.inputDialog.open()
			},
			nameConfirm(val) {
				this.userInfo.name = val
			},
			// 身份证号
			handleIdcard() {
				this.$refs.idcardDialog.open()
			},
			async idcardConfirm(val) {
				var reslut = await this.isValidIDCard(val)
				if (!reslut) {
					uni.showToast({
						title: '请输入正确的身份证号',
						icon: 'none'
					})
					this.userInfo.idcard = ''
					return
				}
				this.userInfo.idcard = val
				this.$refs.idcardDialog.close()
			},
			idcardClose() {
				this.$refs.idcardDialog.close()
			},
			// 手机号
			handleMobile() {
				this.$refs.mobileDialog.open()
			},
			handleDetail() {
				this.$refs.detailDialog.open()
			},
			handlePurpose() {
				this.$refs.purposeDialog.open()
			},
			purposeConfirm(val) {
				this.userInfo.purpose = val
			},
			async mobileConfirm(val) {
				var reslut = await this.isValidPhoneNumber(val)
				if (!reslut) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					this.userInfo.contact_mobile = ''
					return
				}
				this.userInfo.contact_mobile = val
				this.$refs.mobileDialog.close()
			},
			mobileClose() {
				this.$refs.mobileDialog.close()
			},
			detailConfirm(val) {
				this.userInfo.detail = val
			},
			isValidPhoneNumber(phone) {
				const regex = /^1[3-9]\d{9}$/; // 正则表达式，匹配以1开头，后面跟随9位数字
				return regex.test(phone);
			},
			isValidIDCard(id) {
				// 正则表达式验证格式
				const regex = /^(?:\d{15}|\d{17}[\dxX])$/;
				if (!regex.test(id)) {
					return false; // 格式不匹配
				}
				// 如果是18位身份证，进行校验位的计算
				if (id.length === 18) {
					const weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
					const checksum = '10X98765432';
					let sum = 0;
					for (let i = 0; i < 17; i++) {
						sum += parseInt(id[i]) * weights[i];
					}
					const calculatedCheckDigit = checksum[sum % 11];
					return calculatedCheckDigit === id[17].toUpperCase(); // 校验位匹配
				}
				return true; // 15位身份证通过格式验证即为有效
			},
			// 修改性别
			handleSex() {
				const _this = this
				uni.showActionSheet({
					itemList: this.sexList,
					success: function(res) {
						_this.userInfo.sex = res.tapIndex + 1
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				})
			},
			// 修改生日
			handleBirth() {
				this.$refs.birth.show()
			},
			// 修改情感
			handleEmotion() {
				const _this = this
				uni.showActionSheet({
					itemList: this.educationList,
					success: function(res) {
						console.log(res, 'res');
						_this.userInfo.degree = res.tapIndex + 1
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				})
			},
			// 修改职业
			handleJob() {
				const _this = this
				uni.showActionSheet({
					itemList: this.politicalList,
					success: function(res) {
						_this.userInfo.political = res.tapIndex + 1
					},
					fail: function(res) {
						console.log(res.errMsg)
					}
				})
			},
			handleCategory() {
				const _this = this
				uni.showActionSheet({
					itemList: this.categoryList,
					success: function(res) {
						_this.userInfo.category = res.tapIndex + 1
					},
					fail: function(res) {
						console.log(res.errMsg)
					}
				})
			},
			handleHealth() {
				const _this = this
				uni.showActionSheet({
					itemList: this.healthList,
					success: function(res) {
						_this.userInfo.health = res.tapIndex + 1
					},
					fail: function(res) {
						console.log(res.errMsg)
					}
				})
			},
			showCity() {
				this.$refs.scroll.open()
			},
			showReside() {
				this.$refs.scrolls.open()
			},
			chooseSuccess(e) {
				this.userInfo.to_province_code = e.value[0].value
				this.userInfo.to_province_name = e.value[0].label

				this.userInfo.to_city_code = e.value[1].value
				this.userInfo.to_city_name = e.value[1].label

				this.userInfo.to_area_code = e.value[2].value
				this.userInfo.to_area_name = e.value[2].label
			},

			chooseSuccesss(e) {
				this.userInfo.reside_province_code = e.value[0].value
				this.userInfo.reside_province_name = e.value[0].label

				this.userInfo.reside_city_code = e.value[1].value
				this.userInfo.reside_city_name = e.value[1].label

				this.userInfo.reside_area_code = e.value[2].value
				this.userInfo.reside_area_name = e.value[2].label
			},
			// 提交
			submit() {
				var that = this
				console.log(that.userInfo);
				if (!that.userInfo.name) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					})
					return
				}
				if (!that.userInfo.idcard) {
					uni.showToast({
						title: '请输入身份证号',
						icon: 'none'
					})
					return
				}
				if (!that.userInfo.contact_mobile) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				if (!that.userInfo.contact_mobile) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				if (!that.userInfo.sex) {
					uni.showToast({
						title: '请选择性别',
						icon: 'none'
					})
					return
				}
				if (!that.userInfo.birthday) {
					uni.showToast({
						title: '请选择出生日期',
						icon: 'none'
					})
					return
				}
				if (!that.userInfo.degree) {
					uni.showToast({
						title: '请选择学历',
						icon: 'none'
					})
					return
				}
				if (!that.userInfo.political) {
					uni.showToast({
						title: '请选择政治面貌',
						icon: 'none'
					})
					return
				}
				if (!that.userInfo.to_province_name) {
					uni.showToast({
						title: '请选择安置地',
						icon: 'none'
					})
					return
				}
				if (!that.userInfo.reside_city_name) {
					uni.showToast({
						title: '请选择现居地',
						icon: 'none'
					})
					return
				}
				if (!that.userInfo.category) {
					uni.showToast({
						title: '请选择人员类别',
						icon: 'none'
					})
					return
				}
				if (!that.userInfo.join_time) {
					uni.showToast({
						title: '请选择入伍时间',
						icon: 'none'
					})
					return
				}
				if (!that.userInfo.retire_time) {
					uni.showToast({
						title: '请选择退役时间',
						icon: 'none'
					})
					return
				}
				if (!that.userInfo.health) {
					uni.showToast({
						title: '请选择健康状态',
						icon: 'none'
					})
					return
				}
				if (!that.userInfo.detail) {
					uni.showToast({
						title: '请填写详细地址',
						icon: 'none'
					})
					return
				}
				if (!that.userInfo.purpose) {
					uni.showToast({
						title: '请填写职业技能培训意向',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title: '提交中...'
				})
				that.userInfo.name = rsaEncrypt(that.userInfo.name);
				that.userInfo.idcard = rsaEncrypt(that.userInfo.idcard);
				that.userInfo.contact_mobile = rsaEncrypt(that.userInfo.contact_mobile);
				infoEdit(that.userInfo).then(res => {
					uni.hideLoading()
					if (res.code == 0) {
						uni.showLoading({
							title: '提交成功',
							icon: 'none'
						})
						if (that.pageType == 'edit') {
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 400)
						} else {
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/home/home'
								})
							}, 400)
						}

					} else {
						uni.showLoading({
							title: res.msg,
							icon: 'none'
						})
					}
				})




			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	.edit-info {
		background-color: #FFFFFF;
	}

	.fixed {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #FFFFFF;
		height: 180rpx;
		box-shadow: 0rpx -4rpx 16rpx 0rpx rgba(0, 0, 0, 0.08);

		.set-button {
			padding-top: 30rpx;
			width: 80%;
			margin: 0 auto;

			.button {
				background: linear-gradient(to right, #00B7FF, #006EEF);
				border-radius: 20rpx;
				color: #FFFFFF;
			}
		}
	}

	.input-val {
		white-space: nowrap;
		overflow: hidden;
		text-align: right;
	}


	/deep/.uni-popup .uni-popup__wrapper {
		bottom: 200rpx;
	}
</style>