<template>
	<div class="login_background">
		<div class="login_background_front">

		</div>
		<div class="login_main">
			<div class="login_head">
				<span class="text">欢迎登录系统</span>
			</div>
			<div class="login_form">
				<LoginInput v-model="ruleForm.account"
					:placeholder="$t('login.accountPlaceholder')"
					@keyup.enter="login"
				>
					<template #before>
						<user-outlined class="icon" />
					</template>
				</LoginInput>
				<LoginInput v-model="ruleForm.password" :type="showPWD ? 'text' : 'password'"
					:placeholder="$t('login.PWPlaceholder')"
					@keyup.enter="login"
				>
					<template #before>
						<lock-outlined class="icon" />
					</template>
					<template #after>
						<span @click="showPWD = !showPWD">
							<eye-outlined v-if="showPWD" class="icon" />
							<eye-invisible-outlined v-else class="icon" />
						</span>
					</template>
				</LoginInput>
				<div class="login_auto">
					<a-checkbox v-model:checked="ruleForm.autologin">
						<span class="auto_text">记住密码</span>
					</a-checkbox>
				</div>
				<button class="login_btn" type="button"
					:loading="loading" round size="large" @click="login"
				>登录</button>
				<div class="login_forgetbox">
					<a class="login_forget" href="/findpwd">{{ $t('login.forgetPassword') }}？</a>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
import LoginInput from "./LoginInput.vue";

	const showPWD = ref(false);
	import loginApi from '@/api/auth/loginApi'
	import PhoneLoginForm from './phoneLoginForm.vue'
	import ThreeLogin from './threeLogin.vue'
	import smCrypto from '@/utils/smCrypto'
	import { required } from '@/utils/formRules'
	import { afterLogin } from './util'
	import configData from '@/config'
	import configApi from '@/api/dev/configApi'
	import tool from '@/utils/tool'
	import { message } from 'ant-design-vue';
	import { globalStore, iframeStore, keepAliveStore, viewTagsStore } from '@/store'
	const { proxy } = getCurrentInstance()

	const activeKey = ref('userAccount')
	const captchaOpen = ref(configData.SYS_BASE_CONFIG.SNOWY_SYS_DEFAULT_CAPTCHA_OPEN)
	const validCodeBase64 = ref('')
	const loading = ref(false)

	const ruleForm = reactive({
		account: 'superAdmin',
		password: '123456',
		validCode: '',
		validCodeReqNo: '',
		autologin: false
	})

	const rules = reactive({
		account: [required(proxy.$t('login.accountError'), 'blur')],
		password: [required(proxy.$t('login.PWError'), 'blur')]
	})
	const lang = ref([
		{
			name: '简体中文',
			value: 'zh-cn'
		},
		{
			name: 'English',
			value: 'en'
		}
	])
	const config = ref({
		lang: tool.data.get('APP_LANG') || proxy.$CONFIG.LANG,
		theme: tool.data.get('APP_THEME') || 'default'
	})

	const store = globalStore()
	const kStore = keepAliveStore()
	const iStore = iframeStore()
	const vStore = viewTagsStore()

	const setSysBaseConfig = store.setSysBaseConfig
	const clearKeepLive = kStore.clearKeepLive
	const clearIframeList = iStore.clearIframeList
	const clearViewTags = vStore.clearViewTags

	const sysBaseConfig = computed(() => {
		return store.sysBaseConfig
	})

	onMounted(() => {
		let formData = ref(configData.SYS_BASE_CONFIG)
		configApi.configSysBaseList().then((data) => {
			if (data) {
				data.forEach((item) => {
					formData.value[item.configKey] = item.configValue
				})
				captchaOpen.value = formData.value.SNOWY_SYS_DEFAULT_CAPTCHA_OPEN
				tool.data.set('SNOWY_SYS_BASE_CONFIG', formData.value)
				setSysBaseConfig(formData.value)
				refreshSwitch()
			}
		})
	})

	onBeforeMount(() => {
		clearViewTags()
		clearKeepLive()
		clearIframeList()
	})

	// 监听语言
	watch(
		() => config.value.lang,
		(newValue) => {
			proxy.$i18n.locale = newValue
			tool.data.set('APP_LANG', newValue)
		}
	)
	// 主题
	watch(
		() => config.value.theme,
		(newValue) => {
			document.body.setAttribute('data-theme', newValue)
		}
	)
	// 通过开关加载内容
	const refreshSwitch = () => {
		// 判断是否开启验证码
		if (captchaOpen.value === 'true') {
			// 加载验证码
			loginCaptcha()
			// 加入校验
			rules.validCode = [required(proxy.$t('login.validError'), 'blur')]
		}
	}

	// 获取验证码
	const loginCaptcha = () => {
		loginApi.getPicCaptcha().then((data) => {
			validCodeBase64.value = data.validCodeBase64
			ruleForm.validCodeReqNo = data.validCodeReqNo
		})
	}
	//登陆
	const loginForm = ref()
	const login = async () => {
		if(!ruleForm.account){ message.error('请输入账号'); return; }
		if(!ruleForm.password){ message.error('请输入密码'); return; }
		loading.value = true
		const loginData = {
			account: ruleForm.account,
			// 密码进行SM2加密，传输过程中看到的只有密文，后端存储使用hash
			password: smCrypto.doSm2Encrypt(ruleForm.password),
			validCode: ruleForm.validCode,
			validCodeReqNo: ruleForm.validCodeReqNo
		}
		// 获取token
		try {
			const loginToken = await loginApi.login(loginData)
			afterLogin(loginToken)
		} catch (err) {
			loading.value = false
			loginCaptcha()
		}
	}
	const configLang = (key) => {
		config.value.lang = key
	};
</script>
<style lang="less">
.login_background{
	background:url('/img/login_bg.jpg') no-repeat center;
	position:relative;
	width:100%; height:100%;
	.login_background_front{
		background:url("/img/LOGO2.png") no-repeat center;
		width:800px; height:70px;
		position:absolute; left:10%; top:10%;
	}
	.login_main{
		width:570px; height:640px;
		position:absolute;
		right:290px; top:200px;
		background:rgba(255,255,255,0.75);
		border-radius:8px;
	}
	.login_head{
		width:100%; display:flex; justify-content:space-between; align-items:center;
		overflow:hidden; white-space:nowrap;
		padding:50px 0 40px; user-select:none;
		.text{
			padding:0 30px; font-size:25px;
		}
		&:before,&:after{
			width:50%; height:1px;
			content:"";
			background:rgba(0,0,0,0.3);
		}
	}
	.login_form{
		margin:0 50px;
		.icon{
			font-size:16px; padding:0 6px; color:#666;
		}
		.LoginInput{
			font-size:15px;
			box-shadow:0 0 3px rgba(0,0,0,0.06);
			margin-top:30px;
		}
		.login_auto{
			margin-top:20px;
			.auto_text{ color:#444; }
		}
		.login_btn{
			cursor:pointer;
			width:100%; border:none; background:url('/img/login_btn.png') no-repeat center;
			height:74px; line-height:50px; color:#fff; font-size:18px; font-weight:bold;
			letter-spacing:10px; margin-top:50px;
			display:flex; justify-content:center; align-items:flex-start;
		}
		.login_forgetbox{
			margin-top:20px;
			text-align:right;
			.login_forget{ color:#444; }
		}
	}
	@media (max-width: 1000px) {
		.login_background_front{
			left:50%;
			margin-left:-400px;
		}
		.login_main{
			left:calc(50% - 285px); top:24%;
		}
	}
}
</style>
