<template>
  <div class="order-detail">
    <el-page-header @back="$router.go(-1)" content="订单详情">
      <template #extra>
        <el-button-group>
          <el-button v-if="order?.canPay()" type="success" @click="handlePayment">
            <el-icon><CreditCard /></el-icon>
            立即支付
          </el-button>
          <el-button v-if="order?.canCancel()" type="danger" @click="handleCancel">
            <el-icon><Close /></el-icon>
            取消订单
          </el-button>
        </el-button-group>
      </template>
    </el-page-header>

    <el-card v-if="order" class="order-card">
      <template #header>
        <div class="order-header">
          <h3>订单信息</h3>
          <el-tag :type="getStatusType(order.status)">
            {{ getStatusText(order.status) }}
          </el-tag>
        </div>
      </template>

      <el-descriptions :column="2" border>
        <el-descriptions-item label="订单号">{{ order.orderNumber }}</el-descriptions-item>
        <el-descriptions-item label="订单类型">{{ getOrderTypeText(order.orderType) }}</el-descriptions-item>
        <el-descriptions-item label="订单金额">
          <span class="amount">{{ order.currency }} {{ order.totalAmount }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ formatDate(order.createdAt) }}</el-descriptions-item>
        <el-descriptions-item label="联系邮箱" v-if="order.contactEmail">{{ order.contactEmail }}</el-descriptions-item>
        <el-descriptions-item label="联系电话" v-if="order.contactPhone">{{ order.contactPhone }}</el-descriptions-item>
      </el-descriptions>

      <div v-if="order.description" class="order-description">
        <h4>订单描述</h4>
        <p>{{ order.description }}</p>
      </div>

      <div v-if="order.orderItems && order.orderItems.length > 0" class="order-items">
        <h4>订单商品</h4>
        <el-table :data="order.orderItems" border>
          <el-table-column prop="productName" label="商品名称" />
          <el-table-column prop="unitPrice" label="单价" width="120">
            <template #default="{ row }">
              {{ order.currency }} {{ row.unitPrice }}
            </template>
          </el-table-column>
          <el-table-column prop="quantity" label="数量" width="80" />
          <el-table-column prop="subtotal" label="小计" width="120">
            <template #default="{ row }">
              {{ order.currency }} {{ row.subtotal }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <el-empty v-else description="订单不存在" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useOrderStore } from '@/stores/orders'
import { ElMessage } from 'element-plus'

const route = useRoute()
const orderStore = useOrderStore()

const order = ref(null)

// 获取状态类型
const getStatusType = (status) => {
  const statusMap = {
    'PENDING': 'warning',
    'CONFIRMED': 'info',
    'PAID': 'primary',
    'PROCESSING': '',
    'SHIPPED': 'success',
    'DELIVERED': 'success',
    'COMPLETED': 'success',
    'CANCELLED': 'danger',
    'REFUNDED': 'info'
  }
  return statusMap[status] || ''
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    'PENDING': '待支付',
    'CONFIRMED': '已确认',
    'PAID': '已支付',
    'PROCESSING': '处理中',
    'SHIPPED': '已发货',
    'DELIVERED': '已送达',
    'COMPLETED': '已完成',
    'CANCELLED': '已取消',
    'REFUNDED': '已退款'
  }
  return statusMap[status] || status
}

// 获取订单类型文本
const getOrderTypeText = (orderType) => {
  const typeMap = {
    'PRODUCT': '商品订单',
    'SERVICE': '服务订单',
    'SUBSCRIPTION': '订阅订单',
    'DIGITAL': '数字商品',
    'PHYSICAL': '实体商品'
  }
  return typeMap[orderType] || orderType
}

// 格式化日期
const formatDate = (dateString) => {
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 处理支付
const handlePayment = () => {
  ElMessage.info('支付功能开发中')
}

// 处理取消
const handleCancel = () => {
  ElMessage.info('取消订单功能开发中')
}

onMounted(async () => {
  const orderId = route.params.id
  if (orderId) {
    const response = await orderStore.fetchOrderById(orderId)
    if (response.success) {
      order.value = orderStore.currentOrder
    } else {
      ElMessage.error(response.message || '获取订单详情失败')
    }
  }
})
</script>

<style scoped>
.order-detail {
  max-width: 1200px;
  margin: 0 auto;
}

.order-card {
  margin-top: 20px;
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.order-header h3 {
  margin: 0;
}

.amount {
  font-weight: 600;
  color: #E6A23C;
}

.order-description,
.order-items {
  margin-top: 20px;
}

.order-description h4,
.order-items h4 {
  margin-bottom: 12px;
  color: #303133;
}
</style>









