<template>
  <div class="mt-7 max-md:mt-3">
    <div class="flex items-baseline gap-3 mb-3">
      <h3 class="text-lg font-bold text-apptext">下单记录</h3>
      <p class="tag">共 {{ orders.length }} 条订单（含未登录用户）</p>
    </div>

    <div v-if="orders.length === 0" class="py-5 text-center text-muted text-sm">暂无订单记录</div>

    <div v-else class="rounded-lg overflow-hidden border border-white/35">
      <!-- Pagination -->
      <div v-if="totalPages > 1" class="flex items-center gap-3 px-3.5 py-2.5 border-b border-white/35 bg-white/70 max-md:gap-2 max-md:px-2.5">
        <button
          class="px-3 py-1 rounded border border-white/35 bg-white/80 text-base cursor-pointer text-apptext disabled:opacity-35 disabled:cursor-default hover:not-disabled:bg-[rgba(124,106,240,0.1)] transition leading-none"
          style="font-family: var(--font-serif);"
          :disabled="currentPage === 1" @click="currentPage--"
        >‹</button>
        <span class="text-[13px] text-muted max-md:text-xs">第 {{ currentPage }} / {{ totalPages }} 页（共 {{ orders.length }} 条）</span>
        <button
          class="px-3 py-1 rounded border border-white/35 bg-white/80 text-base cursor-pointer text-apptext disabled:opacity-35 disabled:cursor-default hover:not-disabled:bg-[rgba(124,106,240,0.1)] transition leading-none"
          style="font-family: var(--font-serif);"
          :disabled="currentPage === totalPages" @click="currentPage++"
        >›</button>
      </div>

      <div class="overflow-x-auto max-md:[webkit-overflow-scrolling:touch]">
        <table class="table bg-white/45 max-md:min-w-[560px]">
          <thead>
            <tr class="bg-white/70 border-b-2 border-white/35">
              <th class="text-[13px] font-semibold uppercase tracking-[0.5px] text-muted px-3.5 py-2.5 max-md:px-2 max-md:py-1.5 max-md:text-xs">商品</th>
              <th class="text-[13px] font-semibold uppercase tracking-[0.5px] text-muted px-3.5 py-2.5 max-md:px-2 max-md:py-1.5 max-md:text-xs">用户</th>
              <th class="text-[13px] font-semibold uppercase tracking-[0.5px] text-muted px-3.5 py-2.5 text-center max-md:px-2 max-md:py-1.5 max-md:text-xs">数量</th>
              <th class="text-[13px] font-semibold uppercase tracking-[0.5px] text-muted px-3.5 py-2.5 max-md:px-2 max-md:py-1.5 max-md:text-xs">发货</th>
              <th class="text-[13px] font-semibold uppercase tracking-[0.5px] text-muted px-3.5 py-2.5 max-md:px-2 max-md:py-1.5 max-md:text-xs">状态</th>
              <th class="text-[13px] font-semibold uppercase tracking-[0.5px] text-muted px-3.5 py-2.5 max-md:hidden">下单时间</th>
              <th class="w-10 text-center px-3.5 py-2.5"></th>
            </tr>
          </thead>
          <tbody>
            <template v-for="order in pagedOrders" :key="order.id">
              <tr
                class="border-b border-white/35 last:border-b-0 transition-colors hover:bg-white/70"
                :class="{ 'opacity-70': order.status === 'pending' }"
              >
                <td class="px-3.5 py-3 text-[15px] align-middle max-md:px-2 max-md:py-1.5 max-md:text-xs">
                  <div class="flex flex-col gap-0.5">
                    <span class="font-semibold text-apptext text-[15px] max-md:text-xs">{{ order.productName }}</span>
                    <span class="text-xs text-muted font-mono">{{ order.id }}</span>
                  </div>
                </td>
                <td class="px-3.5 py-3 text-[15px] align-middle max-md:px-2 max-md:py-1.5 max-md:text-xs">
                  <div v-if="order.userAccount" class="flex flex-col gap-0.5">
                    <span class="font-semibold text-apptext max-md:text-xs">{{ order.userName || order.userAccount }}</span>
                    <span class="text-xs text-muted">{{ order.userAccount }}</span>
                  </div>
                  <span v-else class="px-2.5 py-0.5 rounded-full bg-[rgba(140,140,145,0.12)] text-muted text-[13px]">匿名</span>
                </td>
                <td class="px-3.5 py-3 text-center align-middle max-md:px-2 max-md:py-1.5 max-md:text-xs">{{ order.quantity }}</td>
                <td class="px-3.5 py-3 align-middle max-md:px-2 max-md:py-1.5">
                  <span
                    class="inline-block px-2 py-0.5 rounded-full text-xs font-semibold"
                    :class="order.deliveryMode === 'manual' ? 'bg-[rgba(90,120,200,0.12)] text-[#5a78c8]' : 'bg-[rgba(100,185,140,0.12)] text-[#3a9a68]'"
                  >{{ order.deliveryMode === 'manual' ? '手动' : '自动' }}</span>
                </td>
                <td class="px-3.5 py-3 align-middle max-md:px-2 max-md:py-1.5">
                  <span
                    class="inline-block px-2.5 py-0.5 rounded-full text-[13px] font-semibold"
                    :class="order.status === 'completed' ? 'bg-[rgba(100,185,140,0.15)] text-[#3a9a68]' : 'bg-[rgba(220,178,90,0.15)] text-[#b87e20]'"
                  >{{ order.status === 'completed' ? '已完成' : '待付款' }}</span>
                </td>
                <td class="px-3.5 py-3 text-[13px] text-muted whitespace-nowrap align-middle max-md:hidden">{{ formatTime(order.createdAt) }}</td>
                <td class="px-3.5 py-3 text-center align-middle">
                  <button
                    class="bg-transparent border-none text-muted text-[13px] cursor-pointer px-1.5 py-0.5 rounded leading-none hover:text-[#d64848] hover:bg-[rgba(214,72,72,0.1)] transition"
                    @click="remove(order.id)" title="删除此订单"
                  >✕</button>
                </td>
              </tr>
              <tr v-if="order.note || order.contactPhone || order.contactEmail" class="border-b border-white/35 last:border-b-0">
                <td colspan="7" class="px-3.5 pb-2.5 pt-1.5 bg-[rgba(250,250,255,0.5)] max-md:px-2">
                  <div class="flex flex-wrap gap-3 gap-x-5 text-[13px] text-apptext">
                    <span v-if="order.note" class="inline-flex gap-0.5"><span class="text-muted font-semibold">备注：</span>{{ order.note }}</span>
                    <span v-if="order.contactPhone" class="inline-flex gap-0.5"><span class="text-muted font-semibold">手机：</span>{{ order.contactPhone }}</span>
                    <span v-if="order.contactEmail" class="inline-flex gap-0.5"><span class="text-muted font-semibold">邮箱：</span>{{ order.contactEmail }}</span>
                  </div>
                </td>
              </tr>
            </template>
          </tbody>
        </table>
      </div>
    </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 '-'
  return new Date(iso).toLocaleString('zh-CN', { hour12: false })
}
</script>
