<template>
  <div class="pc-admin-detail-container">
    <el-card class="detail-card" shadow="never" v-if="orderInfo">

      <el-page-header @back="goBack" class="detail-page-header" :title="t('返回')">
        <template #content>
          <div class="header-content">
            <span class="title">{{ t('注单详情') }}</span>
            <el-divider direction="vertical" class="mx-3" />
            <span class="order-id">NO.{{ orderInfo.order_id || orderInfo.id }}</span>
            <el-icon class="copy-icon" @click="copyText(String(orderInfo.order_id || orderInfo.id))">
              <DocumentCopy />
            </el-icon>

            <el-tag :type="getOrderStatusTag(orderInfo.status).type" effect="dark" class="status-tag">
              {{ getOrderStatusTag(orderInfo.status).text }}
            </el-tag>

            <el-tag :type="getIsWinTag(orderInfo.is_win).type" effect="dark" class="status-tag">
              {{ getIsWinTag(orderInfo.is_win).text }}
            </el-tag>

            <el-tag v-if="Number(orderInfo.return_status) !== 0"
              :type="getRefundStatusTag(orderInfo.return_status).type" class="refund-tag cursor-pointer"
              @click="handleRefundTagClick">
              {{ getRefundStatusTag(orderInfo.return_status).text }}
              <el-icon v-if="Number(orderInfo.return_status) === 3" class="ml-1">
                <InfoFilled />
              </el-icon>
            </el-tag>
          </div>
        </template>

        <template #extra>
          <div class="header-right">
            <span class="profit-label">{{ t('盈亏金额') }}：</span>
            <span class="profit-val" :class="getProfitClass()">
              {{ orderInfo.settlement_status === 0 ? '--' : (Number(orderInfo.profit_and_loss) > 0 ? '+' : '') +
                orderInfo.profit_and_loss }}
            </span>
          </div>
        </template>
      </el-page-header>

      <div class="section-container" v-if="orderInfo.sport">
        <div class="section-title">
          <div class="decorate-bar bmc"></div>
          <span>{{ t('赛事信息') }}</span>
          <el-tag :type="getMatchStateTag(orderInfo.sport.state).type" size="small" effect="plain" class="ml-3">
            {{ getMatchStateTag(orderInfo.sport.state).text }}
          </el-tag>
        </div>

        <div class="match-vs-board">
          <div class="league-header">
            <span class="league-name">{{ locale === 'zh' ? orderInfo.sport.league : orderInfo.sport.league_en }}</span>
            <el-tag v-if="orderInfo.is_roll === 1" type="warning" effect="plain" size="small" class="ml-2">{{ t('滚球')
              }}</el-tag>

            <div class="match-time ml-auto">
              <span>{{ orderInfo.detail?.game_time }}</span>
              <span v-if="orderInfo.detail?.fixture_status" class="fixture-status">
                <span v-if="orderInfo.detail.fixture_status.long" style="margin-left: 8px; color: #f8b932;">{{
                  orderInfo.detail.fixture_status.long }}</span>
                <span v-if="orderInfo.detail.fixture_status.elapsed" style="margin-left: 4px; color: #f8b932;">{{
                  orderInfo.detail.fixture_status.seconds }}'</span>
              </span>
            </div>
          </div>

          <div class="vs-content">
            <div class="team-box">
              <el-avatar :src="orderInfo.sport.home_team_logo" :size="60" shape="circle" class="team-logo">
              </el-avatar>
              <span class="team-name">{{ locale === 'zh' ? orderInfo.sport.home_team : orderInfo.sport.home_team_en
                }}</span>
            </div>

            <div class="score-box">
              <div v-if="orderInfo.sport.state !== 0 && orderInfo.detail?.score" class="score-display">
                <span class="score-num">{{ getScore(orderInfo.detail.score, 0) }}</span>
                <span class="score-divider">:</span>
                <span class="score-num">{{ getScore(orderInfo.detail.score, 1) }}</span>
              </div>
              <div v-else class="time-display">
                <span style="font-size: 24px; font-weight: bold; color: #909399;">VS</span>
              </div>

              <div class="half-score"
                v-if="orderInfo.detail?.half_score && orderInfo.sport.state !== 0 && orderInfo.detail.half_score !== '-'">
                {{ t('半场') }}: {{ orderInfo.detail.half_score }}
              </div>
            </div>

            <div class="team-box">
              <el-avatar :src="orderInfo.sport.guest_team_logo" :size="60" shape="circle" class="team-logo">
              </el-avatar>
              <span class="team-name">{{ locale === 'zh' ? orderInfo.sport.guest_team : orderInfo.sport.guest_team_en
                }}</span>
            </div>
          </div>

          <div class="live-score-row"
            v-if="Number(orderInfo.sport.state) !== 0 && (orderInfo.sport.score || orderInfo.sport.half_score)">
            <span class="live-label">{{ t('即时比分') }}:</span>
            <span class="live-val" v-if="orderInfo.sport.score">{{ orderInfo.sport.score }}</span>
            <span class="live-half" v-if="orderInfo.sport.half_score && orderInfo.sport.half_score !== '-'">({{ t('半场')
              }}: {{
                orderInfo.sport.half_score }})</span>
          </div>
        </div>
      </div>

      <div class="section-container">
        <div class="section-title">
          <div class="decorate-bar bmc"></div>
          <span>{{ t('注单明细') }}</span>
        </div>

        <el-descriptions :column="3" border class="admin-descriptions">
          <el-descriptions-item :label="t('用户ID')">
            <span>{{ orderInfo.user_id || '--' }}</span>
          </el-descriptions-item>

          <el-descriptions-item :label="t('玩法类型')">
            <span class="highlight-keyword">{{ orderInfo.odd_name || '--' }}</span>
            <el-tag v-if="orderInfo.is_roll === 1" type="warning" size="small" effect="plain" class="ml-2">{{ t('滚球')
              }}</el-tag>
          </el-descriptions-item>

          <el-descriptions-item :label="t('投注选项')">
            <span class="selection-val">
              {{ orderInfo.odd_value || '--' }}
              <span v-if="orderInfo.handicp" class="handicap-val">[{{ orderInfo.handicp }}]</span>
            </span>
          </el-descriptions-item>

          <el-descriptions-item :label="t('盘口')" v-if="orderInfo.handicap">
            <span>{{ orderInfo.handicap || '--' }}</span>
          </el-descriptions-item>

          <el-descriptions-item :label="t('赔率')">
            <span class="odds-val">@{{ orderInfo.odd || '0.00' }}</span>
          </el-descriptions-item>

          <el-descriptions-item :label="t('下注金额')">
            <span class="amount-val">{{ orderInfo.amount }}</span>
          </el-descriptions-item>

          <el-descriptions-item :label="t('派彩金额')">
            <span v-if="orderInfo.settlement_status === 1" class="win-amount-val">{{ orderInfo.win_amount }}</span>
            <span v-else class="empty-text">--</span>
          </el-descriptions-item>

          <el-descriptions-item :label="t('支付状态')">
            <el-tag :type="getPayStatusTag(orderInfo.pay_status).type" size="small">{{
              getPayStatusTag(orderInfo.pay_status).text }}</el-tag>
          </el-descriptions-item>

          <el-descriptions-item :label="t('结算状态')">
            <el-tag :type="getSettleStatusTag(orderInfo.settlement_status).type" size="small">{{
              getSettleStatusTag(orderInfo.settlement_status).text }}</el-tag>
          </el-descriptions-item>

          <el-descriptions-item :label="t('下注时间')">
            <span class="time-text">{{ orderInfo.create_time || '--' }}</span>
          </el-descriptions-item>

          <el-descriptions-item :label="t('退款申请时间')" v-if="orderInfo.return_apply_time">
            <span class="time-text">{{ orderInfo.return_apply_time }}</span>
          </el-descriptions-item>

          <el-descriptions-item :label="t('退款处理时间')" v-if="orderInfo.return_operation_time">
            <span class="time-text">{{ orderInfo.return_operation_time }}</span>
          </el-descriptions-item>

          <el-descriptions-item :label="t('失败原因')" v-if="orderInfo.failure">
            <span class="text-danger">{{ orderInfo.failure }}</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <div class="section-container" v-if="statTableData && statTableData.length > 0">
        <div class="section-title">
          <div class="decorate-bar bmc"></div>
          <span>{{ t('赛事统计') }}</span>
        </div>

        <el-table :data="statTableData" border class="stat-table" style="width: 100%">
          <el-table-column prop="name" :label="t('统计项')" align="center" min-width="120" />
          <el-table-column :label="t('上半场')" align="center">
            <el-table-column prop="h1Home" :label="`${t('主队')} (${homeTeamName})`" align="center" min-width="110" />
            <el-table-column prop="h1Guest" :label="`${t('客队')} (${guestTeamName})`" align="center" min-width="110" />
          </el-table-column>
          <el-table-column :label="t('下半场')" align="center">
            <el-table-column prop="h2Home" :label="`${t('主队')} (${homeTeamName})`" align="center" min-width="110" />
            <el-table-column prop="h2Guest" :label="`${t('客队')} (${guestTeamName})`" align="center" min-width="110" />
          </el-table-column>
        </el-table>
      </div>



      <div class="action-footer" v-if="canRefund">
        <el-button type="danger" size="large" @click="handleRefund">
          {{ t('申请退款') }}
        </el-button>
      </div>

    </el-card>

    <el-card shadow="never" class="detail-card" v-else>
      <el-skeleton :rows="8" animated />
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { getOrderInfo, applyRefund } from '@/request/api.js'
import { DocumentCopy, InfoFilled } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 补充 locale 用于中英文名字切换
const { t, locale } = useI18n()
const route = useRoute()
const router = useRouter()
const orderInfo = ref(null)

