<template>
	<view>
		<u-modal :showConfirmButton="false" :show="show" :title="title">
			<view v-if="!bindPhone" class="login-phone">
				<view class="form-row">
					<u--input shape="circle" class="input" prefixIcon="account-fill" type="text" placeholder="请输入登录账号"
						v-model="bindAccountForm.appUserKey"></u--input>
				</view>
				<view class="form-row item-bind">
					<u--input class="input" shape="circle" prefixIcon="lock-fill" suffixIconStyle="color: #909399"
						type="password" placeholder="请输入登录密码" v-model="bindAccountForm.appUserSecret"></u--input>
				</view>
				<view class="u-flex item-phone">
					<view class="bind-phone-text" @click="openBindPhone">手机绑定</view>
				</view>
			</view>
			<view v-else class="login-phone">
				<view class="form-row">
					<u--input shape="circle" class="input" type="text" v-model="bindPhoneForm.appUserKey"
						placeholder="请输入手机号码" placeholder-style="font-weight:normal;color:#bbbbbb;"></u--input>
				</view>
				<view class="form-row row-top">
					<u--input shape="circle" class="input" type="text" v-model="bindPhoneForm.appUserSecret"
						placeholder="请输入验证码" placeholder-style="font-weight:normal;color:#bbbbbb;"></u--input>
					<view style="color: #377dff" class="verify-code" :class="{ forhidden: readonly }"
						@click="getVerifyCode">
						{{ codeText }}
					</view>
				</view>
				<view class="u-flex item-phone">
					<view class="bind-phone-text" @click="openBindAccount">账号绑定</view>
				</view>
			</view>
			<view class="bottom-content">
				<view class="u-flex content">
					<view class="cancel">
						<u-button @click="$emit('cancelAccountModal')" type="info" shape="circle" text="取消"></u-button>
					</view>
					<view class="confrim">
						<u-button @click="handleConfirm" type="primary" shape="circle" text="确认"></u-button>
					</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	var clear;
	import fTabbar from '@/components/module/f-tabbar/f-tabbar';
	import fNavbar from '@/components/module/f-navbar/f-navbar';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		loginPasswordReg,
		useShowToast
	} from '@/plugins/utils.js'
	import api from '@/api/index.js'

	export default {
		components: {
			fTabbar,
			fNavbar
		},
		props: {
			show: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				readonly: false,
				codeText: '获取验证码',
				bindPhone: false,
				title: '绑定账号',
				bindAccountForm: {
					appUserKey: '',
					appUserSecret: ''
				},
				bindPhoneForm: {
					appUserKey: '',
					appUserSecret: ''
				},
			};
		},
		onLoad(e) {
			// 隐藏原生的tabbar
			uni.hideTabBar();
			this.getOpenId = getApp().globalData.openId;
		},
		methods: {
			resetFunc() {
				this.bindPhone = false;
				for (let i in this.bindAccountForm) Reflect.set(this.bindAccountForm, i, "")
				for (let i in this.bindPhoneForm) Reflect.set(this.bindPhoneForm, i, "")
			},
			async handleBindForm(loginMethod, bindAccountForm, toastText) {
				const data = {
					loginMethod,
					...bindAccountForm,
					platformName: 'WECHAT',
					thirdUserId: this.getOpenId
				};
				const res = await api.loginApi.postThirdLoginApi(data)
				if (!res) return
				// 储存登录信息
				let tokenInfo = {
					refreshToken: res.refreshToken,
					isToken: res.token
				};
				let userInfo = {
					...tokenInfo,
					token: true, //token用于判断是否登录
					isThirdLogin: false,
					isThirdLoginAndNoDind: true
				};
				if (userInfo.token) {
					this.setUserInfo(userInfo);
				}
				uni.$u.toast(toastText);
				this.saveUserInfo();
				this.$emit('cancelAccountModal')
			},
			handleConfirm() {
				//账号绑定
				if (!this.bindPhone) {
					const validateValue = Object.values(this.bindAccountForm)
					if (!validateValue[0]) return uni.$u.toast("请输入登录账号~");
					if (!validateValue[1]) return uni.$u.toast("请输入登录密码~");
					if (!loginPasswordReg.test(validateValue[1])) return useShowModal(
						"密码格式不正确（至少一个大写英文字母、至少一个小写英文字母、至少一位数字、至少一个特殊字符、最少八个字符）~", )
					this.handleBindForm('ACCOUNT', this.bindAccountForm, '账号绑定成功~')
				} else {
					//手机绑定
					const phoneRegular = /^1\d{10}$/;
					const verifyCodeReg = /^\d{6}$/;
					const validateValue = Object.values(this.bindPhoneForm)
					if (!validateValue[0]) return uni.$u.toast("请输入手机号码~");
					if (!validateValue[1]) return uni.$u.toast("请输入验证码~");
					if (!phoneRegular.test(validateValue[0])) return uni.$u.toast("手机号格式不正确~");
					if (!verifyCodeReg.test(validateValue[1])) return uni.$u.toast("验证码格式不正确~");
					this.handleBindForm('PHONE', this.bindPhoneForm, '手机绑定成功~')
				}
			},
			async saveUserInfo() {
				const userInfoRes = await api.loginApi.setUserInfoApi()
				const plateInfoRes = await api.loginApi.setPlateInfoApi()
				Promise.all([userInfoRes, plateInfoRes]).then(res => {
					this.setUserInfo(res[0])
					this.setPlateInfo(res[1])
				})
			},
			openBindPhone() {
				this.bindPhone = true;
			},
			openBindAccount() {
				this.bindPhone = false;
			},
			//验证码按钮文字状态
			verifyCodeCountDown() {
				const _this = this;
				this.readonly = true;
				this.codeText = '60S后重新获取';
				var s = 60;
				clear = setInterval(() => {
					s--;
					_this.codeText = s + 'S后重新获取';
					if (s <= 0) {
						clearInterval(clear);
						_this.codeText = '获取验证码';
						_this.readonly = false;
					}
				}, 1000);
			},
			//获取验证码
			async getVerifyCode() {
				const phoneRegular = /^1\d{10}$/;
				if (this.readonly) useShowToast('验证码已发送~')
				if (!this.bindPhoneForm.appUserKey) return useShowToast('请输入手机号~')
				if (!phoneRegular.test(this.bindPhoneForm.appUserKey)) return useShowToast('手机号格式不正确~')
				await api.loginApi.postCodeApi(this.bindPhoneForm.appUserKey)
				this.verifyCodeCountDown(); //开始倒计时
			},
		}
	};
</script>

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