<template>
  <div class="new-app-container layout-vertical">
    <el-page-header @back="goBack" content="订单详情" style="margin-bottom: 20px;" title="返回" />

    <div v-loading="loading" style="padding: 0 10px;">
      <div class="detail-title">基本信息</div>

      <el-form label-width="100px" class="detail-form">
        <el-row>
          <el-col :span="12">
            <el-form-item label="订单号：">
              {{ orderInfo.ordernum || '--' }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="订单状态：">
              <el-tag :type="getStatusTagType(orderInfo.status)" size="small">
                {{ getStatusLabel(orderInfo.status) }}
              </el-tag>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="会员ID：">
              {{ orderInfo.member_id || '--' }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="会员账号：">
              {{ orderInfo.first_name || '--' }}
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="游戏名称：">
              {{ orderInfo.game_name || '--' }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="下注项：">
              {{ orderInfo.gameplay_name || '--' }}
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="赔率：">
              <span style="color: #F56C6C; font-weight: bold;">{{ orderInfo.odds || '--' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="下注金额：">
              {{ orderInfo.amount || '--' }}
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="中奖金额：">
              {{ orderInfo.win_amount || '--' }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="盈亏金额：">
              {{ orderInfo.profit_and_loss || '--' }}
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="退款备注：">
              {{ orderInfo.remark || '--' }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getSportGameOrderInfo } from '@/api/data'

export default {
  name: 'SportGameOrderDetail',
  data() {
    return {
      loading: false,
      orderInfo: {},
      statusOptions: [
        { value: 0, label: '待开奖' },
        { value: 1, label: '未中奖' },
        { value: 2, label: '已中奖' },
        { value: 3, label: '已退款' }
      ]
    }
  },
  mounted() {
    const id = this.$route.query.id
    if (id) {
      this.getDetail(id)
    }
  },
  methods: {
    async getDetail(id) {
      this.loading = true
      try {
        const res = await getSportGameOrderInfo({ id })
        if (res && res.data) {
          this.orderInfo = res.data.data ? res.data.data : res.data
        }
      } catch (error) {
        console.error('获取详情失败:', error)
      } finally {
        this.loading = false
      }
    },

    goBack() {
      this.$router.go(-1)
    },

    getStatusLabel(status) {
      if (status === undefined || status === null) return '--'
      const target = this.statusOptions.find(item => item.value === status)
      return target ? target.label : '未知'
    },

    getStatusTagType(status) {
      const typeMap = {
        0: 'warning',
        1: 'info',
        2: 'success',
        3: ''
      }
      return typeMap[status] !== undefined ? typeMap[status] : 'info'
    }
  }
}
</script>

<style scoped>
.new-app-container {
  height: calc(100vh - 100px);
  background: #fff;
  padding: 20px;
  margin: 20px;
  box-sizing: border-box;
  width: calc(100% - 40px);
  border-radius: 6px;
  overflow-y: auto;
}
.detail-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}
.detail-form {
  background: #fafafa;
  padding: 20px;
  border-radius: 4px;
  border: 1px solid #ebeef5;
}
::v-deep .el-form-item {
  margin-bottom: 10px;
}
</style>
