<template>
	<el-form size="large" class="login-content-form" ref="ruleFormRef" :model="state.ruleForm" @submit.native.prevent>
		<el-form-item
			prop="userName"
			class="mb30"
			:rules="[
				{ required: true, message: '请填写手机号', trigger: 'blur' },
				{ validator: checkPhone, trigger: 'blur' },
			]"
		>
			<el-input placeholder="请填写手机号" v-model="state.ruleForm.userName" clearable autocomplete="off" class="inputDeep">
				<template #prefix>
					<SvgIcon name="ele-Phone" class="el-input__icon" />
				</template>
			</el-input>
		</el-form-item>
		<el-form-item prop="password" class="mb30" :rules="[{ required: true, message: '请填写短信验证码', trigger: 'blur' }]">
			<el-col :span="15">
				<el-input
					type="text"
					maxlength="4"
					placeholder="请填写短信验证码"
					v-model="state.ruleForm.code"
					clearable
					autocomplete="off"
					class="inputDeep"
				>
					<template #prefix>
						<SvgIcon name="ele-ChatDotSquare" class="el-input__icon" />
					</template>
				</el-input>
			</el-col>
			<el-col :span="1"></el-col>
			<el-col :span="8">
				<el-button class="login-content-code" :disabled="isDisabled" @click="getIdentifyCodeBtn">{{
					isDisabled ? count + 's后重新获取' : click
				}}</el-button>
			</el-col>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" class="login-content-submit" round @click="onSignIn(ruleFormRef)" :loading="state.loading">登录</el-button>
		</el-form-item>
			<div>运营管理系统 <span class="color-danger font-bold">v5.0</span></div>
			<div class="login-msg">
				<div>联系管理员<b>重置密码</b></div>
				<!-- <el-button link type="primary" class="font16" @click="forgetPwd">忘记密码</el-button> -->
			</div>
	</el-form>
</template>

<script setup lang="ts" name="loginMobile">
import { reactive, ref } from 'vue';
import { ElNotification, FormInstance } from 'element-plus';
import { throttle } from '@/utils/tools';
import { JSEncrypt } from 'jsencrypt';
import { signIn } from '@/api/login';
import { Cookie, Local, Session } from '@/utils/storage';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '@/stores/themeConfig';
import { useRoute, useRouter } from 'vue-router';
import { initFrontEndControlRoutes } from '@/router/frontEnd';
import { initBackEndControlRoutes } from '@/router/backEnd';
import { formatAxis } from '@/utils/formatTime';
import { NextLoading } from '@/utils/loading';
import { verifyPhone } from '@/utils/toolsValidate';
import { encryptionLoginKey } from '@/utils/constants';

// 定义变量内容
const state = reactive({
	ruleForm: {
		userName: '',
		code: '',
		verifyCode: '',
	},
	loading: false,
});
const checkPhone = (rule, value, callback) => {
	if (!value) {
		return callback(new Error('手机号不能为空'));
	} else {
		if (verifyPhone(value)) {
			callback();
		} else {
			return callback(new Error('请填写正确的手机号'));
		}
	}
};
const count = ref(60);
const click = ref('获取验证码');
const isDisabled = ref(false);
const getIdentifyCodeBtn = () => {
	if (!state.ruleForm.userName) {
		ruleFormRef.value?.validateField('userName');
		return;
	}
	if (!verifyPhone(state.ruleForm.userName)) {
		ruleFormRef.value?.validateField('userName');
		return;
	}
	// state.loading = true;
	countDown();
};
// 倒计时
const countDown = () => {
	if (count.value === 0) {
		isDisabled.value = false;
		click.value = '获取验证码';
		count.value = 60;
		return;
	} else {
		count.value--;
		click.value = count.value + 's后重新获取';
		isDisabled.value = true;
		setTimeout(() => {
			countDown();
		}, 1000);
	}
};

const ruleFormRef = ref<FormInstance>(); // 表单ref
const storesThemeConfig = useThemeConfig(); // 主题配置
const { themeConfig } = storeToRefs(storesThemeConfig); // 主题配置
const route = useRoute(); // 路由
const router = useRouter(); // 路由
// 登录
const onSignIn = throttle(async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate((valid: boolean) => {
		if (!valid) return;
		state.loading = true;
		// 新建一个JSEncrypt对象
		const encryptor = new JSEncrypt({ default_key_size: '2048' });
		encryptor.setPublicKey(encryptionLoginKey); // publicKey为公钥
		// 加密数据
		const submitObj = {
			username: encryptor.encrypt(state.ruleForm.username),
			password: encryptor.encrypt(state.ruleForm.password),
		};
		signIn(submitObj)
			.then(async (res: any) => {
				//登录
				// 存储 token 到浏览器缓存
				Cookie.set('token', res.result);
				if (!themeConfig.value.isRequestRoutes) {
					// 前端控制路由，2、请注意执行顺序
					const isNoPower = await initFrontEndControlRoutes();
					signInSuccess(isNoPower);
				} else {
					// 模拟后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
					// 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
					const isNoPower = await initBackEndControlRoutes();
					// 执行完 initBackEndControlRoutes，再执行 signInSuccess
					signInSuccess(isNoPower);
				}
			})
			.catch(() => {
				state.loading = false;
			});
	});
}, 1000);
// 登录成功后的跳转
const signInSuccess = (isNoPower: boolean | undefined) => {
	if (isNoPower) {
		state.loading = false;
		ElNotification({
			title: '提示',
			message: '抱歉，您没有登录权限，请联系管理员',
			type: 'warning',
		});
		Session.clear();
		Cookie.clear();
		Local.clear();
	} else {
		// 登录成功，跳到转首页
		/*// 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
    if (route.query?.redirect) {
      router.push({
        path: <string>route.query?.redirect,
        query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : '',
      });
    } else {
      router.push('/');
    }*/
		router.push('/');
		// 设置登录成功后的时间问候语
		Cookie.set('userName', state.ruleForm.username);
		// 登录成功提示
		// 关闭 loading
		state.loading = true;
		const signInText = '欢迎回来！';
		ElNotification({
			type: 'success',
			title: `${formatAxis(new Date())}`,
			message: `${signInText}`,
		});
		NextLoading.start();
	}
};
</script>

<style scoped lang="scss">
.inputDeep {
	:deep(.el-input__wrapper) {
		box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
		border-radius: 0;
		border-bottom: 1px solid var(--el-input-border-color, var(--el-border-color));
	}
	:deep(.el-form-item.is-error .el-input__wrapper.is-focus) {
		box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
	}
}
.login-content-form {
	font-size: var(--el-font-size-medium);
	margin-top: 20px;

	:deep(.el-input--large) {
		font-size: var(--el-font-size-medium);
	}

	:deep(.el-form-item__error) {
		font-size: var(--el-font-size-medium);
	}

	.login-content-code {
		width: 100%;
		padding: 0;
	}
	.login-content-submit {
		width: 100%;
		letter-spacing: 2px;
		font-weight: 300;
		margin-top: 15px;
	}
	.login-content-submit {
		width: 100%;
		margin-top: 45px;
		height: 50px;
		border-radius: 30px;
		font-size: 16px;
		letter-spacing: 5px;
	}
	.login-msg {
		margin-top: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: var(--el-color-primary);
		b {
			color: #999;
			padding-left: 4px;
		}
	}
}
</style>
