<template>
	<view class="login-wrapper">

		<view class="login-top">
			<text>欢迎回来，请登录</text>
		</view>
		<view class="login-bottom jeepay-form">

			<!-- 不需要label, 需要修改： label-width="0"  -->
			<uni-forms ref="loginFormRef" label-width="0" :model="vdata.formData" :rules="rules">
				<view class="u-p-b-30">
					<my-tabs size="large" @change="accountTypeChange" v-model="accountType.sel" :list="accountType.list"
						textKey="label"></my-tabs>
				</view>
				<view v-if="vdata.loginType == 'pwd' ">
					

					<uni-forms-item name="username">
						<uni-easyinput class='jeepay-easyinput' :placeholder="accountType.sel==1?'请输入商户号':'请输入登录名/手机号'"
							v-model="vdata.formData.username" :clearable="false">
							<template #prefixIcon>
								<image src="@/static/login/icon-user.svg" class="input-icon" />
							</template>
						</uni-easyinput>
					</uni-forms-item>
					<template v-if="accountType.sel==1">
						<uni-forms-item name="staffUserName">
							<uni-easyinput class='jeepay-easyinput' placeholder="请输入登录名/手机号"
								v-model="vdata.formData.staffUserName" :clearable="false">
								<template #prefixIcon>
									<image src="@/static/login/icon-user.svg" class="input-icon" />
								</template>
							</uni-easyinput>
						</uni-forms-item>
					</template>
					
					<uni-forms-item name="pwd">
						<uni-easyinput class='jeepay-easyinput' :type="vdata.isShowPwd ? 'text' : 'password'"
							v-model="vdata.formData.pwd" :clearable="false" placeholder="请输入登录密码">
							<template #prefixIcon>
								<image src="@/static/login/icon-pw.svg" class="input-icon" />
							</template>
							<template #suffixIcon>
								<view class='show-tips' @tap="vdata.isShowPwd = !vdata.isShowPwd ">
									{{ vdata.isShowPwd ? '隐藏' : '显示'  }}
								</view>
							</template>
						</uni-easyinput>
					</uni-forms-item>

					<uni-forms-item name="code">
						<!-- 手机验证码， 不限制数字还是本文， 如果发送为文本则无需app升级。  -->
						<view style="display: flex;" class="u-flex u-flex-y-center">
							<uni-easyinput class='jeepay-easyinput' :maxlength="6" placeholder="请输入验证码"
								v-model="vdata.formData.code" :clearable="false">
								<template #prefixIcon>
									<image src="@/static/login/icon-sms-code.svg" class="input-icon" />
								</template>
							</uni-easyinput>
							<image :src="vdata.formData.img" class=" u-m-b-50"
								style="width: 200rpx; height: 80rpx;margin-left: 10rpx;" @click="getCode" mode="">
							</image>
						</view>
					</uni-forms-item>

				</view>


			</uni-forms>

			<view class="agreement-policy">
				<up-checkbox label="" name="agree" usedAlone v-model:checked="vdata.isSelectedAgreement" />
				同意
				<text class="agreement" @click="toPrivacy">《用户服务协议》</text>
				<text>与</text>
				<text class="policy" @click="toPrivacy">《隐私政策》</text>
			</view>

			<button class="btn" hover-class="hover-button" @tap="loginFunc">登录</button>

		</view>
	</view>