onMounted(() => {
  if (route.query.order_id) {
    fetchDetail(route.query.order_id)
  }
})

const goBack = () => {
  router.back()
}

// 获取详情数据 (移除了自定义 loading)
const fetchDetail = async (id) => {
  const res = await getOrderInfo({ order_id: id })
  if (res && res.code === 1) {
    const data = res.data
    // 如果详情里仍有需要解析的 JSON 格式可以保留该逻辑防备用
    if (typeof data.detail === 'string') {
      try {
        data.detail = JSON.parse(data.detail)
      } catch (e) {
        data.detail = {}
      }
    }
    orderInfo.value = data
  }
}

// 动态获取队伍名称供表头使用
const homeTeamName = computed(() => locale.value === 'zh' ? orderInfo.value?.sport?.home_team : orderInfo.value?.sport?.home_team_en)
const guestTeamName = computed(() => locale.value === 'zh' ? orderInfo.value?.sport?.guest_team : orderInfo.value?.sport?.guest_team_en)

// 赛事统计数据处理与计算 (多级表格所需数据结构)
const statTableData = computed(() => {
  if (!orderInfo.value?.sport?.statistics || !Array.isArray(orderInfo.value.sport.statistics)) return []

  const stats = orderInfo.value.sport.statistics
  const homeId = orderInfo.value.sport.home_team_id
  const guestId = orderInfo.value.sport.guest_team_id

  // 数据可能包含多个更新快照，按照 team_id 和 half 进行去重，保留最新的记录
  const uniqueStats = {}
  stats.forEach(item => {
    const key = `${item.team_id}_${item.half}`
    uniqueStats[key] = item // 后续遍历覆盖前面，保留最新值
  })

  // 提取对应阶段的数据对象
  const h1Home = uniqueStats[`${homeId}_1`] || {}
  const h1Guest = uniqueStats[`${guestId}_1`] || {}
  const h2Home = uniqueStats[`${homeId}_2`] || {}
  const h2Guest = uniqueStats[`${guestId}_2`] || {}

  // 格式化处理：null或undefined显示为 '-'
  const formatVal = (val) => (val === null || val === undefined) ? '-' : val

  // 按照截图定义的顺序列出需要展示的统计项字段和名称
  const statMapping = [
    { key: 'shots_on_goal', label: t('射正球门') },
    { key: 'shots_off_goal', label: t('射偏球门') },
    { key: 'shots_insidebox', label: t('禁区内射门') },
    { key: 'shots_outsidebox', label: t('禁区外射门') },
    { key: 'total_shots', label: t('总射门次数') },
    { key: 'blocked_shots', label: t('被封堵射门') },
    { key: 'fouls', label: t('犯规次数') },
    { key: 'corner_kicks', label: t('角球') },
    { key: 'offsides', label: t('越位') },
    { key: 'ball_possession', label: t('控球率(%)') },
    { key: 'yellow_cards', label: t('黄牌') },
    { key: 'red_cards', label: t('红牌') },
    { key: 'goalkeeper_saves', label: t('门将扑救') },
    { key: 'total_passes', label: t('总传球数') },
    { key: 'passes_accurate', label: t('精准传球') },
    { key: 'passes_percent', label: t('传球成功率') }
  ]

  // 生成 el-table 所需的数组格式
  return statMapping.map(row => {
    return {
      name: row.label,
      h1Home: formatVal(h1Home[row.key]),
      h1Guest: formatVal(h1Guest[row.key]),
      h2Home: formatVal(h2Home[row.key]),
      h2Guest: formatVal(h2Guest[row.key])
    }
  })
})

