<template>
    <Dialog v-model="visible" bg-color="#fff" width="900">
        <div class="bg-fff round-12 hidden">
            <div class="dialog-header h-64 px-26 flex-items-center">
                <span class="color-main fs-18 mr-10">⊙</span>
                <span class="fs-16 font-bold color-000">任务详情列表 - {{ departmentName }}</span>
            </div>

            <div class="px-26 pt-16 pb-26">
                <SeTable :data-list="detailRows" class="detail-table" :total="detailRows.length" :default-page-size="10" row-key="id">
                    <el-table-column prop="id" label="任务编号" min-width="130" />
                    <el-table-column prop="name" label="任务名称" min-width="170">
                        <template #default="{ row }">
                            <span class="color-main">{{ row.name }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="target" label="目标出片" width="80" align="center" />
                    <el-table-column prop="finished" label="实际完成" width="80" align="center">
                        <template #default="{ row }">
                            <span class="color-green">{{ row.finished }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="状态" width="90" align="center">
                        <template #default="{ row }">
                            <span class="status-tag px-8 py-4 round-4" :class="row.status === '已达标' ? 'success' : 'pending'">
                                {{ row.status }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="time" label="时间" width="200" align="center" />
                </SeTable>

                <div class="flex justify-end mt-26">
                    <el-button type="primary" class="w-64" @click="visible = false">关闭</el-button>
                </div>
            </div>
        </div>
    </Dialog>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import Dialog from '@/components/Dialog/index.vue';

const visible = defineModel<boolean>('visible', { required: true });
const props = defineProps<{
    department?: string;
}>();

const departmentName = computed(() => props.department || '部门');
const detailRows = computed(() => [
    { id: 'TSK_20250410_01', name: '美妆搜索对比视频批量制作', target: 20, finished: 20, status: '已达标', time: '2025-04-07 10:15' },
    { id: 'TSK_20250415_02', name: '痛点拆解口播卡点视频', target: 15, finished: 8, status: '待完成', time: '2025-04-12 16:30' },
]);
</script>

<style scoped lang="scss">
.dialog-header {
    border-bottom: 1px solid #edf0f5;
}

.detail-table {
    border: 1px solid #dfe7f2;
    border-radius: 8px;
    overflow: hidden;

    :deep(.el-table__header th) {
        background: #f8fbff;
        color: #48607f;
        font-weight: 700;
    }
}

.color-green {
    color: #00a86b;
}

.status-tag {
    display: inline-block;
    line-height: 18px;

    &.success {
        color: #00a86b;
        background: #e9fbf3;
    }

    &.pending {
        color: #246bfe;
        background: #eef4ff;
    }
}
</style>
