<template>
	<!-- 登录 -->
	<view class="">
		<view class="bgBox">
			<image src="/static/indexIc/loginBg.png" mode=""></image>
		</view>
		<view class="logo flexC">
			<image src="/static/indexIc/logo.png" mode=""></image>
		</view>
		<view class="btnBox flexC" @click="login" v-if="!agreeStatus">
			<image src="/static/indexIc/loginBtn.png" mode=""></image>
			微信账号一键登录
		</view>
		<view class="btnBox flexC" v-else>
			<image src="/static/indexIc/loginBtn.png" mode=""></image>
			微信账号一键登录
			<button open-type="getPhoneNumber" @getphonenumber="getphonenumber"></button>
		</view>
		<view class="agreeBox flexC">
			<view class="checkImage" @click="agree">
				<image v-if="!agreeStatus" src="/static/shopCarIc/checks.png" mode=""></image>
				<image v-else src="/static/shopCarIc/modeCheck.png" mode=""></image>
			</view>
			<view class="agree flexA">
				我已阅读并同意<view class="" @click="toRichText(4)">《用户协议》</view>和<view class="" @click="toRichText(5)">《隐私协议》
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onShow, onLoad, } from '@dcloudio/uni-app'
	import { getLogin } from '@/api/'
	const agreeStatus = ref(false) //是否勾选协议
	const code = ref('') //登录参数code
	onLoad(() => {
		// this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight //'状态栏的高度'
		if (uni.getStorageSync('token')) {
			uni.reLaunch({
				url: '/pages/index/index'
			})
		}
	})
	onShow(() => {
		getCode() //获取code
	})
	// 登录校验是否勾选协议
	const login = () => {
		if (!agreeStatus.value) return uni.showToast({
			title: '请勾选协议',
			icon: 'none'
		})
	}
	// 获取data和iv
	const getphonenumber = (e) => {
		if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
			uni.showToast({
				title: '您已取消授权',
				icon: 'none'
			})
		} else {
			getLogins(e.detail.encryptedData, e.detail.iv)
		}
	}
	// 获取code
	const getCode = () => {
		uni.login({
			provider: 'weixin', //使用微信登录
			success: function(loginRes) {
				console.log(loginRes)
				code.value = loginRes.code
			}
		})
	}

	// 登录
	const getLogins = async (data, iv) => {
		try {
			let params = {
				code: code.value, //string	是	code-wx.login的code
				encryptedData: data, //string	是	encryptedData
				iv: iv //string	是	iv
			}
			const res = await getLogin(params)
			uni.setStorageSync('token', res.userInfo.token)
			uni.reLaunch({ url: '/pages/index/index' })
			console.log('getLogin', res)
			// 保存数据
		} catch (err) {
			console.log('getLogin', err)
		}
	}
	// 富文本
	const toRichText = (e) => {
		uni.navigateTo({
			url: `/pages/richText/richText?type=${e}`
		})
	}
	// // 勾选协议
	const agree = () => {
		agreeStatus.value = !agreeStatus.value
	}
</script>

<style lang="scss">
	.bgBox {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		z-index: -1;

		image {
			width: 100%;
			height: 100vh;
		}
	}

	.logo {
		width: 100%;
		height: 158rpx;
		margin-top: 480rpx;

		image {
			width: 156rpx;
			height: 158rpx;
		}
	}

	.btnBox {
		margin: 292rpx auto 60rpx;
		width: 646rpx;
		height: 88rpx;
		border-radius: 44rpx;
		opacity: 1;
		background: #fff;
		color: #fd7452ff;
		font-size: 32rpx;
		font-weight: 700;
		position: relative;

		image {
			margin-right: 12rpx;
			width: 48rpx;
			height: 38rpx;
		}

		button {
			position: absolute;
			background: transparent;
			width: 100%;
			height: 100%;
			color: #fd7452ff;
			font-size: 32rpx;
			font-weight: 700;

			&::after {
				border: none;
			}
		}
	}

	.agreeBox {
		margin-top: 502rpx;

		.checkImage {
			margin: 8rpx 8rpx 0 0;

			image {
				width: 28rpx;
				height: 28rpx;
			}
		}

		.agree {
			color: #fff;
			font-size: 24rpx;
		}
	}
</style>