// === 状态判断与样式映射 ===

const getIsFakerTag = (val) => val === 1 ? { text: t('虚拟账户'), type: 'danger' } : { text: t('真实账户'), type: 'success' }

const getOrderStatusTag = (val) => {
  const map = { 0: { text: t('下注中'), type: 'info' }, 1: { text: t('下注成功'), type: 'success' }, 2: { text: t('已退款'), type: 'warning' }, '-1': { text: t('已取消'), type: 'danger' } }
  return map[val] || { text: '--', type: 'info' }
}

const getSettleStatusTag = (val) => {
  const map = { 0: { text: t('未结算'), type: 'info' }, 1: { text: t('已结算'), type: 'success' }, 2: { text: t('结算待发放'), type: 'danger' } }
  return map[val] || { text: '--', type: 'info' }
}

const getIsWinTag = (val) => {
  const map = { 0: { text: t('未中奖'), type: 'info' }, 1: { text: t('已中奖'), type: 'success' }, 2: { text: t('和局'), type: 'warning' } }
  return map[val] || { text: '--', type: 'info' }
}

const getPayStatusTag = (val) => val === 1 ? { text: t('已支付'), type: 'success' } : { text: t('待付款'), type: 'info' }

const getProfitClass = () => {
  if (!orderInfo.value) return 'text-gray'
  const settleStatus = Number(orderInfo.value.settlement_status)
  if (settleStatus !== 1) return 'text-gray' // 只有已结算才显示颜色

  const profit = Number(orderInfo.value.profit_and_loss)
  if (profit > 0) return 'text-success'
  if (profit < 0) return 'text-danger'
  return 'text-gray'
}

