<template>
	<view class="bind-login-wrap">
		<view class="top-wrap">
			<image src="https://xaznkj.cn/app/fastbee1_blue.png" mode="widthFix" style="width: 500rpx;"></image>
		</view>
		<view class="main-wrap">
			<u--text size="18" type="info" bold margin="20rpx 0" :text="$tt('bindLogin.bindLogin')"></u--text>
			<u--form :model="loginForm" :rules="rules" ref="form">
				<u-form-item prop="username" borderBottom>
					<u--input v-model="loginForm.username" clearable border="none"
						:placeholder="$tt('login.inputUserName')" prefixIcon="account-fill"
						prefixIconStyle="font-size: 44rpx; color: rgb(192, 196, 204); margin-right: 10rpx"
						placeholderStyle="font-size: 24rpx;"></u--input>
				</u-form-item>
				<u-form-item prop="password" borderBottom>
					<u--input v-model="loginForm.password" type="password" clearable border="none"
						:placeholder="$tt('login.inputPassword')" prefixIcon="lock-fill"
						prefixIconStyle="font-size: 44rpx; color: rgb(192, 196, 204); margin-right: 10rpx"
						placeholderStyle="font-size: 24rpx;"></u--input>
				</u-form-item>
				<u-form-item prop="code" borderBottom>
					<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
					<u-input :placeholder="$tt('login.inputCode')" v-model="loginForm.code" border="none"
						prefixIcon="integral-fill"
						prefixIconStyle="font-size: 44rpx; color: rgb(192, 196, 204); margin-right: 10rpx"
						placeholderStyle="font-size: 24rpx;">
						<template slot="suffix">
							<u--image :src="codeUrl" width="120px" height="30px" @click="getCode"></u--image>
						</template>
					</u-input>
				</u-form-item>
				<view class="clause">
					<u-checkbox-group @change="handleClauseCheckbox">
						<label>
							<u-checkbox :checked="isClause" style="transform:scale(0.8)" />
						</label>
						<text class="check_text">
							<text>{{$tt('waitLogin.agree')}}</text>
							<text class="link" @click="handleGoToPrivacy">《{{$tt('waitLogin.privacy')}}》</text>
							<text class="link" @click="handleGoToService">《{{$tt('waitLogin.agreement')}}》</text>
							<text class="link" @click="handleGoToStatement">《{{$tt('waitLogin.children')}}》</text>
							<text class="link" @click="handleGoToCommonBill">《{{$tt('waitLogin.third')}}》</text>

						</text>
					</u-checkbox-group>
				</view>
				<view style="margin-top:50rpx;">
					<u-button style="height: 90rpx; width: 650rpx;" shape="circle" type="primary"
						:text="$tt('bindLogin.bind')" @click="handleBindlogin"></u-button>
				</view>
			</u--form>
			<view class="register-wrap">
				<view class="now-btn">
					<u--text :text="$tt('bindLogin.bindRegister')" size="13px" @click="bindRegister"></u--text>
				</view>
				<view class="now-btn">
					<u--text text="|" size="13px"></u--text>
				</view>
				<view style="margin:0 0 0 20rpx;">
					<u--text :text="$tt('login.HuapuIoT')" size="13px" color="#000" @click="openhpLink"></u--text>
				</view>
			</view>
		</view>
		<view class="other-wrap">
			<u-modal :show="isRegister" :title="$tt('bindLogin.alert')" :content="$tt('bindLogin.alertTitle')"
				:cancelText="$tt('bindLogin.notRegister')" :confirmText="$tt('bindLogin.confirmRegister')"
				:showCancelButton="true" @cancel="isRegister = false" @confirm="confirmRegister"></u-modal>
		</view>
	</view>
</template>

