<template>
    <ele-page flex-table>
        <!-- Search Bar -->
        <page-search @search="reload" />

        <!-- Stats Cards -->
        <div class="stats-container mb-4">
            <el-row :gutter="20">
                <el-col :span="6" v-for="(stat, index) in stats" :key="index">
                    <div class="stat-card">
                        <div class="stat-value">{{ stat.value }}</div>
                        <div class="stat-label">
                            {{ stat.label }}
                            <el-tooltip
                                v-if="stat.tooltip"
                                :content="stat.tooltip"
                                placement="top"
                            >
                                <el-icon class="ml-1">
                                    <QuestionFilled />
                                </el-icon>
                            </el-tooltip>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>

        <!-- Main Table -->
        <common-table ref="pageRef" :pageConfig="pageConfig" :columns="columns">
            <!-- Custom Columns -->
            <template #operator="{ row }">
                <span>
                    {{ row.operator }}
                    <el-tooltip content="谁生成的任务" placement="top">
                        <el-icon class="ml-1">
                            <QuestionFilled />
                        </el-icon>
                    </el-tooltip>
                </span>
            </template>

            <template #action="{ row }">
                <div class="action-buttons">
                    <el-button link type="primary" @click="handleAssign(row)">
                        [分配任务]
                        <el-icon class="el-icon--right">
                            <Lightning />
                        </el-icon>
                    </el-button>
                    <el-button link type="primary" @click="handleView(row)">
                        [查看详情]
                        <el-icon class="el-icon--right">
                            <Lightning />
                        </el-icon>
                    </el-button>
                    <el-popconfirm
                        title="确定要撤销任务吗？撤销后无法重启！"
                        @confirm="handleRevoke(row)"
                    >
                        <template #reference>
                            <span class="inline-block">
                                <el-tooltip
                                    content="只有待分配的任务可以撤销"
                                    placement="top"
                                    :disabled="row.status === '待分配'"
                                >
                                    <el-button
                                        link
                                        type="primary"
                                        :disabled="row.status !== '待分配'"
                                    >
                                        [撤销任务]
                                        <el-icon class="el-icon--right">
                                            <Lightning />
                                        </el-icon>
                                    </el-button>
                                </el-tooltip>
                            </span>
                        </template>
                    </el-popconfirm>
                    <el-button link type="primary" @click="handleLog(row)">
                        [操作日志]
                        <el-icon class="el-icon--right">
                            <Lightning />
                        </el-icon>
                    </el-button>
                </div>
            </template>
        </common-table>

        <!-- Dialogs -->
        <assign-dialog ref="assignDialogRef" @success="reload" />
        <details-dialog ref="detailsDialogRef" />
        <log-dialog ref="logDialogRef" />
    </ele-page>
</template>

<script setup>
    import { ref, reactive } from 'vue';
    import { QuestionFilled, Lightning } from '@element-plus/icons-vue';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';
    import PageSearch from './components/page-search.vue';
    import AssignDialog from './components/assign-dialog.vue';
    import DetailsDialog from './components/details-dialog.vue';
    import LogDialog from './components/log-dialog.vue';
    import { ElMessage } from 'element-plus';

    defineOptions({ name: 'TaskList' });

    // Stats Data
    const stats = ref([
        { label: '待分配任务', value: 56666 },
        { label: '待作业任务', value: 56666 },
        { label: '总任务进度', value: '60%', tooltip: '已完成的任务不计算在内' }
    ]);

    // Table Config
    const pageConfig = reactive({
        pageUrl: '/priceWorkbench/task/list', // Replace with actual API
        rowKey: 'id',
        mock: true // Enable mock if no backend
    });

    const columns = ref([
        { label: '任务编号', prop: 'taskNo', minWidth: 100 },
        { label: '任务数量', prop: 'quantity', minWidth: 100 },
        { label: '任务状态', prop: 'status', minWidth: 100 },
        {
            label: '任务描述',
            prop: 'description',
            minWidth: 200,
            showOverflowTooltip: true
        },
        { label: '任务生成时间', prop: 'createTime', minWidth: 160 },
        { label: '操作员', prop: 'operator', slot: 'operator', minWidth: 100 },
        { label: '操作', slot: 'action', fixed: 'right', width: 340 }
    ]);

    // Refs
    const pageRef = ref(null);
    const assignDialogRef = ref(null);
    const detailsDialogRef = ref(null);
    const logDialogRef = ref(null);

    // Actions
    const reload = (params) => pageRef.value?.reload(params);

    const handleAssign = (row) => {
        assignDialogRef.value?.handleOpen(row);
    };

    const handleView = (row) => {
        detailsDialogRef.value?.handleOpen(row);
    };

    const handleRevoke = (row) => {
        // API call to revoke
        ElMessage.success('撤销成功');
        reload();
    };

    const handleLog = (row) => {
        logDialogRef.value?.handleOpen(row);
    };
</script>

<style lang="scss" scoped>
    .stats-container {
        .stat-card {
            background-color: #f5f5f5;
            padding: 20px;
            text-align: center;
            border-radius: 4px;

            .stat-value {
                font-size: 24px;
                font-weight: bold;
                margin-bottom: 8px;
                color: #333;
            }

            .stat-label {
                color: #666;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    }

    .action-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;

        .el-button {
            margin-left: 0 !important;
        }
    }
</style>
