<template>
	<up-popup :show="show" @close="close" closeOnClickOverlay @open="open" mode="center" :round="16">
		<view class="login-wrapper">
			<view class="login-bottom jeepay-form">
				<view class="u-flex u-flex-row u-row-right u-m-t-10">
					<up-icon name="close-circle-fill" size="20" color="#999" @click="close"></up-icon>
				</view>
				<up-form errorType="toast" :model="vdata.formData" :rules="rules" ref="loginFormRef">
					<view class="">
						<up-tabs :list="accountType.list" keyName="label" @change="accountTypeChange"></up-tabs>
					</view>
					<template v-if="accountType.sel==1">
						<up-form-item prop="merchantName">
							<up-input v-model="vdata.formData.merchantName" placeholder="请输入商户号">
							</up-input>
						</up-form-item>
					</template>
					<up-form-item prop="username">
						<up-input v-model="vdata.formData.username" placeholder="请输入登录名/手机号"></up-input>
					</up-form-item>
					<up-form-item prop="pwd">
						<up-input v-model="vdata.formData.pwd" type="password" placeholder="请输入登录密码"></up-input>
					</up-form-item>
					<up-form-item prop="code">
						<up-input v-model="vdata.formData.code" placeholder="请输入验证码">
						</up-input>
						<image :src="vdata.formData.img" class=" " style="width: 100px; height: 40px;margin-left: 5px;"
							@click="getCode" mode="">
						</image>
					</up-form-item>
					<view class="u-m-t-10">
						<up-button shape="circle" @click="loginFunc" type="primary" text="登录"></up-button>
					</view>
				</up-form>
				<!-- <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>
						<template v-if="accountType.sel==1">
							<uni-forms-item name="merchantName">
								<uni-easyinput class='jeepay-easyinput' placeholder="请输入商户号"
									v-model="vdata.formData.merchantName" :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="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 name="code">
							<view style="display: flex;" class="u-flex u-flex-y-center u-flex-row">
								<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>
					<up-button @click="loginFunc" type="primary" text="登录"></up-button>
				</uni-forms> -->
			</view>
		</view>
	</up-popup>

</template>
<script setup>

	import {
		ref,
		reactive,
		onMounted,
		watch
	} from 'vue';
	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 {
		login,
		getCodeImg
	} from '@/http/yskApi/login.js';
	let show = ref(false)
	const emits = defineEmits(['update:modelValue', 'loginSuccess'])
	const props = defineProps({
		modelValue: {
			type: Boolean,
			default: false
		}
	})
	watch(() => props.modelValue, (newval) => {
		show.value = newval
	})
	watch(() => show.value, (newval) => {
		if (newval) {
			getCode()
		}
		emits('update:modelValue', newval)
	})

	function close() {
		show.value = false
	}

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

	function accountTypeChange(e) {
		console.log(e);
		accountType.sel = e.index
	}
	const loginFormRef = ref()
	const envChangeTipsRef = ref()
	const refAgr = ref()
	const rules = {
		merchantName: [{
			required: true,
			message: '请输入商户号',
			trigger: ['blur', 'change'],
		}],
		username: [{
			required: true,
			message: '请输入员工账号，登录名/手机号',
			trigger: ['blur', 'change'],
		}],
		pwd: [{
			required: true,
			message: '请输入密码',
			trigger: ['blur', 'change'],
		}],
		code: [{
			required: true,
			message: '请输入验证码',
			trigger: ['blur', 'change'],
		}]
	}

	const vdata = reactive({
		isShowPwd: false, // 是否显示密码
		loginType: 'pwd', // 类型切换： pwd or sms
		isShowSafetyCode: false, // 是否显示安全码输入框
		allowSendMsgFlag: true, // 是否可发送短信验证码
		sendMsgText: '发送验证码',
		isSelectedAgreement: false, // 勾选隐私协议
		siteInfos: storageManage.siteInfos() || {},
		formData: {
			username: '', // 账密登录： 用户名
			pwd: '', // 账密登录： 密码
			rememberMe: false,
			code: '',
			uuid: '',
			merchantName: '',
			loginType: 'merchant'
		},

	})


	const getCode = () => {
		getCodeImg().then(res => {
			vdata.formData.img = res.data.code
			vdata.formData.uuid = res.data.uuid
		})
	}

	getCode()

	onMounted(() => {})

	function loginFunc() {
		// 表单验证 
		formUtil.validate(loginFormRef.value).then(() => {
			let loginPromise = null;
			loginPromise = login({
				username: vdata.formData.username,
				password: vdata.formData.pwd,
				rememberMe: false,
				code: vdata.formData.code,
				uuid: vdata.formData.uuid,
				merchantName: vdata.formData.merchantName,
				loginType: accountType.list[accountType.sel].value
			})

			if (loginPromise == null) {
				return false;
			}
			// 请求后的操作 
			loginPromise.then(res => {
				console.log(res);
				uni.removeStorageSync('shopInfo')
				uni.removeStorageSync('tokenInfo')
				uni.removeStorageSync('shopId')
					// 登录成功
					loginFinishFunc(res.data)
			}).catch(e => {
				getCode()
			})
		})

	}
	watch(() => accountType.sel, (newval) => {
		if (newval == 1) {
			vdata.formData.merchantName = uni.getStorageSync('merchantName') || ''
		} else {
			vdata.formData.username = ''
		}
	})
	// 封装登录成功后的操作
	async function loginFinishFunc(loginBizData) {
		// 保存 token
		uni.setStorageSync('shopInfo', loginBizData.shopInfo)
		uni.setStorageSync('tokenInfo', loginBizData.tokenInfo)
		uni.setStorageSync('shopId', loginBizData.shopInfo.id)
		uni.setStorageSync('loginType',loginBizData.loginType)
		console.log(loginBizData.shopInfo,111111111111);
		emits('loginSuccess')
	}
</script>

<style lang="scss">
	.input-icon {
		width: 18px;
		height: 18px;
	}

	::v-deep .input-placeholder {
		font-size: 14px !important;
	}

	.login-wrapper {
		background-color: #fff;
		border-radius: 8px;
		overflow: hidden;

		.login-bottom {
			min-height: 368px;
			padding: 0 20px 20px 20px;
			min-width: 400px;
			box-sizing: border-box;

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

			.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>