<template>
  <div class="lottery-page-layout">

    <div class="recent-sidebar-container" :class="{ 'is-collapsed': !isSidebarOpen }">
      <div class="sidebar-collapsed" v-if="!isSidebarOpen" @click="isSidebarOpen = true">
        <div class="custom-icon">
          <el-icon size="24" class="icon-color">
            <Calendar />
          </el-icon>
        </div>
        <div class="vertical-text">{{ t('近期开奖') }}</div>
      </div>

      <div class="sidebar-expanded" v-else>
        <div class="sidebar-header" @click="isSidebarOpen = false">
          <div class="header-left">
            <el-icon class="pointer" size="20">
              <Calendar />
            </el-icon>
            <span class="header-text">{{ t('近期开奖记录') }}</span>
          </div>
          <el-icon class="pointer close-icon" size="20">
            <ArrowLeft />
          </el-icon>
        </div>

        <div class="sidebar-body">
          <el-skeleton :loading="loading" animated>
            <template #template>
              <div class="history-list">
                <div class="history-item" v-for="i in 6" :key="i">
                  <div class="item-header">
                    <el-skeleton-item variant="text" style="width: 40%;" />
                    <el-skeleton-item variant="text" style="width: 30%;" />
                  </div>
                  <div class="balls-display-mini">
                    <div class="m-group" v-for="j in 6" :key="'n'+j">
                      <el-skeleton-item variant="circle" class="m-ball" style="border: none;" />
                    </div>
                    <span class="plus"><el-icon><Plus /></el-icon></span>
                    <div class="m-group special">
                      <el-skeleton-item variant="circle" class="m-ball" style="border: none;" />
                    </div>
                  </div>
                  <div class="item-footer">
                    <el-skeleton-item variant="text" style="width: 60%;" />
                  </div>
                </div>
              </div>
            </template>

            <template #default>
              <el-empty class="dark-empty" v-if="historyLotteryList.length === 0" :description="t('暂无开奖数据')" />

              <div class="history-list" v-else>
                <div class="history-item" v-for="draw in historyLotteryList" :key="draw.issue">
                  <div class="item-header">
                    <span class="issue-text">{{ t('第') }} <span class="highlight">{{ draw.issue }}</span> {{ t('期')
                      }}</span>
                    <span class="time-text">{{ draw.open_time }}</span>
                  </div>

                  <div class="balls-display-mini">
                    <div v-for="(b, i) in draw.lottery_codes.slice(0, 6)" :key="i" class="m-group">
                      <span :class="getBgColorClass(b.color)" class="m-ball">
                        <span class="ball-inner">{{ b.code }}</span>
                      </span>
                      <span class="m-zodiac">{{ b.zodiac }}</span>
                    </div>
                    <span class="plus"><el-icon>
                        <Plus />
                      </el-icon></span>
                    <div class="m-group special" v-if="draw.lottery_codes[6]">
                      <span :class="getBgColorClass(draw.lottery_codes[6].color)" class="m-ball">
                        <span class="ball-inner">{{ draw.lottery_codes[6].code }}</span>
                      </span>
                      <span class="m-zodiac">{{ draw.lottery_codes[6].zodiac }}</span>
                    </div>
                  </div>

                  <div class="item-footer">
                    <span class="special-info">{{ t('特头') }}: {{ draw.special_head }}</span>
                    <span class="divider">|</span>
                    <span class="special-info">{{ t('特尾') }}: {{ draw.special_mantissa }}</span>
                  </div>
                </div>
              </div>
            </template>
          </el-skeleton>
        </div>
      </div>
    </div>

    <div class="pc-digital-container">
      <el-skeleton :loading="loading" animated>
        <template #template>
          <div class="lottery-dashboard">
            <div class="dash-section dash-left">
              <div class="game-info">
                <div class="game-details">
                  <el-skeleton-item variant="text" style="width: 140px; height: 32px; margin-bottom: 8px;" />
                  <el-skeleton-item variant="rect" style="width: 100px; height: 24px; border-radius: 20px;" />
                </div>
              </div>
            </div>

            <div class="dash-section dash-center">
              <el-skeleton-item variant="text" style="width: 120px; margin-bottom: 12px;" />
              <div class="modern-timer">
                <el-skeleton-item variant="rect" class="time-block" />
                <span class="colon">:</span>
                <el-skeleton-item variant="rect" class="time-block" />
                <span class="colon">:</span>
                <el-skeleton-item variant="rect" class="time-block" />
              </div>
              <el-skeleton-item variant="text" style="width: 160px; margin-top: 12px;" />
            </div>

            <div class="dash-section dash-right">
              <div class="result-header">
                <el-skeleton-item variant="text" style="width: 120px;" />
                <el-skeleton-item variant="text" style="width: 60px;" />
              </div>
              <div class="balls-display">
                <div v-for="i in 6" :key="'skel_n' + i" class="ball-group">
                  <el-skeleton-item variant="circle" class="l-ball" />
                  <el-skeleton-item variant="text" style="width: 20px;" />
                </div>
                <div class="plus-icon"><el-icon><Plus /></el-icon></div>
                <div class="ball-group special">
                  <el-skeleton-item variant="circle" class="l-ball" />
                  <el-skeleton-item variant="text" style="width: 20px;" />
                </div>
              </div>
            </div>
          </div>

          <div class="play-tabs-container">
            <div class="main-tabs">
              <el-skeleton-item variant="button" class="play-tab" style="width: 80px;" v-for="i in 5" :key="'tab'+i" />
            </div>
          </div>

          <div class="play-grid-container">
            <div class="number-grid is-box-grid">
              <div class="num-item" v-for="i in 16" :key="'grid'+i" style="height: 60px;">
                <div class="box-top" style="width: 100%;">
                  <el-skeleton-item variant="text" style="width: 30%;" />
                  <el-skeleton-item variant="text" style="width: 20%;" />
                </div>
                <div class="box-bottom" style="margin-top: 8px;">
                  <el-skeleton-item variant="text" style="width: 60%;" />
                </div>
              </div>
            </div>
          </div>
        </template>

        <template #default>
          <div class="lottery-dashboard">
            <div class="bg-glow"></div>

            <div class="dash-section dash-left">
              <div class="game-info">
                <div class="game-details">
                  <h1 class="game-name">{{ t('香港六合彩') }}</h1>
                  <div class="issue-badge">
                    {{ t('第') }} <span class="highlight">{{ nextIssue }}</span> {{ t('期') }}
                  </div>
                </div>
              </div>
            </div>

            <div class="dash-section dash-center">
              <div class="timer-title">{{ t('距截止下注还有') }}</div>
              
              <template v-if="!isFengpan">
                <div class="modern-timer">
                  <template v-if="timeData.days > 0">
                    <div class="time-block">
                      <span class="num">{{ timeData.days }}</span>
                      <span class="label">{{ t('天') }}</span>
                    </div>
                    <span class="colon">:</span>
                  </template>
                  <div class="time-block">
                    <span class="num">{{ timeData.hours }}</span>
                    <span class="label">{{ t('时') }}</span>
                  </div>
                  <span class="colon">:</span>
                  <div class="time-block">
                    <span class="num">{{ timeData.minutes }}</span>
                    <span class="label">{{ t('分') }}</span>
                  </div>
                  <span class="colon">:</span>
                  <div class="time-block is-seconds">
                    <span class="num">{{ timeData.seconds }}</span>
                    <span class="label">{{ t('秒') }}</span>
                  </div>
                </div>
              </template>
              <template v-else>
                <div class="fengpan-text" style="color: #f8b932; font-size: 24px; font-weight: bold; margin: 10px 0;">
                  {{ t('封盘中') }}
                </div>
              </template>

              <div class="current-bet-issue">{{ t('第') }} <span class="highlight">{{ Number(nextIssue) }}</span> {{
                t('期正在下注') }}</div>
            </div>

            <div v-if="lastDraw" class="dash-section dash-right">
              <div class="result-header">
                <span class="result-title">{{ t('第') }} {{ lastDraw.issue }} {{ t('期开奖') }}</span>
                <div class="actions">
                  <el-button link type="primary" @click="goToOrder">
                    <el-icon style="margin-right: 4px;margin-top: -2px">
                      <Tickets />
                    </el-icon>
                    {{ t('投注记录') }}
                  </el-button>
                </div>
              </div>

              <div class="balls-display">
                <div v-for="(ball, idx) in lastDraw.lottery_codes.slice(0, 6)" :key="'norm_' + idx" class="ball-group">
                  <div :class="getBgColorClass(ball.color)" class="l-ball">
                    <div class="ball-inner">{{ ball.code }}</div>
                  </div>
                  <span class="l-zodiac">{{ ball.zodiac }}</span>
                </div>
                <div class="plus-icon">
                  <el-icon>
                    <Plus />
                  </el-icon>
                </div>
                <div v-if="lastDraw.lottery_codes[6]" class="ball-group special">
                  <div :class="getBgColorClass(lastDraw.lottery_codes[6].color)" class="l-ball">
                    <div class="ball-inner">{{ lastDraw.lottery_codes[6].code }}</div>
                  </div>
                  <span class="l-zodiac">{{ lastDraw.lottery_codes[6].zodiac }}</span>
                </div>
              </div>
            </div>
          </div>

          <div v-if="gameList.length > 0" class="play-tabs-container">
            <div class="main-tabs">
              <div v-for="(game, index) in gameList" :key="game.id" :class="{ 'is-active': activeGameIndex === index }"
                class="play-tab" @click="handleGameClick(index)">
                {{ game.name }}
              </div>
            </div>

            <div v-if="currentGame.gameplay && currentGame.gameplay.length > 1" class="sub-tabs">
              <div v-for="(play, index) in currentGame.gameplay" :key="play.id"
                :class="{ 'is-active': activePlayIndex === index }" class="sub-tab" @click="handlePlayClick(index)">
                {{ play.name }}
              </div>
            </div>
          </div>

          <div class="play-grid-container">
            <div v-if="['特码', '正码', '正码特', '正码1-6'].includes(currentGame.name)" class="quick-actions">
              <el-button plain size="small" @click="!isFengpan && quickSelectWave('红')" :disabled="isFengpan">{{ t('红波') }}</el-button>
              <el-button plain size="small" @click="!isFengpan && quickSelectWave('蓝')" :disabled="isFengpan">{{ t('蓝波') }}</el-button>
              <el-button plain size="small" @click="!isFengpan && quickSelectWave('绿')" :disabled="isFengpan">{{ t('绿波') }}</el-button>
            </div>

            <div :class="isBallStyle ? 'is-ball-grid' : 'is-box-grid'" class="number-grid">
              <div v-for="(item, index) in numberList" :key="item.id" :class="{ 'is-selected': item.flag, 'is-disabled': isFengpan }" class="num-item"
                @click="!isFengpan && toggleSelect(index)">
                <template v-if="isBallStyle">
                  <div :class="getBgColorClass(item.color)" class="ball-wrapper">
                    <div class="ball-inner">{{ item.number }}</div>
                  </div>
                  <span class="odds-text">{{ isFengpan ? '--' : item.odds }}</span>
                </template>

                <template v-else>
                  <div class="box-top">
                    <span :class="getTextColorClass(item.color)" class="box-name">{{ item.number }}</span>
                    <span class="box-odds">{{ isFengpan ? '--' : item.odds }}</span>
                  </div>
                  <div v-if="item.numbers && item.numbers.length" class="box-bottom">
                    <span v-for="(numObj, nIdx) in item.numbers" :key="nIdx" :class="getTextColorClass(numObj.color)"
                      class="mini-num">
                      {{ numObj.number }}
                    </span>
                  </div>
                </template>
              </div>
            </div>
          </div>
        </template>
      </el-skeleton>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n'; // 引入国际化
