<template>
	<view class="bg">
		<view class="logoView">
			<image class="logo" :src="config.baseUrl_api+'/fs/static/login/logo@2x.png'"></image>
		</view>

		<!-- 获取手机号 -->
		<!-- <button class="start" type="default" :disabled="!agree" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">微信账号快捷登录</button> -->
		<view>
			<!-- 密码登录 -->
			<view class="formbox">
				
				<view>
					<view class="round-input-item">
						<image class="icon" :src="config.baseUrl_api+'/fs/static/login/tag01@2x.png'"></image>
						<uni-easyinput :styles="inputstyle" placeholder="会员号" v-model="form.username" />
					</view>
					<view class="round-input-item">
						<image class="icon" :src="config.baseUrl_api+'/fs/static/login/tag02@2x.png'"></image>
						<uni-easyinput :styles="inputstyle" placeholder="密码" v-model="form.password" type="password" />
					</view>
					<view class="round-input-item">
						<image class="icon" :src="config.baseUrl_api+'/fs/static/login/tag03@2x.png'"></image>
						<uni-easyinput :styles="inputstyle" placeholder="图形验证码" v-model="form.code" />
						<image :src="codeUrl" @click="getCode" />
					</view>

				</view>
				<view class="flex-item">
				</view>
				<view class="center-item">
					<button @click="handleLogin" class="btn-red">绑定账号</button>
				</view>

				<view class="tip">*会员号+证件号后四位+ )*%</view>
			</view>


		</view>

		<view class="agreeArea">
			<!-- 			<checkbox-group @change='radioChange'>
				<label>
					<checkbox value="r1" :checked="agree" />请您确认同意<text @click="showAgreement">《隐私保护声明》</text>
				</label>
			</checkbox-group> -->
		</view>
		<!-- 隐私保护声明 -->
		<uni-popup ref="popup" v-if="showAgree" background-color="#fff">
			<view class="popup-content">
				本应用严格遵守法律法规，为用户提供安全、可靠的服务。若您对于我们感兴趣，希望咨询、预约、申请使用我们的服务，我们需要收集、使用您的个人信息以便为您安排专人提供服务。本公司非常重视用户（以下或简称“您”）的隐私和个人信息安全，希望您仔细阅读《隐私保护声明》（以下简称“本声明”），详细了解我们对信息的收集、使用方式，以便您更好地了解我们的服务并做出适当的选择。

				一、您提供的个人信息
				1、在注册帐户时填写或上传的信息

				例如，您在参与问卷时所填写的姓名、所在地、行业、手机号码等。

				2、在奖励兑换时填写或上传的信息

				例如，您在奖励兑换时所填写的姓名、所在地、手机号码等。

				我们为您的信息提供相应的安全保障，以防止信息的丢失、不当使用、未经授权访问或披露。

				二、我们如何使用您的个人信息
				根据您留下的信息，我们后续会自行或委托合作方与您取得联系，向您介绍我们的服务。

				我们可能会向您发送推广信息，如您不希望继续接收推广可选择退订。

				三、您享有的权利
				1、我们保障您撤回个人信息使用的同意的权利；

				2、我们保障您复制、查阅本人个人信息的权利。

				若您需要行使上述权利，您可通过本声明列明的联系方式与我们联系，在您请求撤回同意或者复制、查阅本人个人信息时，我们可能会要求您进行身份验证，以保障信息安全。

				请您理解，由于技术所限或法律监管要求，我们可能无法完全满足您的要求。我们将尽快处理所涉问题，并在通过验证您的用户身份后的十五天内予以回复。

				四、变更
				我们可能适时修订本声明内容。

				我们将在内容更新时，通过在页面显著位置提示、公告或直接与您联系等方式通知您，如果您继续使用本服务，即视为您已接受修改后的相关内容；如果您不接受修改后的相关内容，您可以联系我们或者通过信息退订等方式选择停止使用服务。

				五、联系我们
				如您对本声明或个人信息相关事宜有疑问，可以通过公众号与我们取得联系。
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	import {
		onLoad
	} from '@dcloudio/uni-app'
	import config from '@/config.js'
	import {
		pcLogin,
		getWxUserPhone,
		getCodeImg,
		getSmsCode,
		loginByPhone
	} from '@/common/login.js'


	const popup = ref(null)
	const agree = ref(true)
	const loading = ref(false)
	const showAgree = ref(false)
	const form = ref({})
	const codeUrl = ref('')
	const inputstyle = ref({
		borderColor: 'transparent',
		fontSize: '30rpx'
	})
