<script setup lang="ts">
/**
 * 文件职责：标签列表表格。
 * 1. 展示标签预览、颜色、关联数与状态。
 * 2. 对外抛出编辑、启停、删除操作事件。
 */
import type { ProductLabelTableRowViewModel } from '../types';

import { normalizeLabelColor } from '../composables/labels-page/constants';

const props = defineProps<{
  rows: ProductLabelTableRowViewModel[];
}>();

const emit = defineEmits<{
  disable: [item: ProductLabelTableRowViewModel];
  edit: [item: ProductLabelTableRowViewModel];
  enable: [item: ProductLabelTableRowViewModel];
  remove: [item: ProductLabelTableRowViewModel];
}>();

function getColor(value: string) {
  return normalizeLabelColor(value);
}
</script>

<template>
  <table class="plbl-table">
    <thead>
      <tr>
        <th>标签预览</th>
        <th>标签名称</th>
        <th>颜色</th>
        <th>已关联商品</th>
        <th>状态</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr
        v-for="item in props.rows"
        :key="item.id"
        :class="{ disabled: item.status === 'disabled' }"
      >
        <td>
          <span class="plbl-pill" :style="{ background: getColor(item.color) }">
            {{ item.name }}
          </span>
        </td>
        <td>{{ item.name }}</td>
        <td>
          <span
            class="plbl-color-dot"
            :style="{ background: getColor(item.color) }"
          ></span>
          {{ getColor(item.color) }}
        </td>
        <td>{{ item.productCount }}个商品</td>
        <td>
          <span
            class="plbl-status"
            :class="
              item.status === 'enabled' ? 'plbl-status-on' : 'plbl-status-off'
            "
          >
            <span class="plbl-status-dot"></span>
            {{ item.status === 'enabled' ? '启用' : '停用' }}
          </span>
        </td>
        <td>
          <button type="button" class="g-action" @click="emit('edit', 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('remove', item)"
          >
            删除
          </button>
        </td>
      </tr>
    </tbody>
  </table>
</template>
