<template>
  <a-card :bordered="false" class="content-card">
    <template #title>
      <a-space>
        <span>订单管理</span>
        <a-tag color="arcoblue">共 {{ orders.length }} 个订单</a-tag>
      </a-space>
    </template>
    <template #extra>
      <a-button @click="loadOrders">
        <template #icon><icon-refresh /></template>
        刷新
      </a-button>
    </template>
    <a-table :columns="orderColumns" :data="orders" :pagination="{ pageSize: 8 }" :bordered="false">
      <template #status="{ record }">
        <a-tag :color="getOrderStatusColor(record.status)">{{ getOrderStatusText(record.status) }}</a-tag>
      </template>
      <template #actions="{ record }">
        <a-space>
          <a-button size="mini" type="primary" shape="round" @click="ship(record.id)" v-if="record.status === 'PAID'">
            <template #icon><icon-send /></template>
            发货
          </a-button>
          <a-button size="mini" type="primary" shape="round" @click="refund(record.id, true)" v-if="record.status === 'REFUND_REQUESTED'">
            <template #icon><icon-check-circle /></template>
            同意退款
          </a-button>
          <a-button size="mini" shape="round" @click="openOrderLogistics(record.id)">
            <template #icon><icon-send /></template>
            物流
          </a-button>
        </a-space>
      </template>
    </a-table>
  </a-card>

  <a-modal v-model:visible="logisticsModalVisible" title="订单物流详情" :footer="null" width="600">
    <a-table :columns="logisticsColumns" :data="filteredLogistics" :pagination="false" :bordered="false" />
  </a-modal>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Message } from '@arco-design/web-vue'
import { api } from '../../api'
import { IconRefresh, IconSend, IconCheckCircle } from '@arco-design/web-vue/es/icon'

const orders = ref([])
const logistics = ref([])
const logisticsModalVisible = ref(false)
const filteredLogistics = ref([])

const orderColumns = [
  { title: '订单号', dataIndex: 'orderNo' },
  { title: '金额', dataIndex: 'totalAmount', render: ({ record }) => `¥${record.totalAmount}` },
  { title: '状态', slotName: 'status' },
  { title: '下单时间', dataIndex: 'createdAt', render: ({ record }) => formatDate(record.createdAt) },
  { title: '操作', slotName: 'actions', width: 200 }
]

const logisticsColumns = [
  { title: '订单号', dataIndex: 'orderNo' },
  { title: '状态', dataIndex: 'status' },
  { title: '备注', dataIndex: 'note' },
  { title: '时间', dataIndex: 'createdAt', width: 160 }
]

const formatDate = (date) => {
  if (!date) return '-'
  return new Date(date).toLocaleString('zh-CN')
}

const getOrderStatusColor = (status) => {
  const colors = { 'PENDING_PAYMENT': 'orange', 'PAID': 'blue', 'SHIPPED': 'cyan', 'COMPLETED': 'green', 'REFUND_REQUESTED': 'orange', 'REFUNDED': 'purple', 'CANCELLED': 'gray' }
  return colors[status] || 'gray'
}

const getOrderStatusText = (status) => {
  const texts = { 'PENDING_PAYMENT': '待支付', 'PAID': '已支付', 'SHIPPED': '已发货', 'COMPLETED': '已完成', 'REFUND_REQUESTED': '退款中', 'REFUNDED': '已退款', 'CANCELLED': '已取消' }
  return texts[status] || status
}

const loadOrders = async () => { orders.value = await api.merchantOrders() }
const loadLogistics = async () => { logistics.value = await api.merchantLogistics() }

const ship = async (id) => {
  await api.shipOrder(id, { note: '已发货，请注意查收' })
  Message.success('发货成功')
  await loadOrders()
}

const refund = async (id, agree) => {
  await api.merchantRefund(id, { agree })
  Message.success(agree ? '已同意退款' : '已拒绝退款')
  await loadOrders()
}

const openOrderLogistics = async (orderId) => {
  await loadLogistics()
  filteredLogistics.value = logistics.value.filter((l) => l.orderId === orderId)
  logisticsModalVisible.value = true
}

onMounted(() => {
  loadOrders()
})
</script>

<style scoped>
.content-card {
  border-radius: 12px;
}

:deep(.arco-btn-primary) {
  background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
  border-color: transparent;
}

:deep(.arco-card-header) {
  border-bottom: 1px solid #f0f0f0;
}
</style>
