<template>
    <super-dialog
        v-model="dialogVisible"
        :title="title"
        custom-class="notification-dialog"
        top="10%"
        :close-on-click-modal="false"
        width="60%"
        @closed="closePage"
    >
        <div
            v-loading="detailLoading"
            class="table-container"
            element-loading-background="rgba(10 ,38 ,61, 0.9)"
        >
            <el-table :data="tableData" border stripe>
                <el-table-column label="序号" type="index" width="80" align="center" />
                <el-table-column label="办理人" align="center" prop="ratingName" />
                <el-table-column label="评分状态" align="center" prop="isOpt">
                    <template v-slot="{row}">
                        <div v-if="row.isOpt==0">
                            未评分
                        </div>
                        <div v-if="row.isOpt==1">
                            评分中
                        </div>
                        <div v-if="row.isOpt==2">
                            已评分
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div slot="footer" style="display: flex; justify-content: center; width: 100%">
            <el-button @click="closePage">取消</el-button>
        </div>
    </super-dialog>
</template>

<script lang="ts" setup>
import SuperDialog from '@/components/Dialog/index.vue'
import { getEvaluationStatus } from '@/api/supplierMonitor/PerformanceManagement/PerformanceEvaluation'
import { close } from 'fs'
// 1. 定义 props
const props = defineProps({
    isShowAdd: {
        type: Boolean,
        default: false
    },
    title: {
        type: String,
        default: ''
    },
    info: {
        type: [String, Object],
        default: ''
    }
})
const tableData = ref<any[]>([])
// 监听父组件传入的ID
watch(
    () => props.info,
    (newInfo) => {
        if (newInfo && props.isShowAdd) {
            console.log('接收到的ID:', newInfo)
            // 在这里处理接收到的ID
            loadData(newInfo)
        }
    },
    { immediate: true }
)

const loadData = async (id: string) => {
    try {
        detailLoading.value = true
        const res = await getEvaluationStatus(id)
        tableData.value = res.value
    } catch (error) {
        console.log(error)
    } finally {
        detailLoading.value = false
    }
}

onMounted(() => {})

const detailLoading = ref<Boolean>(false)
// 2. 定义 emit
const emit = defineEmits(['update:isShowAdd', 'submit'])

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

const closePage = () => {
    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>
.move-type-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin: 0 0 20px 10px;
}
</style>
