<template>
	<view class="login-wrapper">
		
		<!-- 切换环境提示 -->
		<EnvChangeTips ref="envChangeTipsRef" @change="vdata.siteInfos = storageManage.siteInfos()"/>
		
		<view class="login-top">
			<text>欢迎回来，请登录</text>
			<image @tap="envChangeTipsRef.tapFunc()" style="width: 320rpx; height: 76rpx" :src="vdata.siteInfos.appTopImgUrl" />
		</view>
		<view class="login-bottom jeepay-form">
			
			<!-- 不需要label, 需要修改： label-width="0"  -->
			<uni-forms ref="loginFormRef" label-width="0" :model="vdata.formData" :rules="rules">
				
				<view v-if="vdata.loginType == 'pwd' ">
					<uni-forms-item name="username">
						<uni-easyinput class='jeepay-easyinput' placeholder="请输入登录名/手机号"  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>
					
					<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  v-if="vdata.isShowSafetyCode"  name="safetyCode">
						<uni-easyinput v-model="vdata.formData.safetyCode" type="number" class='jeepay-easyinput' placeholder="请输入安全码" :maxlength="6" :clearable="false">
							<template #prefixIcon><image src="@/static/login/icon-pw.svg" class="input-icon" /></template>
						</uni-easyinput>
					</uni-forms-item>
					
				</view>
				
				<view v-if="vdata.loginType == 'sms' ">
					<uni-forms-item name="loginPhone">
						<uni-easyinput class='jeepay-easyinput' v-model="vdata.formData.loginPhone" type="number" :maxlength="11" :disabled="!vdata.allowSendMsgFlag" placeholder="请输入手机号"  :clearable="false">
							<template #prefixIcon><image src="@/static/login/icon-phone.svg" class="input-icon" /></template>
							<template #suffixIcon> <view class='show-tips' @tap="sendSmscodeFunc">{{ vdata.sendMsgText }}</view> </template>
						</uni-easyinput>
					</uni-forms-item>
					<uni-forms-item>
						<!-- 手机验证码， 不限制数字还是本文， 如果发送为文本则无需app升级。  -->
						<view  style="display: flex;">
							<uni-easyinput class='jeepay-easyinput' :maxlength="6" placeholder="请输入验证码" v-model="vdata.formData.vercode" :clearable="false">
								<template #prefixIcon><image src="@/static/login/icon-sms-code.svg" class="input-icon" /></template>
							</uni-easyinput>
							<image :src="vdata.formData.imgCodeUrl" style="width: 200rpx; height: 110rpx;margin-left: 10rpx;" @click="getCode" mode=""></image>
						</view>
					</uni-forms-item>
					
					<uni-forms-item name="smsCode">
						<!-- 手机验证码， 不限制数字还是本文， 如果发送为文本则无需app升级。  -->
						<uni-easyinput class='jeepay-easyinput' :maxlength="6" placeholder="请输入手机验证码" v-model="vdata.formData.smsCode" :clearable="false">
							<template #prefixIcon><image src="@/static/login/icon-sms-code.svg" class="input-icon" /></template>
						</uni-easyinput>
					</uni-forms-item>
					
				</view>
				
			</uni-forms>
			
			<view class="agreement-policy">
				<JeepayCheckbox v-model:checked="vdata.isSelectedAgreement" />
				同意
				<text class="agreement" @click="go.to('PAGES_STATIC_AGREEMENT')">《用户服务协议》</text>
				<text>与</text>
				<!-- <text class="policy" @click="toPrivacy">《隐私政策》</text> -->
				<text class="policy" @click="go.to('PAGES_STATIC_POLICY')">《隐私政策》</text>
			</view>
			
			<Button @tap="loginFunc">登录</Button>
			
			<view class="register-box">
				<view class="register">
					<text>还没有账号？</text> <text @tap="go.to('PAGES_REGISTER')">去注册></text>
				</view>
				<view class="forget" @tap="go.to('PAGES_FORGET_PASSWORD')">忘记密码</view>
			</view>
			<view class="swidth-login" @click="changeLoginType">
				{{ vdata.loginType == 'pwd' ? '短信验证码登录' : '账号密码登录' }}
				<image src="@/static/login/icon-arrow-left.svg"></image>
			</view>
		</view>
	</view>
    <JAgree service="PAGES_STATIC_AGREEMENT" privacy="PAGES_FORGET_PASSWORD" ref="refAgr" @agree="vdata.isSelectedAgreement = true"/>
</template>
<script setup>
	
import { ref, reactive, onMounted } from 'vue';
import { $loginByPwd, $phoneCodeLogin, $userInfo, $sendSms, $getSiteInfos,$getUploadImgSize,$isCode} from '@/http/apiManager.js';
import storageManage from '@/commons/utils/storageManage.js'
import infoBox from '@/commons/utils/infoBox.js';
import go from '@/commons/utils/go.js'
import timer from '@/commons/utils/timer.js'
import formUtil from '@/commons/utils/formUtil.js'
import EnvChangeTips from './components/EnvChangeTips.vue'
import { getExtStoreId } from "@/commons/utils/versionManage.js"
const loginFormRef = ref()
const envChangeTipsRef = ref()
const refAgr = ref()
// #ifdef MP-WEIXIN
// 控制 音乐播放 和暂停
import { getPushStatus } from "@/commons/utils/pushmsg/wxTextToSpeach.js"
// #endif
const rules = {
	username: { 
		rules:[ formUtil.rules.requiredInputShowToast('用户名') ],
	},
	pwd: {
		rules:[ formUtil.rules.requiredInputShowToast('密码') ],
	},
	safetyCode: {
		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, // 勾选隐私协议
	
	siteInfos: storageManage.siteInfos() || { }, 
	
	formData: {
		username: '',  // 账密登录： 用户名
		pwd: '',  // 账密登录： 密码
		safetyCode: '',  // 账密登录： 安全码
		 
		loginPhone: '',  // 短信登录： 手机号 
		smsCode: '',  // 验证码 
	},
	
})

