<template>
  <div class="unified-admin-detail-container">
    <el-card shadow="never" class="detail-card">
      <div slot="header" class="header-section">
        <el-button size="small" icon="el-icon-back" @click="goBack">返回列表</el-button>
        <span class="page-title">订单详情</span>
      </div>

      <div v-loading="loading" class="content-section" v-if="orderInfo && orderInfo.id">

        <div class="section-title">基本信息</div>
        <table class="detail-table">
          <tbody>
          <tr>
            <td class="label">订单号</td>
            <td class="value">
              <span class="text-bold">{{ orderInfo.ordernum || '--' }}</span>
              <el-link type="primary" :underline="false" style="margin-left: 10px;" @click="copyText(orderInfo.ordernum)">复制</el-link>
            </td>
            <td class="label">订单状态</td>
            <td class="value">
              <el-tag :type="getStatusTagType(orderInfo.lottery_status)" size="small" effect="dark">
                {{ getStatusLabel(orderInfo.lottery_status) }}
              </el-tag>
            </td>
          </tr>
          <tr>
            <td class="label">期号</td>
            <td class="value"><span class="text-bold">{{ orderInfo.issue || '--' }}</span></td>
            <td class="label">彩种类型</td>
            <td class="value">
              <el-tag size="small" type="info" effect="plain">{{ getGameTypeLabel(orderInfo.type) }}</el-tag>
            </td>
          </tr>
          <tr>
            <td class="label">会员ID</td>
            <td class="value">{{ orderInfo.member_id || '--' }}</td>
            <td class="label">会员账号</td>
            <td class="value">{{ orderInfo.first_name || '--' }}</td>
          </tr>
          <tr>
            <td class="label">投注时间</td>
            <td class="value">{{ orderInfo.created_at || '--' }}</td>
            <td class="label">更新时间</td>
            <td class="value">{{ orderInfo.updated_at || '--' }}</td>
          </tr>
          </tbody>
        </table>

        <div class="section-title">投注与结算信息</div>
        <table class="detail-table">
          <tbody>
          <tr>
            <td class="label">投注玩法</td>
            <td class="value">
              <span v-if="orderInfo.game">[{{ orderInfo.game }}] - </span>
              <span>{{ orderInfo.gameplay || '--' }}</span>
            </td>
            <td class="label">赔率</td>
            <td class="value"><span class="odds-text">@{{ orderInfo.odds || '0.00' }}</span></td>
          </tr>
          <tr>
            <td class="label">投注内容</td>
            <td class="value" colspan="3">
              <el-tag type="warning" size="medium" style="font-weight: bold; font-size: 14px;">
                {{ orderInfo.number || '--' }}
              </el-tag>
            </td>
          </tr>
          <tr>
            <td class="label">下注本金</td>
            <td class="value">￥{{ parseFloat(orderInfo.amount || 0).toFixed(2) }}</td>
            <td class="label">派彩金额</td>
            <td class="value">
              <span :class="Number(orderInfo.lottery_status) === 2 ? 'win-text' : ''">
                ￥{{ Number(orderInfo.lottery_status) === 2 ? parseFloat(orderInfo.win_amount || 0).toFixed(2) : '0.00' }}
              </span>
            </td>
          </tr>
          <tr>
            <td class="label">盈亏统计</td>
            <td class="value" colspan="3">
              <span v-if="orderInfo.lottery_status === 0">--</span>
              <span v-else :class="getProfitClass(orderInfo)" class="text-bold" style="font-size: 16px;">
                {{ getProfitText(orderInfo) }}
              </span>
            </td>
          </tr>
          </tbody>
        </table>

        <div class="section-title">开奖结果</div>
        <table class="detail-table">
          <tbody>
          <tr>
            <td class="label">开奖号码</td>
            <td class="value" colspan="3">
              <div v-if="openCodes.length > 0" class="table-balls">

                <template v-if="[1, 2, 3, 4].includes(Number(orderInfo.type))">
                  <template v-for="(code, idx) in openCodes">
                    <span v-if="idx === openCodes.length - 1" class="plus-sign" :key="'plus-'+idx">+</span>
                    <div :key="'lhc-'+idx" class="lhc-ball" :class="getLhcBallColor(code)">{{ code }}</div>
                  </template>
                </template>

                <template v-else-if="[12, 13].includes(Number(orderInfo.type))">
                  <div v-for="(num, idx) in openCodes" :key="'dice-'+idx" :class="['dice-box', 'dice-' + num, (num == 1 || num == 4) ? 'dice-red' : '']">
                    <span v-for="dot in Number(num)" :key="dot" class="dice-dot"></span>
                  </div>
                </template>

                <template v-else>
                  <div v-for="(num, idx) in openCodes" :key="'jisu-'+idx" class="jisu-ball" :class="getJisuBallColor(num, orderInfo.type)">
                    {{ num }}
                  </div>
                </template>

              </div>
              <span v-else>--</span>
            </td>
          </tr>
          <tr>
            <td class="label">结果属性</td>
            <td class="value" colspan="3">
              <div v-if="otherTags.length > 0" class="other-code-container">
                <span v-for="(tag, idx) in otherTags" :key="'tag-' + idx" class="other-tag">{{ tag }}</span>
              </div>
              <span v-else>--</span>
            </td>
          </tr>
          </tbody>
        </table>

        <template v-if="orderInfo.remark">
          <div class="section-title">其他信息</div>
          <table class="detail-table">
            <tbody>
            <tr>
              <td class="label">备注说明</td>
              <td class="value" colspan="3">
                <span class="remark-text">{{ orderInfo.remark }}</span>
              </td>
            </tr>
            </tbody>
          </table>
        </template>

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

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