const getMatchStateTag = (state) => {
  const states = {
    0: { text: t('未开始'), type: 'info' },
    1: { text: t('进行中'), type: 'danger' },
    2: { text: t('已完场'), type: 'success' },
    3: { text: t('延期'), type: 'warning' },
    4: { text: t('取消'), type: 'info' }
  }
  return states[Number(state)] || { text: t('未知'), type: 'info' }
}

const getRefundStatusTag = (status) => {
  const map = {
    1: { text: t('退款审核中'), type: 'warning' },
    2: { text: t('退款已同意'), type: 'success' },
    3: { text: t('退款被驳回'), type: 'danger' }
  }
  return map[Number(status)] || { text: t('未知'), type: 'info' }
}

// === 日期及比分处理 ===
const formatTimestamp = (timestamp) => {
  if (!timestamp) return ''
  const date = new Date(timestamp * 1000)
  const Y = date.getFullYear()
  const M = (date.getMonth() + 1).toString().padStart(2, '0')
  const D = date.getDate().toString().padStart(2, '0')
  const h = date.getHours().toString().padStart(2, '0')
  const m = date.getMinutes().toString().padStart(2, '0')
  return `${Y}-${M}-${D} ${h}:${m}`
}

const formatGameTimeOnly = (timestamp, formatStr) => {
  if (!timestamp) return ''
  const date = new Date(timestamp * 1000)
  const m = String(date.getMonth() + 1).padStart(2, '0')
  const d = String(date.getDate()).padStart(2, '0')
  const h = String(date.getHours()).padStart(2, '0')
  const min = String(date.getMinutes()).padStart(2, '0')
  if (formatStr === 'MM-DD') return `${m}-${d}`
  if (formatStr === 'HH:mm') return `${h}:${min}`
  return `${m}-${d} ${h}:${min}`
}

const getScore = (scoreStr, index) => {
  if (!scoreStr || scoreStr === '-') return 0
  const parts = scoreStr.split('-')
  return parts[index] || 0
}

