<script setup lang="ts">

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

withDefaults(defineProps<Props>(), {
    items: () => [],
});
function getTagColor(diff: number): string {
    if (diff === 0) {
        return 'green';
    } else if (diff === 1) {
        return 'blue';
    } else if (diff === 2) {
        return 'red';
    } else if (diff === 3) {
        return 'red';
    }
    return 'red';
}
defineEmits(['click']);
</script>

<template>
    <Card>
        <CardHeader class="py-4 border-border border-b">
            <CardTitle class="text-lg">{{ title }}</CardTitle>
        </CardHeader>
        <CardContent class="flex flex-wrap p-0">
            <template v-for="(item, index) in [...items].sort((a, b) => a.Pos - b.Pos)" :key="index">
                <div class="border-border group cursor-pointer border-b border-r border-t p-0 transition-all hover:shadow-xl flex-none"
                    :style="{ width: '35px', height: '35px', backgroundColor: item.Lock > 0 ? 'gray' : '' }"
                    :id="index.toString()">
                    <img v-if="item.Icon" :src="`../../../public/merge/${item.Icon}.png`"
                        style="width:100%;height:100%;object-fit:contain;" />
                </div>
                <div v-if="(index + 1) % 7 === 0" class="w-full h-0" :id="(index + 1).toString()"></div>
            </template>
        </CardContent>
    </Card>
</template>