export default {
  name: 'UnifiedOrderDetail',
  data() {
    return {
      loading: false,
      orderId: null,
      orderInfo: {}
    }
  },
  computed: {
    openCodes() {
      const str = this.orderInfo.lottery?.open_code || this.orderInfo.open_code || '';
      return str ? str.split(',') : [];
    },
    otherTags() {
      const str = this.orderInfo.lottery?.open_code_other || this.orderInfo.open_code_other || '';
      return str ? str.split(/[\s,]+/).filter(Boolean) : [];
    }
  },
  created() {
    this.orderId = this.$route.query.id || this.$route.params.id;
    if (this.orderId) {
      this.getDetail();
    } else {
      this.$message.error('未获取到有效的订单ID');
      this.goBack();
    }
  },
  methods: {
    async getDetail() {
      this.loading = true;
      try {
        const res = await lhcDetail({ id: this.orderId });
        if (res && res.code === 0 && res.data) {
          this.orderInfo = res.data;
        } else {
          this.$message.error(res.msg || '获取详情失败');
        }
      } catch (error) {
        console.error('获取订单详情失败:', error);
      } finally {
        this.loading = false;
      }
    },

    goBack() {
      this.$router.back();
    },

    copyText(text) {
      if (!text) return;
      const input = document.createElement('input');
      input.value = text;
      document.body.appendChild(input);
      input.select();
      document.execCommand('copy');
      document.body.removeChild(input);
      this.$message.success('复制成功');
    },

    getGameTypeLabel(type) {
      const map = {
        1: '新澳门六合彩', 2: '香港六合彩', 3: '澳门六合彩', 4: '极速六合彩',
        5: '加拿大28', 6: '极速28',
        7: '极速赛车', 8: '极速时时彩', 9: '极速飞艇', 10: 'SG时时彩', 11: 'SG飞艇',
        12: '极速快3', 13: 'SG快3'
      };
      return map[Number(type)] || type || '--';
    },

    getStatusLabel(status) {
      const map = { 0: '待开奖', 1: '未中奖', 2: '已中奖', 3: '合局', 4: '已退款' };
      return map[Number(status)] || '未知';
    },

    getStatusTagType(status) {
      const map = { 0: 'warning', 1: 'info', 2: 'success', 3: 'info', 4: 'danger' };
      return map[Number(status)] || 'info';
    },

    getProfitText(data) {
      const status = Number(data.lottery_status);
      if (status === 1) return `-${parseFloat(data.amount || 0).toFixed(2)}`;
      if (status === 2) return `+${parseFloat(data.profit_and_loss || data.win_amount || 0).toFixed(2)}`;
      return '0.00';
    },

    getProfitClass(data) {
      const status = Number(data.lottery_status);
      if (status === 2) return 'profit-win';
      if (status === 1) return 'profit-loss';
      return '';
    },

    getLhcBallColor(numStr) {
      const num = parseInt(numStr, 10);
      if (isNaN(num)) return 'bg-gray';
      const reds = [1, 2, 7, 8, 12, 13, 18, 19, 23, 24, 29, 30, 34, 35, 40, 45, 46];
      const blues = [3, 4, 9, 10, 14, 15, 20, 25, 26, 31, 36, 37, 41, 42, 47, 48];
      const greens = [5, 6, 11, 16, 17, 21, 22, 27, 28, 32, 33, 38, 39, 43, 44, 49];
      if (reds.includes(num)) return 'bg-red';
      if (blues.includes(num)) return 'bg-blue';
      if (greens.includes(num)) return 'bg-green';
      return 'bg-gray';
    },

    getJisuBallColor(numStr, typeCode) {
      const tNum = Number(typeCode);
      if ([7, 9, 11].includes(tNum)) return `color-${parseInt(numStr, 10)}`;
      return 'wave-blue';
    }
  }
}
</script>

<style scoped>
.unified-admin-detail-container {
  background: #fff;
  padding: 20px;
  margin: 20px;
  box-sizing: border-box;
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  min-height: calc(100vh - 100px);
}

