<template>
	<view>
		<view class="head-bg" :style="{'padding-top': statusBarHeight +'px'}">
			<view style="align-items: center; display: flex; width: 100vh; height: 5vh;">
				<image src="../../static/common/icon_back.png" style="width: 34rpx; height: 34rpx; padding: 25rpx;"
					v-on:click="onBack()" />
				<text style="margin-left: 10rpx; color: white; font-size: 40rpx;">验证码登陆</text>
			</view>

		</view>

		<view class="input-group" style="margin-left: 35rpx; margin-right: 35rpx;">
			<view class="input-row border">
				<input class="m-input" type="text" clearable focus v-model="phoneNumber" placeholder="请输入手机号"
					style="padding-top: 20rpx; padding-bottom: 20rpx;" />

				<view style=" height: 1px; background: #C6C6C6; "></view>
			</view>

			<view class="input-row border" style=" display: flex; padding-top: 30rpx; padding-bottom: 20rpx;">
				<input type="number" displayable v-model="phone_code" placeholder="请输入验证码" />

				<button size="mini" style="background-color: #787878; font-size: 20; color: #FFFFFF; "
					@click="getPhoneCode()" :disabled="disabled">{{phoneCodeStr}}</button>
			</view>
			<view style="height: 1px; background: #C6C6C6;"></view>
		</view>
		<view style="margin-top: 15rpx; margin-left: 35rpx;" @click="gotoAccountLogin()">
			<text style="color: #4169E1; font-size: 28rpx;">切换密码登陆</text>
		</view>
		<view class="btn-row">
			<button style="background-color: transparent; color: white; " :loading="loginBtnLoading" @tap="bindLogin">
				登录
			</button>
		</view>

		<view style=" margin-left: 35rpx; display: flex; margin-top: 35rpx; align-items: center;">
			<view @click="checkboxSelected()" :checked="agreeState"
				:class="agreeState === true ? 'checkbox-check' : 'checkbox-uncheck'" />
			<text style="font-size: 28rpx; color: #333333;">阅读并同意</text>
			<text style="color: #4d90ff; font-size: 28rpx;" @click="onUserAgreement()">用户协议</text>
			<text style="font-size: 28rpx; color: #333333;">并</text>
			<text style="color: #4d90ff; font-size: 28rpx;" @click="onPrivacyPolicy()">隐私政策</text>
		</view>

	</view>
</template>