// === 交互操作 ===
const handleRefundTagClick = () => {
  if (Number(orderInfo.value.return_status) === 3) {
    ElMessageBox.alert(orderInfo.value.failure_msg || t('无详细驳回原因'), t('驳回原因'), {
      confirmButtonText: t('确定'),
      type: 'error'
    })
  }
}

const canRefund = computed(() => {
  if (!orderInfo.value) return false
  const userRefund = Number(orderInfo.value.user_refund)
  const payStatus = Number(orderInfo.value.pay_status)
  const settlementStatus = Number(orderInfo.value.settlement_status)
  const returnStatus = Number(orderInfo.value.return_status)

  return userRefund === 1 && payStatus === 1 && settlementStatus === 0 && returnStatus === 0
})

const handleRefund = () => {
  ElMessageBox.confirm(t('您确定要申请退款吗？'), t('退款确认'), {
    confirmButtonText: t('确定'),
    cancelButtonText: t('取消'),
    type: 'warning'
  }).then(async () => {
    // try catch 拦截已在底层封装
    await applyRefund({ order_id: orderInfo.value.order_id })
    fetchDetail(orderInfo.value.order_id) // 刷新数据
  }).catch(() => { })
}

const copyText = async (text) => {
  try {
    await navigator.clipboard.writeText(text)
    ElMessage.success(t('复制成功'))
  } catch (err) {
    const input = document.createElement('input')
    input.value = text
    document.body.appendChild(input)
    input.select()
    document.execCommand('copy')
    document.body.removeChild(input)
    ElMessage.success(t('复制成功'))
  }
}
</script>

<style scoped lang="scss">
$main-color: #f8b932;

.pc-admin-detail-container {
  /* 声明顶级盒子为容器查询基准点 */
  container-type: inline-size;
  container-name: sport-detail;

  min-height: 100%;
  padding: 6px 8px;
  /* 整体外边距极限压缩 */
  box-sizing: border-box;

  @container sport-detail (max-width: 800px) {
    padding: 4px;
  }

  @container sport-detail (max-width: 550px) {
    padding: 2px;
  }

  .detail-card {
    border-radius: 6px;
    background-color: var(--el-bg-color-overlay);
    border: 1px solid var(--el-border-color-light);
    padding: 12px;
    /* 卡片内边距压缩 */

    @container sport-detail (max-width: 800px) {
      padding: 8px;
    }

    @container sport-detail (max-width: 550px) {
      padding: 6px;
    }
  }
}

/* =======================================
   1. Page Header 样式定制 (极限压缩)
   ======================================= */
.detail-page-header {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--el-border-color-lighter);
  margin-bottom: 16px;

  :deep(.el-page-header__back:hover) {
    color: $main-color;
  }

  :deep(.el-page-header__back) {
    margin-right: 8px;
  }

  :deep(.el-page-header__title) {
    font-size: 13px;
  }

  /* 极限小屏下允许头部内容换行折叠 */
  :deep(.el-page-header__header) {
    @container sport-detail (max-width: 550px) {
      flex-wrap: wrap;
      gap: 8px;
    }
  }

  .header-content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;

    .title {
      font-size: 14px;
      font-weight: bold;
      color: var(--el-text-color-primary);
    }

    .mx-3 {
      margin: 0 6px;
      height: 12px;
    }

    .order-id {
      font-family: monospace;
      font-size: 12px;
      color: var(--el-text-color-regular);
      margin-right: 2px;
    }

    .copy-icon {
      cursor: pointer;
      color: var(--el-text-color-secondary);
      font-size: 13px;
      transition: color 0.2s;

      &:hover {
        color: $main-color;
      }
    }

    /* Tag 高度与边距压缩 */
    .status-tag,
    .refund-tag {
      margin-left: 6px;
      height: 18px;
      padding: 0 4px;
      line-height: 16px;
      font-size: 10px;
      border-radius: 2px;
    }

    .cursor-pointer {
      cursor: pointer;
    }

    .ml-1 {
      margin-left: 2px;
      vertical-align: middle;
    }
  }

  .header-right {
    display: flex;
    align-items: baseline;

    .profit-label {
      font-size: 12px;
      color: var(--el-text-color-regular);
    }

    .profit-val {
      font-size: 18px;
      /* 盈亏金额字号压缩 */
      font-weight: bold;
      font-family: DIN, monospace;

      @container sport-detail (max-width: 550px) {
        font-size: 16px;
      }
    }
  }
}

