<template>
    <el-dialog v-model="dialogVisible" :title="title" width="500px" append-to-body>
        <el-form ref="auditFormRef" :model="auditForm" :rules="auditRules" label-width="120px">
            <el-form-item :label="t('document.document.auditForm.result')" prop="result">
                <el-radio-group v-model="auditForm.result">
                    <el-radio label="3">{{ t('document.document.auditForm.pass') }}</el-radio>
                    <el-radio label="2">{{ t('document.document.auditForm.reject') }}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item :label="t('document.document.auditForm.reason')" prop="reason"
                v-if="auditForm.result === '2'">
                <el-input v-model="auditForm.reason" type="textarea" :rows="3"
                    :placeholder="t('document.document.auditForm.reasonPlaceholder')" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button :loading="loading" type="primary" @click="submitForm">{{
                    t('document.document.button.submit') }}</el-button>
                <el-button @click="handleCancel">{{ t('document.document.button.cancel') }}</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, watch, nextTick, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { auditDocument } from '@/api/document/document';
import { DocumentAuditForm, DocumentVO } from '@/api/document/document/types';
import type { FormInstance } from 'element-plus';
import { ElMessage } from 'element-plus';

interface Props {
    modelValue: boolean;
    document?: DocumentVO | null;
    title?: string;
}

interface Emits {
    (e: 'update:modelValue', value: boolean): void;
    (e: 'success'): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const { t } = useI18n();

const dialogVisible = ref(false);
const loading = ref(false);
const auditFormRef = ref<FormInstance>();

// 审核表单数据
const auditForm = ref({
    id: 0,
    result: '3', // 默认通过
    reason: ''
});

// 审核表单验证规则
const auditRules = reactive({
    result: [
        {
            required: true,
            message: t('document.document.auditRule.resultRequired'),
            trigger: 'change'
        }
    ],
    reason: [
        {
            required: true,
            message: t('document.document.auditRule.reasonRequired'),
            trigger: 'blur'
        }
    ]
});

// 监听modelValue变化
watch(
    () => props.modelValue,
    (val) => {
        dialogVisible.value = val;
        if (val && props.document) {
            auditForm.value = {
                id: props.document.id,
                result: '3', // 默认通过
                reason: ''
            };
            // 重置表单验证
            nextTick(() => {
                auditFormRef.value?.clearValidate();
            });
        }
    }
);

// 监听dialogVisible变化
watch(dialogVisible, (val) => {
    emit('update:modelValue', val);
    if (!val) {
        auditForm.value = {
            id: 0,
            result: '3',
            reason: ''
        };
    }
});

// 取消操作
const handleCancel = () => {
    dialogVisible.value = false;
};

// 提交表单
const submitForm = () => {
    auditFormRef.value?.validate(async (valid: boolean) => {
        if (valid) {
            loading.value = true;
            try {
                const auditData: DocumentAuditForm = {
                    documentId: auditForm.value.id,
                    result: parseInt(auditForm.value.result),
                    rejectReason: auditForm.value.reason
                };
                await auditDocument(auditData);
                ElMessage.success(t('document.document.message.auditSuccess'));
                dialogVisible.value = false;
                emit('success');
            } catch (error) {
                console.error(t('document.document.message.auditFailed'), error);
                ElMessage.error(t('document.document.message.auditFailed'));
            } finally {
                loading.value = false;
            }
        }
    });
};
</script>

<style scoped lang="scss">
.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
</style>