<template>
  <div class="order-detail-container">
    <el-card shadow="never" v-loading="loading">
      <div slot="header" class="clearfix">
        <el-button icon="el-icon-back" size="mini" @click="$router.back()">返回列表</el-button>
        <span class="header-title">订单详情</span>
      </div>

      <div class="detail-content" v-if="orderInfo.id">
        <el-row :gutter="20" class="detail-row">
          <el-col :span="12">
            <div class="item">
              <span class="label">订单号：</span>
              <span class="value">{{ orderInfo.ordernum }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="item">
              <span class="label">期数：</span>
              <el-tag size="mini">{{ orderInfo.issue }}</el-tag>
            </div>
          </el-col>
        </el-row>

        <el-row :gutter="20" class="detail-row">
          <el-col :span="12">
            <div class="item">
              <span class="label">游戏分类：</span>
              <span class="value">{{ orderInfo.game }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="item">
              <span class="label">玩法：</span>
              <span class="value">{{ orderInfo.gameplay }}</span>
            </div>
          </el-col>
        </el-row>

        <el-row :gutter="20" class="detail-row">
          <el-col :span="12">
            <div class="item">
              <span class="label">投注内容：</span>
              <el-tag type="warning" size="small">{{ orderInfo.number }}</el-tag>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="item">
              <span class="label">赔率：</span>
              <span class="value">{{ orderInfo.odds }}</span>
            </div>
          </el-col>
        </el-row>

        <el-row :gutter="20" class="detail-row">
          <el-col :span="12">
            <div class="item">
              <span class="label">投注金额：</span>
              <span class="value text-bold">￥{{ orderInfo.amount }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="item">
              <span class="label">开奖状态：</span>
              <el-tag v-if="statusMap[orderInfo.lottery_status]"
                      :type="statusMap[orderInfo.lottery_status].type"
                      size="small">
                {{ statusMap[orderInfo.lottery_status].label }}
              </el-tag>
            </div>
          </el-col>
        </el-row>

        <el-row :gutter="20" class="detail-row">
          <el-col :span="12">
            <div class="item">
              <span class="label">中奖金额：</span>
              <span :class="{'text-danger': orderInfo.win_amount > 0}">
                {{ orderInfo.win_amount || '0.00' }}
              </span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="item">
              <span class="label">盈亏：</span>
              <span :style="{ color: getProfitColor(orderInfo.profit_and_loss) }">
                {{ orderInfo.profit_and_loss || '0.00' }}
              </span>
            </div>
          </el-col>
        </el-row>

        <el-row :gutter="20" class="detail-row">
          <el-col :span="12">
            <div class="item">
              <span class="label">开奖时间：</span>
              <span class="value">{{ orderInfo.lottery && orderInfo.lottery.open_time ? orderInfo.lottery.open_time : '--' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="item">
              <span class="label">开奖号码：</span>
              <div class="value" style="display: inline-block;">
                <template v-if="orderInfo.lottery && orderInfo.lottery.open_code">
                  <span
                    v-for="(num, index) in orderInfo.lottery.open_code.split(',')"
                    :key="index"
                    class="lottery-ball"
                    :style="{ backgroundColor: index === orderInfo.lottery.open_code.split(',').length - 1 ? '#ED6F6E' : '' }"
                  >
                    {{ num }}
                  </span>
                </template>
                <span v-else>--</span>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <el-empty v-else-if="!loading" description="暂无数据"></el-empty>
    </el-card>
  </div>
</template>

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

export default {
  name: 'LhcOrderDetail',
  data() {
    return {
      loading: false,
      // 初始化时给一个默认对象，或者在模板中使用 v-if
      orderInfo: {},
      statusMap: {
        0: { label: '待开奖', type: 'info' },
        1: { label: '已中奖', type: 'success' },
        2: { label: '未中奖', type: 'danger' },
        3: { label: '已撤单', type: 'warning' }
      }
    }
  },
  created() {
    this.fetchDetail()
  },
  methods: {
    async fetchDetail() {
      // 兼容 query 和 params 两种传参方式
      const id = this.$route.query.id || this.$route.params.id
      if (!id) {
        this.$message.error('订单ID缺失')
        return
      }

      this.loading = true
      try {
        const res = await lhcDetail({ id })
        if (res && res.code === 0) {
          this.orderInfo = res.data
        } else {
          this.$message.error(res.msg || '获取详情失败')
        }
      } catch (error) {
        console.error('API Error:', error)
      } finally {
        this.loading = false
      }
    },
    getProfitColor(val) {
      if (!val) return '#606266'
      const num = parseFloat(val)
      return num > 0 ? '#F56C6C' : num < 0 ? '#67C23A' : '#606266'
    }
  }
}
</script>

<style scoped>
.order-detail-container {
  padding: 20px;
}
.header-title {
  margin-left: 15px;
  font-weight: bold;
  font-size: 16px;
  vertical-align: middle;
}
.detail-content {
  padding: 10px;
  border: 1px solid #EBEEF5;
}
.detail-row {
  border-bottom: 1px solid #EBEEF5;
  display: flex;
  align-items: center;
}
.detail-row:last-child {
  border-bottom: none;
}
.item {
  padding: 12px 10px;
  font-size: 14px;
}
.label {
  color: #909399;
  width: 100px;
  display: inline-block;
}
.value {
  color: #303133;
}
.text-bold {
  font-weight: bold;
}
.text-danger {
  color: #F56C6C;
  font-weight: bold;
}

/* 新增的开奖号码圆球样式 */
.lottery-ball {
  display: inline-block;
  width: 26px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  border-radius: 50%;
  background-color: #409EFF;
  color: #fff;
  margin-right: 6px;
  font-size: 13px;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>
