<template>
  <div class="pc-betting-history-container">
    <div class="record-wrapper">

      <div class="filter-card">
        <div class="filter-header">
          <div class="header-left">
            <div class="back-action" @click="goBack">
              <el-icon><ArrowLeft /></el-icon>
              <span class="back-text">{{ t('返回') }}</span>
            </div>

            <el-divider direction="vertical" class="header-divider" />

            <div class="title-line">
              <div class="decorate-bar bmc"></div>
              <span class="title-text">{{ t('投注历史') }}</span>
            </div>
          </div>

          <el-segmented v-model="activeTab" :options="tabOptions" @change="handleTabChange" />
        </div>

        <div class="filter-body" v-show="activeTab !== 'digital'">
          <el-form v-show="activeTab === 'game'" :inline="true" :model="gameParams" class="search-form">
            <el-form-item :label="t('中奖状态')">
              <el-select v-model="gameParams.is_winner" :placeholder="t('全部')" style="width: 140px;" clearable>
                <el-option v-for="item in gameStatusColumns" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item :label="t('结算状态')">
              <el-select v-model="gameParams.status" :placeholder="t('全部')" style="width: 140px;" clearable>
                <el-option v-for="item in gameSettleStatusColumns" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item :label="t('日期区间')">
              <el-date-picker
                  v-model="gameDateRange" type="daterange"
                  :start-placeholder="t('开始日期')" :end-placeholder="t('结束日期')" format="YYYY-MM-DD" value-format="YYYY-MM-DD" @change="handleGameQuery"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleGameQuery"><el-icon class="btn-icon"><Search /></el-icon>{{ t('立即查询') }}</el-button>
              <el-button @click="handleGameReset"><el-icon class="btn-icon"><RefreshRight /></el-icon>{{ t('重置') }}</el-button>
            </el-form-item>
          </el-form>

          <el-form v-show="activeTab === 'sports'" :inline="true" :model="sportParams" class="search-form">
            <el-form-item :label="t('中奖状态')">
              <el-select v-model="sportParams.is_win" :placeholder="t('全部')" style="width: 140px;" clearable>
                <el-option v-for="item in sportStatusColumns" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item :label="t('结算状态')">
              <el-select v-model="sportParams.settlement_status" :placeholder="t('全部')" style="width: 140px;" clearable>
                <el-option v-for="item in sportSettleStatusColumns" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item :label="t('日期区间')">
              <el-date-picker
                  v-model="sportDateRange" type="daterange"
                  :start-placeholder="t('开始日期')" :end-placeholder="t('结束日期')" format="YYYY-MM-DD" value-format="YYYY-MM-DD" @change="handleSportQuery"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSportQuery"><el-icon class="btn-icon"><Search /></el-icon>{{ t('立即查询') }}</el-button>
              <el-button @click="handleSportReset"><el-icon class="btn-icon"><RefreshRight /></el-icon>{{ t('重置') }}</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <div class="table-card">
        <div v-if="activeTab === 'game'" class="table-wrapper">
          <el-table :data="gameData" style="width: 100%" height="100%" :empty-text="t('暂无投注记录')">
            <el-table-column :label="t('期号')" min-width="150">
              <template #default="scope"><span class="issue-no">{{ scope.row.issue_no }}</span></template>
            </el-table-column>
            <el-table-column :label="t('彩票玩法')" min-width="120">
              <template #default="scope">
                <el-tag :type="Number(scope.row.is_pc) === 1 ? 'primary' : 'success'" effect="plain">
                  {{ Number(scope.row.is_pc) === 1 ? t('极速')+28 : t('加拿大')+28 }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="keywords" :label="t('投注内容')" min-width="120">
              <template #default="scope"><span class="bet-keywords">{{ scope.row.keywords }}</span></template>
            </el-table-column>
            <el-table-column :label="t('赔率')" min-width="100" align="right">
              <template #default="scope"><span class="odds-val">{{ scope.row.odds }}</span></template>
            </el-table-column>
            <el-table-column :label="t('开奖结果')" min-width="160" align="center">
              <template #default="scope">
                <div v-if="scope.row.issue && scope.row.issue.winning_numbers" class="draw-result">
                  <span class="winning-numbers">{{ scope.row.issue.winning_numbers }}</span>
                  <div class="combo-tags" v-if="scope.row.issue.combo && scope.row.issue.combo.length">
                    <el-tag v-for="(item, index) in scope.row.issue.combo" :key="index" size="small" type="info" effect="plain">{{ item }}</el-tag>
                  </div>
                </div>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column :label="t('投注本金')" min-width="120" align="right">
              <template #default="scope"><span class="val-text">{{ parseFloat(scope.row.amount) }}</span></template>
            </el-table-column>
            <el-table-column :label="t('盈亏')" min-width="120" align="right">
              <template #default="scope">
                <span v-if="scope.row.status === 2 && Number(scope.row.profit) <= 0" class="profit-val text-danger">-{{ parseFloat(scope.row.amount) }}</span>
                <span v-else class="profit-val" :class="Number(scope.row.profit) > 0 ? 'text-success' : ''">
                  {{ Number(scope.row.profit) > 0 ? '+' + parseFloat(scope.row.profit) : parseFloat(scope.row.profit || 0) }}
                </span>
              </template>
            </el-table-column>
            <el-table-column :label="t('状态')" width="100" align="center" fixed="right">
              <template #default="scope">
                <el-tag :type="getGameStatusTag(scope.row).type" effect="dark">{{ getGameStatusTag(scope.row).text }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="created_at" :label="t('投注时间')" min-width="170" />
            <el-table-column :label="t('操作')" width="90" align="center" fixed="right">
              <template #default="scope"><el-button link type="primary" @click="handleGameDetail(scope.row)">{{ t('详情') }}</el-button></template>
            </el-table-column>
          </el-table>

          <div class="pagination-wrapper" v-if="gameTotal > 0">
            <el-pagination v-model:current-page="gameParams.page" v-model:page-size="gameParams.limit" :page-sizes="[10, 20, 50]" background layout="total, sizes, prev, pager, next, jumper" :total="gameTotal" @size-change="handleGameQuery" @current-change="fetchGameData" />
          </div>
        </div>

        <div v-if="activeTab === 'sports'" class="table-wrapper">
          <el-table :data="sportData" style="width: 100%" height="100%" :empty-text="t('暂无投注记录')"
          >
            <el-table-column :label="t('订单号')" width="190" fixed="left">
              <template #default="scope">
                <div class="order-no-box">
                  <span class="issue-no" style="cursor: pointer; color: #409EFF;" @click="handleSportDetail(scope.row)">{{ scope.row.order_id }}</span>
                  <el-icon class="copy-icon" @click="copyText(scope.row.order_id)"><DocumentCopy /></el-icon>
                </div>
              </template>
            </el-table-column>

            <el-table-column prop="user_id" :label="t('用户ID')" width="100" />

            <el-table-column prop="issue" :label="t('期号')" width="120" show-overflow-tooltip />

            <el-table-column :label="t('赛事信息')" min-width="400">
              <template #default="scope">
                <div class="sport-match-info" v-if="scope.row.sport">

                  <div class="league-row">
                    <img class="league-logo" :src="scope.row.sport.league_logo" v-if="scope.row.sport.league_logo" />
                    <span class="league-name">{{ locale === 'zh' ? scope.row.sport.league : scope.row.sport.league_en }}</span>
                    <el-tag
                        v-if="scope.row.sport.state !== undefined && scope.row.sport.state !== null"
                        :type="getMatchStateType(scope.row.sport.state)"
                        effect="plain"
                        size="small"
                        style="margin-left: 8px;"
                    >
                      {{ getMatchStateText(scope.row.sport.state) }}
                    </el-tag>
                    <div class="match-time">
                      <span>{{ scope.row.detail?.game_time }}</span>
                      <span v-if="scope.row.detail?.fixture_status" class="fixture-status">
                        <span v-if="scope.row.detail.fixture_status.long" style="margin-left: 8px; color: #f8b932;">{{ scope.row.detail.fixture_status.long }}</span>
                        <span v-if="scope.row.detail.fixture_status.elapsed" style="margin-left: 4px; color: #f8b932;">{{ scope.row.detail.fixture_status.seconds }}'</span>
                      </span>
                    </div>
                  </div>

                  <div class="team-row">
                    <div class="team">
                      <span class="team-name right-align">{{ locale === 'zh' ? scope.row.sport.home_team : scope.row.sport.home_team_en }}</span>
                      <img class="team-logo" :src="scope.row.sport.home_team_logo" v-if="scope.row.sport.home_team_logo" />
                    </div>
                    <div class="vs-text">
                      <span v-if="scope.row.detail?.score">{{ scope.row.detail.score }}</span>
                      <span v-else>VS</span>
                    </div>
                    <div class="team">
                      <img class="team-logo" :src="scope.row.sport.guest_team_logo" v-if="scope.row.sport.guest_team_logo" />
                      <span class="team-name">{{ locale === 'zh' ? scope.row.sport.guest_team : scope.row.sport.guest_team_en }}</span>
                    </div>

                     <div class="score-detail-row" v-if="scope.row.detail?.half_score || scope.row.detail?.extra_score">
                        <span v-if="scope.row.detail?.half_score" class="half-score-text">{{ t('半场') }}: {{ scope.row.detail.half_score }}</span>
                      </div>
                  </div>

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

                </div>
                <span v-else>--</span>
              </template>
            </el-table-column>

            <el-table-column :label="t('滚球')" width="120" align="center">
              <template #default="scope">
                <el-tag :type="getIsRollTag(scope.row.is_roll).type">{{ t(getIsRollTag(scope.row.is_roll).text) }}</el-tag>
              </template>
            </el-table-column>

            <el-table-column prop="type" :label="t('类型')" width="180" show-overflow-tooltip>
              <template #default>
                {{ t('足球') }}
              </template>
            </el-table-column>
            <el-table-column prop="odd_name" :label="t('玩法')" width="180" show-overflow-tooltip />

            <el-table-column :label="t('赔率')" width="90" align="center">
              <template #default="scope"><span class="odds-val">{{ scope.row.odd }}</span></template>
            </el-table-column>

            <el-table-column prop="odd_value" :label="t('赔率玩法')" width="120" align="center" show-overflow-tooltip />
            <el-table-column prop="handicp" :label="t('盘口')" width="100" show-overflow-tooltip />
            <el-table-column prop="failure" :label="t('下注失败原因')" min-width="150" show-overflow-tooltip />

            <el-table-column :label="t('下注金额')" width="100" align="right">
              <template #default="scope"><span class="val-text">{{ scope.row.amount }}</span></template>
            </el-table-column>

             <el-table-column :label="t('可赢金额')" width="100" align="right">
              <template #default="scope">
                <span style="color: #19be6b;font-weight: bold;">
                  {{ Number((Number(scope.row.amount) * Number(scope.row.odd) - Number(scope.row.amount)).toFixed(2)) }}
                </span>
              </template>
            </el-table-column>

            <el-table-column :label="t('盈亏金额')" width="100" align="right">
              <template #default="scope">
                <span v-if="scope.row.settlement_status === 0" class="val-text">--</span>
                <span v-else class="profit-val" :class="getSportProfitClass(scope.row)">
                  <span v-if="scope.row.is_win === 0">{{ scope.row.profit_and_loss }}</span>
                  <span v-else-if="scope.row.is_win === 1">+{{ scope.row.win_amount }}</span>
                  <span v-else>0.00</span>
                </span>
              </template>
            </el-table-column>

            <el-table-column :label="t('中奖状态')" width="90" align="center">
              <template #default="scope">
                <el-tag :type="getIsWinTag(scope.row.is_win).type" size="small">{{ t(getIsWinTag(scope.row.is_win).text) }}</el-tag>
              </template>
            </el-table-column>

            <el-table-column :label="t('订单状态')" width="90" align="center">
              <template #default="scope">
                <el-tag :type="getOrderStatusTag(scope.row.status).type" size="small">{{ t(getOrderStatusTag(scope.row.status).text) }}</el-tag>
              </template>
            </el-table-column>

            <el-table-column :label="t('结算状态')" width="90" align="center">
              <template #default="scope">
                <el-tag :type="getSettleStatusTag(scope.row.settlement_status).type" size="small">{{ t(getSettleStatusTag(scope.row.settlement_status).text) }}</el-tag>
              </template>
            </el-table-column>

            <el-table-column :label="t('支付状态')" width="90" align="center">
              <template #default="scope">
                <el-tag :type="getPayStatusTag(scope.row.pay_status).type" size="small">{{ t(getPayStatusTag(scope.row.pay_status).text) }}</el-tag>
              </template>
            </el-table-column>

            <el-table-column prop="pay_time" :label="t('支付时间')" width="160" />

            <el-table-column :label="t('退款状态')" width="100" align="center">
              <template #default="scope">
                <el-tag :type="getReturnStatusTag(scope.row.return_status).type" size="small">{{ t(getReturnStatusTag(scope.row.return_status).text) }}</el-tag>
              </template>
            </el-table-column>

            <el-table-column prop="return_apply_time" :label="t('退款申请时间')" width="160" />
            <el-table-column prop="return_operation_time" :label="t('退款处理时间')" width="160" />
            <el-table-column prop="create_time" :label="t('创建时间')" width="160" />

            <el-table-column :label="t('操作')" width="90" align="center" fixed="right">
              <template #default="scope">
                <el-button link type="primary" @click="handleSportDetail(scope.row)">{{ t('详情') }}</el-button>
              </template>
            </el-table-column>
          </el-table>

          <div class="pagination-wrapper" v-if="sportTotal > 0">
            <el-pagination v-model:current-page="sportParams.page" v-model:page-size="sportParams.limit" :page-sizes="[10, 20, 50]" background layout="total, sizes, prev, pager, next, jumper" :total="sportTotal" @size-change="handleSportQuery" @current-change="fetchSportData" />
          </div>
        </div>
        <div v-if="activeTab === 'digital'" class="table-wrapper">
          <DigitalOrderList />
        </div>

        <div v-if="activeTab === 'champion'" class="table-wrapper">
          <ChampionList />
        </div>

        <div v-if="activeTab === 'jisu'" class="table-wrapper">
          <JisuList />
        </div>

      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { Search, RefreshRight, DocumentCopy, ArrowLeft } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { getGameBetList, getOrderList } from '@/request/api.js'
import DigitalOrderList from '@/views/Digital/Order/List/index.vue'
import ChampionList from './ChampionList/index.vue'
import JisuList from './JisuList/index.vue'

const { t, locale } = useI18n()
const router = useRouter()
const route = useRoute()

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

// ==========================================
// ========== 基础状态与 Tab 逻辑 ============
// ==========================================
const activeTab = ref('sports')

const tabOptions = computed(() => [
  { label: t('体育'), value: 'sports' },
  { label: t('彩票'), value: 'game' },
  { label: t('六合彩'), value: 'digital' },
  { label: t('冠军'), value: 'champion' },
  { label: t('极速游戏'), value: 'jisu' }
])

onMounted(() => {
  if (route.query.tab !== undefined) {
    const queryTab = Number(route.query.tab)

    if (queryTab == 1) activeTab.value = 'sports'
    else if (queryTab == 2) activeTab.value = 'digital'
    else activeTab.value = 'game'
  }

  if (activeTab.value === 'game') fetchGameData()
  else if (activeTab.value === 'sports') fetchSportData()
})

const handleTabChange = (name) => {
  if (name === 'game' && gameData.value.length === 0) fetchGameData()
  if (name === 'sports' && sportData.value.length === 0) fetchSportData()
}

// ==========================================
// ========== Tab 1: 彩票 (Game) 逻辑 =========
// ==========================================
const gameData = ref([])
const gameTotal = ref(0)
const gameDateRange = ref(null)

const gameParams = reactive({
  page: 1, limit: 20, is_winner: '', status: '', start_time: '', end_time: ''
})

const gameStatusColumns = computed(() => [ { label: t('中奖'), value: 1 }, { label: t('未中奖'), value: 0 } ])
const gameSettleStatusColumns = computed(() => [ { label: t('待结算'), value: 1 }, { label: t('已结算'), value: 2 } ])

const fetchGameData = async () => {
  if (gameDateRange.value && gameDateRange.value.length === 2) {
    gameParams.start_time = gameDateRange.value[0]; gameParams.end_time = gameDateRange.value[1]
  } else {
    gameParams.start_time = ''; gameParams.end_time = ''
  }
  const res = await getGameBetList(gameParams)
  if (res && res.code === 1 && res.data) {
    gameData.value = res.data.list || []; gameTotal.value = res.data.count || gameData.value.length
  } else {
    gameData.value = []; gameTotal.value = 0
  }
}

const handleGameQuery = () => { gameParams.page = 1; fetchGameData() }
const handleGameReset = () => { gameParams.is_winner = ''; gameParams.status = ''; gameDateRange.value = null; handleGameQuery() }

const getGameStatusTag = (item) => {
  const status = Number(item.status); const isWinner = Number(item.profit) > 0
  if (status === 1) return { text: t('待结算'), type: 'warning' }
  else if (status === 2) return { text: isWinner ? t('已中奖') : t('未中奖'), type: isWinner ? 'success' : 'danger' }
  return { text: t('未知'), type: 'info' }
}

const handleGameDetail = (item) => router.push({ name: 'EntertainmentDetail', query: { id: item.id } })

// ==========================================
// ========== Tab 2: 体育 (Sports) 逻辑 =======
// ==========================================
const sportData = ref([])
const sportTotal = ref(0)
const sportDateRange = ref(null)

const sportParams = reactive({
  page: 1, limit: 20, is_win: '', settlement_status: '', start_time: '', end_time: ''
})

const sportStatusColumns = computed(() => [ { label: t('未中奖'), value: 0 }, { label: t('中奖'), value: 1 }, { label: t('和局'), value: 2 }, { label: t('平手半'), value: 3 } ])
const sportSettleStatusColumns = computed(() => [ { label: t('未结算'), value: 0 }, { label: t('已结算'), value: 1 }, { label: t('结算待发放'), value: 2 } ])

const fetchSportData = async () => {
  if (sportDateRange.value && sportDateRange.value.length === 2) {
    sportParams.start_time = sportDateRange.value[0]; sportParams.end_time = sportDateRange.value[1]
  } else {
    sportParams.start_time = ''; sportParams.end_time = ''
  }
  const res = await getOrderList(sportParams)
  if (res && res.code === 1 && res.data) {
    // 保留原有JSON解析以防其他地方仍需调用
    const list = (res.data.list || []).map(item => {
      try { item.parsedDetail = item.detail ? JSON.parse(item.detail) : {} } catch(e) { item.parsedDetail = {} }
      return item
    })
    sportData.value = list; sportTotal.value = res.data.count || list.length
  } else {
    sportData.value = []; sportTotal.value = 0
  }
}

const handleSportQuery = () => { sportParams.page = 1; fetchSportData() }
const handleSportReset = () => { sportParams.is_win = ''; sportParams.settlement_status = ''; sportDateRange.value = null; handleSportQuery() }

// ======== 体育状态 Tag 格式化函数集 ========

const getMatchStateText = (state) => {
  const map = {
    0: t("未开始"),
    1: t("进行中"),
    2: t("已完场"),
    3: t("延期"),
    4: t("取消")
  };
  return map[Number(state)] || t("未知");
};

const getMatchStateType = (state) => {
  const s = Number(state);
  if (s === 0) return 'info';
  if (s === 1) return 'primary';
  if (s === 2) return 'success';
  if (s === 3) return 'warning';
  if (s === 4) return 'danger';
  return 'info';
};

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

const getIsRollTag = (val) => val === 1 ? { text: '滚球', type: 'warning' } : { text: '非滚球', type: 'info' }

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

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

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

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

const getReturnStatusTag = (val) => {
  const map = { 0: { text: '未退款', type: 'info' }, 1: { text: '退款申请中', type: 'warning' }, 2: { text: '退款已同意', type: 'success' }, 3: { text: '退款已驳回', type: 'danger' } }
  return map[val] || { text: '--', type: 'info' }
}

const getSportProfitClass = (item) => {
  // 根据结算状态为已结算才进行盈亏颜色标记
  if (Number(item.settlement_status) !== 1) return 'text-gray'
  // const profit = Number(item.win_amount)
  if(item.is_win === 0)  return 'text-danger'
  if(item.is_win === 1)  return 'text-success'
  // if (profit > 0) return 'text-success'
  // if (profit < 0) return 'text-danger'
  return 'text-gray'
}

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('复制成功'))
  }
}

