// 修改密码 账号第一次登录
<template>
	<a-modal
		v-model:visible="confirmModalVisibleValue"
		:confirm-loading="submitButtonLoading"
		:title="getI18n('common', 'Common_Modify_Password')"
		:closable="false"
		:destroyOnClose="true"
		:mask-closable="true"
		@cancel="$emit('on-init-password-cancel')"
		:width="800"
	>
		<a-form
			:model="formState"
			:label-col="{ span: 3 }"
			:wrapper-col="{ span: 21 }"
			:rules="formRules"
			ref="formRef"
		>
			<!-- 旧密码 -->
			<a-form-item
				:label="getI18n('common', 'Common_Password')"
				ref="oldPassword"
				name="oldPassword"
			>
				<a-input-password
					autoComplete="off"
					:maxLength="100"
					v-model:value="formState.oldPassword"
					:placeholder="
						getI18n('common', 'Common_Please_Enter', [
							getI18n('common', 'Common_Password'),
						])
					"
				/>
			</a-form-item>
			<!-- 新密码 -->
			<a-form-item
				:label="getI18n('common', 'Common_New_Password')"
				ref="newPassword"
				name="newPassword"
			>
				<a-input-password
					autoComplete="off"
					:maxLength="100"
					v-model:value="formState.newPassword"
					:placeholder="
						getI18n('common', 'Common_Please_Enter', [
							getI18n('common', 'Common_New_Password'),
						])
					"
				/>
			</a-form-item>
			<!-- 再次确认新密码 -->
			<a-form-item
				:label="getI18n('common', 'Common_Confirm_Password')"
				ref="newPassword1"
				name="newPassword1"
			>
				<a-input-password
					autoComplete="off"
					:maxLength="100"
					v-model:value="formState.newPassword1"
					:placeholder="
						getI18n('common', 'Common_Please_Enter', [
							getI18n('common', 'Common_Confirm_Password'),
						])
					"
				/>
			</a-form-item>
		</a-form>
		<template #footer>
			<!-- 取消 -->
			<a-button
				@click="onResetButtonClick"
				:loading="submitButtonLoading"
			>
				<close-outlined />
				{{ getI18n('common', 'Common_Close') }}
			</a-button>
			<!-- 保存 -->
			<a-button
				type="primary"
				:loading="submitButtonLoading"
				@click="onSubmitButtonClick"
			>
				<save-outlined />
				{{ getI18n('common', 'Common_Save') }}
			</a-button>
		</template>
	</a-modal>
</template>
<script lang="ts">
import router from '@/router'
import { getI18n } from '@/utils/i18n'

import { defineComponent, reactive, ref, watch } from 'vue'
import { CloseOutlined, SaveOutlined } from '@ant-design/icons-vue'
import { CommonConstant } from '@/utils/constant'
import { InitUserPasswordParamsModel } from '@/api/common/model'

export default defineComponent({
	components: {
		CloseOutlined,
		SaveOutlined,
	},
	props: {
		// 操作确认弹出层是否展示
		confirmModalVisible: {
			type: Boolean,
			required: false,
			default: false,
		},
	},
	emits: ['on-init-password-cancel', 'on-init-password-confirm'],
	setup(props, context) {
		// 弹窗是否展示
		let confirmModalVisibleValue = ref(props.confirmModalVisible)
		// 按钮loading
		const submitButtonLoading = ref<boolean>(false)
		// 表单数据
		const formRef = ref()
		const formState = reactive<InitUserPasswordParamsModel>({
			key: '',
			oldPassword: '', // 旧密码
			newPassword: '', // 新密码
			newPassword1: undefined, // 确认密码
		})

		// 表单校验规则
		const formRules = {
			// 旧密码
			oldPassword: [
				{
					required: true,
					message: getI18n('common', 'Common_Please_Enter', [
						getI18n('common', 'Common_Password'),
					]),
					trigger: 'change',
				},
			],
			// 新密码
			newPassword: [
				{
					required: true,
					validator: (_rule, val, callback) => {
						var pattern = new RegExp(CommonConstant.passwordRules)
						if (!pattern.test(val)) {
							callback(getI18n('common', 'Common_Password_rule'))
						} else if (val === formState.oldPassword) {
							callback(
								getI18n('common', 'Common_User_PasswordSame')
							)
						} else {
							callback()
						}
					},
					trigger: 'change',
				},
			],
			// 确认密码
			newPassword1: [
				{
					required: true,
					validator: (_rule, val, callback) => {
						var pattern = new RegExp(CommonConstant.passwordRules)
						if (!pattern.test(val)) {
							callback(getI18n('common', 'Common_Password_rule'))
						} else if (val !== formState.newPassword) {
							callback(
								getI18n(
									'common',
									'Common_Confirm_Password_Message'
								)
							)
						} else if (val === formState.oldPassword) {
							callback(
								getI18n('common', 'Common_User_PasswordSame')
							)
						} else {
							callback()
						}
					},
					trigger: 'change',
				},
			],
		}

		// 取消按钮
		const onResetButtonClick = () => {
			formState.oldPassword = ''
			formState.newPassword = ''
			formState.newPassword1 = undefined
			context.emit('on-init-password-cancel')
			confirmModalVisibleValue.value = false
			formRef.value && formRef.value.resetFields()
		}

		// 提交按钮被点击
		const onSubmitButtonClick = () => {
			formRef.value.validate().then(async () => {
				// 参数
				let params: InitUserPasswordParamsModel = {
					oldPassword: formState.oldPassword,
					newPassword: formState.newPassword,
					key: formState.key,
				}
				context.emit('on-init-password-confirm', params)
			})
		}

		watch(
			() => props.confirmModalVisible,
			newValue => {
				confirmModalVisibleValue.value = newValue
				if (!newValue) {
					formState.oldPassword = ''
					formState.newPassword = ''
					formState.key = ''
					formState.newPassword1 = undefined
					formRef.value && formRef.value.resetFields()
				}
			}
		)

		return {
			confirmModalVisibleValue,
			submitButtonLoading,
			formRef,
			formState,
			formRules,
			router,
			getI18n,
			onSubmitButtonClick,
			onResetButtonClick,
		}
	},
})
</script>