</template>
<script setup>
	import { encrypt } from '@/commons/utils/rsaEncrypt.js'
	import { ref, reactive, onMounted, watch } from 'vue';
	
	import { login, authCaptcha } from '@/http/api/login.js';
	import storageManage from '@/commons/utils/storageManage.js'
	import go from '@/commons/utils/go.js'
	import timer from '@/commons/utils/timer.js'
	import formUtil from '@/commons/utils/formUtil.js'
	import {
		getExtStoreId
	} from "@/commons/utils/versionManage.js"


	const accountType = reactive({
		list: [{
				label: '商户',
				value: 0
			},
			{
				label: '员工',
				value: 1
			},
		],
		sel: 0
	})

	const loginFormRef = ref()
	const rules = {
		staffUserName: {
			rules: [formUtil.rules.requiredInputShowToast('商户号')],
		},
		username: {
			rules: [formUtil.rules.requiredInputShowToast('用户名')],
		},
		pwd: {
			rules: [formUtil.rules.requiredInputShowToast('密码')],
		},
		safetyCode: {
			rules: [formUtil.rules.requiredInputShowToast('安全码')],
		},
		code: {
			rules: [formUtil.rules.requiredInputShowToast('验证码')],
		},
		loginPhone: {
			rules: [formUtil.rules.requiredInputShowToast('手机号')],
		},

		smsCode: {
			rules: [formUtil.rules.requiredInputShowToast('短信验证码')],
		},
	}

	const vdata = reactive({
		isShowPwd: false, // 是否显示密码
		loginType: 'pwd', // 类型切换： pwd or sms
		isShowSafetyCode: false, // 是否显示安全码输入框
		allowSendMsgFlag: true, // 是否可发送短信验证码
		sendMsgText: '发送验证码',
		isSelectedAgreement: false, // 勾选隐私协议

		formData: {
			username: '', // 账密登录： 用户名
			pwd: '', // 账密登录： 密码
			code: '',
			uuid: '',
			staffUserName: '',
			loginType: 1
		},

	})
	// #ifdef H5
	vdata.formData.username = ''
	vdata.formData.pwd = ''
	// #endif
	// #ifdef MP-WEIXIN
	// vdata.formData.username = '15699991111'
	// vdata.formData.pwd = 'qwer1234'
	// #endif

	function accountTypeChange(e) {
		// #ifdef H5
		if (e == 1) {
			vdata.formData.staffUserName = '18049104914'
			vdata.formData.username = '13666666666'
			vdata.formData.pwd = '123456'
		} else {
			vdata.formData.pwd = 'qwer1234'
		}
		// #endif
	}
	watch(() => accountType.sel, (newval) => {
		if (newval == 1) {
			vdata.formData.staffUserName = uni.getStorageSync('staffUserName') || ''
		} else {
			vdata.formData.username = ''
		}
	})
	onMounted(() => {
		getCode()
		// 获取商户信息,有就回显
		let info = uni.getStorageSync('MerchantId')
		if (info.staffUserName) {
			vdata.formData.staffUserName = info.staffUserName
			vdata.formData.username = info.username
		}
	})
	
	/**
	 * 获取验证码
	 */
	const getCode = () => {
		authCaptcha().then(res => {
			console.log(res)
			vdata.formData.img = res.code
			vdata.formData.uuid = res.uuid
		})
	}
	
	/**
	 * 登录
	 */
	function loginFunc() {

		// 表单验证 
		formUtil.validate(loginFormRef.value).then(() => {
			if (!vdata.isSelectedAgreement) {
				uni.$utils.showToast('请勾选同意用户服务协议与隐私政策')
				return false
			}
			let loginPromise = null;
			if (vdata.loginType == 'pwd') { // 用户名密码登录 
				let params = {
					username: vdata.formData.username,
					password: vdata.formData.pwd,
					// password: encrypt(vdata.formData.pwd),
					code: vdata.formData.code,
					uuid: vdata.formData.uuid,
					loginType: accountType.list[accountType.sel].value
				}
				//商户号参数
				if ( accountType.sel == 1 ) {
					params.staffUserName = vdata.formData.staffUserName
				}
				loginPromise = login(params)
				
			}

			if (loginPromise == null) {
				return false;
			}


			// 请求后的操作 
			loginPromise.then(res => {
				console.log(res)
				// 登录成功
				loginFinishFunc(res)
				// 保存商户号
				uni.setStorageSync('MerchantId', {
					staffUserName: vdata.formData.staffUserName,
					username: vdata.formData.username,
				})
			}).catch(e => {
				getCode()
			})
		})

	}
	const toPrivacy = () => {
		// #ifdef APP-PLUS
		go.to('PAGES_STATIC_POLICY')
		// #endif
		// 打开小程序隐私政策
		// #ifdef MP-WEIXIN
		wx.openPrivacyContract({
			fail: () => {
				uni.showToast({
					title: '打开失败请稍后重试', // 打开失败
					icon: 'none'
				})
			},
		})
		// #endif
	}

	/**
	 * 封装登录成功后的操作
	 * @param {Object} loginBizData
	 */
	async function loginFinishFunc(loginBizData) {
		// 保存 token
		storageManage.setLogin(loginBizData)
		storageManage.token(loginBizData.tokenInfo)
		uni.setStorageSync("promission",loginBizData.promissionList)
		
		// var time1 = new Date();
		// var time2 = new Date(loginBizData.expireDate);
		// let les = (time1.getTime() - time2.getTime()) / 86400000;
		// uni.showToast({
		// 	title: '店铺账号有限期至' + loginBizData.expireDate + '，店铺账号到期剩余' + Math.abs(les.toFixed(0)) + '天！',
		// 	icon: 'none'
		// });

		setTimeout(() => {
			// 跳转到首页
			go.to("PAGES_INDEX", {
				isGetCid: true
			}, go.GO_TYPE_RELAUNCH)
		}, 1000)

	}

	
</script>

<style lang="scss">
	.login-wrapper {
		min-height: 100vh;
		background-color: $v-color-bgrey;

		.login-top {
			display: flex;
			flex-direction: column;
			height: 376rpx;
			padding: 176rpx 70rpx 0;
			box-sizing: border-box;
			background: url("/static/indexImg/user-bg.svg") center center no-repeat;
			background-size: cover;

			text{
				margin-bottom: 30rpx;
				font-size: 38rpx;
				font-weight: 500;
				color: rgba(0, 0, 0, 0.8);
			}
		}

		.login-bottom {
			height: calc(100vh - 376rpx);
			padding: 50rpx;
			box-sizing: border-box;
			border-radius: 60rpx 60rpx 0 0;
			background-color: #fff;

			.show-tips {
				color: rgba(88, 132, 204, 1);
				font-weight: 400;
				font-size: 32rpx;
			}

			.agreement-policy {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0 30rpx;
				margin-top: 10rpx;
				margin-bottom: 50rpx;
				font-size: 26rpx;
				color: #8C8C8C;

				.select-box {
					display: flex;
					align-items: center;

					.select-img {
						width: 46rpx;
						height: 46rpx;
					}
				}

				.agreement,
				.policy {
					color: #1D79FD;
				}
			}

			.register-box {
				display: flex;
				justify-content: space-between;
				padding: 0 30rpx;
				margin-top: 50rpx;
				font-size: 26rpx;
				font-weight: 400;

				.register {
					text:last-child {
						color: #1D79FD;
					}
				}

				.forget {
					color: #1D79FD;
				}
			}

			.swidth-login {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 212rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: rgba(77, 77, 77, 1);

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
		.btn {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 110rpx;
			font-size: 33rpx;
			font-weight: 500;
			color: $J-color-tff;
			border-radius: 20rpx;
			background: $jeepay-bg-primary;
			box-shadow: 0 20rpx 60rpx -20rpx rgba(0,84,210,0.5);
			&.hover-button {
			  opacity: 0.5;
			}
		}	
	}
</style>