<template>
	<view id="myapp" class="bodyA">
		<!-- 滚动区域 -->
		<view class="content">
			<van-form @submit="onSubmit">
				<van-cell-group class="vanCellGroup" inset>
					<van-field class="required" v-model="form.name" label="姓名" placeholder="暂无" :rules="rulesObj.name"
						readonly>
					</van-field>
					<van-field class="required" v-model="dicObj.sex[form.sex]" label="性别" is-link readonly
						:rules="rulesObj.sex" @click="sexFlag=true">
					</van-field>
					<!-- <van-field v-model="dicObj.sex[form.sex]" label="性别" readonly :rules="rulesObj.sex">
					</van-field> -->
					<van-field class="required" v-model="form.dept" label="部门" placeholder="暂无" :rules="rulesObj.dept"
						readonly>
					</van-field>
					<van-field class="required" v-model="form.idcard" label="身份证" placeholder="请输入身份证号"
						:rules="rulesObj.idcard" right-icon="delete" @click-right-icon="form.idcard = ''"></van-field>
					<van-field class="required" v-model="form.mobile" label="手机号" placeholder="请输入手机号"
						:rules="rulesObj.mobile" right-icon="delete" @click-right-icon="form.mobile = ''"
						maxlength="11">
					</van-field>
					<!-- <van-field v-model="form.regularPhone" label="座机号" placeholder="请输入" type="number" readonly>
					</van-field>
					<van-field v-model="form.carId" label="车牌号" placeholder="请输入" readonly>
					</van-field>
					<van-field v-model="form.mealCard" label="餐卡号" placeholder="请输入" type="tel" readonly>
					</van-field>
					<van-field v-model="form.address" label="现居地" placeholder="请输入" readonly></van-field> -->

					<view style="display: flex;align-items: center;" v-if="verifyCodeSwitch == 1">
						<van-field v-model="verifyCode" label="验证码" @input="e =>verifyCode= validForbadAll(e)" required
							:rules="[{ required: true, message: '' }]" name="verifyCode" placeholder="请输入验证码">
						</van-field>
						<span style="margin-right: 36upx;width: 256upx" :class="jsq ? 'bg-ccc' : ''"
							class="verifyCodeBtn" @click="getCodeInfo()">{{btnText}}</span>
					</view>

				</van-cell-group>
				<!-- <view class="tips">
					<van-icon class="icon" name="volume" size="30upx"></van-icon>
					温馨提示：餐卡号为员工卡背面右下角前十位数字
				</view> -->

				<view class="footer">
					<van-button class="footerBtn" @click="onSubmit" round block type="primary" native-type="submit"
						v-if="!showLoading">更新
					</van-button>
					<van-button class="footerBtn" round block loading loading-text="加载中..." loading-type color="#C0C0C0"
						v-if="showLoading" disabled></van-button>
				</view>

			</van-form>
		</view>
		<van-popup v-model:show="sexFlag" round position="bottom">
			<van-picker show-toolbar :columns="columns" value-key="typeName" @cancel="sexFlag = false"
				@confirm="onConfirm">
			</van-picker>
		</van-popup>
		<!-- 底部 -->
		<!-- <view class="footer">
            <van-button class="footerBtn">按钮</van-button>
        </view> -->
	</view>
</template>

