<template>
	<el-dialog
		v-model="store.changePassword"
		:close-on-click-modal="false"
		:close-on-press-escape="false"
		:show-close="false"
		align-center
		draggable
		width="500"
	>
		<template #header>
			<h3>修改密码</h3>
		</template>
		<el-form :label-position="labelPosition" :model="formLabelAlign" label-width="100px" style="max-width: 460px">
			<el-form-item label="原始密码">
				<el-input v-model="formLabelAlign.oldPassword" />
			</el-form-item>
			<el-form-item label="新密码">
				<el-input v-model="formLabelAlign.newPassword" />
			</el-form-item>
			<el-form-item label="确认密码">
				<el-input v-model="formLabelAlign.confirmPassword" />
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="store.changePassword = false">返回</el-button>
				<el-button type="primary" @click="handelConfirmPassword"> 确认修改</el-button>
			</div>
		</template>
	</el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import type { FormProps } from 'element-plus';
import { headerStore } from '@/store/header';

const store = headerStore();
const labelPosition = ref<FormProps['labelPosition']>('right');
const formLabelAlign = reactive({
	oldPassword: '',
	newPassword: '',
	confirmPassword: '',
});

/**
 * 修改密码
 */
const handelConfirmPassword = () => {
	store.changePassword = false;
};
</script>
