<template>
  <div class="orders-section">
    <div class="orders-header">
      <h3>下单记录</h3>
      <p class="tag">共 {{ orders.length }} 条订单（含未登录用户）</p>
    </div>

    <div v-if="orders.length === 0" class="empty-tip tag">暂无订单记录</div>

    <div v-else class="table-wrap">
      <!-- Pagination toolbar (top) -->
      <div class="pagination-bar" v-if="totalPages > 1">
        <button class="page-btn" :disabled="currentPage === 1" @click="currentPage--">‹</button>
        <span class="page-info">第 {{ currentPage }} / {{ totalPages }} 页（共 {{ orders.length }} 条）</span>
        <button class="page-btn" :disabled="currentPage === totalPages" @click="currentPage++">›</button>
      </div>
      <table class="table">
        <thead>
          <tr>
            <th>商品</th>
            <th>用户</th>
            <th class="col-num">数量</th>
            <th>发货</th>
            <th>状态</th>
            <th>下单时间</th>
            <th class="col-action"></th>
          </tr>
        </thead>
        <tbody>
          <template v-for="order in pagedOrders" :key="order.id">
            <tr :class="{ 'row-pending': order.status === 'pending' }">
              <td>
                <div class="order-product">
                  <span class="order-product-name">{{ order.productName }}</span>
                  <span class="order-id">{{ order.id }}</span>
                </div>
              </td>
              <td>
                <div v-if="order.userAccount" class="user-info">
                  <span class="user-name">{{ order.userName || order.userAccount }}</span>
                  <span class="user-account">{{ order.userAccount }}</span>
                </div>
                <span v-else class="anon-badge">匿名</span>
              </td>
              <td class="col-num">{{ order.quantity }}</td>
              <td>
                <span :class="['delivery-badge', order.deliveryMode === 'manual' ? 'delivery-manual' : 'delivery-auto']">
                  {{ order.deliveryMode === 'manual' ? '手动' : '自动' }}
                </span>
              </td>
              <td>
                <span :class="['status-badge', order.status === 'completed' ? 'status-done' : 'status-wait']">
                  {{ order.status === 'completed' ? '已完成' : '待付款' }}
                </span>
              </td>
              <td class="col-time">{{ formatTime(order.createdAt) }}</td>
              <td class="col-action">
                <button class="del-btn" @click="remove(order.id)" title="删除此订单">✕</button>
              </td>
            </tr>
            <tr v-if="order.note || order.contactPhone || order.contactEmail" class="extra-row">
              <td colspan="7">
                <div class="extra-info">
                  <span v-if="order.note" class="extra-item">
                    <span class="extra-label">备注：</span>{{ order.note }}
                  </span>
                  <span v-if="order.contactPhone" class="extra-item">
                    <span class="extra-label">手机：</span>{{ order.contactPhone }}
                  </span>
                  <span v-if="order.contactEmail" class="extra-item">
                    <span class="extra-label">邮箱：</span>{{ order.contactEmail }}
                  </span>
                </div>
              </td>
            </tr>
          </template>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'

const props = defineProps({
  orders: { type: Array, default: () => [] }
})

const emit = defineEmits(['remove'])

const PAGE_SIZE = 10
const currentPage = ref(1)

const totalPages = computed(() => Math.max(1, Math.ceil(props.orders.length / PAGE_SIZE)))
const pagedOrders = computed(() => {
  const start = (currentPage.value - 1) * PAGE_SIZE
  return props.orders.slice(start, start + PAGE_SIZE)
})

// 订单列表变化时重置到第一页
watch(() => props.orders.length, () => { currentPage.value = 1 })

const remove = (id) => {
  if (confirm('确认删除此订单记录？此操作不可撤销。')) {
    emit('remove', id)
  }
}

const formatTime = (iso) => {
  if (!iso) return '-'
  const d = new Date(iso)
  return d.toLocaleString('zh-CN', { hour12: false })
}
</script>

<style scoped>
.orders-section {
  margin-top: 28px;
}

.orders-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}

.orders-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.empty-tip {
  padding: 20px 0;
  text-align: center;
  color: var(--muted);
}

.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: 11px 14px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
}

.table td {
  padding: 12px 14px;
  font-size: 15px;
  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-pending {
  opacity: 0.7;
}

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

.col-time {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}

.order-product {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

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

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

.user-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

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

.user-account {
  font-size: 12px;
  color: var(--muted);
}

.anon-badge {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(140, 140, 145, 0.12);
  color: var(--muted);
  font-size: 13px;
}

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

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

.status-wait {
  background: rgba(220, 178, 90, 0.15);
  color: #b87e20;
}

.delivery-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.delivery-auto {
  background: rgba(100, 185, 140, 0.12);
  color: #3a9a68;
}

.delivery-manual {
  background: rgba(90, 120, 200, 0.12);
  color: #5a78c8;
}

.extra-row td {
  padding: 6px 14px 10px;
  background: rgba(250, 250, 255, 0.5);
}

.extra-info {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  font-size: 13px;
  color: var(--text);
}

.extra-item {
  display: inline-flex;
  gap: 3px;
}

.extra-label {
  color: var(--muted);
  font-weight: 600;
}

.col-action {
  text-align: center;
  width: 40px;
}

.del-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 4px;
  line-height: 1;
  transition: color 0.15s, background 0.15s;
}

.del-btn:hover {
  color: #d64848;
  background: rgba(214, 72, 72, 0.1);
}

.tag {
  font-size: 14px;
  color: var(--muted);
}

.pagination-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.7);
}

.page-btn {
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
  transition: background 0.15s;
  line-height: 1;
}

.page-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.page-btn:not(:disabled):hover {
  background: rgba(124, 106, 240, 0.1);
}

.page-info {
  font-size: 13px;
  color: var(--muted);
}

@media (max-width: 900px) {
  .orders-section {
    margin-top: 12px;
  }

  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table {
    min-width: 560px;
  }

  .table th,
  .table td {
    padding: 7px 8px;
    font-size: 12px;
  }

  .col-time {
    display: none;
  }

  .pagination-bar {
    padding: 6px 10px;
    gap: 8px;
  }

  .page-info {
    font-size: 12px;
  }

  .page-btn {
    width: 28px;
    height: 28px;
    font-size: 16px;
  }
}
</style>