<script>
	import {
		transformImageCodeToUri
	} from "@/utils/image_utils.js";
	import {
		default as http
	} from "@/utils/http.js";
	
	import loginHelper from "../../utils/loginHelper.js"
	export default {
		data() {
			return {
				disabled: false,
				phoneCodeStr: "获取验证码",
				phoneCodeTime: 60,
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				phoneNumber: "",
				password: "",
				phone_code: "",
				loginBtnLoading: false,
				timer: null,
				agreeState: false,
			}
		},
		methods: {
			async getPhoneCode() {
				var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
				var this_ = this;
				if (this.phoneNumber.length != 11) {
					uni.showToast({
						icon: "none",
						title: "请输入手机号码",
					});
					return;
				}
				if (!myreg.test(this.phoneNumber)) {
					uni.showToast({
						icon: "none",
						title: "电话号码格式不对",
					});
					return;
				}
				this.phoneCodeTime = 60;
				this.timer = setInterval(() => {
					console.log(this_.phoneCodeTime)
					if (this_.phoneCodeTime <= 0) {
						clearInterval(this_.timer);
						this_.phoneCodeStr = "获取验证码";
						this_.disabled = false;
					} else {
						this_.phoneCodeStr = this_.phoneCodeTime + "s";
						this_.phoneCodeTime--;
						this_.disabled = true;
					}

				}, 1000);
				this_.disabled = true;
				let query_data = `query{
					getMobileCode(mobile:${JSON.stringify(this.phoneNumber)},type:7)
				}`;
				let result = await http.gql({
					query: query_data
				})

				console.info(result);
				//处理返回请求
				if (result && result.data && result.data.getMobileCode) {
					if (result.data.getMobileCode.Error) {
						clearInterval(this.timer);
						this_.disabled = false;
						uni.showToast({
							icon: "none",
							title: result.data.getMobileCode.Error,
						});
					} else {

					}
				} else {
					clearInterval(this.timer);
					this_.disabled = false;
					uni.showToast({
						icon: "none",
						title: "请求异常",
					});
					return;
				}

			},
			async bindLogin() {
				if (this.phoneNumber.length < 11) {
					uni.showToast({
						icon: "none",
						title: "请输入手机号码",
					});
					return;
				}
				var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
				if (!myreg.test(this.phoneNumber)) {
					uni.showToast({
						icon: "none",
						title: "电话号码格式不对",
					});
					return;
				}
				if (this.phone_code.length <= 0) {
					uni.showToast({
						icon: "none",
						title: "请输入验证码",
					});
					return;
				}
				if (!this.agreeState) {
					uni.showToast({
						icon: "none",
						title: "您还没有同意用户协议",
					});
					return;
				}
				this.loginBtnLoading = true;
				let query_data = `mutation{
					ydn_sms_login(mobile:${JSON.stringify(this.phoneNumber)},code:${JSON.stringify(this.phone_code)},type:"web")
				}`;
				let result = await http.gql({
					query: query_data
				})
				this.loginBtnLoading = false;
				console.info(result);
				//处理返回请求 
				if (result && result.data && result.data.ydn_sms_login) {
					if (result.data.ydn_sms_login.Error) {
						uni.showToast({
							icon: "none",
							title: result.data.ydn_sms_login.Error,
						});
					} else {

						result.data.ydn_sms_login.Result.FaceImageCode = transformImageCodeToUri(result.data
							.ydn_sms_login.Result
							.FaceImageCode);
							
						loginHelper.login(result.data.ydn_sms_login.Result,result.data.ydn_sms_login.AppToken)
						
						uni.navigateBack();
					}

				} else {
					uni.showToast({
						icon: "none",
						title: "登录异常",
					});
					return;
				}
			},
			onBack() {
				uni.navigateBack()
			},
			gotoAccountLogin() {
				uni.redirectTo({
					url: '/pages/login_pwd/login_pwd'
				})
			},
			onUserAgreement() {
				let tempData = {
					url: 'http://www.qianhaiyilan.cn/ppolicy_user.html',
					title: "用户协议"
				}
				uni.navigateTo({
					url: `/pages/normal_webview/normal_webview?info=${encodeURIComponent(JSON.stringify(tempData))}`
				})
			},
			onPrivacyPolicy() {
				let tempData = {
					url: 'http://www.qianhaiyilan.cn/ppolicy_app.html',
					title: "隐私政策"
				}
				uni.navigateTo({
					url: `/pages/normal_webview/normal_webview?info=${encodeURIComponent(JSON.stringify(tempData))}`
				})
			},
			checkboxSelected(e) {
				this.agreeState = !this.agreeState;
			}
		}
	}
</script>

<style>
	.action-row {
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-top: 15rpx;
	}

	.btn-row {
		margin-top: 15rpx;
		margin-left: 35rpx;
		margin-right: 35rpx;
		background: linear-gradient(to right, #FDB559, #FF7E31);
		border-radius: 15rpx;
	}

	.head-bg {
		flex-direction: column;
		background-image: url('~@/static/login/head.png');
		background-size: 50% 100%;
		width: 100vh;
		height: 15vh;
		display: flex;
		background-color: transparent;
		background-repeat: no-repeat;
	}


	.checkbox-check {
		background-image: url(../../static/common/authsdk_checkbox_checked_bg.png);
		background-repeat: no-repeat;
		background-size: cover;
		margin-right: 15rpx;
		width: 30rpx;
		height: 30rpx;
	}

	.checkbox-uncheck {
		background-image: url(../../static/common/authsdk_checkbox_uncheck_bg.png);
		width: 30rpx;
		height: 30rpx;
		margin-right: 15rpx;
		background-repeat: no-repeat;
		background-size: cover;
	}
</style>