<template>
    <el-drawer v-model="drawerVisible" direction="rtl" size="388px" :with-header="false" :modal="false" class="history-drawer">
        <div class="task-drawer h-full flex-col bg-fff">
            <header class="drawer-header flex-between h-56 px-18">
                <div class="flex-items-center gap-8">
                    <el-icon class="fs-18 color-main">
                        <Refresh />
                    </el-icon>
                    <span class="fs-16 fw-700 color-000">任务队列</span>
                    <span class="count-tag h-20 lh-20 px-8 round-4 fs-12 color-888 fw-700">30</span>
                </div>
                <el-icon class="fs-18 color-888 pointer" @click="drawerVisible = false">
                    <Close />
                </el-icon>
            </header>

            <div class="task-stats flex h-58">
                <div v-for="item in taskStats" :key="item.label" class="stat-item flex-1 flex-col flex-center">
                    <span class="fs-12 color-888 lh-20">{{ item.label }}</span>
                    <span class="fs-12 fw-700" :class="item.valueClass">{{ item.value }}</span>
                </div>
            </div>

            <div class="task-tabs flex-items-center h-40 px-12">
                <div v-for="item in taskTabs" :key="item.value" class="task-tab h-40 lh-40 px-14 fs-14 fw-700 pointer"
                    :class="{ active: activeTaskTab === item.value }" @click="switchTaskTab(item.value)">
                    {{ item.label }}
                </div>
            </div>

            <div class="task-filter px-12 py-12">
                <div class="flex flex-wrap gap-8">
                    <span v-for="item in currentTaskFilters" :key="item.value"
                        class="filter-chip h-28 lh-28 px-12 round-6 fs-12 fw-700 pointer"
                        :class="{ active: activeTaskFilter === item.value }" @click="activeTaskFilter = item.value">
                        {{ item.label }}
                    </span>
                </div>
            </div>

            <section class="task-list flex-1 over-y-auto hide-scroll px-12 py-8">
                <template v-for="group in filteredTaskGroups" :key="group.date">
                    <div class="date-title fs-12 fw-700 color-888 mt-4 mb-8">{{ group.date }}</div>
                    <div v-for="item in group.items" :key="item.id" class="task-card bg-fff round-8 p-12 mb-12">
                        <div class="flex gap-12">
                            <img :src="item.cover" :alt="item.title" class="task-cover wh-64 round-6 cover" />
                            <div class="flex-1 hidden">
                                <div class="flex-between gap-8">
                                    <div class="fs-14 fw-700 color-000 lh-22 ellipsis">{{ item.title }}</div>
                                    <span class="status-tag h-24 lh-24 px-8 round-4 fs-12 fw-700"
                                        :class="item.statusClass">
                                        {{ item.status }}
                                    </span>
                                </div>
                                <div class="fs-10 color-888 lh-20">{{ item.type }}</div>
                                <div class="flex-between">
                                    <div class="fs-12 color-888">
                                        消耗积分 <span class="cost-value fw-700">{{ item.cost }}</span>
                                    </div>
                                    <span class="fs-10 color-888">{{ item.time }}</span>
                                </div>
                            </div>
                        </div>
                        <div v-if="item.progressText" class="progress-box mt-12 p-10 round-6">
                            <div class="flex-between fs-10 color-888 mb-8">
                                <span class="flex-items-center gap-4">
                                    <el-icon>
                                        <Clock />
                                    </el-icon>
                                    {{ item.progressText }}
                                </span>
                                <span>{{ item.progress }}%</span>
                            </div>
                            <el-progress :percentage="item.progress" :show-text="false" :stroke-width="5" />
                        </div>
                        <div class="task-card-footer flex justify-end gap-8 mt-12 pt-12">
                            <el-button v-if="item.canCancel" class="h-28 px-12 fs-12">
                                <el-icon>
                                    <Close />
                                </el-icon>
                                <span>取消任务</span>
                            </el-button>
                            <el-button type="primary" class="h-28 px-12 fs-12 border-none enter-btn">
                                <el-icon>
                                    <View />
                                </el-icon>
                                <span>进入会话</span>
                            </el-button>
                        </div>
                    </div>
                </template>
            </section>

            <footer class="drawer-footer flex-center h-40 fs-12 color-888">
                <span v-if="activeTaskTab === 'recent'">
                    近期任务仅展示最近20条，更多请查看
                    <span class="color-main fw-700 pointer" @click="switchTaskTab('all')">全部任务</span>
                </span>
                <span v-else>共展示 {{ filteredTaskCount }} 个任务</span>
            </footer>
        </div>
    </el-drawer>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { Clock, Close, Refresh, View } from '@element-plus/icons-vue';
import productImg from '@/static/image/huaban.png';
import peopleImg from '@/static/image/meinv.png';

type TaskStatus = 'success' | 'queue' | 'failed';

type TaskItem = {
    id: string;
    title: string;
    type: string;
    category: string;
    date: string;
    time: string;
    cost: string;
    cover: string;
    status: string;
    statusClass: string;
    statusKey: TaskStatus;
    progress?: number;
    progressText?: string;
    canCancel?: boolean;
};

const props = defineProps<{
    modelValue: boolean;
}>();

const emit = defineEmits<{
    'update:modelValue': [value: boolean];
}>();

const drawerVisible = computed({
    get: () => props.modelValue,
    set: (value) => emit('update:modelValue', value),
});

const activeTaskTab = ref('recent');
const activeTaskFilter = ref('agent');

