<template>
  <el-dialog
    v-model="dialogVisible"
    title="订单详情"
    width="800px"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <div v-loading="loading" class="order-detail">
      <template v-if="orderDetail">
        <!-- 订单基本信息 -->
        <el-descriptions :column="2" border class="order-info">
          <el-descriptions-item label="订单号">{{ orderDetail.orderNum }}</el-descriptions-item>
          <el-descriptions-item label="订单状态">
            <el-tag :type="getStatusType(orderDetail.status)" size="small">
              {{ orderDetail.statusName }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="用户昵称">{{ orderDetail.userNickname || '-' }}</el-descriptions-item>
          <el-descriptions-item label="用户ID">{{ orderDetail.userId }}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{ orderDetail.userMobile || '-' }}</el-descriptions-item>
          <el-descriptions-item label="盒子名称">{{ orderDetail.goodsTitle || '-' }}</el-descriptions-item>
          <el-descriptions-item label="抽奖次数">{{ orderDetail.num }}</el-descriptions-item>
          <el-descriptions-item label="中奖数量">{{ orderDetail.prizeNum }}</el-descriptions-item>
          <el-descriptions-item label="订单金额">
            <span class="money">¥{{ orderDetail.orderTotal?.toFixed(2) || '0.00' }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="实付金额">
            <span class="money">¥{{ orderDetail.discountTotal?.toFixed(2) || '0.00' }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="下单时间">{{ orderDetail.createdAt }}</el-descriptions-item>
          <el-descriptions-item label="支付时间">{{ orderDetail.payTime || '-' }}</el-descriptions-item>
        </el-descriptions>

        <!-- 奖品列表 -->
        <div class="prize-section" v-if="orderDetail.prizeGroups && orderDetail.prizeGroups.length > 0">
          <h4 class="section-title">中奖奖品明细</h4>
          <div class="prize-groups">
            <div
              v-for="(group, index) in orderDetail.prizeGroups"
              :key="index"
              class="prize-group"
            >
              <div class="prize-header">
                <el-image
                  v-if="group.imgUrl"
                  :src="group.imgUrl"
                  :preview-src-list="[group.imgUrl]"
                  fit="cover"
                  class="prize-img"
                  lazy
                >
                  <template #error>
                    <div class="image-error">
                      <el-icon><Picture /></el-icon>
                    </div>
                  </template>
                </el-image>
                <div class="prize-info">
                  <div class="prize-title">{{ group.title || '-' }}</div>
                  <div class="prize-meta">
                    <span>价值: <span class="money">¥{{ group.price?.toFixed(2) || '0.00' }}</span></span>
                    <span>兑换价值: <span class="recovery-money">¥{{ group.recoveryMoney?.toFixed(2) || '0.00' }}</span></span>
                    <span>数量: {{ group.count }}</span>
                  </div>
                </div>
              </div>
              <!-- 奖品项列表 -->
              <div class="prize-items" v-if="group.items && group.items.length > 0">
                <el-table :data="group.items" size="small" border>
                  <el-table-column prop="luckNo" label="幸运号" width="80" align="center" />
                  <el-table-column label="状态" width="100" align="center">
                    <template #default="{ row }">
                      <el-tag :type="getItemStatusType(row.status)" size="small">
                        {{ row.statusName }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="关联单号" min-width="180">
                    <template #default="{ row }">
                      <span v-if="row.recoveryNum">回收: {{ row.recoveryNum }}</span>
                      <span v-else-if="row.sendNum">发货: {{ row.sendNum }}</span>
                      <span v-else class="text-muted">-</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="createdAt" label="中奖时间" min-width="160" />
                </el-table>
              </div>
            </div>
          </div>
        </div>
        <el-empty v-else description="暂无中奖记录" />
      </template>
    </div>

    <template #footer>
      <el-button @click="handleClose">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { Picture } from '@element-plus/icons-vue'
import { getOrderDetail, OrderStatus, OrderItemStatus, type OrderDetailResponse } from '@/api/business/order'

interface Props {
  modelValue: boolean
  orderId: number | null
}

const props = defineProps<Props>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'close'): void
}>()

const dialogVisible = ref(props.modelValue)
const loading = ref(false)
const orderDetail = ref<OrderDetailResponse | null>(null)

watch(() => props.modelValue, (val) => {
  dialogVisible.value = val
  if (val && props.orderId) {
    fetchOrderDetail()
  }
})

watch(dialogVisible, (val) => {
  emit('update:modelValue', val)
})

const fetchOrderDetail = async () => {
  if (!props.orderId) return
  
  loading.value = true
  try {
    const res = await getOrderDetail(props.orderId)
    orderDetail.value = res.data
  } catch (error) {
    console.error('获取订单详情失败:', error)
  } finally {
    loading.value = false
  }
}

const getStatusType = (status: number): 'success' | 'warning' | 'info' | 'danger' => {
  switch (status) {
    case OrderStatus.Paid:
      return 'success'
    case OrderStatus.Unpaid:
      return 'warning'
    case OrderStatus.Cancelled:
      return 'info'
    default:
      return 'info'
  }
}

const getItemStatusType = (status: number): 'success' | 'warning' | 'info' | 'danger' => {
  switch (status) {
    case OrderItemStatus.Pending:
      return 'warning'
    case OrderItemStatus.Recovered:
      return 'info'
    case OrderItemStatus.Shipped:
      return 'success'
    default:
      return 'info'
  }
}

const handleClose = () => {
  dialogVisible.value = false
  orderDetail.value = null
  emit('close')
}
</script>

<style scoped>
.order-detail {
  min-height: 200px;
}

.order-info {
  margin-bottom: 20px;
}

.money {
  color: #e6a23c;
  font-weight: 500;
}

.recovery-money {
  color: #67c23a;
  font-weight: 500;
}

.prize-section {
  margin-top: 20px;
}

.section-title {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.prize-groups {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.prize-group {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 12px;
}

.prize-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.prize-img {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  flex-shrink: 0;
}

.image-error {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
  color: #909399;
}

.prize-info {
  flex: 1;
}

.prize-title {
  font-weight: 500;
  margin-bottom: 4px;
}

.prize-meta {
  font-size: 13px;
  color: #606266;
  display: flex;
  gap: 16px;
}

.prize-items {
  margin-top: 8px;
}

.text-muted {
  color: #909399;
}
</style>
