<template>
  <div class="home-container">
    <!-- 页面头部 -->
    <el-card class="page-header" shadow="never">
      <div class="header-top">
        <el-button class="back-btn" @click="$router.push('/')" icon="ArrowLeft">
          返回
        </el-button>
      </div>
      <div class="page-title">
        <h1 class="main-title">双色球智能猪手</h1>
        <p class="subtitle">专业算法，智能推荐，提升体验</p>
      </div>
    </el-card>

    <!-- 步骤导航 -->
    <el-card class="step-nav-card" shadow="hover">
      <el-steps :active="currentStep" finish-status="success" process-status="process" class="custom-steps">
        <el-step v-for="(step, index) in steps" :key="index" :title="step" :status="getStepStatus(index + 1)" />
      </el-steps>
    </el-card>

    <!-- 步骤内容 -->
    <div class="step-content">
      <!-- 第一步：选择参数 -->
      <el-card v-if="currentStep === 1" class="step-panel" shadow="hover">
        <template #header>
        <h3>选择推测阶段的关键数据区位</h3>
        </template>
        
        <div class="position-selector">
          <el-card
            v-for="pos in positions" 
            :key="pos.value"
            class="position-item"
            :class="{ selected: formData.level === pos.value }"
            shadow="hover"
            @click="formData.level = pos.value"
          >
            <div class="position-title">{{ pos.label }}</div>
          </el-card>
        </div>

        <!-- 位置选择提示 -->
        <el-alert
          v-if="!formData.level"
          title="请先选择上方的关键数据区位哦！"
          type="info"
          :closable="false"
          show-icon
        />

        <div class="input-section">
          <label>请选择已开奖期号:</label>
          <el-select
            v-model="formData.drawId"
            placeholder="请选择或输入期号"
            filterable
            allow-create
            default-first-option
            :disabled="!formData.level"
            clearable
            class="draw-id-select"
            @change="handleDrawIdChange"
          >
            <el-option
              v-for="item in recentDrawIds"
              :key="item"
              :label="item"
              :value="String(item)"
            />
          </el-select>
        </div>

        <div class="input-section ball-input-section">
          <label>上期红球号码（6个）:</label>
          <div class="red-balls-selector">
            <div 
              v-for="(ball, index) in formData.lastRedBalls" 
              :key="'red-ball-' + index"
              class="ball-selector-container"
            >
              <div 
                class="ball-number-display"
                :class="{ 
                  'selected': ball !== '', 
                  'clickable': true
                }"
                @click="openBallSelector(index)"
              >
                {{ ball || '?' }}
              </div>
            </div>
          </div>
          
          <!-- 球号选择弹窗 -->
          <el-dialog
            v-model="showBallSelector"
            title="选择红球号码"
            width="500px"
            center
            append-to-body
          >
              <h4>选择第{{ currentBallIndex + 1 }}个红球号码</h4>
              <div class="ball-numbers-grid">
                <div 
                  v-for="num in 33" 
                  :key="num"
                  class="ball-number-option"
                  :class="{ 
                    'selected': formData.lastRedBalls[currentBallIndex] == num,
                    'used': formData.lastRedBalls.includes(String(num).padStart(2, '0')) && formData.lastRedBalls[currentBallIndex] != String(num).padStart(2, '0')
                  }"
                  @click="selectBallNumber(num)"
                >
                  {{ String(num).padStart(2, '0') }}
                </div>
              </div>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="clearBallNumber">清空</el-button>
                <el-button type="primary" @click="closeBallSelector">确定</el-button>
              </div>
            </template>
          </el-dialog>
        </div>

        <div class="input-section">
          <label>上期蓝球号码:</label>
          <div class="blue-ball-selector">
            <div class="ball-selector-container">
              <div 
                class="ball-number-display blue-ball-display"
                :class="{ 
                  'selected': formData.lastBlueBall !== '', 
                  'clickable': true
                }"
                @click="openBlueBallSelector"
              >
                {{ formData.lastBlueBall || '?' }}
              </div>
            </div>
          </div>
          
          <!-- 蓝球号选择弹窗 -->
          <el-dialog
            v-model="showBlueBallSelector"
            title="选择蓝球号码"
            width="500px"
            center
            append-to-body
          >
              <h4>选择蓝球号码</h4>
              <div class="ball-numbers-grid">
                <div 
                  v-for="num in 16" 
                  :key="num"
                  class="ball-number-option blue-option"
                  :class="{ 
                    'selected': formData.lastBlueBall == String(num).padStart(2, '0')
                  }"
                  @click="selectBlueBallNumber(num)"
                >
                  {{ String(num).padStart(2, '0') }}
                </div>
              </div>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="clearBlueBallNumber">清空</el-button>
                <el-button type="primary" @click="closeBlueBallSelector">确定</el-button>
              </div>
            </template>
          </el-dialog>
        </div>

        <!-- 推测期号输入框 -->
        <div class="input-section">
          <label>推测期号:</label>
          <el-input
            v-model="formData.predictDrawId"
            placeholder="自动填充"
            disabled
            class="draw-id-select"
          />
        </div>

        <!-- 用户验证状态提示 -->
        <div v-if="userVerifying" class="verification-status">
          <div class="loading-spinner">⏳</div>
          <p>正在验证登录状态...</p>
        </div>
        
        <el-alert
          v-else-if="!userVerified"
          title="您还未登录，登录成功后才可使用推测功能"
          type="error"
          show-icon
          :closable="false"
          style="margin: 20px 0;"
        >
          <template #default>
            <router-link to="/login">
              <el-button type="primary" size="small">前往登录</el-button>
            </router-link>
          </template>
        </el-alert>

        <el-button 
          type="primary"
          class="full-width continue-btn"
          @click="nextStep"
          :disabled="!canProceedStep1"
          :loading="userVerifying"
        >
          {{ userVerifying ? '验证中...' : (userVerified ? '继续' : '请先登录') }}
        </el-button>
      </el-card>

      <!-- 第二步：展示首球分析结果 -->
      <el-card v-if="currentStep === 2" class="step-panel" shadow="hover">
        <template #header>
        <h3>首球推测</h3>
        </template>
        
        <el-skeleton v-if="loading" :rows="3" animated />
        
        <div v-if="analyzedRedBalls.length > 0" class="balls-display">
          <el-alert
            type="success"
            title="彩票猪手为您推荐了11个数据向好的红球，请参考!"
            :closable="false"
            style="margin-bottom: 15px;"
          />
          <div class="balls-container">
            <span 
              v-for="ball in analyzedRedBalls" 
              :key="ball"
              class="ball-red"
            >
              {{ String(ball).padStart(2, '0') }}
            </span>
          </div>
        </div>

        <el-divider content-position="center">选择首球和随球</el-divider>
        
        <div class="input-section">
          <label>选择1个红球作为首球:</label>
          <div class="first-ball-selector">
            <div class="ball-selector-container">
              <div 
                class="ball-number-display"
                :class="{ 
                  'selected': formData.firstBall !== '', 
                  'clickable': true
                }"
                @click="openFirstBallSelector"
              >
                {{ formData.firstBall || '?' }}
              </div>
            </div>
          </div>
        </div>

        <div class="input-section">
          <label>选择2个红球作为随球:</label>
          <div class="follow-balls-selector">
            <div 
              v-for="(ball, index) in formData.followBalls" 
              :key="'follow-ball-' + index"
              class="ball-selector-container"
            >
              <div 
                class="ball-number-display"
                :class="{ 
                  'selected': ball !== '', 
                  'clickable': true
                }"
                @click="openFollowBallSelector(index)"
              >
                {{ ball || '?' }}
              </div>
            </div>
          </div>
        </div>

        <!-- 首球选择弹窗 -->
        <el-dialog
          v-model="showFirstBallSelector"
          title="选择首球号码"
          width="500px"
          center
          append-to-body
        >
            <h4>选择首球号码</h4>
            <div class="ball-numbers-grid">
              <div 
                v-for="num in 33" 
                :key="num"
                class="ball-number-option"
                :class="{ 
                  'selected': formData.firstBall == String(num).padStart(2, '0'),
                  'used': formData.followBalls.includes(String(num).padStart(2, '0')),
                  'recommended': analyzedRedBalls.includes(num)
                }"
                @click="selectFirstBallNumber(num)"
              >
                {{ String(num).padStart(2, '0') }}
              <el-tag v-if="analyzedRedBalls.includes(num)" size="small" type="success" class="recommended-badge">推荐</el-tag>
              </div>
            </div>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="clearFirstBallNumber">清空</el-button>
              <el-button type="primary" @click="closeFirstBallSelector">确定</el-button>
            </div>
          </template>
        </el-dialog>

        <!-- 随球选择弹窗 -->
        <el-dialog
          v-model="showFollowBallSelector"
          title="选择随球号码"
          width="500px"
          center
          append-to-body
        >
            <h4>选择第{{ currentFollowBallIndex + 1 }}个随球号码</h4>
            <div class="ball-numbers-grid">
              <div 
                v-for="num in 33" 
                :key="num"
                class="ball-number-option"
                :class="{ 
                  'selected': formData.followBalls[currentFollowBallIndex] == String(num).padStart(2, '0'),
                  'used': (formData.firstBall == String(num).padStart(2, '0')) || 
                         (formData.followBalls.includes(String(num).padStart(2, '0')) && 
                          formData.followBalls[currentFollowBallIndex] != String(num).padStart(2, '0')),
                  'recommended': analyzedRedBalls.includes(num)
                }"
                @click="selectFollowBallNumber(num)"
              >
                {{ String(num).padStart(2, '0') }}
              <el-tag v-if="analyzedRedBalls.includes(num)" size="small" type="success" class="recommended-badge">推荐</el-tag>
              </div>
            </div>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="clearFollowBallNumber">清空</el-button>
              <el-button type="primary" @click="closeFollowBallSelector">确定</el-button>
            </div>
          </template>
        </el-dialog>

        <div class="button-group">
          <el-button @click="prevStep">上一步</el-button>
          <el-button 
            type="primary"
            @click="nextStep"
            :disabled="!canProceedStep2"
            class="continue-btn"
          >
            继续
          </el-button>
        </div>
      </el-card>

      <!-- 第三步：跟随球分析 -->
      <el-card v-if="currentStep === 3" class="step-panel" shadow="hover">
        <template #header>
        <h3>随球推测</h3>
        </template>
        
        <el-skeleton v-if="loading" :rows="3" animated />
        
        <div v-if="followAnalyzedBalls.length > 0" class="balls-display">
          <el-alert
            type="success"
            title="彩票猪手为您推荐了8个数据向好的红球，请参考!"
            :closable="false"
            style="margin-bottom: 15px;"
          />
          <div class="balls-container">
            <span 
              v-for="ball in followAnalyzedBalls" 
              :key="ball"
              class="ball-red"
            >
              {{ String(ball).padStart(2, '0') }}
            </span>
          </div>
        </div>

        <el-divider content-position="center">组合6个红球号码</el-divider>
        <el-alert
          type="info"
          title="首球已自动填入，请选择其余5个红球号码"
          :closable="false"
          style="margin-bottom: 20px;"
        />
        
        <div class="selected-red-balls-container">
          <div class="input-section">
            <label style="font-weight: bold; font-size: 16px;">首球（已自动填入）:</label>
            <div class="first-ball-display">
              <div class="ball-number-display selected disabled-ball">
                {{ formData.firstBall || '?' }}
              </div>
            </div>
          </div>
          
          <div class="input-section">
            <label style="font-weight: bold; font-size: 16px;">其余5个红球:</label>
            <div class="selected-balls-selector">
              <div 
                v-for="(ball, index) in formData.selectedRedBalls" 
                :key="'selected-ball-' + index"
                class="ball-selector-container"
              >
                <div 
                  class="ball-number-display"
                  :class="{ 
                    'selected': ball !== '', 
                    'clickable': true
                  }"
                  @click="openSelectedBallSelector(index)"
                >
                  {{ ball || '?' }}
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 其余红球选择弹窗 -->
        <el-dialog
          v-model="showSelectedBallSelector"
          title="选择红球号码"
          width="500px"
          center
          append-to-body
        >
            <h4>选择第{{ currentSelectedBallIndex + 2 }}个红球号码</h4>
            <div class="ball-numbers-grid">
              <div 
                v-for="num in 33" 
                :key="num"
                class="ball-number-option"
                :class="{ 
                  'selected': formData.selectedRedBalls[currentSelectedBallIndex] == String(num).padStart(2, '0'),
                  'used': isNumberUsedInStep3(num),
                  'recommended': followAnalyzedBalls.includes(num)
                }"
                @click="selectSelectedBallNumber(num)"
              >
                {{ String(num).padStart(2, '0') }}
              <el-tag v-if="followAnalyzedBalls.includes(num)" size="small" type="success" class="recommended-badge">推荐</el-tag>
              </div>
            </div>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="clearSelectedBallNumber">清空</el-button>
              <el-button type="primary" @click="closeSelectedBallSelector">确定</el-button>
            </div>
          </template>
        </el-dialog>

        <div class="button-group">
          <el-button @click="prevStep">上一步</el-button>
          <el-button 
            type="primary"
            @click="nextStep"
            :disabled="!canProceedStep3"
            class="continue-btn"
          >
            继续
          </el-button>
        </div>
      </el-card>

      <!-- 第四步：蓝球选择和分析 -->
      <el-card v-if="currentStep === 4" class="step-panel" shadow="hover">
        <template #header>
          <h3>蓝球推测</h3>
        </template>
        
        <div class="input-section">
          <label style="font-weight: 600; font-size: 16px;">选择2个蓝球号码:</label>
          <div class="blue-balls-selector">
            <div 
              v-for="(ball, index) in formData.selectedBlueBalls" 
              :key="'blue-ball-' + index"
              class="ball-selector-container"
            >
              <div 
                class="ball-number-display blue-ball-display"
                :class="{ 
                  'selected': ball !== '', 
                  'clickable': true
                }"
                @click="openSelectedBlueBallSelector(index)"
              >
                {{ ball || '?' }}
              </div>
            </div>
          </div>
          
          <!-- 蓝球选择弹窗 -->
          <el-dialog
            v-model="showSelectedBlueBallSelector"
            title="选择蓝球号码"
            width="500px"
            center
            append-to-body
          >
              <h4>选择第{{ currentSelectedBlueBallIndex + 1 }}个蓝球号码</h4>
              <div class="ball-numbers-grid">
                <div 
                  v-for="num in 16" 
                  :key="num"
                  class="ball-number-option blue-option"
                  :class="{ 
                    'selected': formData.selectedBlueBalls[currentSelectedBlueBallIndex] == String(num).padStart(2, '0'),
                    'used': formData.selectedBlueBalls.includes(String(num).padStart(2, '0')) && formData.selectedBlueBalls[currentSelectedBlueBallIndex] != String(num).padStart(2, '0')
                  }"
                  @click="selectSelectedBlueBallNumber(num)"
                >
                  {{ String(num).padStart(2, '0') }}
                </div>
              </div>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="clearSelectedBlueBallNumber">清空</el-button>
                <el-button type="primary" @click="closeSelectedBlueBallSelector">确定</el-button>
              </div>
            </template>
          </el-dialog>
        </div>

        <el-button 
          v-if="formData.selectedBlueBalls.every(ball => ball !== '') && canProceedStep4"
          type="primary"
          class="full-width continue-btn"
          @click="analyzeBlueBalls"
          :loading="loading"
          style="margin: 20px 0;"
        >
          {{ loading ? '分析中...' : '分析蓝球' }}
        </el-button>

        <div v-if="analyzedBlueBalls.length > 0" class="balls-display">
          <el-alert
            type="success"
            title="彩票猪手为您推荐了4个数据向好的蓝球，请参考!"
            :closable="false"
            style="margin-bottom: 15px;"
            class="blue-ball-alert"
          />
          <div class="balls-container">
            <span 
              v-for="ball in analyzedBlueBalls" 
              :key="ball"
              class="ball-blue"
            >
              {{ String(ball).padStart(2, '0') }}
            </span>
          </div>
        </div>

        <div v-if="analyzedBlueBalls.length > 0">
          <el-divider content-position="center">选择最终蓝球</el-divider>
          <div class="input-section">
            <label style="font-weight: 600; font-size: 16px;">参考上面4个蓝球，选择1个蓝球号码:</label>
            <div class="final-blue-ball-selector">
              <div class="ball-selector-container">
                <div 
                  class="ball-number-display blue-ball-display"
                  :class="{ 
                    'selected': formData.finalBlueBall !== '', 
                    'clickable': true
                  }"
                  @click="openFinalBlueBallSelector"
                >
                  {{ formData.finalBlueBall || '?' }}
                </div>
              </div>
            </div>
            
            <!-- 最终蓝球选择弹窗 -->
            <el-dialog
              v-model="showFinalBlueBallSelector"
              title="选择最终蓝球号码"
              width="500px"
              center
              append-to-body
            >
                <h4>选择最终蓝球号码</h4>
                <div class="ball-numbers-grid">
                  <div 
                    v-for="num in 16" 
                    :key="num"
                    class="ball-number-option blue-option"
                    :class="{ 
                      'selected': formData.finalBlueBall == String(num).padStart(2, '0'),
                      'recommended': analyzedBlueBalls.includes(num)
                    }"
                    @click="selectFinalBlueBallNumber(num)"
                  >
                    {{ String(num).padStart(2, '0') }}
                  <el-tag v-if="analyzedBlueBalls.includes(num)" size="small" type="success" class="recommended-badge">推荐</el-tag>
                  </div>
                </div>
              <template #footer>
                <div class="dialog-footer">
                  <el-button @click="clearFinalBlueBallNumber">清空</el-button>
                  <el-button type="primary" @click="closeFinalBlueBallSelector">确定</el-button>
                </div>
              </template>
            </el-dialog>
          </div>
        </div>

        <div class="button-group">
          <el-button @click="prevStep">上一步</el-button>
          <el-button 
            type="primary"
            @click="nextStep"
            :disabled="!canProceedStep4Final"
            class="continue-btn"
          >
            继续
          </el-button>
        </div>
      </el-card>

      <!-- 第五步：最终结果展示 -->
      <el-card v-if="currentStep === 5" class="step-panel" shadow="hover">
        <template #header>
        <h3>您的推测号码</h3>
        </template>
        
        <div class="final-result">
          <div class="result-balls">
            <div class="red-balls">
              <span class="ball-red">{{ String(formData.firstBall).padStart(2, '0') }}</span>
              <span 
                v-for="ball in formData.selectedRedBalls" 
                :key="ball"
                class="ball-red"
              >
                {{ String(ball).padStart(2, '0') }}
              </span>
            </div>
            <div class="blue-ball">
              <span class="ball-blue">{{ String(formData.finalBlueBall).padStart(2, '0') }}</span>
            </div>
          </div>
        </div>

        <!-- 用户服务协议 -->
        <el-card class="terms-section" shadow="hover">
          <el-checkbox v-model="agreeToTerms">
              我已阅读并同意
            <el-button link type="primary" @click.prevent="showTerms">《用户服务协议》</el-button>
          </el-checkbox>
        </el-card>

        <div class="button-group">
          <el-button @click="prevStep">上一步</el-button>
          <el-button 
            type="primary"
            @click="submitPrediction"
            :disabled="loading || !agreeToTerms"
            :loading="loading"
            class="continue-btn"
          >
            {{ loading ? '提交中...' : '确认' }}
          </el-button>
        </div>
      </el-card>
    </div>

    <!-- 警告弹窗 -->
    <el-dialog
      v-model="showWarning"
      title="风险提示"
      width="400px"
      center
    >
      <el-alert
        type="warning"
        title="彩票开奖系随机，推测结果仅参考！"
        :closable="false"
        show-icon
      />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="hideWarning">取消</el-button>
          <el-button type="primary" @click="confirmSubmit">确认</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 成功提交弹窗 -->
    <el-dialog
      v-model="showSuccessModal"
      title="本次推测已完成！"
      width="500px"
      center
    >
      <Trophy class="success-icon" />
      <p>您的第{{ formData.predictDrawId }}期推测号码已完成，祝您好运！</p>
      <div class="success-balls">
        <div class="success-red-balls">
          <span class="ball-red">{{ String(formData.firstBall).padStart(2, '0') }}</span>
          <span 
            v-for="ball in formData.selectedRedBalls" 
            :key="ball"
            class="ball-red"
          >
            {{ String(ball).padStart(2, '0') }}
          </span>
        </div>
        <div class="success-blue-ball">
          <span class="ball-blue">{{ String(formData.finalBlueBall).padStart(2, '0') }}</span>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="hideSuccessModal">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 通用消息弹窗 -->
    <el-dialog
      v-model="showMessageModal"
      :title="messageModalContent.title"
      width="400px"
      center
    >
        <p>{{ messageModalContent.message }}</p>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="hideMessageModal">确定</el-button>
        </div>
      </template>
    </el-dialog>


  </div>
