<template>
	<div class="login_background">
		<div class="login_bg_left">
		</div>
		<div class="login_bg_right">
		</div>
		<div class="login_background_front">
			<div class="logo">
				<img src="/img/login_logo.png"/>
			</div>
			<div class="text">
				官网
			</div>
		</div>
		<div class="login-form">
			<a-card>
				<template #title>
					<div style="font-size: 25px; font-weight: 500; text-align: center">
						{{ reLogin ? '选择学校' : '账号登陆' }}
					</div>
				</template>
				<a-form ref="loginForm" :model="ruleForm" :rules="rules" layout="vertical" :hideRequiredMark="true">
					<a-form-item name="account" v-if="!reLogin" label="账号">
						<a-input
							v-model:value="ruleForm.account"
							:placeholder="$t('login.accountPlaceholder')"
							size="large"
							:bordered="false"
							@keyup.enter="login"
						>
<!--							<template #prefix>-->
<!--								<UserOutlined class="login-icon-primary"/>-->
<!--							</template>-->
						</a-input>
					</a-form-item>
					<a-form-item name="password" v-if="!reLogin" label="账号">
						<a-input-password
							v-model:value="ruleForm.password"
							:placeholder="$t('login.PWPlaceholder')"
							size="large"
							:bordered="false"
							autocomplete="off"
							@keyup.enter="login"
						>
						</a-input-password>
					</a-form-item>
					<a-form-item v-if="reLogin" name="targetId">
						<a-radio-group v-model:value="ruleForm.targetId" name="targetId" style="width: 100%">
							<a-row :gutter="8">
								<a-col :span="12" v-for="item in orgItems">
									<a-radio :value="item.id">{{ item.name }}</a-radio>
								</a-col>
							</a-row>
						</a-radio-group>
					</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>
			</a-card>
		</div>
		<div class="icp-bottom">
			<a style="color:white;text-decoration: none; " target="_blank" rel="noopener" href="http://beian.miit.gov.cn/">湘ICP备2024062953号-2</a>
		</div>
	</div>
</template>

<script>
import loginApi from '@/api/auth/loginApi'
import {required} from '@/utils/formRules'
import {afterLogin} from './util'
import config from '@/config'
import configApi from '@/api/sys/dev/configApi'
import tool from '@/utils/tool'
import {globalStore, iframeStore, keepAliveStore, viewTagsStore} from '@/store'
import {mapActions, mapState} from 'pinia'

export default {
	name: 'Login',
	data() {
		return {
			activeKey: 'userAccount',
			validCodeBase64: '',
			ruleForm: {
				account: '',
				password: '',
				validCode: '',
				validCodeReqNo: '',
				autologin: false,
				targetId: ''
			},
			rules: {
				account: [required(this.$t('login.accountError'), 'blur')],
				password: [required(this.$t('login.PWError'), 'blur')],
				targetId: [required(this.$t('login.SchoolError'), 'blur')]
			},
			loading: false,
			reLogin: false, // 是否需要选择学校后再登陆
			orgItems: [], // 是否需要选择学校后再登陆
			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
				})
				tool.data.set('SYS_BASE_CONFIG', formData.value)
				this.setSysBaseConfig(formData.value)
			}
		})
	},
	methods: {
		...mapActions(keepAliveStore, ['clearKeepLive']),
		...mapActions(viewTagsStore, ['clearViewTags']),
		...mapActions(iframeStore, ['clearIframeList']),
		...mapActions(globalStore, ['setSysBaseConfig']),
		// 用户名密码登录
		async login() {
			this.$refs.loginForm.validate().then(async () => {
				this.loading = true
				const loginData = {
					account: this.ruleForm.account,
					password:this.ruleForm.password,
					targetId: this.ruleForm.targetId
				}
				// 获取token
				try {
					var loginResult = await loginApi.login(loginData)
					if (loginResult.reLogin) {
						this.reLogin = true
						this.loading = false
						this.orgItems = loginResult.orgItems
					} else {
						afterLogin(loginResult.token)
					}
				} catch (err) {
					this.loading = false
				}
			})
		}
	}
}
</script>

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