<template>
	<view class="page">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="IDcardInfo p-3 mb-3" style="background-color: #FFFFFF;">
			<view class="inputView d-flex">
				<view class="d-flex a-center">姓名</view>
				<view class="d-flex a-center">
					<input placeholder="请输入姓名" v-model="staffInfo.name" />
				</view>
			</view>
			<view class="warp" v-if="contentSlot">
				<view class="mt-1 position-relative border-bottom">
					<view class="position-absolute d-flex a-center j-center left-0 top-0 font-weight"
						style="width: 100rpx;height: 100%;">+86</view>
					<input type="text" v-model="staffInfo.phone" class="uni-input common-input"
						style="padding-left: 100rpx;" placeholder="手机号" />
				</view>
				<view class="mt-2 position-relative border-bottom">
					<input type="text" v-model="staffInfo.phoneMsg" class="uni-input common-input" maxlength="4"
						style="padding-right: 240rpx;" placeholder="请输入验证码" />
					<view class="position-absolute top-0 right-0 d-flex a-center j-center text-light-muted"
						style="width: 240rpx;height: 100%;" @tap="getCheckNum1">
						<view class="d-flex a-center j-center "
							:class="!codetime?'yanzhengmaView1 main-text-color':'yanzhengmaView2'">
							{{!codetime?'获取验证码':codetime+' S'+'后重新获取'}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<button class="mx-3 my-5 d-flex a-center j-center  main-bg-color" type="primary" @tap="submit">提 交</button>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	import bankBin from "@/common/bankcardinfo.js"
	import {
		pathToBase64,
		base64ToPath
	} from '@/common/image-tools-base64.js';
	import zPopup from "@/components/common/z-popup.vue"
	export default {
		components: {
			zPopup
		},
		data() {
			return {
				IdCardBefore: "", //身份证正影像
				staffInfo: {
					name: "",
					phone: '', //手机号
					phoneMsg: '', //手机号验证码
					jobNumber: "" //id
				},
				contentSlot: true,
				codetime: 0, //验证码获取倒计时

			}
		},
		computed: {
			...mapState(["userInfo", "userCheckInfo"]),
		},
		onLoad() {
			this.staffInfo.jobNumber = this.userInfo.sysUser.id;
		},
		methods: {
			...mapMutations(['setUserModules']),
			async getCheckNum1() {
				uni.hideKeyboard();
				if (this.codetime > 0) return;
				// 验证手机号合法性
				if (!this.staffInfo.phone) {
					return uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
				}
				if (!this.$base.phoneRegular.test(this.staffInfo.phone)) {
					return uni.showToast({
						title: '请输入正确的手机号码',
						icon: 'none'
					});
				}
				// 请求服务器，发送验证码
				let res = await this.$http.get('/sendMsg', {
					phone: this.staffInfo.phone,
					type: "1"
				});
				// 请求失败处理
				console.log(res)
				if (res.code != 200) {
					return uni.showToast({
						title: res.msg,
						icon: "none"
					});
				} else {
					uni.showToast({
						title: "发送成功",
						icon: "none"
					});
				}
				// 发送成功，开启倒计时
				this.codetime = 60;
				let timer = setInterval(() => {
					this.codetime--;
					if (this.codetime < 1) {
						clearInterval(timer);
						this.codetime = 0;
					}
				}, 1000);
			},
			isName() {
				let mPattern = /^([\u4e00-\u9fa5]{1,6}|[a-zA-Z\.\s]{1,6})$/;
				return mPattern.test(this.staffInfo.name);
			},

			async submit() {

				if (!this.isName()) {
					return uni.showToast({
						title: '请输入正确的姓名',
						icon: "none"
					});
				}
				var info = {
					sysUser: {},
					esmUserInternal: {},
					esmUserAgent: {}
				};
				Object.assign(info.sysUser, this.userInfo.sysUser)
				Object.assign(info.esmUserInternal, this.userInfo.esmUserInternal)
				Object.assign(info.esmUserAgent, this.userInfo.esmUserAgent)
				info.sysUser.name = this.staffInfo.name;
				info.sysUser.phone = this.staffInfo.phone;
				info.sysUser.jobCode = "17";
				// 修改并保存人员信息
				let res = await this.$http.post('/wechat/bindPhone', this.staffInfo);
				console.log(res)
				if (res.code == 200) {
						//保存临时数据到本地
						this.setUserModules({
							title: 'userInfo',
							data: info
						})
						setTimeout(() => {
							return uni.reLaunch({
								url: "/pages/index/index"
							})
						}, 500);
				} else if(res.code=='10100'){
					var that = this;
					uni.showToast({
						title: res.msg,
						icon: "none",
						duration: 2000
					});
					uni.login({
						provider: 'weixin',
						scopes: "auth_user",
						onlyAuthorize: true,
						success: function(loginRes) {
							that.codeRes(loginRes);
						}
					});
					
				}else{
					uni.showToast({
						title: res.msg,
						icon: "none",
						duration: 2000
					});
				}
			},
			async codeRes(data) {
				this.$login({
					url: "/wechat/login",
					data: {
						code: data.code,
					}
				}).then(res => {
					socket.init();
					return;
				})
			
			},

		}
	}
</script>

<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.idCardBefore {
		background: rgba($themeColor, 0.1) url('/static/image/user/identy2.png') center center no-repeat;
		background-size: auto 70%;
		padding: 10upx;
	}

	.idCardAfter {
		background: rgba($themeColor, 0.1) url('/static/image/user/identy1.png') center center no-repeat;
		background-size: auto 70%;
		padding: 10upx;
	}

	.bankCardImage {
		background: rgba($themeColor, 0.1) url('/static/image/user/card.png') center center no-repeat;
		background-size: auto 70%;
		padding: 10upx;
	}

	.imageBorder {
		border: 2px solid #ddd;
		padding: 10upx;
	}

	.cardImages>view {
		width: 310rpx;
		height: 260rpx;
	}

	.cardImages>view>image {
		width: 100%;
		height: 100%;
	}

	.IDcardInfo .IDcardNotice,
	.BankCardInfo .BankCardNotice {
		text-align: center;
		height: 110rpx;
		line-height: 110rpx;
	}

	.inputView {
		border-bottom: 1px solid #ddd;
		height: 90upx;
	}

	.inputView>view:nth-of-type(1) {
		flex-shrink: 0;
		font-size: 32upx;
		padding-left: 12px;
		color: #333;
	}

	.inputView>view:nth-of-type(2)>input {
		font-size: 30upx;
		color: #999;
	}

	.BankCardInfo {
		background-color: #FFFFFF;
		padding: 30upx;
	}
	.popup_box {
		width: 100%;
		// border-radius: 12upx;
	}
	.popup_title {
		display: flex;
		justify-content: space-between;
		height: 88upx;
		line-height: 88upx;
		border-bottom: 2upx solid #ebebeb;
		padding: 0 20upx;
		background-color: #FFF;
	}

	.popup_title view {
		font-size: 32upx;
		display: flex;
		align-items: center;
	}

	.popup_title text {
		width: 80upx;
		flex-shrink: 0;
		text-align: center;
	}

	.popup_title text {
		font-size: 28upx;
		color: #999;
	}

	.popup_title text:last-child {
		color: $themeColor;
	}

	.popup_content {
		padding: 40rpx 30rpx;
		background-color: #FFFFFF;
		text-align: center;
	}

	.popup_content .body {
		padding: 20upx 30upx;
	}

	.popup_content .body image {
		width: 540upx;
	}
</style>