import { ElMessage } from 'element-plus';
import { Calendar, Tickets, Plus, ArrowLeft } from '@element-plus/icons-vue';
import { getHowPlay, getLHCInfo, getPlayInfo, gameLotteryStatus } from '@/request/api.js';
import { useBetCartStore } from '@/store/hkDigitalCart.js';
import socket from '@/utils/websocket.js';

const router = useRouter();
const betStore = useBetCartStore();
const { t } = useI18n(); // 获取多语言 t 方法

// 增加 loading 状态，初始化为 true
const loading = ref(true);
const isFengpan = ref(false); // 新增封盘状态

// 控制左侧开奖记录侧边栏的展开折叠状态
const isSidebarOpen = ref(true);
const numberToZodiacMap = ref({});
const zodiacToNumberMap = ref({});

const currentIssue = ref('');
const nextIssue = ref('');

const gameList = ref([]);
const historyLotteryList = ref([]);
const numberList = ref([]);

const activeGameIndex = ref(0);
const activePlayIndex = ref(0);

// 倒计时 - 新增 days 字段
const timeData = ref({ days: 0, hours: '00', minutes: '00', seconds: '00' });
let countdownTimer = null;
let remainingSeconds = 0;

const currentGame = computed(() => gameList.value[activeGameIndex.value] || {});
const currentPlayName = computed(() => currentGame.value.gameplay?.[activePlayIndex.value]?.name || '');
const currentPlayId = computed(() => currentGame.value.gameplay?.[activePlayIndex.value]?.id || '');
const lastDraw = computed(() => historyLotteryList.value[0] || null);