</template>

<script>
import { lotteryApi } from '../api'
import { userStore } from '../store/user'
import { 
  ElButton, 
  ElCard, 
  ElSteps, 
  ElStep, 
  ElInput, 
  ElRadioGroup, 
  ElRadioButton,
  ElDialog,
  ElAlert,
  ElCheckbox,
  ElDivider,
  ElSkeleton,
  ElTag,
  ElSelect,
  ElOption
} from 'element-plus'
import { ArrowLeft, Warning, Check, InfoFilled, Trophy } from '@element-plus/icons-vue'

export default {
  name: 'Home',
  components: {
    ElButton,
    ElCard,
    ElSteps,
    ElStep,
    ElInput,
    ElRadioGroup,
    ElRadioButton,
    ElDialog,
    ElAlert,
    ElCheckbox,
    ElDivider,
    ElSkeleton,
    ElTag,
    ArrowLeft,
    Warning,
    Check,
    InfoFilled,
    ElSelect,
    ElOption,
    Trophy
  },
  data() {
    return {
      currentStep: 1,
      loading: false,
      showWarning: false,
      showSuccessModal: false,
      showMessageModal: false,
      messageModalContent: {
        title: '',
        message: '',
        type: 'info' // 'info', 'error', 'warning'
      },

      userVerified: false, // 用户登录验证状态
      userVerifying: true, // 正在验证用户登录状态
      showBallSelector: false, // 红球号选择弹窗显示状态
      currentBallIndex: 0, // 当前选择的球位置
      showBlueBallSelector: false, // 蓝球号选择弹窗显示状态
      showFirstBallSelector: false, // 首球选择弹窗显示状态
      showFollowBallSelector: false, // 随球选择弹窗显示状态
      currentFollowBallIndex: 0, // 当前选择的随球位置
      showSelectedBallSelector: false, // 其余红球选择弹窗显示状态
      currentSelectedBallIndex: 0, // 当前选择的其余红球位置
      showSelectedBlueBallSelector: false, // 蓝球选择弹窗显示状态
      currentSelectedBlueBallIndex: 0, // 当前选择的蓝球位置
      showFinalBlueBallSelector: false, // 最终蓝球选择弹窗显示状态
      steps: ['推测准备', '推测首球', '推测随球', '推测蓝球', '确定推测'],
      positions: [
        { value: 'H', label: '高区位', desc: '高位投注算法' },
        { value: 'M', label: '中区位', desc: '中位投注算法' },
        { value: 'L', label: '低区位', desc: '低位投注算法' }
      ],
      formData: {
        level: '',
        drawId: '',
        drawDate: '',
        lastRedBalls: ['', '', '', '', '', ''],
        lastBlueBall: '',
        firstBall: '',
        followBalls: ['', ''], // 改为数组，存储2个随球
        selectedRedBalls: ['', '', '', '', ''],
        selectedBlueBalls: ['', ''],
        finalBlueBall: '',
        predictDrawId: '' // 新增推测期号
      },
      analyzedRedBalls: [],
      followAnalyzedBalls: [],
      analyzedBlueBalls: [],
      agreeToTerms: false, // 用户服务协议勾选状态
      recentDrawIds: [], // 存储近10期开奖期号
      drawIdOptions: [], // 用于el-select的选项
      latestDrawId: null // 最新开奖期号
    }
  },
  async mounted() {
    // 进入首页时验证用户登录状态
    await this.verifyUserLogin()
    // 获取近10期开奖期号
    await this.fetchRecentDrawIds()
    
    // 尝试从缓存加载表单数据，静默恢复，不显示提示
    this.loadFormDataFromCache()
  },
  computed: {
    canProceedStep1() {
      return this.userVerified && 
             this.formData.level && 
             this.formData.drawId && 
             this.formData.lastRedBalls.every(ball => ball !== '') && 
             this.formData.lastBlueBall &&
             this.formData.predictDrawId;
    },
    canProceedStep2() {
      return this.formData.firstBall && this.formData.followBalls.every(ball => ball !== '')
    },
    canProceedStep3() {
      return this.formData.selectedRedBalls.every(ball => ball !== '')
    },
    canProceedStep4() {
      return this.formData.selectedBlueBalls.every(ball => ball !== '')
    },
    canProceedStep4Final() {
      return this.canProceedStep4 && this.formData.finalBlueBall && this.analyzedBlueBalls.length > 0
    }
  },
  methods: {
    // 验证用户登录状态
    async verifyUserLogin() {
      this.userVerifying = true
      try {
        // 使用userStore的fetchLoginUser方法获取用户信息
        const userInfo = await userStore.fetchLoginUser()
        
        if (userInfo && userInfo.id) {
          this.userVerified = true
          console.log('用户登录验证成功，用户ID:', userInfo.id)
        } else {
          // 登录验证失败，清除本地登录状态
          this.handleSessionExpired('登录验证失败，session可能已过期')
        }
      } catch (error) {
        // 接口调用失败，可能是session过期或网络问题
        console.error('获取用户信息失败:', error)
        this.handleSessionExpired('登录状态已过期，请重新登录')
      } finally {
        this.userVerifying = false
      }
    },

    // 处理session过期
    handleSessionExpired(message) {
      console.log('Session过期处理:', message)
      
      // 清除本地登录状态
      userStore.logout()
      
      // 设置验证失败状态
      this.userVerified = false
      
      // 可选：显示提示信息
      // alert(message)
    },

    async nextStep() {
      if (this.currentStep === 1) {
        await this.analyzeFirstBalls()
      } else if (this.currentStep === 2) {
        await this.analyzeFallowBalls()
      }
      
      this.currentStep++
    },
    
    prevStep() {
      this.currentStep--
    },

    async analyzeFirstBalls() {
      this.loading = true
      try {
        // 获取用户ID
        const userId = userStore.user?.id
        if (!userId) {
          this.showMessage('登录提示', '请先登录后再进行分析', 'warning')
          this.$router.push('/login')
          return
        }
        
        const response = await lotteryApi.analyzeBalls(
          userId,
          this.formData.level,
          this.formData.lastRedBalls.join(','),
          parseInt(this.formData.lastBlueBall)
        )
        
        if (response.success === true) {
          this.analyzedRedBalls = response.data
        } else {
          this.showMessage('分析失败', response.message, 'error')
        }
      } catch (error) {
        console.error('首球分析失败:', error)
        this.showMessage('分析失败', '请检查网络连接', 'error')
      } finally {
        this.loading = false
      }
    },

    async analyzeFallowBalls() {
      this.loading = true
      try {
        // 获取用户ID
        const userId = userStore.user?.id
        if (!userId) {
          this.showMessage('登录提示', '请先登录后再进行分析', 'warning')
          this.$router.push('/login')
          return
        }
        
        const firstThree = `${this.formData.firstBall},${this.formData.followBalls.join(',')}`
        
        const response = await lotteryApi.fallowBallAnalysis(
          userId,
          this.formData.level,
          firstThree,
          this.formData.lastRedBalls.join(','),
          parseInt(this.formData.lastBlueBall)
        )
        
        if (response.success === true) {
          this.followAnalyzedBalls = response.data
        } else {
          this.showMessage('跟随分析失败', response.message, 'error')
        }
      } catch (error) {
        console.error('跟随分析失败:', error)
        this.showMessage('分析失败', '请检查网络连接', 'error')
      } finally {
        this.loading = false
      }
    },

    async analyzeBlueBalls() {
      this.loading = true
      try {
        // 获取用户ID
        const userId = userStore.user?.id
        if (!userId) {
          this.showMessage('登录提示', '请先登录后再进行分析', 'warning')
          this.$router.push('/login')
          return
        }
        
        const allRedBalls = [this.formData.firstBall, ...this.formData.selectedRedBalls].join(',')
        
        const response = await lotteryApi.blueBallAnalysis(
          userId,
          this.formData.level,
          allRedBalls,
          this.formData.selectedBlueBalls.join(','),
          this.formData.lastRedBalls.join(','),
          parseInt(this.formData.lastBlueBall)
        )
        
        if (response.success === true) {
          this.analyzedBlueBalls = response.data
        } else {
          this.showMessage('蓝球分析失败', response.message, 'error')
        }
      } catch (error) {
        console.error('蓝球分析失败:', error)
        this.showMessage('分析失败', '请检查网络连接', 'error')
      } finally {
        this.loading = false
      }
    },

    submitPrediction() {
      this.showWarning = true
    },

    hideWarning() {
      this.showWarning = false
    },

    hideSuccessModal() {
      this.showSuccessModal = false
      this.resetForm()
    },

    showMessage(title, message, type = 'info') {
      this.messageModalContent = {
        title,
        message,
        type
      }
      this.showMessageModal = true
    },

    hideMessageModal() {
      this.showMessageModal = false
    },

    // 显示服务条款
    showTerms() {
      // 保存当前表单数据到localStorage
      this.saveFormDataToCache();
      this.$router.push('/user-agreement');
    },
    
    // 保存表单数据到缓存
    saveFormDataToCache() {
      try {
        localStorage.setItem('prediction_form_data', JSON.stringify({
          currentStep: this.currentStep,
          formData: this.formData,
          analyzedRedBalls: this.analyzedRedBalls,
          followAnalyzedBalls: this.followAnalyzedBalls,
          analyzedBlueBalls: this.analyzedBlueBalls,
          agreeToTerms: this.agreeToTerms
        }));
      } catch (error) {
        console.error('保存表单数据到缓存失败:', error);
      }
    },
    
    // 从缓存加载表单数据
    loadFormDataFromCache() {
      try {
        const cachedData = localStorage.getItem('prediction_form_data');
        if (cachedData) {
          const parsedData = JSON.parse(cachedData);
          this.currentStep = parsedData.currentStep;
          this.formData = parsedData.formData;
          this.analyzedRedBalls = parsedData.analyzedRedBalls;
          this.followAnalyzedBalls = parsedData.followAnalyzedBalls;
          this.analyzedBlueBalls = parsedData.analyzedBlueBalls;
          this.agreeToTerms = parsedData.agreeToTerms;
          
          // 清除缓存，防止重复使用
          localStorage.removeItem('prediction_form_data');
          return true;
        }
      } catch (error) {
        console.error('从缓存加载表单数据失败:', error);
      }
      return false;
    },

    async confirmSubmit() {
      this.loading = true
      this.showWarning = false
      
      try {
        // 获取用户ID，如果没有则提示登录
        const userId = userStore.user?.id
        if (!userId) {
          this.showMessage('登录提示', '请先登录后再提交推测', 'warning')
          this.$router.push('/login')
          return
        }
        
        const allRedBalls = [this.formData.firstBall, ...this.formData.selectedRedBalls].join(',')
        
        // 如果没有开奖日期，使用今天的日期
        const today = new Date()
        const drawDate = today.getFullYear() + '-' + 
                        String(today.getMonth() + 1).padStart(2, '0') + '-' + 
                        String(today.getDate()).padStart(2, '0')
        
        const response = await lotteryApi.createPredictRecord(
          userId, // 使用真实的用户ID
          parseInt(this.formData.predictDrawId),
          drawDate, // 使用今天的日期
          allRedBalls,
          parseInt(this.formData.finalBlueBall)
        )
        
        if (response.success === true) {
          this.showSuccessModal = true
        } else {
          this.showMessage('提交失败', response.message, 'error')
        }
      } catch (error) {
        console.error('提交推测记录失败:', error)
        this.showMessage('提交失败', '请检查网络连接', 'error')
      } finally {
        this.loading = false
      }
    },

    // 球号选择相关方法
    openBallSelector(index) {
      if (!this.formData.level) {
        this.showMessage('提示', '请先选择上方的关键数据区位！', 'warning')
        return
      }
      
      this.currentBallIndex = index
      this.showBallSelector = true
    },

    closeBallSelector() {
      this.showBallSelector = false
    },

    selectBallNumber(num) {
      const formattedNum = String(num).padStart(2, '0')
      const isUsed = this.formData.lastRedBalls.includes(formattedNum) && this.formData.lastRedBalls[this.currentBallIndex] !== formattedNum
      if (isUsed) return

      this.formData.lastRedBalls[this.currentBallIndex] = formattedNum
      this.closeBallSelector()
    },

    clearBallNumber() {
      this.formData.lastRedBalls[this.currentBallIndex] = ''
      this.closeBallSelector()
    },

    // 蓝球选择相关方法
    openBlueBallSelector() {
      if (!this.formData.level) {
        this.showMessage('提示', '请先选择上方的关键数据区位！', 'warning')
        return
      }
      
      this.showBlueBallSelector = true
    },

    closeBlueBallSelector() {
      this.showBlueBallSelector = false
    },

    selectBlueBallNumber(num) {
      const formattedNum = String(num).padStart(2, '0')
      this.formData.lastBlueBall = formattedNum
      this.closeBlueBallSelector()
    },

    clearBlueBallNumber() {
      this.formData.lastBlueBall = ''
      this.closeBlueBallSelector()
    },

    // 首球选择相关方法
    openFirstBallSelector() {
      this.showFirstBallSelector = true
    },

    closeFirstBallSelector() {
      this.showFirstBallSelector = false
    },

    selectFirstBallNumber(num) {
      const formattedNum = String(num).padStart(2, '0')
      if (this.formData.followBalls.includes(formattedNum)) return
      
      this.formData.firstBall = formattedNum
      this.closeFirstBallSelector()
    },

    clearFirstBallNumber() {
      this.formData.firstBall = ''
      this.closeFirstBallSelector()
    },

    // 随球选择相关方法
    openFollowBallSelector(index) {
      this.currentFollowBallIndex = index
      this.showFollowBallSelector = true
    },

    closeFollowBallSelector() {
      this.showFollowBallSelector = false
    },

    selectFollowBallNumber(num) {
      const formattedNum = String(num).padStart(2, '0')
      const isUsed = (this.formData.firstBall === formattedNum) || 
                     (this.formData.followBalls.includes(formattedNum) && 
                      this.formData.followBalls[this.currentFollowBallIndex] !== formattedNum)

      if (isUsed) return

      this.formData.followBalls[this.currentFollowBallIndex] = formattedNum
      this.closeFollowBallSelector()
    },

    clearFollowBallNumber() {
      this.formData.followBalls[this.currentFollowBallIndex] = ''
      this.closeFollowBallSelector()
    },

    // 其余红球选择相关方法
    openSelectedBallSelector(index) {
      this.currentSelectedBallIndex = index
      this.showSelectedBallSelector = true
    },

    closeSelectedBallSelector() {
      this.showSelectedBallSelector = false
    },

    selectSelectedBallNumber(num) {
      if (this.isNumberUsedInStep3(num)) return

      const formattedNum = String(num).padStart(2, '0')
      this.formData.selectedRedBalls[this.currentSelectedBallIndex] = formattedNum
      this.closeSelectedBallSelector()
    },

    clearSelectedBallNumber() {
      this.formData.selectedRedBalls[this.currentSelectedBallIndex] = ''
      this.closeSelectedBallSelector()
    },

    // 检查号码是否在第三步中已被使用
    isNumberUsedInStep3(num) {
      const formattedNum = String(num).padStart(2, '0')
      // 检查是否与首球重复
      if (this.formData.firstBall === formattedNum) return true
      // 检查是否与其他已选择的红球重复
      return this.formData.selectedRedBalls.includes(formattedNum) && 
             this.formData.selectedRedBalls[this.currentSelectedBallIndex] !== formattedNum
    },

    // 蓝球选择相关方法
    openSelectedBlueBallSelector(index) {
      this.currentSelectedBlueBallIndex = index
      this.showSelectedBlueBallSelector = true
    },

    closeSelectedBlueBallSelector() {
      this.showSelectedBlueBallSelector = false
    },

    selectSelectedBlueBallNumber(num) {
      const formattedNum = String(num).padStart(2, '0')
      const isUsed = this.formData.selectedBlueBalls.includes(formattedNum) && this.formData.selectedBlueBalls[this.currentSelectedBlueBallIndex] !== formattedNum
      if (isUsed) return

      this.formData.selectedBlueBalls[this.currentSelectedBlueBallIndex] = formattedNum
      this.closeSelectedBlueBallSelector()
    },

    clearSelectedBlueBallNumber() {
      this.formData.selectedBlueBalls[this.currentSelectedBlueBallIndex] = ''
      this.closeSelectedBlueBallSelector()
    },

    // 最终蓝球选择相关方法
    openFinalBlueBallSelector() {
      this.showFinalBlueBallSelector = true
    },

    closeFinalBlueBallSelector() {
      this.showFinalBlueBallSelector = false
    },

    selectFinalBlueBallNumber(num) {
      const formattedNum = String(num).padStart(2, '0')
      this.formData.finalBlueBall = formattedNum
      this.closeFinalBlueBallSelector()
    },

    clearFinalBlueBallNumber() {
      this.formData.finalBlueBall = ''
      this.closeFinalBlueBallSelector()
    },

    resetForm() {
      this.currentStep = 1
      this.formData = {
        level: '',
        drawId: '',
        drawDate: '',
        lastRedBalls: ['', '', '', '', '', ''],
        lastBlueBall: '',
        firstBall: '',
        followBalls: ['', ''],
        selectedRedBalls: ['', '', '', '', ''],
        selectedBlueBalls: ['', ''],
        finalBlueBall: '',
        predictDrawId: '' // 新增推测期号
      }
      this.analyzedRedBalls = []
      this.followAnalyzedBalls = []
      this.analyzedBlueBalls = []
      this.agreeToTerms = false
    },

    getStepStatus(index) {
      if (index < this.currentStep) {
        return 'success'
      } else if (index === this.currentStep) {
        return 'process'
      } else {
        return 'wait'
      }
    },

    // 获取近10期开奖期号
    async fetchRecentDrawIds() {
      this.loading = true
      try {
        const response = await lotteryApi.getRecent10DrawIds()
        if (response.success === true) {
          this.recentDrawIds = response.data
          // 将期号转换为选项格式
          this.drawIdOptions = this.recentDrawIds.map(id => ({
            value: String(id),
            label: String(id)
          }))
          if (this.recentDrawIds.length > 0) {
            this.latestDrawId = this.recentDrawIds[0]
            const latestId = parseInt(this.latestDrawId, 10)
            // 自动设置推测期号为最新一期的下一期
            this.formData.predictDrawId = String(latestId + 1)
          }
        } else {
          this.showMessage('获取期号失败', response.message, 'error')
        }
      } catch (error) {
        console.error('获取期号失败:', error)
        this.showMessage('获取期号失败', '请检查网络连接', 'error')
      } finally {
        this.loading = false
      }
    },

    // 期号选择变化时，自动获取并填充球号
    async handleDrawIdChange(drawId) {
      if (drawId) {
        this.loading = true
        try {
          const response = await lotteryApi.getDrawNumbersById(drawId)
          if (response.success === true) {
            const results = response.data
            // 根据接口返回的格式调整
            if (Array.isArray(results) && results.length >= 7) {
              // 前6个是红球，最后一个是蓝球
              this.formData.lastRedBalls = [
                String(results[0] || '').padStart(2, '0'),
                String(results[1] || '').padStart(2, '0'),
                String(results[2] || '').padStart(2, '0'),
                String(results[3] || '').padStart(2, '0'),
                String(results[4] || '').padStart(2, '0'),
                String(results[5] || '').padStart(2, '0')
              ]
              this.formData.lastBlueBall = String(results[6] || '').padStart(2, '0')
              this.showMessage('期号已更新', `已自动填充第${drawId}期开奖号码`, 'success')
            } else {
              this.showMessage('获取开奖结果格式错误', '返回的球号数据格式不正确', 'error')
            }
          } else {
            this.showMessage('获取开奖结果失败', response.message, 'error')
          }
        } catch (error) {
          console.error('获取开奖结果失败:', error)
          this.showMessage('获取开奖结果失败', '请检查网络连接', 'error')
        } finally {
          this.loading = false
        }
      } else {
        // 如果清空期号，清空红球和蓝球
        this.formData.lastRedBalls = ['', '', '', '', '', '']
        this.formData.lastBlueBall = ''
        this.formData.drawDate = ''
        this.showMessage('期号已清空', '请重新选择期号', 'info')
      }
    }
  }
}
</script>

