<!-- 文件职责：看板列容器（标题 + 计数 + 滚动区）。 -->
<script setup lang="ts">
import type { BoardColumnKey } from '../types';

import type { OrderBoardCard } from '#/api/order-hall';

import { computed } from 'vue';

import BoardOrderCard from './BoardOrderCard.vue';

const {
  cards = [],
  colorClass = '',
  isLoading = false,
  columnKey,
  title = '',
} = defineProps<{
  cards?: OrderBoardCard[];
  colorClass?: string;
  columnKey: BoardColumnKey;
  isLoading?: boolean;
  title?: string;
}>();

const emit = defineEmits<{
  accept: [orderId: string];
  completePreparation: [orderId: string];
  confirmDelivery: [orderId: string];
  reject: [orderId: string];
}>();

const deliveryChannelCount = computed(
  () => cards.filter((item) => item.deliveryType === 2).length,
);

const shouldShowCount = computed(() => columnKey !== 'completed');

const countText = computed(() => {
  if (columnKey === 'delivering') {
    return `(${deliveryChannelCount.value}/${cards.length})`;
  }

  return String(cards.length);
});
</script>

<template>
  <div class="ob-column" :class="[colorClass]">
    <!-- 1. 列标题 -->
    <div class="ob-col-hd" :class="[colorClass]">
      <span>{{ title }}</span>
      <span
        v-if="shouldShowCount"
        class="ob-col-count"
        :class="`is-${columnKey}`"
      >
        {{ countText }}
      </span>
    </div>

    <!-- 2. 滚动区 -->
    <div class="ob-col-body">
      <a-spin :spinning="isLoading">
        <div
          v-if="cards.length === 0 && columnKey !== 'completed'"
          class="ob-column__empty"
        >
          暂无订单
        </div>
        <div
          v-if="cards.length === 0 && columnKey === 'completed'"
          class="ob-column__placeholder"
        ></div>
        <BoardOrderCard
          v-for="card in cards"
          :key="card.id"
          :card="card"
          :column-key="columnKey"
          @accept="emit('accept', $event)"
          @reject="emit('reject', $event)"
          @complete-preparation="emit('completePreparation', $event)"
          @confirm-delivery="emit('confirmDelivery', $event)"
        />
      </a-spin>
    </div>
  </div>
</template>