<script>
	import {
		getPhoneCode,
		getPhoneCodeOnOff,
		updateUserData,
		updateUserInfo,
		getUserInfo
	} from '@/common/api.js'
	import {
		callbackRequest
	} from '@/common/util.js'
  import CryptoJS from "@/common/crypto-js";
  import {Decrypt2} from "@/common/utils";
	export default {
		data() {
			return {
				jsq: null, //验证码倒计时计时器
				btnText: '获取验证码',
				verifyCode: '', // 6位数验证码
				verifyCodeSwitch: 0, // 短信校验控制
				loadingFlag: '',
				loadingFlag_Tm: 'x',
				// code
				columns: [{
						typeName: '男',
						type: 1
					},
					{
						typeName: '女',
						type: 2
					},
				],
				sexFlag: false,
				idCard: '',
				mobile: '',
				rulesObj: {
					name: [{
						required: true,
						message: '姓名不能为空'
					}],
					sex: [{
						required: true,
						message: '性别不能为空'
					}],
					dept: [{
						required: true,
						message: '部门不能为空'
					}],
					idcard: [{
							required: true,
							message: '身份证不能为空'
						},
						{
							pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
							message: '请再次确认输入正确身份证',
							trigger: 'onBlur'
						}
					],
					mobile: [{
							required: true,
							message: '手机号不能为空',
							trigger: 'onBlur'
						},
						{
							pattern: /^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/,
							message: '请填写正确的手机号',
							trigger: 'onBlur'
						}
					], // 手机号
				},
				showLoading: false,
				form: {
					name: '', // 姓名
					sex: '', // 性别
					dept: '', // 部门
					idcard: '', // 身份证
					mobile: '', // 手机
					regularPhone: '', // 座机
					carId: '', // 车牌号
					mealCard: '', // 餐卡号
					address: '', // 地址
				},
				dicObj: {
					sex: {
						1: '男',
						2: '女',
					}
				},
			};
		},
		mounted() {
			// this.controlDX();
			this.getUserInfo();
		},
		methods: {

			//验证码重新获取倒计时
			timer() {
				let i = 60
				let _this = this
				this.jsq = setInterval(function() {
					if (i == 0) {
						_this.btnText = '重新发送'
						clearInterval(_this.jsq)
						_this.jsq = null
						return false
					}
					_this.btnText = i + '秒'
					i--
				}, 1000)

			},
			//身份证号验证
			idCardTest: function(text) {
				var self = this
				var reg = new RegExp(
					/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/)
				if (text.indexOf("*") == -1) {
					if (reg.test(text) == false && text != "") {
						if (text == self.form.idCard) self.form.idCard = ""
						return false
					}
					return true
				}
			},
			//手机号验证
			teltest: function(text) {
				var self = this
				var reg = new RegExp(/^1[3456789]\d{9}$/)
				if (text.indexOf("*") == -1) {
					if (reg.test(text) == false && text != "") {
						// mui.toast("请输入正确的11位手机号码", {

						if (text == self.form.mobile) self.form.mobile = ""
						return false
					}
					return true
				}
			},
			//获取验证码
			getCodeInfo() {
				var self = this
				const phoneA = this.form.mobile;
				if (self.jsq) {
					return false
				}
				if (self.teltest(phoneA)) {
					vant.Toast({
						message: '请输入符合规范的手机号码',
						duration: 2000
					})
					return false
				}


				var obj = {}
				obj.mobile = phoneA
				self.loadingFlag_Tm = ''
				request.getPhoneCode(obj, function(res) {
					self.loadingFlag_Tm = 'x'
					console.log(res);
					if (res.returnCode == 1) {
						mui.toast(res.returnMsg, {
							duration: "long"
						})
						self.timer()
					} else {
						mui.toast(res.returnMsg, {
							duration: "short"
						})
					}
				})

			},
			// xxx
			validForbadAll: function(value, number = 100) {
				let val = value
				value = val.replace(
					/[`~!@#$%^&()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&（）——\-+={}|《》？：“”【】、；‘'，。、]|null|undefined{1}/g,
					'').replace(/\s/g, "")
				console.log(value)
				if (value.lenght >= number) {
					uni.showToast({
						title: `输入内容不能超过${{ number }}个字符`,
						icon: 'none',
						duration: 2000,
					})
				}
				return value
			},
			// 控制短信校验
			controlDX() {
				const that = this;
				request.getPhoneCodeOnOff({}, function(res) {
					if (res.returnCode == 1) {
						that.verifyCodeSwitch = res.returnData
					}
				})

			},
			// 更新用户信息
			updateUserInfos() {
				console.log(123123, this.idCard)
				const that = this;
				let form = this.form;

				let temp = that.idCard.substring(4, 15)
				temp = that.idCard.replace(temp, '***********');
				console.log(temp, form.idcard, this.idCard, '1')
				if (form.idcard == temp) {
					console.log('---')
					form.idcard = this.idCard
				}
				let temps = that.mobile.substring(3, 7)
				temp = that.mobile.replace(temp, '****');
				console.log(temp, form.mobile, this.mobile, '1')
				if (form.mobile == temps) {
					console.log('---')
					form.mobile = this.mobile
				}
				if (!form.idcard) {
					uni.showToast({
						title: "请输入身份证号",
						icon: 'none',
						duration: 2000
					})
					this.showLoading = false;
					return false
				}
				if (!this.idCardTest(form.idcard)) {
					uni.showToast({
						title: "请输入正确的身份证号",
						icon: 'none',
						duration: 2000
					})
					this.showLoading = false;
					return false
				}
				if (!form.mobile) {
					uni.showToast({
						title: "请输入手机号码",
						icon: 'none',
						duration: 2000
					})
					this.showLoading = false;
					return false
				}
				if (!this.teltest(form.mobile)) {
					uni.showToast({
						title: "请输入正确的11位手机号码",
						icon: 'none',
						duration: 2000
					})
					this.showLoading = false;
					return false
				}
				let params = {
					idCard: form.idcard, // 身份证
					gender: form.sex, // 性别
					mobile: form.mobile, // 手机
					landline: form.regularPhone, // 座机
					carNumber: form.carId, // 车牌号
					mealNo: form.mealCard, // 餐卡号
					liveAddr: form.address, // 住址
					code: this.verifyCode, // 短信验证码
					verifyCodeSwitch: this.verifyCodeSwitch, // 开关
					method: updateUserInfo,
				}
				console.log(params, '更新入参');


				if (this.verifyCodeSwitch == 1) {
					if (this.verifyCode.length != 6) {
						uni.showToast({
							title: '请输入六位数字类型验证码',
							icon: 'none',
							duration: 2000
						})

						this.loadingFlag_Tm = 'x';
						this.showLoading = false;
						return;
					}
				}

				callbackRequest(params).then(res => {
					console.log(res, '返回参数');
					let msg;
					if (res.returnCode == 1) {
						msg = res.returnMsg
						setTimeout(() => {
							window.history.go(-1)
						}, 2000);
						msg = '更新成功'
					} else {
						msg = '更新失败，请重试...'
					}
					that.showLoading = false;
					that.loadingFlag_Tm = 'x';
					uni.showToast({
						title: msg,
						icon: 'none',
						duration: 2000
					})
				})
			},
			// 获取用户信息
			async getUserInfo() {
				const that = this;
				let resData = await this.userInfo()
				console.log('111', resData)
				that.form.name = resData.realName;
				that.form.sex = resData.gender;
				that.form.dept = resData.departmentName;

				that.idCard = resData.idCard ? resData.idCard : '';
				if (that.idCard) {
					let temp = Decrypt2(resData.idCard).substring(4, 15)
					that.form.idcard = Decrypt2(resData.idCard).replace(temp, '***********');
				}
				that.mobile = resData.mobile ? resData.mobile : '';
				if (that.mobile) {
					let temps = resData.mobile.substring(3, 7)
					console.log('222', temps)
					that.form.mobile = resData.mobile.replace(temps, '****');
					console.log('333', that.form.mobile)
				}
				that.form.regularPhone = resData.landline ? resData.landline : '';
				that.form.mealCard = resData.mealNo ? resData.mealNo : '';
				that.form.address = resData.liveAddr ? resData.liveAddr : '';
				console.log('111', that.form)
			},
			userInfo() {
				let params = {
					method: getUserInfo,
				}
				return new Promise((resove, reject) => {
					callbackRequest(params).then(res => {
						uni.setStorageSync('userInfos', res.returnData)
						if (res.returnCode == 1) {
							console.log('getUnReadNum');
							resove(res.returnData)
						} else {}
					});
				})
			},
			onConfirm(e) {
				console.log('xxxxxxxxx', this.sexFlag, e);
				this.form.sex = e.type
				this.sexFlag = false;
			},
			onSubmit() {
				console.log('onSubmit');
				this.showLoading = true;
				this.loadingFlag_Tm = '';
				this.updateUserInfos();
			},
			// code
			back() {
				// window.location.href = "indexIndex.html"
				window.history.go(-1)
			},
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		font-size: .38*74upx;
		color: #0e1a24;
		padding: .32*74upx;
		padding-bottom: 2*74upx;
	}

	.vanCellGroup {
		border-radius: .24*74upx;
		overflow: hidden;
	}

	.vanCellGroup input {
		border: none;
	}

	.tips {
		font-size: .38*74upx;
		color: #fb8107;
		padding: .34*74upx .2*74upx;
		background-color: #fff;
		border-radius: .24*74upx;
		margin-top: .24*74upx;
		font-weight: bold;
		display: flex;
		align-items: center;
	}

	.tips .icon {
		margin-right: .12*74upx;
	}

	/deep/ .van-cell-group--inset {
		margin: 0;
	}
</style>