const getCode=()=>{
	$isCode().then(res=>
	{
		console.log(res);
		vdata.formData.imgCodeUrl=res.bizData.imageBase64Data
		vdata.formData.vercodeToken=res.bizData.vercodeToken
	})
}

getCode()



onMounted(() => {
	getExtStoreId()
	
	// 查询是否包含网站信息， 否则更新
	if(!vdata.siteInfos || Object.keys(vdata.siteInfos) <= 0){
		$getSiteInfos().then( ( { bizData } ) => {
			vdata.siteInfos = storageManage.siteInfos(bizData)
		})
	}
	
})


// 切换登录方式
function changeLoginType () {
	vdata.loginType = vdata.loginType == 'pwd' ? 'sms' : 'pwd';
}


function loginFunc(){
	

	
	// 表单验证 
	formUtil.validate(loginFormRef.value).then(() => {
    if (!vdata.isSelectedAgreement) {
         refAgr.value.open()
         return false
		//  return infoBox.showToast('请勾选用户隐私政策')
	}
		let loginPromise = null;
		
		if(vdata.loginType == 'pwd'){ // 用户名密码登录 
			loginPromise = $loginByPwd(vdata.formData.username, vdata.formData.pwd, vdata.formData.safetyCode)
			
		}else if(vdata.loginType == 'sms'){ // 短信验证码登录
			loginPromise = $phoneCodeLogin(vdata.formData.loginPhone, vdata.formData.smsCode)
		}
		
		if(loginPromise == null){
			return false;
		}
		
		// 请求后的操作 
		loginPromise.then(({bizData}) => {
			
			if(bizData.isMFA){ // 需要 二次认证登录
				
				infoBox.showToast('请输入安全码')
				vdata.isShowSafetyCode = true
				return false;
			}
			
			// 登录成功
			loginFinishFunc(bizData)
			
		})
	})
	
}
const toPrivacy = () => {
    // #ifdef APP-PLUS
     go.to('PAGES_STATIC_POLICY')
    // #endif
    // 打开小程序隐私政策
    // #ifdef APP-PLUS
    wx.openPrivacyContract(
        {
            fail: () => {
                uni.showToast({
                    title: '打开失败请稍后重试', // 打开失败
                    icon: 'none'
                })
            },
        }
    )
    // #endif
}
// 封装登录成功后的操作
async function loginFinishFunc(loginBizData){
	
	// 保存 token
	storageManage.token(loginBizData.iToken)
	
	// 请求用户信息
	return $userInfo().then(({bizData}) => {
        console.log('userInf',bizData);
		// 保存用户数据
		storageManage.userInfo(bizData)
    // 存储上传 图片大小限制
    $getUploadImgSize().then(({bizData})=>{
      storageManage.uploadImgSize(bizData.applymentImgUploadSize)
    })
		// #ifdef MP-WEIXIN
		getPushStatus()
		// #endif
		// 跳转到首页
		go.to("PAGES_INDEX", { isGetCid: true }, go.GO_TYPE_RELAUNCH)
		
	})
}

// 点击发送验证码的函数 
function sendSmscodeFunc(){
	// 按钮禁用
	if(!vdata.allowSendMsgFlag){
		return false;
	}
	
	// 验证失败
	if(!formUtil.regexp.mobile.test(vdata.formData.loginPhone)){
		return infoBox.showToast("请输入正确的手机号")
	}
	
	if(!vdata.formData.vercode){
		return infoBox.showToast("请输入图像验证码");
	}
	
	vdata.allowSendMsgFlag = false; // 按钮禁用 
	
	
	let data= {
		phone:vdata.formData.loginPhone,
		vercode:vdata.formData.vercode,
		vercodeToken:vdata.formData.vercodeToken,
	}
	
	// 发送短信验证码
	$sendSms(data, 'auth').then(({bizData}) => {
		infoBox.showSuccessToast('验证码发送成功')
		timer.startTimeoutTask(1, 60, (subTime) => {
			
			if(subTime <= 0){ // 任务结束
				vdata.sendMsgText = '发送验证码'
				vdata.allowSendMsgFlag = true;
				return false;
			}
			
			vdata.sendMsgText = `${subTime}s后可重新发送`
		})
	}).catch(() => {
		vdata.allowSendMsgFlag = true;
	})
	
}




</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:first-child {
			margin-bottom: 30rpx;
			font-size: 38rpx;
			font-weight: 500;
			color: rgba(0,0,0,0.8);
		}
		text:last-child {
			font-size: 50rpx;
			font-weight: 600;
			color: #48C0FF;
		}
	}
	.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;
			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;
			}
		}
	}
}

</style>
