<template>
	<view class="login">
		<view class="login-box">
			<image class="back" src="../../static/demo/back.png" mode=""></image>
			<image class="logitext" src="../../static/demo/logitext.png" mode=""></image>
			<image class="tips" src="../../static/demo/tips.png" mode=""></image>
			<view v-if="checked" key="1">
				<button class="login-btn" type="default" open-type="getPhoneNumber"
					@getphonenumber="decryptPhoneNumber">一键登录</button>
			</view>
			<view v-if="!checked" key="2">
				<button class="login-btn" @click="handleChecked">一键登录</button>
			</view>
			<view class="user-agreement u-f u-f-aic">
				<u-checkbox class="my-raido" v-model="checked" active-color="#FF5303" shape="circle"
					@change="radioChange" style="transform:scale(0.7)">明月</u-checkbox>
				我已阅读<text class="main-color-text" @click="tourl('user_agreement')">《用户协议》</text>和<text
					class="main-color-text" @click="tourl('privacy_agreement')">《隐私政策》</text>并阅读理解 相关内容
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCusNavBarInfo
	} from "../.././common/customizeNavBarInfo.js"
	export default {
		data() {
			return {
				paddingTop: 0,
				topDistance: 0,
				loginCode: "",
				phoneCode: "",
				isBind: false,
				checked: false,
				share: 0,
			}
		},
		computed: {
			distance() {
				return `calc(100vh - ${this.topDistance})`
			}
		},
		mounted() {
			let {
				customizeNavBarHeight
			} = getCusNavBarInfo()
			this.paddingTop = customizeNavBarHeight + 'px'
			this.topDistance = uni.upx2px(436) + (customizeNavBarHeight - 30) + 'px'
		},
		onLoad(options) {
			this.share = options.share || 0
		},
		methods: {
			tourl(type) {
				uni.navigateTo({
					url: '/pagesF/instructions/instructions?type=' + type
				})
			},
			async handleLogin() {
				uni.showLoading({
					title: '登录中...',
					mask: true
				});
				// 请求登录
				let res = await this.$http.post('/api/client/login', {
					loginCode: this.loginCode,
					phoneCode: this.phoneCode
				});
				uni.hideLoading();
				if (!res.data.data.isBind) {
					this.getUserInfoAgain()
				} else {
					uni.showToast({
						title: '登录成功'
					});
					this.setUserInfo(res)
				}
			},
			async handleRegister() {
				uni.showLoading({
					title: '登录中...',
					mask: true
				});
				// 请求登录
				let res = await this.$http.post('/api/client/register', {
					loginCode: this.loginCode,
					phoneCode: this.phoneCode
				});
				uni.hideLoading();
				uni.showToast({
					title: '登录成功'
				});
				this.setUserInfo(res)
			},
			setUserInfo(res) {
				let {
					token,
					isBind
				} = res.data.data
				// 登录成功 保存状态
				this.User.token = token;
				uni.setStorageSync("token", token);
				this.User.userbind = isBind;
				uni.setStorageSync("userbind", isBind);
				if (this.share == 0) {
					this.User.navigate({
						url: '/pages/index/index'
					}, 'switchTab')
				} else {
					uni.navigateBack({
						delta: 1
					})
				}
			},
			decryptPhoneNumber(e) {
				if (!e.detail.code) {
					return
				}
				this.phoneCode = e.detail.code
				this.getUserInfo()
			},
			handleChecked() {
				uni.showToast({
					title: '请勾选用户协议和隐私政策',
					icon: 'none'
				})
			},
			getUserInfo() {
				uni.login({
					provider: 'weixin',
					success: (res) => {
						this.loginCode = res.code
						if (res.errMsg == 'login:ok') {
							this.handleLogin()
						}
					}
				})
			},
			getUserInfoAgain() {
				uni.login({
					provider: 'weixin',
					success: (res) => {
						this.loginCode = res.code
						if (res.errMsg == 'login:ok') {
							this.handleRegister()
						}
					}
				})
			},
			radioChange(value) {
				this.checked = value
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		.login-box {
			position: relative;
			padding-top: 400rpx;
			padding-bottom: 100rpx;

			.back {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0%;
				top: 0;
				z-index: -1;
			}

			.logitext {
				width: 390rpx;
				height: 148rpx;
				display: block;
				margin: 0 auto;
				margin-bottom: 27rpx;
			}

			.tips {
				width: 400rpx;
				height: 40rpx;
				display: block;
				margin: 0 auto;
			}



			.logo {
				width: 177rpx;
				height: 177rpx;
				background: #FFFFFF;
				border-radius: 54rpx;
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 88rpx;
				font-weight: 600;
				font-size: 48rpx;
				color: #FF4602;
			}

			.login-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 400;
				font-size: 28rpx;
				width: 630rpx;
				height: 88rpx;
				background: linear-gradient(90deg, #EE0004 0%, #FF8903 100%);
				border-radius: 20rpx;
				margin-top: 500rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 28rpx;
				color: #FFFFFF;
			}

			.user-agreement {
				position: absolute;
				left: 70rpx;
				bottom: 38rpx;
				font-size: 22rpx;
				font-weight: 400;
				color: #CDCDCD;

				.main-color-text {
					color: #FF5303;
				}
			}
		}
	}

	::v-deep .wx-radio-input.wx-radio-input-checked {
		background-color: #FF5303 !important;
		border-color: #FF5303 !important;
		background-clip: content-box !important;
		padding: 6rpx !important;
		box-sizing: border-box;
		border-radius: 50%;
	}

	//未选中样式
	::v-deep .wx-radio-input {
		padding: 6rpx !important;
		box-sizing: border-box;
		border-radius: 50%;
		background-color: white !important;
		border-color: #CDCDCD !important;
	}

	//去除默认对号
	::v-deep .wx-radio-input::before {
		display: none !important;
	}
</style>