<template>
	<a-tabs
		v-model:activeKey="activeKey"
		:class="style['login-form']"
		size="large"
	>
		<!-- 账号密码登录 -->
		<a-tab-pane
			key="1"
			:tab="getI18n('common', 'Common_Account_Password_Login')"
		>
			<div :class="style['login-tab-item']">
				<a-form
					ref="loginFormRef"
					:model="formItems"
					:rules="loginRules"
					:label-col="labelCol"
					:wrapper-col="wrapperCol"
				>
					<!-- 账号 -->
					<a-form-item name="username">
						<a-input
							@pressEnter="onLoginSubmit"
							:placeholder="
								getI18n('common', 'Common_Please_Enter', [
									getI18n('system', 'SYSTEM_User_Account'),
								])
							"
							v-model:value="formItems.username"
							size="large"
						/>
					</a-form-item>
					<!-- 密码 -->
					<a-form-item name="password">
						<a-input-password
							:maxLength="100"
							@pressEnter="onLoginSubmit"
							:placeholder="
								getI18n('common', 'Common_Please_Enter', [
									getI18n('system', 'SYSTEM_User_Password'),
								])
							"
							v-model:value="formItems.password"
							size="large"
						/>
					</a-form-item>
					<a-form-item>
						<a-button
							:loading="loginLoading"
							type="primary"
							block
							size="large"
							@click="onLoginSubmit()"
						>
							{{ getI18n('common', 'Common_Login') }}
						</a-button>
					</a-form-item>
				</a-form>
			</div>
		</a-tab-pane>
	</a-tabs>

	<modify-password-modal
		:confirmModalVisible="passwordModifyVisiable"
		@on-init-password-cancel="onInitPasswordCancelClick"
		@on-init-password-confirm="onInitPasswordConfirmClick"
	/>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { userStore } from '@/store/modules/user'
import { getI18n } from '@/utils/i18n'
import style from './index.module.less'
import { LoginParams, InitUserPasswordParamsModel } from '@/api/common/model'

import sm3 from 'sm-crypto/dist/sm3'
import { message } from 'ant-design-vue'
import { ModifyPasswordModal } from './components'

export default defineComponent({
	components: {
		ModifyPasswordModal,
	},
	setup() {
		// 初始化密码弹窗
		const passwordModifyVisiable = ref<boolean>(false)
		const changePasswordKey = ref<string>('')

		const loginFormRef = ref()
		const formItems = reactive<LoginParams>({
			username: '',
			password: '',
			captchaCode: '',
		})
		const loginRules = {
			username: [
				{
					required: true,
					message: getI18n('common', 'Common_Please_Enter', [
						getI18n('system', 'SYSTEM_User_Account'),
					]),
					trigger: 'blur',
				},
				{
					max: 200,
					message: getI18n('common', 'Common_Enter_Max', ['200']),
					trigger: 'blur',
				},
			],
			password: [
				{
					required: true,
					message: getI18n('common', 'Common_Please_Enter', [
						getI18n('system', 'SYSTEM_User_Password'),
					]),
					trigger: 'blur',
				},
				{
					max: 200,
					message: getI18n('common', 'Common_Enter_Max', ['200']),
					trigger: 'blur',
				},
			],
		}

		const loginLoading = ref<boolean>(false)
		const useUserStore = userStore()
		const onLoginSubmit = () => {
			loginLoading.value = true
			loginFormRef.value
				.validate()
				.then(async () => {
					const params: LoginParams = {
						username: formItems.username, // 用户名
						password: sm3(formItems.password), // formItems.password, // 密码
						appid: window.APPLICATION_ID['4A'],
					}
					await useUserStore.login(params)
					loginLoading.value = false
				})
				.catch((err: any) => {
					if (err.response && err.response.status == 403) {
						message.warning(err.response.data.message)
						if (err.response.data.code == '403005') {
							// 账号第一次登录，需要修改密码
							passwordModifyVisiable.value = true
							changePasswordKey.value = err.response.data.key
						}
					}
					loginLoading.value = false
				})
		}

		// 取消
		const onInitPasswordCancelClick = () => {
			passwordModifyVisiable.value = false
			changePasswordKey.value = ''
		}
		// 确认
		const onInitPasswordConfirmClick = async (
			data: InitUserPasswordParamsModel
		) => {
			let params = {
				key: changePasswordKey.value,
				oldPassword: sm3(data.oldPassword),
				newPassword: sm3(data.newPassword),
			}
			await useUserStore
				.initUserPassword(params)
				.then((res: any) => {
					if (!res) {
						// if (res.response && res.response.status == 204 && !res.response.data ) {
						message.success('已修改密码，请重新登录')
						onInitPasswordCancelClick()
						formItems.username = ''
						formItems.password = ''
						formItems.captchaCode = ''
					}
				})
				.catch((err: any) => {
					if (err.response && err.response.status == 403) {
						message.warning(err.response.data.message)
					}
					if (err.response && err.response.status == 204) {
						message.success('已修改密码，请重新登录')
						onInitPasswordCancelClick()
						formItems.username = ''
						formItems.password = ''
						formItems.captchaCode = ''
					}
				})
		}

		return {
			style,
			loginFormRef,
			loginLoading,
			formItems,
			loginRules,
			labelCol: { span: 0 },
			wrapperCol: { span: 24 },
			activeKey: ref('1'), // tab活跃的key
			getI18n,
			onLoginSubmit,

			passwordModifyVisiable,
			onInitPasswordCancelClick,
			onInitPasswordConfirmClick,
		}
	},
})
</script>
