<template>
    <super-dialog
        v-model="dialogVisible"
        :title="title"
        custom-class="notification-dialog"
        top="20vh"
        width="30%"
        @closed="closePage"
    >
        <div
            v-loading="detailLoading"
            class="table-container"
            element-loading-background="rgba(10 ,38 ,61, 0.9)"
        >
            <el-form
                ref="addEditFormRef"
                :model="addEditForm"
                :rules="addEditFormRules"
                label-position="left"
                label-suffix="："
                size="large"
            >
                <el-form-item label="评审人" prop="reviewers">
                    <el-cascader
                        v-model="addEditForm.reviewers"
                        :options="reviewerOptions"
                        :props="cascaderProps"
                        clearable
                        collapse-tags
                        collapse-tags-tooltip
                        placeholder="请选择"
                        style="width: 100%"
                    />
                </el-form-item>
            </el-form>
        </div>
        <div slot="footer" style="display: flex; justify-content: center; width: 100%">
            <el-button type="primary" @click="submitObject">确定</el-button>
            <el-button @click="closePage">取消</el-button>
        </div>
    </super-dialog>
</template>

<script lang="ts" setup>
import SuperDialog from '@/components/Dialog/index.vue'

interface ReviewerOption {
    value: string
    label: string
    children?: ReviewerOption[]
}

const props = defineProps({
    isShowAdd: {
        type: Boolean,
        default: false
    },
    title: {
        type: String,
        default: ''
    },
    info: {
        type: Object,
        default: () => ({})
    }
})

// ==================== 表单相关 ====================
const detailLoading = ref<Boolean>(false)

const addEditFormRef = ref<any>(null)
const addEditForm = ref<any>({
    reviewers: ''
})

const addEditFormRules = ref<any>({
    reviewers: [{ required: true, message: '请选择评审人', trigger: 'change' }]
})

function submitObject() {
    addEditFormRef.value?.validate((valid: any, object: any) => {
        if (!valid) {
            ElMessage.warning(
                `有${Object.keys(object || {}).length}个字段未通过校验，请正确填写表单内容。`
            )
        } else {
            emit('divideSuccess', addEditForm.value.reviewers)
            closePage()
        }
    })
}

// ==================== 评审分配相关 ====================
const reviewerOptions = ref<ReviewerOption[]>([
    {
        value: 'dept1',
        label: '质量部',
        children: [
            { value: 'user1', label: '张三' },
            { value: 'user2', label: '李四' },
            { value: 'user3', label: '王五' }
        ]
    },
    {
        value: 'dept2',
        label: '技术部',
        children: [
            { value: 'user4', label: '赵六' },
            { value: 'user5', label: '钱七' },
            { value: 'user6', label: '孙八' }
        ]
    }
])

const cascaderProps = {
    emitPath: false,
    value: 'value',
    label: 'label',
    children: 'children'
}

const emit = defineEmits(['update:isShowAdd', 'divideSuccess'])

onMounted(() => {})

const openPage = () => {
    // loadData()
}

const closePage = () => {
    addEditFormRef.value?.resetFields()
    dialogVisible.value = false
}

defineExpose({
    openPage
})

// 3. 使用 computed 定义双向绑定
const dialogVisible = computed({
    get() {
        return props.isShowAdd
    },
    set(val) {
        emit('update:isShowAdd', false)
    }
})
</script>

<style lang="scss" scoped>
.table-container {
    max-height: 65vh;
    overflow-y: auto;
    padding-bottom: 1px;
    margin-bottom: 20px;
}

.review-actions {
    display: flex;
    padding: 10px 0 10px 10px;
}
</style>