const app = getApp()

	let path = '/pages/index/index';
	onLoad((option) => {
		if (option.path) {
			path = decodeURIComponent(option.path)
		}
		getCode()
	})

	function radioChange() {
		popup.value.open()
		agree.value = true
	}
	function decryptPhoneNumber(res) {
		// console.log(res)

		loading.value = true
		if (res.detail.errMsg.indexOf('ok') > -1) {
			getWxUserPhone(res.detail).then((data) => {
				// console.log(data)

				uni.redirectTo({
					url: path
				})
			}).finally(() => {
				loading.value = false
			});
		} else {
			loading.value = false
		}
	}

	function subscribe() {
		uni.requestSubscribeMessage({
			tmplIds: ['pvrlpWl1MDJfOghILwUsQtfcg96LWdstVOFLrDxGcdM'],
			success: (res) => {
				console.log('success:', res)
			}
		})
	}

	function showAgreement() {
		popup.value.open()
	}

	function getCode() {
		getCodeImg().then((res) => {
			codeUrl.value = 'data:image/gif;base64,' + res.data.img
			form.value.uuid = res.data.uuid
		})
	}

	function handleLogin() {
		if (!form.value.username) {
			uni.showToast({
				title: '账号不能为空',
				icon: 'none'
			})
			return
		}
		if (!form.value.password) {
			uni.showToast({
				title: '密码不能为空',
				icon: 'none'
			})
			return
		}
		if (!form.value.code) {
			uni.showToast({
				title: '验证码不能为空',
				icon: 'none'
			})
			return
		}
		pcLogin(form.value)
			.then((res) => {
				app.globalData.isLogin = true
				uni.redirectTo({
					url: path
				})
			})
	}
</script>

<style scoped lang="scss">
	.bg{background: linear-gradient(60deg,#ad1820 50%,#044a9f 50%);padding: 1px;height: 100vh;overflow: hidden;}
	.formbox {
		background: #fff;
		width: 700rpx;
		padding: 50rpx;box-sizing: border-box;
		margin: auto;
		border-radius: 20rpx;
	}
	.logoView {
		/* margin: 20vh 0; */
	}

	.logo {
		width: 420rpx;
		height: 179rpx;
		margin: 60rpx auto 60rpx;
		display: block;
	}

	.h1 {
		font-size: 36rpx;
		color: #000000;
		text-align: center;
	}

	.start {
		margin: 0 auto 80rpx;
		font-size: 30rpx;
		color: #fff;
		height: 80rpx;
		width: 480rpx;
		border-radius: 40rpx;
		background: #44A92F;
	}

	.agreeArea {
		text-align: center;
	}

	.agreeArea label {
		font-size: 26rpx;
	}

	.agreeArea label text {
		color: #00C176;
	}

	.tip {
		margin: 30rpx 0 0;
		font-size: 20rpx;
		color: #181818;
	}

	.h3 {}
	.round-input-item {
		overflow: hidden;
		background: RGBA(247, 247, 248, 1);
		border-radius: 40rpx;
		padding: 0 0 0 30rpx;
		height: 80rpx;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
	
		image {
			width: 180rpx;
			height: 80rpx;
	
			&.icon {
				width: 30rpx;
				height: 30rpx;
				margin-right: 16rpx;
			}
		}
	
		input {
			border-left: 1rpx solid RGBA(214, 216, 219, 1);
			padding: 0 0 0 20rpx;
			font-size: 30rpx;
		}
	
		input::-webkit-input-placeholder {
			color: RGBA(158, 166, 174, 1);
			font-size: 30rpx;
		}
	
		input::placeholder {
			color: RGBA(158, 166, 174, 1);
			font-size: 30rpx;
		}
	
		input::-moz-placeholder {
			color: RGBA(158, 166, 174, 1);
			font-size: 30rpx;
		}
	
		text {
			font-size: 28rpx;
			color: #014A9F; padding: 0 20rpx;
		}
		
	}
	
</style>