const handleSportDetail = (item) => router.push({ name: 'SortsBettingOrderDetail', query: { order_id: item.order_id } })

</script>

<style scoped lang="scss">
$main-color: #f8b932;
$card-bg: var(--el-bg-color-overlay);
$border-color: var(--el-border-color-lighter);

.pc-betting-history-container {
  container-type: inline-size;
  container-name: betting-history;
  height: 100%; padding: 6px 8px; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden;
  @container betting-history (max-width: 800px) { padding: 4px; }
  @container betting-history (max-width: 550px) { padding: 2px; }

  .record-wrapper { display: flex; flex-direction: column; width: 100%; flex: 1; overflow: hidden; }

  .filter-card {
    flex-shrink: 0; background-color: $card-bg; padding: 8px 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    @container betting-history (max-width: 550px) { padding: 6px 8px; }

    .filter-header {
      display: flex; justify-content: space-between; align-items: center;
      @container betting-history (max-width: 550px) { flex-direction: column; align-items: stretch; gap: 8px; }
      .header-left {
        display: flex; align-items: center;
        .back-action { display: flex; align-items: center; cursor: pointer; color: var(--el-text-color-regular); font-size: 14px; transition: color 0.2s; &:hover { color: $main-color; } .el-icon { margin-right: 2px; } }
        .header-divider { margin: 0 10px; height: 14px; }
        .title-line { display: flex; align-items: center; .decorate-bar { width: 3px; height: 14px; background-color: $main-color; margin-right: 6px; border-radius: 2px; } .title-text { font-size: 14px; font-weight: bold; color: var(--el-text-color-primary); } }
      }
      :deep(.el-segmented) { --el-border-radius-base: 4px; padding: 2px; .el-segmented__item { font-size: 14px; min-width: 60px; } }
    }

    .filter-body {
      margin-top: 8px;
      .search-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 0; }
      :deep(.el-form-item) { margin-right: 6px; margin-bottom: 0; display: flex; align-items: center; }
      //:deep(.el-form-item__label) { line-height: 26px !important; height: 26px !important; padding-right: 4px; font-size: 14px; margin-bottom: 0; color: var(--el-text-color-regular); }
      //:deep(.el-select) { width: 110px !important; }
      //:deep(.el-select .el-select__wrapper) { min-height: 26px !important; height: 26px !important; padding: 0 6px; font-size: 14px; }
      //:deep(.el-date-editor) { height: 26px; padding: 0 6px; max-width: 210px; width: 100%; }
      //:deep(.el-range-separator) { line-height: 24px; font-size: 14px; padding: 0 2px; }
      //:deep(.el-range-input) { font-size: 14px; }
      //:deep(.el-input__icon) { line-height: 26px; }
      //.el-button { height: 26px; padding: 4px 8px; font-size: 14px; border-radius: 4px; margin-left: 0; margin-right: 4px; }
      //.btn-icon { margin-right: 2px; font-size: 14px; }
      @container betting-history (max-width: 800px) { :deep(.el-form-item) { margin-right: 4px; margin-bottom: 4px; } }
      @container betting-history (max-width: 550px) { :deep(.el-date-editor) { max-width: 100%; } }
    }
  }

  .table-card {
    flex: 1; background-color: $card-bg; padding: 6px 8px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    @container betting-history (max-width: 800px) { padding: 4px 6px; }
    @container betting-history (max-width: 550px) { padding: 2px 4px; }

    .table-wrapper { display: flex; flex-direction: column; flex: 1; height: 100%; overflow: hidden; }

    //:deep(.el-table) {
    //  font-size: 14px;
    //  @container betting-history (max-width: 800px) { font-size: 14px; }
    //  .el-table__header th { padding: 4px 0; font-size: 14px; background-color: var(--el-fill-color-light); }
    //  .el-table__cell { padding: 4px 0; }
    //  .cell { padding: 0 6px; line-height: 1.3; }
    //}

    .order-no-box { display: flex; align-items: center; gap: 4px; .copy-icon { cursor: pointer; color: var(--el-text-color-secondary); font-size: 14px; &:hover { color: $main-color; } } }
    .issue-no {  color: var(--el-text-color-regular); font-size: 14px; }
    .bet-keywords { font-weight: bold; color: $main-color; font-size: 14px; }
    .type-name { font-weight: bold; color: var(--el-text-color-primary); font-size: 14px; }
    .type-sub { color: var(--el-text-color-regular); font-size: 14px; }
    .handicap-val { color: $main-color; font-weight: bold; font-size: 14px; }
    .ml-2 { margin-left: 4px; }
    .mt-1 { margin-top: 2px; display: inline-block; }
    .odds-val { font-weight: bold; color: $main-color;  font-size: 13px; }
    .amount-box { display: flex; flex-direction: column; align-items: flex-end; }
    .val-text { font-size: 13px; font-weight: bold; color: var(--el-text-color-primary);  }
    .profit-val { font-size: 13px; font-weight: bold; }

    .draw-result {
      display: flex; flex-direction: column; align-items: center; gap: 4px;
      .winning-numbers { font-weight: bold; color: var(--el-color-danger); font-size: 13px; letter-spacing: 1px; }
      .combo-tags { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
    }

    //:deep(.el-button--link) { font-size: 14px; }
    .text-success { color: var(--el-color-success) !important; }
    .text-danger { color: var(--el-color-danger) !important; }
    .text-gray { color: var(--el-text-color-placeholder) !important; }

    .pagination-wrapper {
      margin-top: 8px; display: flex; justify-content: flex-end; flex-shrink: 0;
      @container betting-history (max-width: 550px) { margin-top: 6px; justify-content: center; }
      //:deep(.el-pagination) {
      //  --el-pagination-button-height: 24px; --el-pagination-font-size: 14px; --el-pagination-button-width: 24px; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 4px;
      //  .el-pagination__total { margin-right: 4px; font-size: 14px; height: 24px; line-height: 24px; }
      //  .el-pagination__sizes { margin-right: 4px; .el-select .el-select__wrapper { min-height: 24px !important; height: 24px !important; padding: 0 6px; font-size: 14px; line-height: 24px; } }
      //  .btn-prev, .btn-next { min-width: 24px; height: 24px; padding: 0 4px; border-radius: 4px; }
      //  .el-pager li { min-width: 24px; height: 24px; line-height: 24px; font-size: 14px; margin: 0 2px; border-radius: 4px; }
      //  .el-pagination__jump { margin-left: 4px; font-size: 14px; height: 24px; line-height: 24px; .el-input { width: 36px; height: 24px; .el-input__wrapper { height: 24px; padding: 0 2px; .el-input__inner { font-size: 14px; text-align: center; } } } }
      //}
    }
  }
}

