<script setup>
import OrderKanbanCard from '@/components/orders/OrderKanbanCard.vue';

const props = defineProps({
  orders: Array,
  statuses: Array,
});

const emit = defineEmits(['selectOrder', 'unselect']);
</script>

<template>
  <div class="p-5 fixed-grid has-4-cols">
    <div class="grid">
      <div
        v-for="status in statuses"
        :key="status.id"
        class="card"
        style="border: none"
      >
        <div class="card-content p-0 is-clipped">
          <div :class="['p-4 is-flex is-justify-content-space-between is-align-items-center', `has-background-${status.color}-90`]">
            <p class="font-semibold has-text-grey-10">{{ status.name }}</p>
            <p class="px-2 py-1 font-semibold rounded-lg has-background-white"
              :style="{ border: `1px solid var(--bulma-${status.color}-60)`}"
            >
              {{ orders.filter(o => o.status === status.id).length }}
            </p>
          </div>
          <hr class="m-0 has-background-grey-80" />
          <div class="has-background-grey-95 p-4">
            <OrderKanbanCard 
              v-if="orders.filter(o => o.status === status.id).length > 0"
              v-for="order in orders.filter(o => o.status === status.id)"
              :key="order.id"
              :order="order"
              @selectOrder="emit('selectOrder', order.id)"
              @unselect="emit('unselect')"
            />
            <p v-else class="fs-13 has-text-centered has-text-grey">
              Không có đơn hàng
            </p>
          </div>
        </div>
      </div>
    </div>
  </div> 
</template>