/* =======================================
   2. 区块标题
   ======================================= */
.section-container {
  margin-bottom: 16px;

  @container sport-detail (max-width: 550px) {
    margin-bottom: 12px;
  }

  .section-title {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    .decorate-bar {
      width: 3px;
      height: 12px;
      border-radius: 2px;
      background-color: $main-color;
      margin-right: 6px;
    }

    span {
      font-size: 13px;
      font-weight: bold;
      color: var(--el-text-color-primary);
    }

    .ml-3 {
      margin-left: 8px;
      height: 16px;
      padding: 0 4px;
      line-height: 14px;
      font-size: 10px;
    }
  }
}

/* =======================================
   3. 赛事 VS 面板 (动态缩放极简重构)
   ======================================= */
.match-vs-board {
  background-color: var(--el-fill-color-light);
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 6px;
  padding: 12px 16px;
  /* 内部空间压缩 */

  @container sport-detail (max-width: 800px) {
    padding: 10px 12px;
  }

  @container sport-detail (max-width: 550px) {
    padding: 8px;
  }

  .league-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--el-border-color);

    @container sport-detail (max-width: 550px) {
      margin-bottom: 8px;
      padding-bottom: 6px;
    }

    .league-name {
      font-size: 13px;
      font-weight: bold;
      color: var(--el-text-color-primary);

      @container sport-detail (max-width: 550px) {
        font-size: 12px;
      }
    }

    .ml-2 {
      margin-left: 6px;
      height: 16px;
      padding: 0 4px;
      line-height: 14px;
      font-size: 10px;
    }

    .ml-auto {
      margin-left: auto;
    }

    .match-time {
      font-size: 12px;
      color: var(--el-text-color-regular);
      display: flex;
      align-items: center;

      @container sport-detail (max-width: 550px) {
        font-size: 12px;
      }
    }
  }

  .vs-content {
    display: flex;
    justify-content: space-around;
    align-items: center;

    .team-box {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;

      .team-logo {
        background-color: transparent;
        border: 1px solid var(--el-border-color-lighter);
        box-shadow: var(--el-box-shadow-light);
        /* Avatar 穿透适配大小，避免被默认属性影响 */
        width: 40px !important;
        height: 40px !important;

        @container sport-detail (max-width: 800px) {
          width: 32px !important;
          height: 32px !important;
        }

        @container sport-detail (max-width: 550px) {
          width: 24px !important;
          height: 24px !important;
        }
      }

      .team-name {
        font-size: 14px;
        font-weight: bold;
        color: var(--el-text-color-primary);
        text-align: center;

        @container sport-detail (max-width: 800px) {
          font-size: 12px;
        }

        @container sport-detail (max-width: 550px) {
          font-size: 12px;
        }
      }
    }

    .score-box {
      flex: 0.5;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .time-display {
        text-align: center;

        .date {
          font-size: 12px;
          color: var(--el-text-color-regular);
          margin-bottom: 2px;
        }

        .time {
          font-size: 20px;
          font-weight: bold;
          color: var(--el-text-color-primary);
          font-family: DIN, monospace;

          @container sport-detail (max-width: 550px) {
            font-size: 16px;
          }
        }
      }

      .score-display {
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: DIN, monospace;

        .score-num {
          font-size: 26px;
          font-weight: 900;
          color: $main-color;

          @container sport-detail (max-width: 800px) {
            font-size: 22px;
          }

          @container sport-detail (max-width: 550px) {
            font-size: 18px;
          }
        }

        .score-divider {
          font-size: 16px;
          color: var(--el-text-color-secondary);
          padding-bottom: 2px;
        }
      }

      .half-score {
        margin-top: 6px;
        font-size: 12px;
        color: var(--el-text-color-secondary);
        background-color: var(--el-fill-color);
        padding: 2px 8px;
        border-radius: 10px;

        @container sport-detail (max-width: 550px) {
          font-size: 10px;
          padding: 2px 6px;
          margin-top: 4px;
        }
      }
    }
  }

  /* 即时比分专属样式 */
  .live-score-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    background: var(--el-bg-color-overlay);
    border-radius: 4px;
    padding: 6px 0;
    margin-top: 16px;

    .live-label {
      color: var(--el-text-color-regular);
    }

    .live-val {
      color: $main-color;
      font-weight: bold;
    }

    .live-half {
      color: var(--el-text-color-secondary);
    }
  }
}

