<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;
}

defineOptions({
    name: 'WorkbenchProject',
});

withDefaults(defineProps<Props>(), {
    items: () => [],
});

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

<template>
    <Card class="hover:shadow-lg">
        <CardHeader class="py-4  border-b">
            <CardTitle class="text-lg">{{ title }}</CardTitle>
        </CardHeader>
        <CardContent class="flex flex-wrap p-0" style="background-color: rgb(132, 86, 68);">
            <div class="flex flex-wrap items-center justify-center w-full h-full mt-1 mb-1">
            <template v-for="(item, index) in [...items].sort((a, b) => a.Pos - b.Pos)" :key="index">
                <div class=" group cursor-pointer border-b border-r border-t p-0 transition-all hover:shadow-xl flex-none"
                    :style="{ width: '35px', height: '35px', backgroundColor: index % 2 === 1 ? '#ced1ca' : '#dde0d7' }"
                    style="position: relative;" :id="index.toString()">
                    <img v-if="item.Icon" :src="`../../../merge/${item.Icon}.png`"
                        style="width:100%;height:100%;object-fit:contain;position: absolute;" />
                    <img v-if="item.Lock > 0" :src="`../../../merge/merge_bag.png`"
                        style="width:100%;height:100%;object-fit:contain;opacity: 0.7;" />
                </div>
                <div v-if="(index + 1) % 7 === 0" class="w-full h-0" :id="(index + 1).toString()"></div>
            </template>
            </div>
        </CardContent>
    </Card>
</template>