<style scoped>
/* 全局卡片样式 */
:deep(.el-card) {
  border-radius: 8px !important;
  overflow: hidden;
}

/* 页面容器 */
.home-container {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: calc(100vh - 70px);
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
  max-width: 1200px;
}

/* 页面头部样式 */
.page-header {
  background: url('@/assets/banner/backend1.png') center/cover no-repeat, linear-gradient(135deg, #ff6b6b, #ee5a52);
  color: white;
  padding: 15px 20px;
  text-align: center;
  position: relative;
  margin-bottom: 20px;
  border-radius: 8px;
  height: auto;
}

.page-header :deep(.el-card__body) {
  padding: 0;
}

.header-top {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 5px;
}

.back-btn {
  color: #333;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 8px 15px;
  border-radius: 4px;
  font-weight: 500;
}

.back-btn:hover {
  background-color: rgba(255, 255, 255, 0.95);
  color: #000;
}

.page-title {
  margin: 0;
  text-align: center;
}

.main-title {
  font-size: 38px;
  margin: 0 auto 10px;
  font-weight: 700;
  color: white;
  text-shadow: 0 2px 6px rgba(0,0,0,0.7), 0 0 15px rgba(0,0,0,0.4);
  letter-spacing: 2px;
  text-align: center;
  width: 100%;
}

.subtitle {
  font-size: 22px;
  margin: 0;
  color: white;
  opacity: 0.9;
  text-shadow: 0 2px 6px rgba(0,0,0,0.7), 0 0 15px rgba(0,0,0,0.4);
  text-align: center;
  width: 100%;
  font-weight: 500;
}

/* 步骤导航 */
.step-nav-card {
  margin-bottom: 20px;
  border-radius: 8px;
}

.step-nav-card :deep(.el-card__body) {
  padding: 20px 30px;
}

/* 自定义步骤条样式 */
.custom-steps {
  width: 100%;
}

.custom-steps :deep(.el-step__title) {
  font-size: 14px;
  font-weight: 500;
}

.custom-steps :deep(.el-step__title.is-process) {
  color: #e53e3e;
  font-weight: 600;
}

/* 确保只有当前步骤标红，其他步骤不标红 */
.custom-steps :deep(.el-step__head.is-process) {
  color: #e53e3e;
  border-color: #e53e3e;
}

.custom-steps :deep(.el-step__head.is-wait) {
  color: #c0c4cc;
  border-color: #c0c4cc;
}

.custom-steps :deep(.el-step__head.is-process) .el-step__icon {
  width: 36px;
  height: 36px;
  line-height: 36px;
}

.custom-steps :deep(.el-step__icon) {
  width: 36px;
  height: 36px;
  line-height: 36px;
  font-size: 18px;
  border-width: 2px;
  font-weight: bold;
}

/* 加粗成功状态的"对"号 */
.custom-steps :deep(.el-step__icon.is-text) .el-icon {
  font-weight: bold;
  font-size: 20px;
}

.custom-steps :deep(.el-step__line) {
  height: 2px;
  margin-right: 0;
  top: 18px;
  transform: translateY(6px);
}

/* 确保线条内部元素也正确定位 */
.custom-steps :deep(.el-step__line-inner) {
  border-width: 2px;
  top: 0;
}

.custom-steps :deep(.el-step__head.is-success) .el-step__icon {
  background-color: #4caf50;
  border-color: #4caf50;
  width: 36px;
  height: 36px;
  line-height: 36px;
}

.custom-steps :deep(.el-step__head.is-success) .el-step__line {
  background-color: #4caf50;
}

/* 步骤内容 */
.step-content {
  padding: 0;
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  display: flex;
}

.step-panel {
  width: 100%;
  margin-bottom: 20px;
  border-radius: 8px;
}

/* 位置选择器 */
.position-selector {
  display: flex;
  gap: 20px;
  margin-bottom: 40px;
  justify-content: center;
  flex-wrap: wrap;
}

.position-item {
  flex: 1;
  min-width: 150px;
  max-width: 200px;
  padding: 25px 20px;
  cursor: pointer;
  transition: all 0.3s;
}

.position-item :deep(.el-card__body) {
  padding: 0;
}

.position-item:hover {
  transform: translateY(-1px);
}

.position-item.selected {
  border-color: #e53e3e;
  background: rgba(229, 62, 62, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(229, 62, 62, 0.2);
}

.position-title {
  font-weight: 600;
  font-size: 16px;
  color: #333;
  transition: all 0.3s;
}

.position-desc {
  font-size: 13px;
  color: #666;
  transition: all 0.3s;
}

/* 输入区域 */
.input-section {
  margin-top: 25px;
  margin-bottom: 25px;
}

.input-section label {
  display: block;
  margin-bottom: 15px;
  font-weight: bold;
  color: #333;
  font-size: 15px;
}

.input-section .el-input {
  margin-top: 8px;
}

.ball-input-section {
  margin-top: 30px;
}

.draw-id-select {
  width: 100%;
}

.input-section :deep(.el-input__wrapper),
.input-section :deep(.el-select__wrapper) {
  height: 42px; /* default 32px + 10px */
  font-size: 16px;
}

/* 红球选择器样式 */
.red-balls-selector {
  display: flex;
  justify-content: flex-start;
  gap: 15px;
  margin-top: 20px;
  padding: 0px;
}

.ball-selector-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 蓝球选择器样式 */
.blue-ball-selector {
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
  padding: 0px;
}

.blue-ball-display {
  background: linear-gradient(135deg, #2196f3, #42a5f5) !important;
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3) !important;
}

.blue-option {
  background: #e3f2fd !important;
  color: #1976d2 !important;
  border: 2px solid #bbdefb !important;
}

.blue-option:hover {
  background: #2196f3 !important;
  color: white !important;
}

.ball-number-option.blue-option.selected {
  background: linear-gradient(135deg, #2196f3, #42a5f5) !important;
  color: white !important;
  border-color: #fff !important;
  transform: scale(1.1);
}

.ball-number-display {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e53e3e, #ff6b6b);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(229, 62, 62, 0.3);
  border: none;
}

.ball-number-display:hover.clickable {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 5px 15px rgba(229, 62, 62, 0.4);
}

.ball-number-display.disabled {
  background: linear-gradient(135deg, #e0e0e0, #bdbdbd);
  color: #999;
  cursor: not-allowed;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.ball-number-display.disabled:hover {
  transform: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 确保红球始终显示红色 */
.red-balls-selector .ball-number-display,
.first-ball-selector .ball-number-display,
.follow-balls-selector .ball-number-display,
.first-ball-display .ball-number-display,
.selected-balls-selector .ball-number-display {
  background: linear-gradient(135deg, #e53e3e, #ff6b6b) !important;
  box-shadow: 0 4px 12px rgba(229, 62, 62, 0.3) !important;
}

/* 首球选择器样式 */
.first-ball-selector {
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
  padding: 15px 0px;
}

/* 随球选择器样式 */
.follow-balls-selector {
  display: flex;
  justify-content: flex-start;
  gap: 20px;
  margin-top: 10px;
  padding: 15px 0px;
}

/* 第三步红球选择器样式 */
.selected-red-balls-container {
  margin-top: 20px;
}

.first-ball-display {
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
  padding: 15px 0px;
}

.selected-balls-selector {
  display: flex;
  justify-content: flex-start;
  gap: 15px;
  margin-top: 10px;
  padding: 15px 0px;
  flex-wrap: wrap;
}

.disabled-ball {
  opacity: 0.7;
  cursor: not-allowed !important;
}

.disabled-ball:hover {
  transform: none !important;
}

/* 蓝球选择器样式 */
.blue-balls-selector {
  display: flex;
  gap: 15px;
  justify-content: flex-start;
  align-items: center;
  margin-top: 10px;
}

.final-blue-ball-selector {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 10px;
}

.recommended-badge {
  position: absolute;
  bottom: -5px;
  right: -5px;
  z-index: 1;
}

.ball-number-option.recommended {
  position: relative;
  border: 2px solid #4caf50;
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
}

/* 球号选择弹窗 */
.ball-numbers-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 25px;
}

.ball-number-option {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: #f5f5f5;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
}

.ball-number-option:hover {
  background: #e53e3e;
  color: white;
  transform: scale(1.1);
}

.ball-number-option.selected {
  background: linear-gradient(135deg, #e53e3e, #ff6b6b);
  color: white;
  border-color: #fff;
  transform: scale(1.1);
}

.ball-number-option.used {
  background: #ffeb3b;
  color: #333;
  opacity: 0.6;
  cursor: not-allowed;
}

.ball-number-option.used:hover {
  transform: none;
  background: #ffeb3b;
  color: #333;
}

/* 球号展示 */
.balls-display {
  background: white;
  padding: 35px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #f0f0f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.balls-container {
  display: flex;
  flex-wrap: wrap;
    gap: 15px;
  justify-content: center;
}

/* 红球容器 */
.red-balls-container {
  display: flex;
  flex-wrap: nowrap;
}

.ball-red, .ball-blue {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  color: white;
  font-size: 18px;
  font-weight: bold;
  margin: 0 3px;
}

.ball-red {
  background-color: #e53e3e;
}

.ball-blue {
  background-color: #3b82f6;
}

/* 最终结果 */
.final-result {
  background: #f8f9fa;
  padding: 30px 20px;
  border-radius: 12px;
  text-align: center;
  margin-bottom: 30px;
  border: 1px solid #e9ecef;
}

.result-balls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.red-balls {
  display: flex;
  gap: 5px;
}

/* 按钮组 */
.button-group {
  display: flex;
  gap: 10px;
  margin-top: 30px;
}

.button-group > .el-button {
  flex: 1;
  font-size: 16px;
  padding: 11px 20px;
  height: auto;
}

.full-width {
  width: 100%;
}

.continue-btn {
  font-size: 16px;
  padding: 11px 20px;
  height: auto;
}

/* 成功弹窗样式 */
.success-icon {
  display: block;
  width: 48px;
  height: 48px;
  color: #E6A23C; /* Element Plus's warning color for a golden trophy feel */
  margin: 0 auto 20px;
  animation: bounce 0.6s ease-in-out;
}

.success-balls {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 25px;
  border: 1px solid #e9ecef;
}

.success-red-balls {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 15px;
}

.success-blue-ball {
  display: flex;
  justify-content: center;
}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    transform: translate3d(0,0,0);
  }
  40%, 43% {
    transform: translate3d(0,-30px,0);
  }
  70% {
    transform: translate3d(0,-15px,0);
  }
  90% {
    transform: translate3d(0,-4px,0);
  }
}

/* 蓝球推荐提示样式 */
.blue-ball-alert :deep(.el-alert__title) {
  color: #4caf50 !important;
  font-weight: 600;
}


/* 响应式布局优化 */
@media (max-width: 768px) {
  .home-container {
    padding: 10px;
  }
  
  .page-header {
    padding: 15px 10px;
  }
  
  .main-title {
    font-size: 32px;
    margin-bottom: 5px;
  }
  
  .subtitle {
    font-size: 20px;
  }
  
  .position-selector {
    flex-direction: column;
    gap: 15px;
  }
  
  .position-item {
    max-width: none;
    min-width: auto;
  }
  
  .ball-numbers-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
  }
  
  .ball-number-option {
    width: 40px;
    height: 40px;
    font-size: 13px;
  }
  
  .ball-number-display {
    width: 48px;
    height: 48px;
    font-size: 16px;
  }
  
  .red-balls-selector,
  .follow-balls-selector,
  .selected-balls-selector {
    gap: 10px;
    flex-wrap: wrap;
  }

  .step-nav-card :deep(.el-card__body) {
    padding: 15px 20px;
  }
  
  .custom-steps :deep(.el-step__title) {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .home-container {
    padding: 5px;
  }
  
  .page-header {
    padding: 12px 8px;
  }
  
  .main-title {
    font-size: 28px;
    margin-bottom: 3px;
  }
  
  .subtitle {
    font-size: 18px;
  }
  
  .ball-numbers-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .ball-number-option {
    width: 35px;
    height: 35px;
    font-size: 12px;
  }
  
  .ball-number-display {
    width: 42px;
    height: 42px;
    font-size: 14px;
  }
  
  .button-group {
    flex-direction: column;
  }
  
  .step-nav-card :deep(.el-card__body) {
    padding: 10px 15px;
  }
  
  .custom-steps :deep(.el-step__title) {
    font-size: 12px;
    transform: scale(0.9);
  white-space: nowrap;
  }
}
</style> 