const isBallStyle = computed(() => {
  const ballGames = ['特码', '正码', '正码特', '正码1-6'];
  return ballGames.includes(currentGame.value.name);
});

watch(() => betStore.selectedBets, (newBets) => {
  const selectedIds = newBets.map(b => b.id);
  numberList.value.forEach(item => {
    item.flag = selectedIds.includes(item.id);
  });
}, { deep: true });

watch(() => betStore.randomTrigger, () => {
  randomSelect();
});

const initHowPlayData = async () => {
  loading.value = true; // 开始加载

  gameLotteryStatus({ type: 4 }).then((res) => {
    if(res && res.data) {
      if(res.data.is_kaipan == 0) {
         isFengpan.value = true;
      } else if(res.data.is_kaipan == 1) {
         isFengpan.value = false;
      }
    }
  }).catch(e => console.error(e));

  try {
    const [infoRes, playRes] = await Promise.all([getLHCInfo(), getHowPlay({ type: 2 })]);
    if (infoRes.code === 1 && infoRes.data) {
      numberToZodiacMap.value = infoRes.data.number_to_zodiac || {};
      zodiacToNumberMap.value = infoRes.data.zodiac_to_number || {};
    }
    if (playRes.code === 1 && playRes.data) {
      currentIssue.value = playRes.data.issue;
      nextIssue.value = playRes.data.next_issue;
      gameList.value = playRes.data.games || [];
      if (playRes.data.history_lottery) {
        historyLotteryList.value = playRes.data.history_lottery.map(item => ({
          ...item,
          lottery_codes: item.lottery_codes.map(codeStr => ({
            code: codeStr,
            color: calculateBallColor(codeStr),
            zodiac: numberToZodiacMap.value[codeStr] || ''
          }))
        }));
      }
      if(playRes.data?.countdown != 0) {
        startCountdown(Number(playRes.data.countdown || 0));
      }

      await fetchPlayInfo(); // 等待盘口数据也加载完
    }
  } catch (error) {
    console.error('获取数据失败', error);
  } finally {
    loading.value = false; // 加载完毕
  }
};

