<template>
  <div class="table-wrap">
    <table class="table">
      <thead>
        <tr>
          <th>商品</th>
          <th>价格</th>
          <th class="col-num">库存</th>
          <th class="col-num">浏览量</th>
          <th>状态</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in products" :key="item.id" :class="{ 'row-inactive': !item.active }">
          <td>
            <div class="admin-product-cell">
              <img class="admin-product-thumb" :src="item.coverUrl" :alt="item.name" />
              <div class="admin-product-info">
                <span class="product-name">{{ item.name }}</span>
                <span class="product-id">{{ item.id }}</span>
              </div>
            </div>
          </td>
          <td>
            <div v-if="item.price === 0" class="price-cell">
              <span class="price-free">免费</span>
            </div>
            <div
              v-else-if="item.discountPrice > 0 && item.discountPrice < item.price"
              class="price-cell"
            >
              <span class="price-original">¥{{ item.price.toFixed(2) }}</span>
              <span class="price-discount">¥{{ item.discountPrice.toFixed(2) }}</span>
            </div>
            <span v-else class="price-normal">¥{{ item.price.toFixed(2) }}</span>
          </td>
          <td class="col-num">
            <span :class="['stock-badge', item.quantity === 0 ? 'stock-empty' : 'stock-ok']">
              {{ item.quantity }}
            </span>
          </td>
          <td class="col-num">
            <span class="view-count">{{ item.viewCount || 0 }}</span>
          </td>
          <td>
            <span :class="['status-badge', item.active ? 'status-on' : 'status-off']">
              {{ item.active ? '上架' : '下架' }}
            </span>
          </td>
          <td>
            <div class="row-actions">
              <button class="act-edit" @click="$emit('edit', item)">编辑</button>
              <button class="act-toggle" @click="$emit('toggle', item)">
                {{ item.active ? '下架' : '上架' }}
              </button>
              <button class="act-delete" @click="$emit('remove', item)">删除</button>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
defineProps({
  products: { type: Array, default: () => [] }
})

defineEmits(['edit', 'toggle', 'remove'])
</script>

<style scoped>
.table-wrap {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
}

.table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(255, 255, 255, 0.45);
}

.table thead tr {
  background: rgba(255, 255, 255, 0.7);
  border-bottom: 2px solid var(--line);
}

.table th {
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
}

.table td {
  padding: 14px 16px;
  font-size: 16px;
  vertical-align: middle;
}

.table tbody tr {
  border-bottom: 1px solid var(--line);
  transition: background 0.15s ease;
}

.table tbody tr:last-child {
  border-bottom: none;
}

.table tbody tr:hover {
  background: rgba(255, 255, 255, 0.7);
}

.table tbody tr.row-inactive {
  opacity: 0.55;
}

.col-num {
  text-align: center;
}

.admin-product-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-product-thumb {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid var(--line);
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(33, 33, 40, 0.1);
}

.admin-product-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.product-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.product-id {
  font-size: 13px;
  color: var(--muted);
  font-family: monospace;
}

.price-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.price-original {
  text-decoration: line-through;
  color: var(--muted);
  font-size: 14px;
}

.price-discount {
  font-weight: 700;
  color: #e8826a;
  font-size: 17px;
}

.price-free {
  font-weight: 900;
  color: #3a9a68;
  font-size: 17px;
}

.price-normal {
  font-weight: 600;
  color: var(--text);
}

.stock-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
}

.stock-ok {
  background: rgba(100, 185, 140, 0.15);
  color: #3a9a68;
}

.stock-empty {
  background: rgba(201, 90, 106, 0.12);
  color: #c95a6a;
}

.view-count {
  color: var(--muted);
  font-size: 15px;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.status-on {
  background: rgba(100, 185, 140, 0.15);
  color: #3a9a68;
}

.status-off {
  background: rgba(140, 140, 145, 0.12);
  color: var(--muted);
}

.row-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.act-edit,
.act-toggle,
.act-delete {
  padding: 6px 12px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
  font-family: 'KaiTi', 'STKaiti', '楷体', '楷体_GB2312', serif;
}

.act-edit {
  background: rgba(145, 168, 208, 0.15);
  color: var(--accent-2);
}

.act-edit:hover {
  background: rgba(145, 168, 208, 0.28);
}

.act-toggle {
  background: rgba(180, 154, 203, 0.12);
  color: var(--accent);
}

.act-toggle:hover {
  background: rgba(180, 154, 203, 0.24);
}

.act-delete {
  background: rgba(201, 90, 106, 0.1);
  color: #c95a6a;
}

.act-delete:hover {
  background: rgba(201, 90, 106, 0.2);
}

@media (max-width: 900px) {
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table {
    min-width: 580px;
  }

  .table th,
  .table td {
    padding: 8px 10px;
    font-size: 13px;
  }

  .admin-product-thumb {
    width: 36px;
    height: 36px;
  }

  .product-name {
    font-size: 13px;
  }

  .product-id {
    font-size: 11px;
  }

  .act-edit,
  .act-toggle,
  .act-delete {
    padding: 4px 8px;
    font-size: 12px;
  }
}
</style>
