<template>
	<view>
		<view class="head-bg" :style="{'padding-top': statusBarHeight +'px'}">

			<view style="align-items: center; display: flex; width: 100v; 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; align-self: center; 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="username" placeholder="请输入用户名/手机号"
					style="padding-top: 20rpx; padding-bottom: 20rpx;" />
				<view style=" height: 1px; background: #C6C6C6; "></view>
			</view>
			<view class="input-row border" style="padding-top: 10rpx;">
				<input type="password" displayable v-model="password" placeholder="请输入密码"
					style="padding-top: 20rpx; padding-bottom: 20rpx;" />
				<view style=" height: 1px; background: #C6C6C6; "></view>
			</view>
		</view>
		<view style="margin-top: 15rpx; margin-left: 35rpx;" @click="gotoCodeLogin()">
			<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 {
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				agreeState: false,
				username: "",
				password: "",
				loginBtnLoading: false,
			}
		},
		methods: {
			async bindLogin() {
				if (this.username.length < 3) {
					uni.showToast({
						icon: "none",
						title: "账号最短为 3 个字符",
					});
					return;
				}
				if (this.password.length < 4) {
					uni.showToast({
						icon: "none",
						title: "密码最短为 4 个字符",
					});
					return;
				}
				if (!this.agreeState) {
					uni.showToast({
						icon: "none",
						title: "您还没有同意用户协议",
					});
					return;
				}

				this.loginBtnLoading = true;
				let query_data = `mutation{
					ydn_login(name:${JSON.stringify(this.username)},pass:${JSON.stringify(this.password)})
				}`;
				let result = await http.gql({
					query: query_data
				})
				this.loginBtnLoading = false;
				//处理返回请求
				console.log("result：" + JSON.stringify(result))
				if (result && result.data && result.data.ydn_login) {
					if (!result.data.ydn_login.Error) {
						result.data.ydn_login.Result.FaceImageCode = transformImageCodeToUri(result.data.ydn_login
							.Result
							.FaceImageCode);

						loginHelper.login(result.data.ydn_login.Result , result.data.ydn_login.AppToken)
						console.log("login")
						uni.navigateBack();
						return
					} else {
						uni.showToast({
							icon: "none",
							title: result.data.ydn_login.Error,
						});
					}

				} else {
					uni.showToast({
						icon: "none",
						title: "登录异常",
					});
					return;
				}
			},
			onBack() {
				uni.navigateBack()
			},
			gotoCodeLogin() {
				uni.redirectTo({
					url: '/pages/login_yzm/login_yzm'
				})
			},
			checkboxSelected(e) {
				this.agreeState = !this.agreeState;
			},
			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))}`
				})
			}
		}
	}
</script>

<style>

</style>

<style>
	.login-type-btn.act {
		color: #ecab80;
		border-bottom: solid 1px #ecab80;
	}

	.send-code-btn {
		width: 120px;
		text-align: center;
		background-color: #ecab80;
		color: #ffffff;
		margin: 12px;
		padding: 4px;
	}

	.action-row {
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-top: 15px;
	}

	.oauth-row {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		flex-wrap: wrap;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}

	.oauth-image {
		position: relative;
		width: 50px;
		height: 50px;
		border: 1px solid #dddddd;
		border-radius: 50px;
		background-color: #ffffff;
	}

	.oauth-image image {
		width: 30px;
		height: 30px;
		margin: 10px;
	}

	.oauth-image button {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}

	.btn-row {
		margin-top: 15px;
		margin-left: 35rpx;
		margin-right: 35rpx;
		background: linear-gradient(to right, #58B8FF, #32CDFF);
		border-radius: 15rpx;
	}

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

	.uni-status-bar {
		// width: 750rpx;
		height: 20px;
		// height: var(--status-bar-height);
	}

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

	.checkbox-uncheck {
		background-image: url(../../static/common/authsdk_checkbox_uncheck_bg.png);
		width: 35rpx;
		height: 35rpx;
		margin-right: 15rpx;
		background-repeat: no-repeat;
		background-size: cover;
	}
	
	.m-input::input-placeholder {
		color: #0000EE;
	}
</style>