const handleSocketMessage = (e) => {
  try {
    const res = e.detail;
    if (!res) return;
    if (res.type === 'hk_lhc_fengpan') {
      isFengpan.value = true;
    } else if (res.type === 'hk_lhc_kaipan') {
      isFengpan.value = false;
    }
  } catch (err) {
    console.error('WS 解析失败', err);
  }
};

onMounted(() => {
  initHowPlayData();
  socket.eventBus.addEventListener('onSocketMessage', handleSocketMessage);
});

onUnmounted(() => {
  clearInterval(countdownTimer);
  socket.eventBus.removeEventListener('onSocketMessage', handleSocketMessage);
});

const handleGameClick = (index) => {
  if (activeGameIndex.value === index) return;
  activeGameIndex.value = index;
  activePlayIndex.value = 0;
  fetchPlayInfo();
};

const handlePlayClick = (index) => {
  if (activePlayIndex.value === index) return;
  activePlayIndex.value = index;
  fetchPlayInfo();
};

const fetchPlayInfo = async () => {
  if (!currentPlayId.value) return;
  numberList.value = [];
  try {
    const res = await getPlayInfo({ id: currentPlayId.value });
    if (res.code === 1 && res.data) {
      numberList.value = res.data.map(item => {
        let color = '';
        if (isBallStyle.value || !isNaN(item.number)) color = calculateBallColor(item.number);
        else {
          if (item.number.includes('红')) color = '红';
          else if (item.number.includes('蓝')) color = '蓝';
          else if (item.number.includes('绿')) color = '绿';
        }
        let tinyNums = [];
        if (zodiacToNumberMap.value[item.number]) {
          tinyNums = zodiacToNumberMap.value[item.number].map(nStr => ({
            number: nStr, color: calculateBallColor(nStr)
          }));
        }
        return {
          id: item.id, number: item.number, odds: item.odds, color: color,
          flag: betStore.hasBet(item.id),
          numbers: tinyNums,
          ...item
        };
      });
    }
  } catch (error) {
    console.error('获取盘口失败', error);
  }
};

