<script setup lang="ts">

import {
    Card,
    CardContent,
    CardHeader,
    CardTitle,
    VbenIcon,
    VbenPopover
} from '../../../../../packages/@core/ui-kit/shadcn-ui';
import type { Order } from '#/model/type';
import { computed, toRefs } from 'vue';
interface Props {
    items: Order[];
    title: string;
}
import { Tag } from 'ant-design-vue';
defineOptions({
    name: 'WorkbenchProject',
});

const props = withDefaults(defineProps<Props>(), {
    items: () => [],
});
const { items, title } = toRefs(props);
function getTagColor(diff: number): string {
    if (diff === 1) {
        return 'green';
    } else if (diff === 2) {
        return 'blue';
    } else if (diff === 3) {
        return 'red';
    } else if (diff === 0) {
        return 'gray';
    }
    return 'red';
}
const orderTypeMeta: Record<number, { name: string; desc: string }> = {
    1: { name: '普通订单', desc: '自动生成的基础订单。' },
    2: { name: '额外订单(弃用)', desc: '历史类型，当前已弃用。' },
    3: { name: '超级订单', desc: '奖励更高，难度更大的订单类型。' },
    4: { name: '预热订单', desc: '新获得发射器生成的特殊订单，订单内容和奖励固定' },
    5: { name: '触发订单', desc: '由特定事件或条件触发生成。' },
    6: { name: '退役发射器清理订单', desc: '用于清理退役发射器相关棋子。' },
    7: { name: '清理无法生成订单的棋子', desc: '处理异常或失效的棋子。' },
    8: { name: '棋盘空格不足清理订单', desc: '当空间不足时清理低优先级棋子。' },
    9: { name: '安慰订单', desc: '与安慰或情绪相关的特殊订单。' },
    10: { name: '引导订单', desc: '用于新手或阶段引导流程。' },
    11: { name: '消耗品订单', desc: '与宠物系统相关的订单。' },
    12: { name: '预览订单', desc: '提前展示后续内容的预览类订单。' },
    13: { name: '预设订单', desc: '新手过程从配置中生成的订单！' },
    14: { name: 'Playroom装饰物订单', desc: '生成与Playroom装饰物相关的订单。' },
    15: { name: '零件订单', desc: '用于收集或合成零件的订单。' },
};
const popoverTypes = computed(() => {
    const types = new Set<number>();
    (items.value || []).forEach(it => {
        const t = Number((it as any).group);
        if (!isNaN(t)) types.add(t);
    });
    return Array.from(types.values()).sort((a, b) => a - b).map(id => ({
        id,
        ...orderTypeMeta[id],
    }));
});


defineEmits(['click']);
</script>

<template>
    <Card>
        <CardHeader class="py-4">
            <CardTitle class="text-lg">
                <div class="flex">
                    <span class="text-center">{{ title }}</span>

                    <VbenPopover class="ml-2" :content-props="{ side: 'left' }">

                        <template #trigger>
                            <VbenIcon icon="solar:question-circle-bold" class="ml-2" />
                        </template>
                        <div class="max-w-xs text-sm">
                            <h3 class="font-semibold mb-2">订单类型说明</h3>
                            <ul v-if="popoverTypes.length" class="list-disc pl-5 space-y-1">
                                <li v-for="t in popoverTypes" :key="t.id">
                                    <b>{{ t.name }}</b>：{{ t.desc }}
                                </li>
                            </ul>
                            <div v-else class="text-xs text-gray-500">暂无订单类型数据</div>
                            <h3 class="font-semibold mt-4 mb-2">订单难度说明</h3>
                            <ul>
                                <li><b>简单：</b>订单总消耗体力在15-150之间</li>
                                <li><b>中等：</b>订单总消耗体力在100-600之间</li>
                                <li><b>困难：</b>订单总消耗体力在500-1200之间</li>
                                <li><b>零件订单：</b>订单总消耗体力在40-400之间</li>
                                <li><b>消耗品订单：</b>订单总消耗体力在40-200之间</li>
                            </ul>
                        </div>
                    </VbenPopover>
                </div>
            </CardTitle>
        </CardHeader>
        <CardContent class="flex flex-wrap p-0">
            <template v-for="(item, index) in items" :key="item.title">
                <div :class="{
                    'border-r-0': index % 3 === 2,
                    'border-b-0': !((Math.floor(index / 3) === Math.floor(items.length / 3 - 1)) && (index + 3 >= items.length)),
                    'pb-4': index > 2,
                }"
                    class="border-border group w-full cursor-pointer border-b border-r border-t p-4 transition-all hover:shadow-xl md:w-1/2 lg:w-1/3">
                    <div class="flex items-center">
                        <VbenIcon :color="item.color" :icon="item.icon"
                            class="size-8 transition-all duration-300 group-hover:scale-110" />
                        <span class="ml-2 text-lg font-medium">{{ item.id }}</span>
                        <tag class="ml-2 text-sm" :color="getTagColor(item.diff)">{{ item.diffName }}</tag>
                    </div>
                    <div class="text-foreground/80 mt-4  h-12 ">
                        <div v-if="item.merge && item.merge.length > 0" class="flex flex-wrap gap-1">
                            <img v-for="mergeItem in item.merge" :key="mergeItem.Icon"
                                :src="`${mergeItem.Icon}`" class="inline-block h-6 w-6 rounded"
                                :alt="mergeItem.Icon" :title="mergeItem.Id" />
                        </div>
                        <span v-else>{{ item.content }}</span>
                    </div>
                    <div class="text-foreground/80 flex justify-between">
                        <span class="text-sm font-semibold">{{ item.typeName }}</span>
                        <span class="text-sm">{{ item.date }}</span>
                    </div>
                </div>
            </template>
        </CardContent>
    </Card>
</template>
