<template>
	<view>
		<u-modal :showConfirmButton="false" :show="show" :title="$t(title)">
			<view v-if="!bindPhone" class="login-phone">
				<view class="form-row">
					<u--input shape="circle" class="input" prefixIcon="account-fill" type="text" :placeholder="$t('login.pleaseEnterAccount')"
						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="$t('login.pleaseEnterPassword')" v-model="bindAccountForm.appUserSecret"></u--input>
				</view>
				<view class="u-flex item-phone">
					<view class="bind-phone-text" @click="openBindPhone">{{ $t('login.phoneBind') }}</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="$t('login.PleaseEnterPhone')" 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="$t('login.PleaseEnterCode')" 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">{{ $t('login.accountBind') }}</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="$t('common.cancelText')"></u-button>
					</view>
					<view class="confrim">
						<u-button @click="handleConfirm" type="primary" shape="circle" :text="$t('common.confirm')"></u-button>
					</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

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

	export default {
		components: {
			fTabbar,
		},
		props: {
			show: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				readonly: false,
				codeText:'',
				bindPhone: false,
				title: 'login.bindAccount',
				bindAccountForm: {
					appUserKey: '',
					appUserSecret: ''
				},
				bindPhoneForm: {
					appUserKey: '',
					appUserSecret: ''
				},
			};
		},
		onLoad(e) {
			// 隐藏原生的tabbar
			uni.hideTabBar();
			this.getOpenId = getApp().globalData.openId;
			this.codeText = this.$t('login.obtainCode')
		},
		methods: {
			...mapMutations(["setUserInfo", "setPlateInfo"]),
			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: getApp().globalData.openId
				};
				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(this.$t('login.pleaseEnterAccount'));
					if (!validateValue[1]) return uni.$u.toast(this.$t('login.pleaseEnterPassword'));
					if (!loginPasswordReg.test(validateValue[1])) return useShowModal(this.$t('login.passwordRule'))
					this.handleBindForm('ACCOUNT', this.bindAccountForm, this.$t('login.accountBindSuccess'))
				} else {
					//手机绑定
					const phoneRegular = /^1\d{10}$/;
					const verifyCodeReg = /^\d{6}$/;
					const validateValue = Object.values(this.bindPhoneForm)
					if (!validateValue[0]) return uni.$u.toast(this.$t('login.PleaseEnterPhone'));
					if (!validateValue[1]) return uni.$u.toast(this.$t('login.PleaseEnterCode'));
					if (!phoneRegular.test(validateValue[0])) return uni.$u.toast(this.$t('login.phoneFormatFail'));
					if (!verifyCodeReg.test(validateValue[1])) return uni.$u.toast(this.$t('login.codeFormatFail'));
					this.handleBindForm('PHONE', this.bindPhoneForm, this.$t('login.phoneBindSuccess'))
				}
			},
			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 = this.$t('login.codeAfterSeconds',{number:60});
				var s = 60;
				clear = setInterval(() => {
					s--;
					_this.codeText =this.$t('login.codeAfterSeconds',{number:s});
					if (s <= 0) {
						clearInterval(clear);
						_this.codeText = this.$t('login.obtainCode');
						_this.readonly = false;
					}
				}, 1000);
			},
			//获取验证码
			async getVerifyCode() {
				const phoneRegular = /^1\d{10}$/;
				if (this.readonly) useShowToast(this.$t('login.codeBeenSend'))
				if (!this.bindPhoneForm.appUserKey) return useShowToast(this.$t('login.PleaseEnterPhone'))
				if (!phoneRegular.test(this.bindPhoneForm.appUserKey)) return useShowToast(this.$t('login.phoneFormatFail'))
				await api.loginApi.postCodeApi(this.bindPhoneForm.appUserKey)
				this.verifyCodeCountDown(); //开始倒计时
			},
		}
	};
</script>

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