<template>
  <div class="payment-info">
    <el-descriptions
      v-loading="loading"
      :column="2"
      border
      :title="title"
      size="default"
    >
      <el-descriptions-item label="订单编号">
        <span class="info-value highlight">{{ orderInfo.orderNo }}</span>
      </el-descriptions-item>
      
      <el-descriptions-item label="支付时间">
        <span class="info-value">
          <el-icon><Timer /></el-icon>
          {{ orderInfo.paymentTime }}
        </span>
      </el-descriptions-item>
      
      <el-descriptions-item label="支付金额">
        <span class="info-value amount">
          <el-tag type="success" size="large" effect="dark">
            {{ orderInfo.paymentAmount }}
          </el-tag>
        </span>
      </el-descriptions-item>
      
      <el-descriptions-item label="购买服务">
        <span class="info-value">
          <el-tag type="primary" effect="light">
            {{ orderInfo.serviceType }}
          </el-tag>
        </span>
      </el-descriptions-item>
      
      <el-descriptions-item label="支付方式">
        <span class="info-value">
          <el-icon><Wallet /></el-icon>
          {{ orderInfo.paymentMethod || '微信支付' }}
        </span>
      </el-descriptions-item>
      
      <el-descriptions-item label="订单状态">
        <span class="info-value">
          <el-tag type="success" effect="light">
            <el-icon><CircleCheck /></el-icon>
            支付成功
          </el-tag>
        </span>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script setup>
import { Timer, Wallet, CircleCheck } from '@element-plus/icons-vue'

defineProps({
  orderInfo: {
    type: Object,
    required: true,
    default: () => ({
      orderNo: '',
      paymentTime: '',
      paymentAmount: '',
      serviceType: '',
      paymentMethod: ''
    })
  },
  loading: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '订单详情'
  }
})
</script>

<style scoped>
.payment-info {
  width: 100%;
}

.info-value {
  font-weight: 500;
  color: #606266;
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-value.highlight {
  color: #409eff;
  font-weight: 600;
  font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
  font-size: 15px;
  background-color: transparent;
}

.info-value.amount {
  font-size: 20px;
  font-weight: 700;
  color: #67c23a;
}

:deep(.el-descriptions__title) {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 20px;
}

:deep(.el-descriptions__label) {
  width: 120px;
  font-weight: 500;
  background-color: #f8f9fa;
}

@media (max-width: 768px) {
  :deep(.el-descriptions) {
    :deep(.el-descriptions-item) {
      display: block;
      width: 100%;
    }
    
    :deep(.el-descriptions-item__container) {
      display: block;
    }
    
    :deep(.el-descriptions-item__label) {
      display: block;
      width: 100%;
      padding: 8px 0;
      border-bottom: 1px solid #ebeef5;
    }
    
    :deep(.el-descriptions-item__content) {
      display: block;
      padding: 8px 0;
    }
  }
}
</style>