<script setup lang="ts">

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

withDefaults(defineProps<Props>(), {
    items: () => [],
});
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';
}
defineEmits(['click']);
</script>

<template>
    <Card>
        <CardHeader class="py-4">
            <CardTitle class="text-lg">{{ title }}</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"
                            @click="$emit('click', item)" />
                        <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="`../../../merge/${mergeItem.Icon}.png`" class="inline-block h-6 w-6 rounded"
                                :alt="mergeItem.Title" :title="mergeItem.Title" />
                        </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>
