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