<template>
	<div >
		<a-form ref="loginForm" :model="ruleForm" :rules="rules">
<!--			<a-form-item name="account">-->
<!--				<a-input-->
<!--					v-model:value="ruleForm.account"-->
<!--					:placeholder="$t('login.accountPlaceholder')"-->
<!--					size="large"-->
<!--					@keyup.enter="login"-->
<!--				>-->
<!--					<template #prefix>-->
<!--						<UserOutlined class="login-icon-gray" />-->
<!--					</template>-->
<!--				</a-input>-->
<!--			</a-form-item>-->
			<span style="margin-bottom: 20px;  color: red">密码已过期请输入新密码</span>
			<a-form-item name="password">
				<a-input-password
					v-model:value="ruleForm.password"
					placeholder="请输入新密码"
					size="large"
					autocomplete="off"
					@keyup.enter="login"
				>
					<template #prefix>
						<LockOutlined class="login-icon-gray" />
					</template>
				</a-input-password>
			</a-form-item>
			<a-form-item name="newPassword">
				<a-input-password
					v-model:value="ruleForm.newPassword"
					placeholder="请再次输入新密码"
					size="large"
					autocomplete="off"
					@keyup.enter="login"
				>
					<template #prefix>
						<LockOutlined class="login-icon-gray" />
					</template>
				</a-input-password>
			</a-form-item>


			<a-form-item>
				<a-button type="primary" class="w-full" :loading="loading" round size="large" @click="login"
				>{{ $t('login.signIn') }}
				</a-button>
			</a-form-item>
		</a-form>
	</div>
</template>

<script>
	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 config from '@/config'
	import configApi from '@/api/dev/configApi'
	import tool from '@/utils/tool'
	import { globalStore, iframeStore, keepAliveStore, viewTagsStore } from '@/store'
	import { mapActions, mapState } from 'pinia'
	import {message} from "ant-design-vue";
	import userCenterApi from '@/api/sys/userCenterApi'

	export default {
		name: 'Login',
		components: {
			phoneLoginForm,
			threeLogin
		},
		data() {
			return {
				token : '',
				activeKey: 'userAccount',
				captchaOpen: config.SYS_BASE_CONFIG.SNOWY_SYS_DEFAULT_CAPTCHA_OPEN,
				validCodeBase64: '',
				ruleForm: {
					account: '',
					password: '',
					newPassword: '',
					validCode: '',
					validCodeReqNo: '',
					autologin: false,
					eduIdentity: '0'
				},
				rules: {
					// account: [required(this.$t('login.accountError'), 'blur')],
					password: [required(this.$t('login.PWError'), 'blur')],
					reestpassword: [required(this.$t('login.PWError'), 'blur')]
				},
				loading: false,
				config: {
					lang: tool.data.get('APP_LANG') || this.$CONFIG.LANG,
					theme: tool.data.get('APP_THEME') || 'default'
				},
				lang: [
					{
						name: '简体中文',
						value: 'zh-cn'
					},
					{
						name: 'English',
						value: 'en'
					}
				]
			}
		},
		computed: {
			...mapState(globalStore, ['sysBaseConfig']),
		},
		watch: {
			'config.theme': function (val) {
				document.body.setAttribute('data-theme', val)
			},
			'config.lang': function (val) {
				this.$i18n.locale = val
				tool.data.set('APP_LANG', val)
			}
		},
		created() {
			this.clearViewTags()
			this.clearKeepLive()
			this.clearIframeList()
		},
		mounted() {
			let formData = ref(config.SYS_BASE_CONFIG)
			configApi.configSysBaseList().then((data) => {
				if (data) {
					data.forEach((item) => {
						formData.value[item.configKey] = item.configValue
					})
					this.captchaOpen = formData.value.SNOWY_SYS_DEFAULT_CAPTCHA_OPEN
					tool.data.set('SNOWY_SYS_BASE_CONFIG', formData.value)
					this.setSysBaseConfig(formData.value)
					this.refreshSwitch()
				}
			})
		},
		methods: {
			...mapActions(keepAliveStore, ['clearKeepLive']),
			...mapActions(viewTagsStore, ['clearViewTags']),
			...mapActions(iframeStore, ['clearIframeList']),
			...mapActions(globalStore, ['setSysBaseConfig']),
			// 通过开关加载内容
			refreshSwitch() {
				// 判断是否开启验证码
				if (this.captchaOpen === 'true') {
					// 加载验证码
					this.loginCaptcha()
					// 加入校验
					this.rules.validCode = [required(this.$t('login.validError'), 'blur')]
				}
			},
			// 获取验证码
			loginCaptcha() {
				loginApi.getPicCaptcha().then((data) => {
					this.validCodeBase64 = data.validCodeBase64
					this.ruleForm.validCodeReqNo = data.validCodeReqNo
				})
			},
			// 用户名密码登录
			async login() {
				this.$refs.loginForm.validate().then(async () => {
					this.loading = true
					const loginData = {
						// account: this.ruleForm.account,
						// 密码进行SM2加密，传输过程中看到的只有密文，后端存储使用hash
						password: this.ruleForm.password,
						newPassword: this.ruleForm.newPassword,
						// validCode: this.ruleForm.validCode,
						// validCodeReqNo: this.ruleForm.validCodeReqNo,
						// eduIdentity: this.ruleForm.eduIdentity
					}
					if(loginData.password != loginData.newPassword){
						message.error('两个密码不一致');
						return
					}
					tool.data.set('TOKEN', this.token)
					tool.cookie.set('Token', this.token)
					let res = await userCenterApi.userUpdatePassword(loginData)
					console.log('修改你密码',res)
					afterLogin(this.token)
					this.loading = false
					// // 获取token
					// try {
					// 	const loginToken = await loginApi.login(loginData)
					// 	afterLogin(loginToken)
					// } catch (err) {
					// 	this.loading = false
					// 	this.loginCaptcha()
					// }
				})
			},
			configLang(key) {
				this.config.lang = key
			},
			setData(token){
				this.token = token
			}
		}
	}
</script>

<style lang="less">
	@import 'login';
</style>
