<template>
  <div class="order-detail">
    <a-page-header @back="$router.go(-1)" :content="$t('orders.orderDetail')">
      <template #extra>
      <a-space>
          <a-button v-if="order?.canPay()" type="primary" @click="handlePayment">
            <CreditCardOutlined />
            {{ $t('subscription.subscribe') }}
          </a-button>
          <a-button v-if="order?.canCancel()" danger @click="handleCancel">
            <CloseOutlined />
            {{ $t('common.cancel') }}
          </a-button>
        </a-space>
      </template>
    </a-page-header>

    <a-card v-if="order" class="order-card">
      <template #header>
        <div class="order-header">
          <h3>{{ $t('orders.basicInfo') }}</h3>
          <a-tag :type="getStatusType(order.status)">
            {{ getStatusText(order.status) }}
          </a-tag>
        </div>
      </template>

      <a-descriptions :column="2" border>
        <a-descriptions-item :label="$t('orders.orderNumber')">{{ order.orderNumber }}</a-descriptions-item>
        <a-descriptions-item :label="$t('orders.orderType')">{{ getOrderTypeText(order.orderType) }}</a-descriptions-item>
        <a-descriptions-item :label="$t('orders.amount')">
          <span class="amount">{{ order.currency }} {{ order.totalAmount }}</span>
        </a-descriptions-item>
        <a-descriptions-item :label="$t('orders.createTime')">{{ formatDate(order.createdAt) }}</a-descriptions-item>
        <a-descriptions-item :label="$t('orders.email')" v-if="order.contactEmail">{{ order.contactEmail }}</a-descriptions-item>
        <a-descriptions-item :label="$t('orders.phone')" v-if="order.contactPhone">{{ order.contactPhone }}</a-descriptions-item>
      </a-descriptions>

      <div v-if="order.description" class="order-description">
        <h4>{{ $t('orders.description') }}</h4>
        <p>{{ order.description }}</p>
      </div>

      <div v-if="order.orderItems && order.orderItems.length > 0" class="order-items">
        <h4>{{ $t('orderCreate.virtualProductsLabel') }}</h4>
        <a-table :data="order.orderItems" border>
          <a-table-column prop="productName" :label="$t('orderCreate.productNamePlaceholder').split('（')[0]" />
          <a-table-column prop="unitPrice" :label="$t('orderCreate.unitPricePlaceholder')" width="120">
            <template #default="{ row }">
              {{ order.currency }} {{ row.unitPrice }}
            </template>
          </a-table-column>
          <a-table-column prop="quantity" :label="$t('orderCreate.quantityPlaceholder')" width="80" />
          <a-table-column prop="subtotal" :label="$t('orderCreate.subtotalPlaceholder')" width="120">
            <template #default="{ row }">
              {{ order.currency }} {{ row.subtotal }}
            </template>
          </a-table-column>
        </a-table>
      </div>
    </a-card>

    <a-empty v-else :description="$t('orders.orderNotFound')" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useOrderStore } from '@/stores/orders'
import { message } from 'ant-design-vue'
import { useI18n } from 'vue-i18n'
import {
  CheckOutlined,
  CloseOutlined,
  DollarOutlined,
  CreditCardOutlined,
  UserOutlined
} from '@ant-design/icons-vue'

const { t } = useI18n()
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': t('orderStatus.pending'),
    'CONFIRMED': t('orderStatus.confirmed'),
    'PAID': t('orderStatus.paid'),
    'PROCESSING': t('orderStatus.processing'),
    'SHIPPED': t('orderStatus.shipped'),
    'DELIVERED': t('orderStatus.delivered'),
    'COMPLETED': t('orderStatus.completed'),
    'CANCELLED': t('orderStatus.cancelled'),
    'REFUNDED': t('orderStatus.refunded')
  }
  return statusMap[status] || status
}

// 获取订单类型文本
const getOrderTypeText = (orderType) => {
  const typeMap = {
    'PRODUCT': t('orderType.product'),
    'SERVICE': t('orderType.service'),
    'SUBSCRIPTION': t('orderType.subscription'),
    'DIGITAL': t('orderType.digital'),
    'PHYSICAL': t('orderType.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 = () => {
  message.info(t('common.paymentFeatureInDev'))
}

// 处理取消
const handleCancel = () => {
  message.info(t('common.cancelOrderFeatureInDev'))
}

onMounted(async () => {
  const orderId = route.params.id
  if (orderId) {
    const response = await orderStore.fetchOrderById(orderId)
    if (response.success) {
      order.value = orderStore.currentOrder
    } else {
      message.error(response.message || t('common.updateFailed'))
    }
  }
})
</script>

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

.order-card {
  margin-top: var(--space-5);
}

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

.order-header h3 {
  margin: 0;
}

.amount {
  font-weight: var(--font-semibold);
  color: var(--warning-500);
}

.order-description,
.order-items {
  margin-top: var(--space-5);
}

.order-description h4,
.order-items h4 {
  margin-bottom: var(--space-3);
  color: var(--text-primary);
}
</style>