const toggleSelect = (index) => {
  const item = numberList.value[index];
  item.flag = !item.flag;

  const betItem = {
    id: item.id,
    gameName: currentGame.value.name,
    playName: currentPlayName.value,
    number: item.number,
    odds: item.odds,
    color: item.color,
    amount: item.mininum || 10
  };

  betStore.toggleBet(betItem);
};

const quickSelectWave = (colorStr) => {
  numberList.value.forEach((item, index) => {
    if (item.color === colorStr && !item.flag) toggleSelect(index);
    else if (item.color !== colorStr && item.flag) toggleSelect(index);
  });
};

const randomSelect = () => {
  if (isFengpan.value) return; // 禁用机选
  const unselectedIndices = [];
  numberList.value.forEach((item, index) => {
    if (!item.flag) {
      unselectedIndices.push(index);
    }
  });

  if (unselectedIndices.length > 0) {
    const randomIndex = unselectedIndices[Math.floor(Math.random() * unselectedIndices.length)];
    toggleSelect(randomIndex);
  } else {
    // 增加多语言提示
    ElMessage.warning(t('当前已全选，无可用机选号码'));
  }
};

const goToOrder = () => router.push({ name: 'AllHistory', query: { tab: 2 } });

const startCountdown = (seconds) => {
  remainingSeconds = seconds;
  clearInterval(countdownTimer);
  countdownTimer = setInterval(() => {
    if (remainingSeconds > 0) {
      remainingSeconds--;
      // 计算天、时、分、秒
      const d = Math.floor(remainingSeconds / 86400); // 1天 = 24 * 60 * 60 = 86400秒
      const h = Math.floor((remainingSeconds % 86400) / 3600);
      const m = Math.floor((remainingSeconds % 3600) / 60);
      const s = remainingSeconds % 60;

      timeData.value.days = d;
      timeData.value.hours = h.toString().padStart(2, '0');
      timeData.value.minutes = m.toString().padStart(2, '0');
      timeData.value.seconds = s.toString().padStart(2, '0');
    } else {
      clearInterval(countdownTimer);
      initHowPlayData();
    }
  }, 1000);
};

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

const newLocal = 'bg-red';
const getBgColorClass = (colorName) => colorName === '红' ? newLocal : colorName === '蓝' ? 'bg-blue' : colorName === '绿' ? 'bg-green' : 'bg-gray';
const getTextColorClass = (colorName) => colorName === '红' ? 'text-red' : colorName === '蓝' ? 'text-blue' : colorName === '绿' ? 'text-green' : 'text-normal';

</script>

<style lang="scss" scoped>
$main-color: #f8b932;
$selected-color: #f2ba45;
$bg-dark: #141414;
$panel-bg: #1e1e1e;
$bg-sidebar: #1e1e1e;
$bg-sidebar-hover: #2a2a2a;
$border-color: rgba(255, 255, 255, 0.08);

.text-gold {
  color: $main-color;
}

.text-red {
  color: #f11717;
}

.text-blue {
  color: #0e86e3;
}

.text-green {
  color: #38be4f;
}

.text-normal {
  color: #e5e5e5;
}

.bg-red,
.bg-blue,
.bg-green,
.bg-gray {
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
  border: none;
  box-shadow: none;
}

.bg-red {
  background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
}

