<template>
  <el-dialog
    v-model="dialogVisible"
    title="发货订单详情"
    width="800px"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <div v-loading="loading" class="shipping-detail">
      <template v-if="orderDetail">
        <!-- 订单基本信息 -->
        <el-descriptions :column="2" border class="order-info">
          <el-descriptions-item label="发货单号">{{ orderDetail.sendNum }}</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.name || '-' }}</el-descriptions-item>
          <el-descriptions-item label="收货手机号">{{ orderDetail.receiverMobile || '-' }}</el-descriptions-item>
          <el-descriptions-item label="收货地址" :span="2">{{ orderDetail.address || '-' }}</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.count }}</el-descriptions-item>
          <el-descriptions-item label="运费">
            <span class="freight">¥{{ orderDetail.freight?.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-item label="备注" :span="2">{{ orderDetail.message || '-' }}</el-descriptions-item>
        </el-descriptions>

        <!-- 物流信息（已发货时显示） -->
        <div class="logistics-section" v-if="orderDetail.status >= ShippingStatus.Shipped && orderDetail.courierName">
          <h4 class="section-title">物流信息</h4>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="快递公司">{{ orderDetail.courierName }}</el-descriptions-item>
            <el-descriptions-item label="快递单号">
              <span class="courier-number">{{ orderDetail.courierNumber }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="发货时间">{{ orderDetail.sendTime || '-' }}</el-descriptions-item>
            <el-descriptions-item label="签收时间">{{ orderDetail.receiveTime || '-' }}</el-descriptions-item>
          </el-descriptions>
        </div>

        <!-- 奖品列表 -->
        <div class="prize-section" v-if="orderDetail.prizes && orderDetail.prizes.length > 0">
          <h4 class="section-title">发货奖品明细</h4>
          <el-table :data="orderDetail.prizes" size="small" border>
            <el-table-column label="奖品图片" width="80" align="center">
              <template #default="{ row }">
                <el-image
                  v-if="row.imgUrl"
                  :src="row.imgUrl"
                  :preview-src-list="[row.imgUrl]"
                  fit="cover"
                  class="prize-img"
                  lazy
                >
                  <template #error>
                    <div class="image-error">
                      <el-icon><Picture /></el-icon>
                    </div>
                  </template>
                </el-image>
                <div v-else class="image-error">
                  <el-icon><Picture /></el-icon>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="title" label="奖品名称" min-width="180">
              <template #default="{ row }">
                <span>{{ row.title || '-' }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="prizeCode" label="奖品编码" width="120">
              <template #default="{ row }">
                <span class="prize-code">{{ row.prizeCode || '-' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="价值" width="100" align="right">
              <template #default="{ row }">
                <span class="money">¥{{ row.price?.toFixed(2) || '0.00' }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-empty v-else description="暂无奖品信息" />
      </template>
    </div>

    <template #footer>
      <el-button @click="handleClose">关闭</el-button>
      <el-button
        v-if="orderDetail && orderDetail.status === ShippingStatus.Pending"
        type="primary"
        @click="handleShip"
      >
        发货
      </el-button>
    </template>

    <!-- 发货弹窗 -->
    <ShipDialog
      v-model="shipDialogVisible"
      :send-id="sendId"
      @close="handleShipDialogClose"
      @success="handleShipSuccess"
    />
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { Picture } from '@element-plus/icons-vue'
import {
  getShippingOrderDetail,
  ShippingStatus,
  type ShippingOrderResponse
} from '@/api/business/order'
import ShipDialog from './ShipDialog.vue'

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

const props = defineProps<Props>()

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

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

// 发货弹窗
const shipDialogVisible = ref(false)

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

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

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

const getStatusType = (status: number): 'success' | 'warning' | 'info' | 'danger' => {
  switch (status) {
    case ShippingStatus.Pending:
      return 'warning'
    case ShippingStatus.Shipped:
      return 'info'
    case ShippingStatus.Received:
      return 'success'
    case ShippingStatus.Cancelled:
      return 'danger'
    default:
      return 'info'
  }
}

const handleShip = () => {
  shipDialogVisible.value = true
}

const handleShipDialogClose = () => {
  // 发货弹窗关闭
}

const handleShipSuccess = () => {
  // 发货成功，刷新详情
  fetchOrderDetail()
  emit('shipped')
}

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

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

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

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

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

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

.courier-number {
  font-family: monospace;
  font-weight: 500;
}

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

.prize-img {
  width: 50px;
  height: 50px;
  border-radius: 4px;
}

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

.prize-code {
  font-family: monospace;
  font-size: 12px;
  color: #909399;
}

.money {
  color: #e6a23c;
  font-weight: 500;
}
</style>