.header-section {
  display: flex;
  align-items: center;
  padding-bottom: 15px;
}

.page-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
  margin-left: 15px;
}

.content-section {
  width: 100%;
}

.section-title {
  font-size: 15px;
  font-weight: bold;
  color: #303133;
  margin: 25px 0 12px 0;
  padding-left: 10px;
  border-left: 4px solid #409EFF;
  line-height: 1.2;
}

.detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.detail-table td {
  border: 1px solid #ebeef5;
  padding: 12px 15px;
  line-height: 1.5;
}

.detail-table .label {
  background-color: #f5f7fa;
  width: 12%;
  color: #606266;
  text-align: center;
}

.detail-table .value {
  width: 38%;
  color: #303133;
  background-color: #fff;
}

.text-bold { font-weight: bold; }
.odds-text { color: #FF7600; font-weight: bold; }
.win-text { color: #67C23A; font-weight: bold; }
.profit-win { color: #67C23A; }
.profit-loss { color: #F56C6C; }
.remark-text { color: #E6A23C; }

.table-balls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.plus-sign {
  font-size: 20px;
  font-weight: bold;
  color: #909399;
  margin: 0 4px;
}

.lhc-ball {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3), inset 0 -2px 2px rgba(0,0,0,0.2);
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.lhc-ball.bg-red { background: linear-gradient(135deg, #ff6b6b 0%, #dc2626 100%); }
.lhc-ball.bg-blue { background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%); }
.lhc-ball.bg-green { background: linear-gradient(135deg, #34d399 0%, #059669 100%); }
.lhc-ball.bg-gray { background: linear-gradient(135deg, #9ca3af 0%, #4b5563 100%); }

.jisu-ball {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-weight: 600;
  font-size: 13px;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.wave-blue { background: linear-gradient(135deg, #42a5f5, #1e88e5); border-color: #1e88e5; }
.color-1 { background: #E6DE00; text-shadow: 0 1px 1px rgba(0,0,0,0.3); }
.color-2 { background: #0092FF; }
.color-3 { background: #4D4D4D; }
.color-4 { background: #FF7600; }
.color-5 { background: #17E2E5; }
.color-6 { background: #5234FF; }
.color-7 { background: #BFBFBF; }
.color-8 { background: #FF2600; }
.color-9 { background: #780B00; }
.color-10 { background: #07BF00; }

.dice-box {
  width: 28px;
  height: 28px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  display: grid;
  padding: 3px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.05);
  box-sizing: border-box;
}

.dice-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #303133;
  justify-self: center;
  align-self: center;
}

.dice-red .dice-dot { background-color: #F56C6C; }
.dice-1 .dice-dot:nth-child(1) { grid-column: 2; grid-row: 2; width: 8px; height: 8px; }
.dice-2 .dice-dot:nth-child(1) { grid-column: 1; grid-row: 1; } .dice-2 .dice-dot:nth-child(2) { grid-column: 3; grid-row: 3; }
.dice-3 .dice-dot:nth-child(1) { grid-column: 1; grid-row: 1; } .dice-3 .dice-dot:nth-child(2) { grid-column: 2; grid-row: 2; } .dice-3 .dice-dot:nth-child(3) { grid-column: 3; grid-row: 3; }
.dice-4 .dice-dot:nth-child(1) { grid-column: 1; grid-row: 1; } .dice-4 .dice-dot:nth-child(2) { grid-column: 3; grid-row: 1; } .dice-4 .dice-dot:nth-child(3) { grid-column: 1; grid-row: 3; } .dice-4 .dice-dot:nth-child(4) { grid-column: 3; grid-row: 3; }
.dice-5 .dice-dot:nth-child(1) { grid-column: 1; grid-row: 1; } .dice-5 .dice-dot:nth-child(2) { grid-column: 3; grid-row: 1; } .dice-5 .dice-dot:nth-child(3) { grid-column: 2; grid-row: 2; } .dice-5 .dice-dot:nth-child(4) { grid-column: 1; grid-row: 3; } .dice-5 .dice-dot:nth-child(5) { grid-column: 3; grid-row: 3; }
.dice-6 .dice-dot:nth-child(1) { grid-column: 1; grid-row: 1; } .dice-6 .dice-dot:nth-child(2) { grid-column: 1; grid-row: 2; } .dice-6 .dice-dot:nth-child(3) { grid-column: 1; grid-row: 3; } .dice-6 .dice-dot:nth-child(4) { grid-column: 3; grid-row: 1; } .dice-6 .dice-dot:nth-child(5) { grid-column: 3; grid-row: 2; } .dice-6 .dice-dot:nth-child(6) { grid-column: 3; grid-row: 3; }

.other-code-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.other-tag {
  display: inline-block;
  padding: 4px 10px;
  background-color: #f4f4f5;
  border: 1px solid #e9e9eb;
  border-radius: 4px;
  font-size: 13px;
  color: #909399;
}
</style>
