<template>
    <ele-modal v-model="visible" title="查看详情" width="1000px">
        <el-table :data="tableData" border stripe>
            <el-table-column prop="subTaskId" label="任务ID" width="100" />
            <el-table-column prop="handler" label="处理人" />
            <el-table-column prop="quantity" label="任务数量" />
            <el-table-column prop="completedQuantity" label="已完成数量" />
            <el-table-column prop="progress" label="完成进度" />
            <el-table-column
                prop="scheduledTime"
                label="计划完成时间"
                width="120"
            />
            <el-table-column
                prop="completionTime"
                label="完成时间"
                width="160"
            />
            <el-table-column label="操作" width="100" fixed="right">
                <template #default="{ row }">
                    <el-popconfirm
                        title="确定要撤销任务吗？撤销后无法重启！"
                        @confirm="handleRevoke(row)"
                    >
                        <template #reference>
                            <el-button link type="primary">
                                [撤销任务]
                                <el-icon class="el-icon--right"
                                    ><Lightning
                                /></el-icon>
                            </el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <template #footer>
            <el-button type="primary" @click="visible = false">关闭</el-button>
        </template>
    </ele-modal>
</template>

<script setup>
    import { ref } from 'vue';
    import { Lightning } from '@element-plus/icons-vue';
    import { ElMessage } from 'element-plus';

    const visible = ref(false);
    const tableData = ref([]);

    const handleOpen = (row) => {
        // Mock data based on row
        tableData.value = [
            {
                subTaskId: '565632',
                handler: 'zzz',
                quantity: 500,
                completedQuantity: 300,
                progress: '60%',
                scheduledTime: '2025-06-15',
                completionTime: ''
            },
            {
                subTaskId: '565632',
                handler: 'zzz',
                quantity: 500,
                completedQuantity: 300,
                progress: '60%',
                scheduledTime: '2025-06-15',
                completionTime: ''
            },
            {
                subTaskId: '565632',
                handler: 'zzz',
                quantity: 500,
                completedQuantity: 500,
                progress: '100%',
                scheduledTime: '2025-06-15',
                completionTime: '2025-06-15 15:00:00'
            }
        ];
        visible.value = true;
    };

    const handleRevoke = (row) => {
        // Logic to revoke sub-task
        ElMessage.success('撤销成功');
    };

    defineExpose({ handleOpen });
</script>