.bg-blue {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.bg-green {
  background: linear-gradient(135deg, #0ba360 0%, #3cba92 100%);
}

.bg-gray {
  background: #555;
}

.ball-inner {
  width: 80%;
  height: 80%;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

/* ====================================
   全局布局
   ==================================== */
.lottery-page-layout {
  display: flex;
  height: 100%;
  min-height: calc(100vh - 64px);
  background-color: $bg-dark;
  overflow: hidden;
}

/* ====================================
   左侧折叠侧边栏 (近期开奖)
   ==================================== */
.recent-sidebar-container {
  height: 100%;
  background-color: $bg-sidebar;
  border-right: 1px solid $border-color;
  display: flex;
  flex-direction: column;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 100;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);

  &.is-collapsed {
    width: 50px !important;
  }

  &:not(.is-collapsed) {
    width: 330px !important;
  }

  .sidebar-collapsed {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding-top: 20px;
    transition: background 0.3s;

    &:hover {
      background-color: $bg-sidebar-hover;
    }

    .custom-icon {
      position: relative;
      margin-bottom: 20px;
      display: flex;
      justify-content: center;
      align-items: center;

      .icon-color {
        color: $main-color;
      }
    }

    .vertical-text {
      writing-mode: vertical-rl;
      letter-spacing: 4px;
      font-weight: bold;
      color: #e5e5e5;
    }
  }

  .sidebar-expanded {
    display: flex;
    flex-direction: column;
    height: 100%;

    .sidebar-header {
      height: 60px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 16px;
      border-bottom: 1px solid $border-color;
      background-color: $bg-sidebar;
      cursor: pointer;
      transition: background 0.2s;

      &:hover {
        background-color: $bg-sidebar-hover;
      }

      .header-left {
        display: flex;
        align-items: center;
        gap: 8px;
        color: $main-color;

        .header-text {
          font-weight: bold;
          color: #e5e5e5;
          font-size: 15px;
        }
      }

      .close-icon {
        color: #999;
        transition: color 0.2s;

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

    .sidebar-body {
      flex: 1;
      overflow-y: auto;
      padding: 12px;
      background-color: $bg-dark;

      &::-webkit-scrollbar {
        width: 6px;
      }

      &::-webkit-scrollbar-track {
        background: transparent;
      }

      &::-webkit-scrollbar-thumb {
        background: #333;
        border-radius: 4px;
      }

      &::-webkit-scrollbar-thumb:hover {
        background: #555;
      }

      .history-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .history-item {
        background-color: $bg-sidebar;
        border-radius: 8px;
        padding: 12px;
        border: 1px solid $border-color;
        transition: transform 0.2s, border-color 0.2s;

        &:hover {
          border-color: rgba(248, 185, 50, 0.3);
          transform: translateY(-2px);
        }

        .item-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12px;

          .issue-text {
            color: #ccc;
            font-size: 14px;

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

          .time-text {
            color: #888;
            font-size: 12px;
          }
        }

        .balls-display-mini {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 2px;
          margin-bottom: 12px;

          .m-group {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;

            .m-ball {
              width: 26px;
              height: 26px;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;

              .ball-inner {
                font-size: 12px;
                width: 80%;
                height: 80%;
              }
            }

            .m-zodiac {
              font-size: 12px;
              color: #999;
              transform: scale(0.9);
            }

            &.special .m-ball {
              transform: scale(1.15);
            }
          }

          .plus {
            color: #666;
            font-size: 14px;
            margin-top: -16px;
          }
        }

        .item-footer {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 10px;
          padding-top: 8px;
          border-top: 1px dashed rgba(255, 255, 255, 0.05);

          .special-info {
            color: #aaa;
            font-size: 13px;
          }

          .divider {
            color: #444;
            font-size: 12px;
          }
        }
      }
    }
  }
}

/* ====================================
   主内容区
   ==================================== */
.pc-digital-container {
  flex: 1;
  overflow-y: auto;
  color: #e5e5e5;
  padding-bottom: 20px;
  container-type: inline-size;
  container-name: entertainment-container;
}

/* ====================================
   顶部仪表盘
   ==================================== */
.lottery-dashboard {
  position: relative;
  background: linear-gradient(180deg, #1f1f1f 0%, #141414 100%);
  border-bottom: 1px solid $border-color;
  padding: 30px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;

  @container entertainment-container (max-width: 800px) {
    flex-direction: column;

    .dash-left{
      margin-bottom: 30px;
      min-width: 310px;
    }
    .dash-center{
      margin-bottom: 20px;
    }
    .dash-right {
      margin-top: 20px;
      align-items: center !important;
    }

    .dash-left,
    .dash-right,
    .dash-center {
      width: 100%;
      align-items: center;
      justify-content: center!important;
      text-align: center;
    }
  }

  @container entertainment-container (max-width: 1200px) {
    flex-wrap: wrap;
    gap: 20px;
    .dash-left{
      order: 1;
      min-width: 100%;
      justify-content: center!important;
    }
    .dash-center{
      order: 3;
    }
    .dash-right {
      order: 2;
    }

    .dash-left,
    .dash-right,
    .dash-center {

    }
  }

  @container entertainment-container (max-width: 4000px) {
    .dash-right{
      //order: 2;
    }
  }

  .bg-glow {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 300px;
    background: radial-gradient(circle, rgba(242, 186, 69, 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
  }

  .dash-section {
    position: relative;
    z-index: 2;
  }

  .dash-left {
    flex: 1;
    display: flex;
    justify-content: flex-start;
  }

  .dash-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .dash-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .game-info {
    display: flex;
    align-items: center;
    gap: 20px;

    .game-name {
      margin: 0;
      font-size: 28px;
      font-weight: 900;
      color: #fff;
      letter-spacing: 2px;
    }

    .issue-badge {
      display: inline-block;
      background: rgba(255, 255, 255, 0.05);
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 12px;
      /* 字体缩小 */
      white-space: nowrap;
      /* 内部文字不换行 */
      color: #aaa;
      border: 1px solid #333;
      margin-top: 8px;;

      .highlight {
        color: $main-color;
        font-weight: bold;
        font-size: 14px;
        margin: 0 4px;
      }

      /* 数字跟随微调 */
    }
  }

  .timer-title {
    font-size: 14px;
    color: #888;
    letter-spacing: 1px;
  }

  .modern-timer {
    display: flex;
    align-items: center;
    gap: 10px;

    .time-block {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
      border: 1px solid #333;
      border-radius: 8px;
      width: 60px;
      height: 70px;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);

      .num {
        font-size: 32px;
        font-weight: bold;
        color: #fff;
        font-family: DIN, monospace;
        line-height: 1;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
      }

      .label {
        font-size: 12px;
        color: #777;
        margin-top: 4px;
      }

      &.is-seconds .num {
        color: $selected-color;
        text-shadow: 0 0 10px rgba(242, 186, 69, 0.4);
      }
    }

    .colon {
      font-size: 28px;
      font-weight: bold;
      color: #666;
      margin-bottom: 15px;
      animation: blink 1.2s infinite ease-in-out;
    }
  }

  .result-header {
    width: 100%;
    max-width: 320px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;

    .result-title {
      font-size: 15px;
      font-weight: bold;
      color: #ccc;
    }

    .actions {
      display: flex;
      gap: 4px;
    }
  }

  .balls-display {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid $border-color;
    padding: 12px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;

    .ball-group {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;

      .l-ball {
        width: 36px;
        height: 36px;
        font-size: 18px;
        font-weight: bold;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
      }

      .l-zodiac {
        font-size: 12px;
        color: #999;
      }

      &.special {
        padding-left: 8px;

        .l-ball {
          transform: scale(1.15);
        }
      }
    }

    .plus-icon {
      font-size: 20px;
      color: #666;
      font-weight: bold;
      margin-top: -20px;
    }
  }
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.2;
  }
}

/* ====================================
   玩法 Tabs
   ==================================== */
.play-tabs-container {
  background-color: $panel-bg;
  border-bottom: 1px solid $border-color;

  .main-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 20px 40px;

    .play-tab {
      padding: 10px 24px;
      background: rgba(0, 0, 0, 0.2);
      border: 1px solid transparent;
      border-radius: 8px;
      font-size: 15px;
      color: #aaa;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        background: rgba(255, 255, 255, 0.05);
        color: #fff;
      }

      &.is-active {
        background: $selected-color;
        color: #111;
        font-weight: bold;
        box-shadow: 0 4px 10px rgba(242, 186, 69, 0.2);
      }
    }
  }

  .sub-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 40px 20px;

    .sub-tab {
      padding: 6px 18px;
      border: 1px solid #444;
      background: #1a1a1a;
      border-radius: 20px;
      font-size: 13px;
      color: #999;
      cursor: pointer;
      transition: all 0.2s;

      &:hover {
        color: $selected-color;
        border-color: $selected-color;
      }

      &.is-active {
        color: #fff;
        border-color: $selected-color;
        background: rgba(242, 186, 69, 0.15);
        font-weight: bold;
      }
    }
  }
}

/* ====================================
   选号网格
   ==================================== */
.play-grid-container {
  padding: 30px 40px;

  .quick-actions {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;

    :deep(.el-button) {
      background: #1a1a1a;
      border-color: #444;
      color: #aaa;

      &:hover {
        border-color: $selected-color;
        color: $selected-color;
      }
    }
  }

  .number-grid {
    display: grid;
    gap: 10px;

    &.is-ball-grid {
      grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

      .num-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 16px 0;
        background: $panel-bg;
        border: 1px solid $border-color;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.2s;

        .ball-wrapper {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 22px;
          font-weight: bold;
          color: #fff;
          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        }

        .odds-text {
          font-size: 14px;
          color: #999;
          transition: color 0.2s;
        }

        &:hover {
          border-color: rgba(255, 255, 255, 0.3);
          transform: translateY(-3px);
          box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
        }

        &.is-selected {
          background-color: $selected-color !important;
          border-color: $selected-color;
          transform: translateY(-3px);
          box-shadow: 0 8px 20px rgba(242, 186, 69, 0.3);

          .odds-text {
            color: #111 !important;
            font-weight: 900;
          }

          .ball-wrapper {
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
          }
        }
        
        &.is-disabled {
          opacity: 0.5;
          cursor: not-allowed;
          pointer-events: none;
          filter: grayscale(50%);
        }
      }
    }

    &.is-box-grid {
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

      .num-item {
        background: $panel-bg;
        border: 1px solid $border-color;
        border-radius: 10px;
        padding: 14px 20px;
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        flex-direction: column;
        gap: 12px;

        .box-top {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .box-name {
            font-size: 14px;
            // font-weight: bold;
          }

          .box-odds {
            font-size: 14px;
            color: #f8b932;
            font-weight: bold;
          }
        }

        .box-bottom {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;

          .mini-num {
            font-size: 13px;
            font-weight: bold;
            padding: 3px 8px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 4px;
          }
        }

        &:hover {
          border-color: rgba(255, 255, 255, 0.3);
          transform: translateY(-2px);
          box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
        }

        &.is-selected {
          background-color: $selected-color !important;
          border-color: $selected-color;
          transform: translateY(-2px);
          box-shadow: 0 8px 20px rgba(242, 186, 69, 0.3);

          .box-top .box-name {
            color: #fff !important;
            font-weight: bold;
          }

          .box-top .box-odds {
            color: #fff !important;
            font-weight: 900;
          }

          .box-bottom .mini-num {
            background: rgba(0, 0, 0, 0.15);
            color: #111 !important;
            text-shadow: none;
          }
        }
        
        &.is-disabled {
          opacity: 0.5;
          cursor: not-allowed;
          pointer-events: none;
          filter: grayscale(50%);
        }
      }
    }
  }
}

.current-bet-issue {
  font-size: 18px;
  /* 字体放大 */
  color: #fff;
  font-weight: bold;

  .highlight {
    color: #67c23a;
    font-weight: bold;
    font-size: 20px!important;
  }
}

/* ====================================
   响应式适配 (页面 & Dashboard)
   ==================================== */

@media screen and (max-width: 1600px) {
  .sidebar-header {
    height: 50px !important;
  }
}

/* 平板 & 笔记本屏幕 */
@media screen and (max-width: 1400px) {
  .recent-sidebar-container:not(.is-collapsed) {
    width: 300px !important;
  }

  .dash-right {
    margin-left: 20px;
  }
}

@media screen and (max-width: 1270px) {
  //.lottery-dashboard {
  //  flex-wrap: wrap;
  //  padding: 20px;
  //  gap: 20px;
  //
  //  .dash-left {
  //    flex: 1;
  //    min-width: 40%;
  //  }
  //
  //  .dash-center {
  //    flex: 1;
  //    min-width: 40%;
  //  }
  //
  //  .dash-right {
  //    flex: 1 1 100%;
  //    align-items: center;
  //    margin-top: 10px;
  //
  //    .result-header {
  //      max-width: 100%;
  //      width: 100%;
  //      justify-content: center;
  //      gap: 30px;
  //    }
  //  }
  //}
}

/* 小屏幕 & 移动端适配 */
@media screen and (max-width: 1000px) {

  /* 隐藏左侧栏或保持极简模式以确保主页面可用 */
  .recent-sidebar-container:not(.is-collapsed) {
    width: 260px !important;
    position: absolute;
    height: 100%;
    z-index: 999;
  }

  //.lottery-dashboard {
  //  flex-direction: column;
  //  padding: 15px;
  //  gap: 20px;
  //
  //  .dash-left,
  //  .dash-center,
  //  .dash-right {
  //    width: 100%;
  //    align-items: center;
  //    justify-content: center;
  //    text-align: center;
  //  }
  //
  //  .game-info {
  //    flex-direction: column;
  //    gap: 10px;
  //  }
  //
  //  .balls-display {
  //    flex-wrap: wrap;
  //    justify-content: center;
  //    padding: 10px;
  //    gap: 6px;
  //
  //    .ball-group {
  //      .l-ball {
  //        width: 30px;
  //        height: 30px;
  //        font-size: 14px;
  //      }
  //
  //      &.special {
  //        padding-left: 4px;
  //      }
  //    }
  //
  //    .plus-icon {
  //      margin-top: -15px;
  //      font-size: 16px;
  //    }
  //  }
  //}

  /* 缩小底部号码盘在小屏幕下的网格大小 */
  .play-grid-container {
    padding: 15px;

    .number-grid {
      &.is-box-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      }

      &.is-ball-grid {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
      }
    }
  }
}
</style>