const taskTabs = [
    { label: '近期任务', value: 'recent' },
    { label: '全部任务', value: 'all' },
];
const recentTaskFilters = [
    { label: 'Agent创作', value: 'agent' },
    { label: '工具', value: 'tool' },
];
const allTaskFilters = [
    { label: '全部', value: 'all' },
    { label: 'Agent', value: 'agent' },
    { label: '快速创作', value: 'quick' },
    { label: '视频去水印', value: 'watermark' },
    { label: '字幕擦除', value: 'subtitle' },
    { label: '画质增强', value: 'quality' },
    { label: '数字人分身', value: 'digital' },
    { label: '模特换衣', value: 'tryOn' },
    { label: '爆款复制', value: 'copy' },
    { label: 'AI视频素材', value: 'videoMaterial' },
    { label: 'AI图片素材', value: 'imageMaterial' },
];
const taskStats = [
    { label: '排队中', value: 6, valueClass: 'color-333' },
    { label: '生成中', value: 1, valueClass: 'color-main' },
    { label: '生成失败', value: 2, valueClass: 'failed-text' },
];
const taskGroups = [
    {
        date: '9月1日',
        items: [
            {
                id: 'task-1',
                title: '流量',
                type: 'Agent创作',
                category: 'agent',
                date: '9月1日',
                time: '08:40',
                cost: '-0.00',
                cover: productImg,
                status: '生成成功',
                statusClass: 'success',
                statusKey: 'success',
            },
            {
                id: 'task-2',
                title: '防晒霜SPF50权威检测图',
                type: 'Agent创作',
                category: 'agent',
                date: '9月1日',
                time: '08:16',
                cost: '-15.00',
                cover: productImg,
                status: '生成成功',
                statusClass: 'success',
                statusKey: 'success',
            },
            {
                id: 'task-3',
                title: '看看卡萨斯',
                type: 'Agent创作',
                category: 'agent',
                date: '9月1日',
                time: '05:39',
                cost: '-5.00',
                cover: productImg,
                status: '生成成功',
                statusClass: 'success',
                statusKey: 'success',
            },
        ],
    },
    {
        date: '8月31日',
        items: [
            {
                id: 'task-4',
                title: '请结合使用已投放素材和原料库为我生成一个短视频广告',
                type: 'Agent创作',
                category: 'agent',
                date: '8月31日',
                time: '07:32',
                cost: '-0.00',
                cover: peopleImg,
                status: '生成成功',
                statusClass: 'success',
                statusKey: 'success',
            },
            {
                id: 'task-5',
                title: '用我的「商品」拍一条营销视频',
                type: 'Agent创作',
                category: 'agent',
                date: '8月31日',
                time: '07:31',
                cost: '-0.00',
                cover: productImg,
                status: '排队中',
                statusClass: 'queue',
                statusKey: 'queue',
                progress: 0,
                progressText: '等待计算资源',
                canCancel: true,
            },
            {
                id: 'task-6',
                title: '1',
                type: 'Agent创作',
                category: 'agent',
                date: '8月31日',
                time: '07:31',
                cost: '-0.00',
                cover: productImg,
                status: '生成成功',
                statusClass: 'success',
                statusKey: 'success',
            },
        ],
    },
] satisfies Array<{ date: string; items: TaskItem[] }>;

const currentTaskFilters = computed(() => (activeTaskTab.value === 'recent' ? recentTaskFilters : allTaskFilters));
const filteredTaskGroups = computed(() => {
    const filterValue = activeTaskFilter.value;
    return taskGroups
        .map((group) => ({
            ...group,
            items: group.items.filter((item) => filterValue === 'all' || item.category === filterValue),
        }))
        .filter((group) => group.items.length);
});
const filteredTaskCount = computed(() => filteredTaskGroups.value.reduce((total, group) => total + group.items.length, 0));

const switchTaskTab = (value: string) => {
    activeTaskTab.value = value;
    activeTaskFilter.value = value === 'recent' ? 'agent' : 'all';
};
</script>

<style scoped lang="scss">


.drawer-header {
    border-bottom: 1px solid #edf2f7;
}

.count-tag,
.progress-box {
    background: #f3f6fb;
}

.task-stats,
.drawer-footer {
    background: #f8fafc;
}

.stat-item + .stat-item {
    border-left: 1px solid #dce6f2;
}

.failed-text,
.cost-value {
    color: #ff5a00;
}

.task-tabs,
.task-filter,
.drawer-footer {
    border-top: 1px solid #edf2f7;
}

.task-tabs {
    border-bottom: 1px solid #edf2f7;
}

.task-tab {
    color: #536883;
    border-bottom: 2px solid transparent;

    &.active {
        color: rgba(var(--main-color), 1);
        border-bottom-color: rgba(var(--main-color), 1);
    }
}

.filter-chip {
    color: #536883;
    background: #f3f6fb;

    &.active {
        color: #fff;
        background: #17243a;
    }
}

.task-card {
    border: 1px solid #dce6f2;
    box-shadow: 0 2px 8px rgba(20, 38, 70, .06);
}

.task-cover {
    flex: 0 0 64px;
    background: #f3f6fb;
}

.status-tag.success {
    color: #00a86b;
    background: #e9fbf2;
}

.status-tag.queue {
    color: #536883;
    background: #f3f6fb;
}

.status-tag.failed {
    color: #ff5a00;
    background: #fff2e8;
}

.task-card-footer {
    border-top: 1px solid #edf2f7;
}

.enter-btn {
    background: #7d28ff;
}

:deep(.progress-box .el-progress-bar__outer) {
    background: #dce6f2;
}

:deep(.progress-box .el-progress-bar__inner) {
    background: #8aa0bf;
}
</style>
<style>
.history-drawer {
    width: 380px !important;
    box-shadow: 0 0 8px #bbb;
}

.history-drawer .el-drawer__body {
    padding: 0 !important;
}
</style>
