<template>
    <el-dialog v-model="drawerVisible" title="重置密码" width="650" align-center @close="handleClose()"
        :close-on-click-modal="showDrawerClose" :close-on-press-escape="showDrawerClose">
        <el-form ref="ruleFormRef" label-width="150" :model="form" :rules="rules" status-icon class="layout_form">
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="原密码" prop="password">
                        <el-input v-model="form.password" name="password" clearable 
                            placeholder="请输入原密码" maxlength="16" show-word-limit show-password />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="新密码" prop="newPassword">
                        <el-input v-model="form.newPassword" name="newPassword" clearable show-password
                            placeholder="请输入新密码" maxlength="16" show-word-limit />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="再次输入新密码" prop="qrNewPassword">
                        <el-input v-model="form.qrNewPassword" name="qrNewPassword" clearable show-password
                            placeholder="请输入再次输入新密码" maxlength="16" show-word-limit />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <div class="layout_footer">
                <el-button type="info" @click="handleClose">取消</el-button>
                <el-button type="primary" @click="submitForm">提交</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import { showMessage } from '@/common/message'
import regexPatterns from '@/utils/regexp.js';
import { ResetPassword } from '@/api/system'

const props = defineProps({
    resetDetailFlag: Boolean
});
const showDrawerClose = ref(false)
const emit = defineEmits(['close'])
const drawerVisible = ref(false)
const form = ref({
    password: '',
    newPassword: '',
    qrNewPassword: '',
    id: '',
})
const ruleFormRef = ref()

watch(() => props.resetDetailFlag, (newValue) => {
    if (newValue && newValue !== undefined) {
        drawerVisible.value = newValue
    }
}, { immediate: true, deep: true })

const checkidPasswordDifficult = (rule, value, callback) => {
    if (!regexPatterns.passwordDifficult.test(value)) {
        callback(new Error('请输入大写字母、小写字母、数字、特殊字符组成的8-16位密码'))
    } else {
        callback()
    }
}

const checkidPasswordsDifficult = (rule, value, callback) => {
    if (value !== form.value.qrNewPassword) {
        callback(new Error('两次输入的密码不一致'))
    }
    if (!regexPatterns.passwordDifficult.test(value)) {
        callback(new Error('请输入大写字母、小写字母、数字、特殊字符组成的8-16位密码'))
    } else {
        callback()
    }
}

const rules = {
    password: [
        { required: true, validator: checkidPasswordDifficult, trigger: 'change' },
    ],
    newPassword: [
        { required: true, validator: checkidPasswordDifficult, trigger: 'change' },
    ],
    qrNewPassword: [
        { required: true, validator: checkidPasswordsDifficult, trigger: 'change' },
    ],
}

const resetPassword = () => {
    ResetPassword(form.value).then(res => {
        if (res.StatusCode === 200) {
            showMessage("success", "重置密码成功");
            handleClose("refresh");
        } else {
            showMessage("error", res.Message);
        }
    }).catch(error => {
        showMessage("error", error.Message);
    })
}
const submitForm = async () => {
    const userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
    if (userInfo) {
        form.value.id = userInfo.sub
        ruleFormRef.value.validate((valid) => {
            if (valid) {
                resetPassword()
            }
        })
    } else {
        showMessage('error', '用户信息获取失败，请重新登录')
    }
}


const handleClose = () => {
    drawerVisible.value = false
    form.value = {
        password: '',
        newPassword: '',
        qrNewPassword: '',
        id: '',
    }
    emit('close')
}

</script>
