<script setup lang="ts">
/**
 * 文件职责：加料组卡片。
 * 1. 展示加料组信息、选项表格与库存状态。
 * 2. 对外抛出编辑、关联商品、改名、移除等操作事件。
 */
import type { AddonGroupCardViewModel } from '../types';

const props = defineProps<{
  item: AddonGroupCardViewModel;
}>();

const emit = defineEmits<{
  bindProducts: [item: AddonGroupCardViewModel];
  disable: [item: AddonGroupCardViewModel];
  edit: [item: AddonGroupCardViewModel];
  enable: [item: AddonGroupCardViewModel];
  removeGroup: [item: AddonGroupCardViewModel];
  removeItem: [payload: { group: AddonGroupCardViewModel; itemId: string }];
  renameItem: [payload: { group: AddonGroupCardViewModel; itemId: string }];
}>();

function formatPrice(value: number) {
  return `+¥${value.toFixed(2)}`;
}

function getRuleText() {
  if (
    props.item.required &&
    props.item.minSelect === 1 &&
    props.item.maxSelect === 1
  ) {
    return '必须选1';
  }
  return `最少选${props.item.minSelect}，最多选${props.item.maxSelect}`;
}

function getStockText(stock: number) {
  return stock <= 20 ? `偏少（${stock}）` : `充足（${stock}）`;
}

function getStockClass(stock: number) {
  return stock <= 20 ? 'pad-stock-low' : 'pad-stock-ok';
}
</script>

<template>
  <div class="pad-card" :class="{ disabled: item.status === 'disabled' }">
    <div class="pad-card-header">
      <span class="pad-card-name">{{ item.name }}</span>
      <span
        class="g-tag"
        :class="
          item.status === 'disabled'
            ? 'pad-tag-disabled'
            : item.required
              ? 'pad-tag-required'
              : 'pad-tag-optional'
        "
      >
        {{
          item.status === 'disabled'
            ? '已停用'
            : item.required
              ? '必选'
              : '可选'
        }}
      </span>
      <span class="pad-rule">{{ getRuleText() }}</span>
    </div>

    <table class="pad-table">
      <thead>
        <tr>
          <th>选项名称</th>
          <th>加价</th>
          <th>库存</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="option in item.items" :key="option.id">
          <td>{{ option.name }}</td>
          <td>{{ formatPrice(option.price) }}</td>
          <td>
            <span :class="getStockClass(option.stock)">
              {{ getStockText(option.stock) }}
            </span>
          </td>
          <td>
            <button
              type="button"
              class="g-action"
              @click="emit('renameItem', { group: item, itemId: option.id })"
            >
              改名
            </button>
            <button
              type="button"
              class="g-action g-action-danger"
              @click="emit('removeItem', { group: item, itemId: option.id })"
            >
              移除
            </button>
          </td>
        </tr>
      </tbody>
    </table>

    <div class="pad-assoc">已关联 {{ item.productCount }} 个商品</div>

    <div class="pad-card-footer">
      <button type="button" class="g-action" @click="emit('edit', item)">
        编辑
      </button>
      <button
        v-if="item.status === 'enabled'"
        type="button"
        class="g-action"
        @click="emit('bindProducts', item)"
      >
        关联商品
      </button>
      <button
        v-if="item.status === 'disabled'"
        type="button"
        class="g-action"
        @click="emit('enable', item)"
      >
        启用
      </button>
      <button
        v-else
        type="button"
        class="g-action"
        @click="emit('disable', item)"
      >
        停用
      </button>
      <button
        type="button"
        class="g-action g-action-danger"
        @click="emit('removeGroup', item)"
      >
        删除
      </button>
    </div>
  </div>
</template>