<script>
	import projectConfig from '@/env.config.js';
	import {
		getProfile,
		bindLogin
	} from '@/apis/modules/common.js'

	export default {
		data() {
			return {
				token: '',
				codeUrl: '',
				isClause: false,
				loginForm: {
					username: '',
					password: '',
					rememberMe: false,
					code: '',
					uuid: '',
					bindId: ''
				},
				rules: {
					username: {
						type: 'string',
						min: 2,
						max: 20,
						required: true,
						message: this.$tt('login.inputUserName'),
						trigger: ['blur', 'change']
					},
					password: {
						type: 'string',
						required: true,
						min: 5,
						max: 20,
						message: this.$tt('login.inputPassword'),
						trigger: ['blur', 'change']
					},
					code: {
						type: 'integer',
						required: true,
						message: this.$tt('login.inputCode'),
						trigger: ['blur', 'change']
					},
				},
				isRegister: false,
			};
		},
		onLoad(option) {
			this.loginForm.bindId = option.bindId;
			this.getCode();
		},
		methods: {
			//微信登录
			handleBindlogin() {
				this.$refs.form.validate().then(res => {
					if (!this.isClause) {
						uni.showToast({
							icon: 'none',
							title: this.$tt('login.readAndCheckTheAgreement'),
						});
						return;
					}
					// 调用绑定登录
					bindLogin(this.loginForm).then(async res => {
						if (res.code === 200) {
							// 存储token和账号
							this.saveToken(res.token);
							this.saveAccount();
							// 获取用户信息
							let profile = await this.getProfile();
							uni.$u.vuex('profile', profile);
							// 跳转主页
							uni.switchTab({
								url: '/pages/tabBar/home/index'
							});
						} else if (res.code === 450) {
							this.isRegister = true;
						} else {
							if (res.msg) {
								uni.showToast({
									icon: "none",
									title: res.msg,
									complete: (res) => {
										setTimeout(() => {
											this.getCode();
										}, 1500);
									}
								})
							}
						}
					})
				}).catch(errors => {
					uni.$u.toast(this.$tt('bindLogin.accountNotNull'));
				});
			},
			// 获取验证码
			getCode() {
				this.$api.common.captchaImage(true).then(res => {
						this.codeUrl = 'data:image/gif;base64,' + res.img;
						this.loginForm.uuid = res.uuid;
						this.loginForm.code = "";
					})
					.catch(err => {
						this.$u.toast(err.msg);
					});
			},
			// 用户绑定注册
			bindRegister() {
				uni.$u.route('/pagesB/login/bindRegister', {
					bindId: this.loginForm.bindId
				});
			},
			// 获取用户信息
			getProfile() {
				return new Promise((resolve, reject) => {
					getProfile().then(res => {
						resolve(res.data);
					}).catch(err => {
						this.$u.toast(err.msg);
					})
				});
			},
			saveToken(token) {
				// 本地缓存存储token
				uni.setStorageSync('token', token);
				// vuex存储token
				uni.$u.vuex('vuex_token', token);
			},
			saveAccount() {
				// 本地缓存存储
				uni.setStorageSync('username', this.loginForm.username);
				uni.setStorageSync('password', this.loginForm.password);
			},
			handleClauseCheckbox(e) {
				this.isClause = !this.isClause;
			},
			// 隐私政策
			handleGoToPrivacy() {
				let title = this.$tt('login.privacyPolicy');
				let url = projectConfig.officialWebUrl + 'privacy-policy.html';
				uni.navigateTo({
					url: `/pages/common/webview/index?title=${title}&url=${url}`
				});
			},
			// 服务协议
			handleGoToService() {
				let title = this.$tt('login.serviceAgreement');
				let url = projectConfig.officialWebUrl + 'service-agreement.html';
				uni.navigateTo({
					url: `/pages/common/webview/index?title=${title}&url=${url}`
				});
			},
			// 儿童隐私保护声明
			handleGoToStatement() {
				let title = this.$tt('login.childProtectionStatement');
				let url = projectConfig.officialWebUrl + 'child-protection-statement.html';
				uni.navigateTo({
					url: `/pages/common/webview/index?title=${title}&url=${url}`
				});
			},
			// 第三方信息共享清单
			handleGoToCommonBill() {
				let title = this.$tt('login.commonBill');
				let url = projectConfig.officialWebUrl + 'common-bill.html';
				uni.navigateTo({
					url: `/pages/common/webview/index?title=${title}&url=${url}`
				});
			},
			// 勾选协议
			handleClauseCheckbox(e) {
				this.isClause = !this.isClause;
			},
			// 注册确认
			confirmRegister() {
				this.isRegister = false;
				uni.$u.route('/pagesB/login/bindRegister', {
					bindId: this.loginForm.bindId
				});
			},
			openhpLink() {
				uni.navigateTo({
					url: '/pages/common/webview/index?url=http://www.hpiot.cn/'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}

	.bind-login-wrap {
		height: 100%;

		.top-wrap {
			height: 510rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.main-wrap {
			padding: 0 40rpx;

			.register-wrap {
				margin-top: 40rpx;
				display: flex;
				justify-content: center;
				text-align: center;

				.now-btn {
					margin-left: 20rpx;
				}
			}

			.clause {
				margin: 40rpx 10rpx;
				font-size: 28rpx;

				.link {
					color: #00aaff;
				}
			}
		}
	}
</style>