/* =======================================
   3.5 赛事统计表格专属样式
   ======================================= */
.stat-table {
  :deep(.el-table__header th) {
    background-color: var(--el-fill-color-light);
    color: var(--el-text-color-primary);
    font-weight: bold;
    font-size: 13px;
  }

  :deep(.el-table__body td) {
    font-size: 13px;
  }
}

/* =======================================
   4. El-Descriptions 样式覆盖 (极限压缩版)
   ======================================= */
:deep(.admin-descriptions) {

  /* 基础压缩：边距、字号 */
  .el-descriptions__cell {
    padding: 8px 12px !important;
    font-size: 12px;

    @container sport-detail (max-width: 800px) {
      padding: 6px 8px !important;
      font-size: 12px;
    }

    @container sport-detail (max-width: 550px) {
      padding: 4px 6px !important;
    }
  }

  .el-descriptions__label {
    width: 90px;
    background-color: var(--el-fill-color-light) !important;
    color: var(--el-text-color-regular);
    font-weight: normal;

    @container sport-detail (max-width: 800px) {
      width: 70px;
    }
  }

  .el-descriptions__content {
    background-color: transparent !important;
    color: var(--el-text-color-primary);
  }

  /* 降维打击：极限小屏下，强行打破原生 Table 布局，改为流式 Flex 堆叠 */
  @container sport-detail (max-width: 550px) {

    table,
    tbody,
    tr,
    th,
    td {
      display: block;
      width: 100%;
      box-sizing: border-box;
    }

    tbody {
      display: flex;
      flex-direction: column;
    }

    tr {
      display: flex;
      align-items: stretch;
      border-bottom: 1px solid var(--el-border-color-lighter);
    }

    tr:last-child {
      border-bottom: none;
    }

    .el-descriptions__cell {
      border: none !important;
    }

    /* 清除原生表格边框干扰 */

    .el-descriptions__label {
      width: 35%;
      /* 标题占 35% */
      border-right: 1px solid var(--el-border-color-lighter) !important;
      display: flex;
      align-items: center;
    }

    .el-descriptions__content {
      width: 65%;
      /* 内容占 65% */
      display: flex;
      align-items: center;
      word-break: break-all;
    }
  }
}

/* =======================================
   5. 详情内部文字排版 (字号统一缩减)
   ======================================= */
.highlight-keyword {
  font-size: 13px;
  font-weight: bold;
  color: var(--el-text-color-primary);

  @container sport-detail (max-width: 800px) {
    font-size: 12px;
  }
}

.selection-val {
  font-size: 13px;
  font-weight: bold;
  color: var(--el-color-primary);

  @container sport-detail (max-width: 800px) {
    font-size: 12px;
  }

  .handicap-val {
    margin-left: 4px;
    color: $main-color;
  }
}

.odds-val {
  font-weight: bold;
  color: $main-color;
  font-family: DIN, monospace;
  font-size: 13px;

  @container sport-detail (max-width: 800px) {
    font-size: 12px;
  }
}

.amount-val,
.win-amount-val {
  font-weight: bold;
  font-size: 13px;
  font-family: DIN, monospace;

  @container sport-detail (max-width: 800px) {
    font-size: 12px;
  }
}

.win-amount-val {
  color: var(--el-color-success);
}

.time-text {
  color: var(--el-text-color-regular);
  font-size: 12px;

  @container sport-detail (max-width: 800px) {
    font-size: 12px;
  }
}

.empty-text {
  color: var(--el-text-color-placeholder);
  font-size: 12px;
}

.ml-2 {
  margin-left: 4px;
}

/* 6. 操作区压缩 */
.action-footer {
  display: flex;
  justify-content: center;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--el-border-color-lighter);

  .el-button {
    height: 32px;
    font-size: 13px;
    padding: 0 16px;
  }
}

/* 辅助色彩 */
.text-success {
  color: var(--el-color-success) !important;
}

.text-danger {
  color: var(--el-color-danger) !important;
}

.text-primary {
  color: var(--el-color-primary) !important;
}

.text-gray {
  color: var(--el-text-color-placeholder) !important;
}
</style>