<template>
  <a-modal
    :visible="visible"
    title="订单详情"
    width="800px"
    :footer="false"
    @cancel="handleCancel"
  >
    <div v-if="orderData" class="order-detail">
      <a-descriptions :column="2" :label-style="{ width: '120px' }" bordered>
        <a-descriptions-item label="订单号">
          <a-typography-text copyable>
            {{ orderData.orderId }}
          </a-typography-text>
        </a-descriptions-item>
        <a-descriptions-item label="京东订单号">
          <a-typography-text v-if="orderData.jdOrderId" copyable>
            {{ orderData.jdOrderId }}
          </a-typography-text>
          <a-typography-text v-else type="secondary">无</a-typography-text>
        </a-descriptions-item>
        <a-descriptions-item label="商品品类">
          {{ getCategoryChineseName(orderData.category) }}
        </a-descriptions-item>
        <a-descriptions-item label="订单金额">
          <a-typography-text class="arco-text-primary">
            ¥{{ orderData.amount?.toFixed(2) || '0.00' }}
          </a-typography-text>
        </a-descriptions-item>
        <a-descriptions-item label="订单状态">
          <a-tag v-if="orderData.status === 1" color="orange">待支付</a-tag>
          <a-tag v-else-if="orderData.status === 2" color="green">已支付</a-tag>
          <a-tag v-else-if="orderData.status === 3" color="red">已过期</a-tag>
          <a-tag v-else-if="orderData.status === 4" color="gray">已取消</a-tag>
          <a-tag v-else-if="orderData.status === 5" color="orange">
            cookie失效
          </a-tag>
          <a-tag v-else-if="orderData.status === 6" color="red">
            下单京东订单失败
          </a-tag>
          <a-tag v-else-if="orderData.status === 7" color="red">库存问题</a-tag>
          <a-tag v-else color="gray">未知</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="最后请求时间">
          {{ orderData.lastRequestAt || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="创建时间">
          {{ orderData.createdAt || '-' }}
        </a-descriptions-item>
      </a-descriptions>

      <a-divider orientation="left">操作记录</a-divider>
      <a-timeline>
        <a-timeline-item>
          <template #dot>
            <icon-clock-circle style="color: #165dff" />
          </template>
          <div class="timeline-content">
            <div class="timeline-header">
              <span class="timeline-title">订单创建</span>
              <span class="timeline-time">{{ orderData.createdAt }}</span>
            </div>
            <div class="timeline-body">
              订单创建成功，订单号：{{ orderData.orderId }}
            </div>
          </div>
        </a-timeline-item>
        <a-timeline-item v-if="orderData.lastRequestAt">
          <template #dot>
            <icon-refresh style="color: #00b42a" />
          </template>
          <div class="timeline-content">
            <div class="timeline-header">
              <span class="timeline-title">最后更新</span>
              <span class="timeline-time">{{ orderData.lastRequestAt }}</span>
            </div>
            <div class="timeline-body">订单信息最后更新时间</div>
          </div>
        </a-timeline-item>
      </a-timeline>
    </div>
    <a-empty v-else description="暂无订单数据" />
  </a-modal>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Message } from '@arco-design/web-vue';
import type { KamiApiJdCookieV1OrderInfo } from '@/api/generated';
import { getCategoryChineseName } from '@/utils/categoryMapping';

interface Props {
  visible: boolean;
  orderData: KamiApiJdCookieV1OrderInfo | null;
}

interface Emits {
  (e: 'update:visible', value: boolean): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

// 处理取消
const handleCancel = (): void => {
  emit('update:visible', false);
};
</script>

<style scoped>
.order-detail {
  padding: 16px 0;
}

.timeline-content {
  margin-left: 16px;
}

.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.timeline-title {
  font-weight: 500;
  color: var(--color-text-1);
}

.timeline-time {
  color: var(--color-text-3);
  font-size: 12px;
}

.timeline-body {
  background-color: var(--color-fill-1);
  padding: 12px;
  border-radius: 4px;
  border-left: 3px solid var(--color-primary-light-3);
  color: var(--color-text-2);
}
</style>