// 赛事信息样式
.sport-match-info {
  display: flex;
  flex-direction: column;
  gap: 6px;

  .league-row {
    display: flex;
    align-items: center;
    .league-logo { width: 16px; height: 16px; object-fit: contain; margin-right: 6px; }
    .league-name { font-size: 12px; color: var(--el-text-color-regular); }
    .match-time {
      font-size: 12px; color: var(--el-text-color-secondary); margin-left: auto; display: flex; align-items: center;
      .fixture-status { display: flex; align-items: center; }
    }
  }

  .team-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    border-radius: 4px;
    background: var(--el-fill-color-light);

    .team {
      display: flex;
      align-items: center;
      flex: 1;
      gap: 6px;
      .team-logo { width: 20px; height: 20px; object-fit: contain; }
      .team-name { font-size: 13px; font-weight: 500; color: var(--el-text-color-primary); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .right-align { text-align: right; }
    }

    .vs-text {
      font-size: 12px;
      font-weight: bold;
      color: var(--el-text-color-regular);
      margin: 0 10px;
      white-space: nowrap;
    }
  }

  .score-detail-row {
    text-align: center;
    .half-score-text {
      font-size: 12px;
      color: var(--el-text-color-secondary);
      background-color: var(--el-fill-color-light);
      padding: 2px 8px;
      border-radius: 4px;
    }
  }

  .live-score-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    background: var(--el-fill-color-light);
    border-radius: 4px;
    padding: 4px 0;
    margin-top: 2px;

    .live-label { color: var(--el-text-color-regular); }
    .live-val { color: #f8b932; font-weight: bold; }
    .live-half { color: var(--el-text-color-secondary); }
  }
}
</style>
