<template>
    <el-dialog draggable width="500px" v-model.trim="dialogVisible" :title="title">
        <el-scrollbar>
            <el-form :inline="false" :model="form" label-width="120px" :rules="rules" class="form-one" ref="formRef">
                <el-form-item label="校验密码" prop="password">
                    <el-input maxlength="32" show-word-limit v-model.trim="form.password" type="password"
                        placeholder="请输入校验密码" show-password />
                </el-form-item>
                <el-form-item label="新密码" prop="newPwd">
                    <el-input maxlength="32" show-word-limit v-model.trim="form.newPwd" type="password"
                        placeholder="请输入新密码" show-password />
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmPwd">
                    <el-input maxlength="32" show-word-limit v-model.trim="form.confirmPwd" type="password"
                        placeholder="请输入确认密码" show-password />
                </el-form-item>
            </el-form>
        </el-scrollbar>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submit" :loading="loading">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { ref, inject } from 'vue'
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { passwordConfirm, updatePassword } from '@/api/user-boot/user'
import { validatePwd } from '@/utils/common'
import { useAdminInfo } from '@/stores/adminInfo'
import router from '@/router'
import { useNavTabs } from '@/stores/navTabs'
const adminInfo = useAdminInfo()
const navTabs = useNavTabs()
const dialogVisible = ref(false)
const title = ref('修改密码')
const formRef = ref()
// 注意不要和表单ref的命名冲突
const form = reactive({
    password: '',
    newPwd: '',
    confirmPwd: ''
})
const loading = ref(false)
const rules = {
    password: [
        { required: true, message: '请输入校验密码', trigger: 'blur' },
        {
            min: 6,
            max: 16,
            message: '长度在 6 到 16 个字符',
            trigger: 'blur'
        }
    ],
    newPwd: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        {
            min: 6,
            max: 16,
            message: '长度在 6 到 16 个字符',
            trigger: 'blur'
        },
        { validator: validatePwd, trigger: 'blur' }
    ],
    confirmPwd: [
        { required: true, message: '请确认密码', trigger: 'blur' },
        {
            min: 6,
            max: 16,
            message: '长度在 6 到 16 个字符',
            trigger: 'blur'
        },
        {
            validator: (rule: any, value: string, callback: any) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'))
                } else if (value !== form.newPwd) {
                    callback(new Error('两次输入密码不一致!'))
                } else {
                    callback()
                }
            },
            trigger: 'blur',
            required: true
        }
    ]
}

const open = () => {
    dialogVisible.value = true
    form.password = ''
    form.newPwd = ''
    form.confirmPwd = ''
}
const submit = () => {
    formRef.value.validate(async (valid: boolean) => {
        if (valid) {
            loading.value = true
            passwordConfirm(form.password).then(res => {
                updatePassword({
                    id: adminInfo.$state.userIndex,
                    newPassword: form.newPwd
                }).then(async (res: any) => {
                    ElMessage.success('密码修改成功')
                    dialogVisible.value = false

                    setTimeout(() => {
                        navTabs.closeTabs()
                        window.localStorage.clear()
                        adminInfo.reset()
                        router.push({ name: 'login' })
                    }, 0)
                }).finally(() => {
                    loading.value = false
                })
            }).finally(() => {
                loading.value = false
            })
        }
    })
}

defineExpose({ open })
</script>
