<template>
  <el-dialog v-model="visible" title="订单详情" width="500px">
    <div v-if="currentOrder" class="detail-content">
      <el-steps :active="getStepActive(currentOrder.status)" finish-status="success" class="mb-20">
        <el-step title="下单支付" :description="currentOrder.createTime" />
        <el-step title="仓库配货" />
        <el-step title="完成自提" />
      </el-steps>
      
      <div class="qr-box" v-if="currentOrder.status !== 'completed'">
        <vab-icon icon="qr-code-line" class="qr-icon" />
        <div class="code">{{ currentOrder.verifyCode }}</div>
        <div class="tip">核销码 (请出示给管理员)</div>
      </div>

      <el-descriptions border :column="1">
        <el-descriptions-item label="订单号">{{ currentOrder.orderNo }}</el-descriptions-item>
        <el-descriptions-item label="商品信息">
          <div class="flex items-center">
            <el-image :src="currentOrder.productImage" style="width: 40px; height: 40px; margin-right: 10px;" />
            <span>{{ currentOrder.productName }} x 1</span>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="实付金额">¥ {{ currentOrder.amount }}</el-descriptions-item>
        <el-descriptions-item label="购买学生">{{ currentOrder.studentName }} ({{ currentOrder.studentId }})</el-descriptions-item>
      </el-descriptions>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'

const visible = ref(false)
const currentOrder = ref(null)

const open = (row) => {
  currentOrder.value = row
  visible.value = true
}

const getStepActive = (status) => {
  const map = { pending: 1, ready: 2, completed: 3 }
  return map[status]
}

defineExpose({
  open
})
</script>

<style lang="scss" scoped>
.mb-20 { margin-bottom: 20px; }
.flex { display: flex; }
.items-center { align-items: center; }

.detail-content {
  .qr-box {
    text-align: center;
    margin: 20px 0;
    padding: 20px;
    background: #f8f8f8;
    border-radius: 8px;

    .qr-icon {
      font-size: 120px;
      color: #333;
    }
    .code {
      font-size: 24px;
      font-weight: bold;
      letter-spacing: 5px;
      margin: 10px 0;
      color: var(--el-color-primary);
    }
    .tip {
      font-size: 12px;
      color: #999;
    }
  }
}
</style>
