<template>
  <div class="predict-records-page">
    <!-- 页面头部 -->
    <div class="page-header-modern">
      <div class="header-content">
        <button class="back-btn" @click="goBack">
          <svg viewBox="0 0 24 24" class="back-icon">
            <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></path>
          </svg>
        </button>
        <div class="header-info">
          <div class="header-text">
            <h1 class="header-title">推测记录</h1>
            <p class="header-subtitle">查看您的号码预测历史</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 筛选器 -->
    <div class="filter-container">
      <div class="filter-row">
        <!-- 彩票类型下拉框 -->
        <div class="lottery-type-selector">
          <!-- <span class="filter-label">彩票类型：</span> -->
          <el-select 
            v-model="currentLotteryType" 
            @change="handleLotteryTypeChange"
            class="lottery-select"
            placeholder="请选择彩票类型"
            size="default"
          >
            <el-option 
              v-for="type in lotteryTypes" 
              :key="type.value"
              :label="type.label"
              :value="type.value"
            />
          </el-select>
        </div>

        <!-- 状态筛选 -->
        <div class="status-filters">
          <!-- <span class="filter-label">状态筛选：</span> -->
          <div class="filter-wrapper">
            <button 
              v-for="filter in filters" 
              :key="filter.value"
              class="filter-btn"
              :class="{ 'active': currentFilter === filter.value }"
              @click="handleFilterChange(filter.value)"
            >
              {{ filter.label }}
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 主要内容 -->
    <div class="records-container">
      <!-- 加载状态 -->
      <div v-if="loading" class="loading-container">
        <div class="loading-spinner">
          <div class="spinner"></div>
          <p class="loading-text">正在加载记录...</p>
        </div>
      </div>

      <!-- 空状态 -->
      <div v-else-if="records.length === 0" class="empty-container">
        <div class="empty-content">
          <svg class="empty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
            <polyline points="14,2 14,8 20,8"/>
            <line x1="16" y1="13" x2="8" y2="13"/>
            <line x1="16" y1="17" x2="8" y2="17"/>
            <polyline points="10,9 9,9 8,9"/>
          </svg>
          <h3 class="empty-title">{{ getEmptyStateMessage() }}</h3>
          <button class="start-btn" @click="$router.push('/')">
            <span>开始推测</span>
          </button>
        </div>
      </div>

      <!-- 记录列表 -->
      <div v-else class="records-grid">
        <div 
          v-for="record in records" 
          :key="record.id"
          class="record-card-modern"
        >
          <div class="record-header">
            <div class="period-info">
              <span class="period-number">第{{ record.drawId }}期</span>
              <div class="status-badge" :class="getStatusClass(record.predictStatus)">
                <svg class="status-icon" :class="getStatusIcon(record.predictStatus)" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <!-- Clock icon for 待开奖 -->
                  <circle v-if="getStatusIcon(record.predictStatus) === 'clock'" cx="12" cy="12" r="10"/>
                  <polyline v-if="getStatusIcon(record.predictStatus) === 'clock'" points="12,6 12,12 16,14"/>
                  
                  <!-- Trophy icon for 已中奖 -->
                  <path v-if="getStatusIcon(record.predictStatus) === 'trophy'" d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/>
                  <path v-if="getStatusIcon(record.predictStatus) === 'trophy'" d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/>
                  <path v-if="getStatusIcon(record.predictStatus) === 'trophy'" d="M4 22h16"/>
                  <path v-if="getStatusIcon(record.predictStatus) === 'trophy'" d="M10 14.66V17c0 .55.47.98.97 1.21C12.04 18.75 14 20 14 20s1.96-1.25 3.03-1.79c.5-.23.97-.66.97-1.21v-2.34c1.07-.47 2-1.22 2-2.12V9H8v3.54c0 .9.93 1.65 2 2.12z"/>
                  
                  <!-- X Circle icon for 未中奖 -->
                  <circle v-if="getStatusIcon(record.predictStatus) === 'x-circle'" cx="12" cy="12" r="10"/>
                  <path v-if="getStatusIcon(record.predictStatus) === 'x-circle'" d="M15 9l-6 6"/>
                  <path v-if="getStatusIcon(record.predictStatus) === 'x-circle'" d="M9 9l6 6"/>
                  
                  <!-- Help Circle icon for default -->
                  <circle v-if="getStatusIcon(record.predictStatus) === 'help-circle'" cx="12" cy="12" r="10"/>
                  <path v-if="getStatusIcon(record.predictStatus) === 'help-circle'" d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
                  <circle v-if="getStatusIcon(record.predictStatus) === 'help-circle'" cx="12" cy="17" r="0.5"/>
                </svg>
                <span class="status-text">{{ record.predictStatus }}</span>
              </div>
            </div>
            <div class="predict-date">{{ formatDateTime(record.predictTime) }}</div>
          </div>
          
          <div class="record-body">
            <div class="predicted-numbers">
              <div class="balls-display">
                <div class="red-balls">
                  <span class="ball ball-red">{{ formatNumber(record.redBall1) }}</span>
                  <span class="ball ball-red">{{ formatNumber(record.redBall2) }}</span>
                  <span class="ball ball-red">{{ formatNumber(record.redBall3) }}</span>
                  <span class="ball ball-red">{{ formatNumber(record.redBall4) }}</span>
                  <span class="ball ball-red">{{ formatNumber(record.redBall5) }}</span>
                  <span class="ball ball-red">{{ formatNumber(record.redBall6) }}</span>
                </div>
                <div class="separator">+</div>
                <div class="blue-ball">
                  <span class="ball ball-blue">{{ formatNumber(record.blueBall) }}</span>
                </div>
              </div>
            </div>

            <div class="record-info">
              <div class="info-row">
                <span class="info-label">推测结果</span>
                <span class="result-text" :class="getResultClass(record.predictResult)">
                  {{ record.predictResult }}
                </span>
              </div>
              <div v-if="record.predictStatus !== '待开奖'" class="info-row">
                <span class="info-label">奖金</span>
                <span class="bonus-amount" :class="{ 'zero-bonus': record.bonus === 0 }">
                  {{ isHighPrize(record.predictResult) ? '约' : '' }}¥{{ record.bonus || 0 }}
                </span>
              </div>
            </div>
            
            <div v-if="isHighPrize(record.predictResult)" class="prize-note">
              <svg class="info-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="10"/>
                <line x1="12" y1="16" x2="12" y2="12"/>
                <line x1="12" y1="8" x2="12.01" y2="8"/>
              </svg>
              一、二等奖奖金随机浮动，请以官方为准
            </div>
          </div>
        </div>
      </div>

      <!-- 分页和统计信息 -->
      <div v-if="records.length > 0" class="pagination-summary-container">
        <!-- 分页组件 -->
        <div class="pagination-wrapper-center">
          <div class="pagination-wrapper">
            <button 
              class="pagination-btn"
              :class="{ 'disabled': currentPage <= 1 }"
              @click="handlePageChange(currentPage - 1)"
              :disabled="currentPage <= 1"
            >
              <svg viewBox="0 0 24 24" class="pagination-icon">
                <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></path>
              </svg>
            </button>
            
            <div class="page-numbers">
              <button 
                v-for="page in getPageNumbers()" 
                :key="page"
                class="page-number"
                :class="{ 'active': page === currentPage }"
                @click="handlePageChange(page)"
              >
                {{ page }}
              </button>
            </div>
            
            <button 
              class="pagination-btn"
              :class="{ 'disabled': currentPage >= totalPages }"
              @click="handlePageChange(currentPage + 1)"
              :disabled="currentPage >= totalPages"
            >
              <svg viewBox="0 0 24 24" class="pagination-icon">
                <path d="M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z"></path>
              </svg>
            </button>
          </div>
        </div>

        <!-- 记录统计 -->
        <div class="records-summary">
          <span class="summary-text">共 {{ total }} 条</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { lotteryApi } from '../api/index.js'
import { userStore } from '../store/user.js'
import {
  ElPageHeader,
  ElCard,
  ElButton,
  ElIcon,
  ElEmpty,
  ElTag,
  ElRadioGroup,
  ElRadioButton,
  ElPagination,
  ElDescriptions,
  ElDescriptionsItem,
  ElSelect,
  ElOption
} from 'element-plus'
import { Tickets } from '@element-plus/icons-vue'

export default {
  name: 'PredictRecords',
  components: {
    ElPageHeader,
    ElCard,
    ElButton,
    ElIcon,
    ElEmpty,
    ElTag,
    ElRadioGroup,
    ElRadioButton,
    ElPagination,
    ElDescriptions,
    ElDescriptionsItem,
    ElSelect,
    ElOption,
    Tickets
  },
  data() {
    return {
      loading: false,
      records: [],
      currentPage: 1,
      totalPages: 0,
      total: 0,
      pageSize: 10,
      hasNext: false,
      hasPrevious: false,
      currentFilter: 'all',
      currentLotteryType: 'ssq',
      filters: [
        { label: '全部', value: 'all' },
        { label: '待开奖', value: '待开奖' },
        { label: '已中奖', value: '已中奖' },
        { label: '未中奖', value: '未中奖' }
      ],
      lotteryTypes: [
        { label: '双色球', value: 'ssq' },
        { label: '大乐透', value: 'dlt' },
        // { label: '3D', value: '3d' },
        // { label: '排列3', value: 'pl3' },
        // { label: '排列5', value: 'pl5' },
        // { label: '七乐彩', value: '7lc' },
        // { label: '七星彩', value: '7xc' }
      ]
    }
  },
  async mounted() {
    await this.loadPredictRecords()
  },
  methods: {
    async loadPredictRecords(page = 1) {
      this.loading = true
      try {
        const userId = userStore.user?.id
        if (!userId) {
          this.$router.push('/login')
          return
        }

        // 构建API调用参数
        let response
        const apiParams = {
          userId: userId,
          page: page,
          pageSize: this.pageSize
        }

        // 添加彩票类型到参数中
        apiParams.lotteryType = this.currentLotteryType

        // 根据状态筛选调用不同的API
        if (this.currentFilter === 'all') {
          // TODO: 后续可以扩展API以支持彩票类型筛选
          response = await lotteryApi.getPredictRecordsByUserId(userId, page, this.pageSize)
        } else {
          response = await lotteryApi.queryPredictRecords(userId, this.currentFilter, page, this.pageSize)
        }
        
        if (response.success === true) {
          let pageData = response.data
          let records = pageData.records || []
          
          // 前端彩票类型筛选 (如果后端不支持)
          records = records.filter(record => {
            // 根据实际的record数据结构来判断彩票类型
            return this.matchLotteryType(record, this.currentLotteryType)
          })
          
          this.records = records
          this.currentPage = pageData.page || 1
          this.totalPages = pageData.totalPages || 0
          this.total = pageData.total || 0
          this.pageSize = pageData.size || this.pageSize
          this.hasNext = pageData.hasNext || false
          this.hasPrevious = pageData.hasPrevious || false
        } else {
          this.$message.error('获取推测记录失败：' + response.message)
        }
      } catch (error) {
        this.$message.error('获取推测记录失败，请重试')
      } finally {
        this.loading = false
      }
    },

    // 匹配彩票类型的辅助方法
    matchLotteryType(record, lotteryType) {
      // 如果有明确的彩票类型字段
      if (record.lotteryType || record.gameType) {
        const recordType = record.lotteryType || record.gameType
        return recordType === lotteryType
      }
      
      // 根据球号特征判断彩票类型
      switch (lotteryType) {
        case 'ssq': // 双色球：6红1蓝
          return !!(record.redBall1 && record.redBall2 && record.redBall3 && 
                   record.redBall4 && record.redBall5 && record.redBall6 && 
                   record.blueBall)
        case 'dlt': // 大乐透：5红2蓝
          return !!(record.redBall1 && record.redBall2 && record.redBall3 && 
                   record.redBall4 && record.redBall5 && !record.redBall6 &&
                   record.blueBall && record.blueBall2)
        case '3d': // 3D：3位数字
          return !!(record.num1 && record.num2 && record.num3 && !record.redBall1)
        case 'pl3': // 排列3：3位数字
          return !!(record.num1 && record.num2 && record.num3 && !record.redBall1)
        case 'pl5': // 排列5：5位数字
          return !!(record.num1 && record.num2 && record.num3 && 
                   record.num4 && record.num5 && !record.redBall1)
        case '7lc': // 七乐彩：7个号码
          return !!(record.num1 && record.num2 && record.num3 && 
                   record.num4 && record.num5 && record.num6 && 
                   record.num7 && !record.redBall1)
        case '7xc': // 七星彩：7位数字
          return !!(record.num1 && record.num2 && record.num3 && 
                   record.num4 && record.num5 && record.num6 && 
                   record.num7 && !record.redBall1)
        default:
          return true // 默认匹配
      }
    },

    formatDate(dateString) {
      if (!dateString) return ''
      return new Date(dateString).toLocaleDateString('zh-CN')
    },

    formatDateTime(dateString) {
      if (!dateString) return ''
      return new Date(dateString).toLocaleString('zh-CN')
    },

    formatNumber(num) {
      return String(num).padStart(2, '0')
    },

    getStatusClass(status) {
      switch (status) {
        case '待开奖': return 'warning'
        case '已中奖': return 'success'
        case '未中奖': return 'danger'
        default: return 'info'
      }
    },

    getResultClass(result) {
      if (result && result.includes('中奖')) {
        return 'result-won'
      } else if (result === '待开奖') {
        return 'result-pending'
      } else {
        return 'result-lost'
      }
    },

    async handlePageChange(page) {
      await this.loadPredictRecords(page)
    },
    
    isHighPrize(result) {
        return result && (result.includes('一等奖') || result.includes('二等奖'));
    },

    getEmptyStateMessage() {
      const filterMap = {
        '待开奖': '待开奖',
        '已中奖': '已中奖',
        '未中奖': '未中奖'
      }
      
      const lotteryTypeMap = {
        'ssq': '双色球',
        'dlt': '大乐透',
        '3d': '3D',
        'pl3': '排列3',
        'pl5': '排列5',
        '7lc': '七乐彩',
        '7xc': '七星彩'
      }
      
      const state = filterMap[this.currentFilter]
      const lotteryTypeName = lotteryTypeMap[this.currentLotteryType]
      
      if (state) {
        return `您还没有${lotteryTypeName}${state}的推测记录`
      } else {
        return `您还没有${lotteryTypeName}的推测记录`
      }
    },

    handleFilterChange(value) {
      this.currentFilter = value
      this.currentPage = 1
      this.loadPredictRecords()
    },

    handleLotteryTypeChange() {
      if (this.currentLotteryType === 'dlt') {
        // 如果选择大乐透，跳转到大乐透专用预测记录页面
        this.$router.push('/dlt/predict-records')
      } else {
        // 其他彩票类型在当前页面处理
        this.currentPage = 1
        this.loadPredictRecords()
      }
    },

    getStatusIcon(status) {
      switch (status) {
        case '待开奖': return 'clock'
        case '已中奖': return 'trophy'
        case '未中奖': return 'x-circle'
        default: return 'help-circle'
      }
    },

    getPageNumbers() {
      const pages = []
      const showPages = 5
      const half = Math.floor(showPages / 2)
      
      let start = Math.max(1, this.currentPage - half)
      let end = Math.min(this.totalPages, start + showPages - 1)
      
      if (end - start + 1 < showPages) {
        start = Math.max(1, end - showPages + 1)
      }
      
      for (let i = start; i <= end; i++) {
        pages.push(i)
      }
      
      return pages
    },

    goBack() {
        // 直接跳转到我的页面
        this.$router.push('/profile');
    }
  }
}
</script>

<style scoped>
.predict-records-page {
  background: #f5f7fa;
  min-height: calc(100vh - 65px);
  padding: 0;
}

/* 页面头部 */
.page-header-modern {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  padding: 20px 0;
  position: relative;
  overflow: hidden;
}

.page-header-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 200" preserveAspectRatio="none"><defs><linearGradient id="ballGrad" x1="0%25" y1="0%25" x2="100%25" y2="100%25"><stop offset="0%25" style="stop-color:rgba(255,255,255,0.6);stop-opacity:1"/><stop offset="100%25" style="stop-color:rgba(255,255,255,0.3);stop-opacity:1"/></linearGradient><radialGradient id="ballShine"><stop offset="0%25" style="stop-color:rgba(255,255,255,0.8);stop-opacity:1"/><stop offset="70%25" style="stop-color:rgba(255,255,255,0.4);stop-opacity:1"/><stop offset="100%25" style="stop-color:rgba(255,255,255,0.1);stop-opacity:1"/></radialGradient><filter id="glow"><feGaussianBlur stdDeviation="3" result="coloredBlur"/><feMerge><feMergeNode in="coloredBlur"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g opacity="0.4"><circle cx="150" cy="50" r="25" fill="none" stroke="white" stroke-width="3"><animate attributeName="r" values="25;32;25" dur="2s" repeatCount="indefinite"/><animate attributeName="opacity" values="0.6;1;0.6" dur="2s" repeatCount="indefinite"/></circle><circle cx="350" cy="80" r="22" fill="none" stroke="white" stroke-width="3"><animate attributeName="r" values="22;29;22" dur="2.5s" repeatCount="indefinite"/><animate attributeName="opacity" values="0.5;1;0.5" dur="2.5s" repeatCount="indefinite"/></circle><circle cx="550" cy="40" r="28" fill="none" stroke="white" stroke-width="3"><animate attributeName="r" values="28;35;28" dur="3s" repeatCount="indefinite"/><animate attributeName="opacity" values="0.6;1;0.6" dur="3s" repeatCount="indefinite"/></circle><circle cx="750" cy="70" r="24" fill="none" stroke="white" stroke-width="3"><animate attributeName="r" values="24;31;24" dur="2.2s" repeatCount="indefinite"/><animate attributeName="opacity" values="0.5;1;0.5" dur="2.2s" repeatCount="indefinite"/></circle><circle cx="950" cy="55" r="26" fill="none" stroke="white" stroke-width="3"><animate attributeName="r" values="26;33;26" dur="2.8s" repeatCount="indefinite"/><animate attributeName="opacity" values="0.6;1;0.6" dur="2.8s" repeatCount="indefinite"/></circle><circle cx="1150" cy="85" r="25" fill="none" stroke="white" stroke-width="3"><animate attributeName="r" values="25;32;25" dur="2.4s" repeatCount="indefinite"/><animate attributeName="opacity" values="0.5;1;0.5" dur="2.4s" repeatCount="indefinite"/></circle><circle cx="1300" cy="60" r="23" fill="none" stroke="white" stroke-width="3"><animate attributeName="r" values="23;30;23" dur="2.6s" repeatCount="indefinite"/><animate attributeName="opacity" values="0.6;1;0.6" dur="2.6s" repeatCount="indefinite"/></circle></g><g opacity="0.35" filter="url(%23glow)"><circle cx="200" cy="100" r="16" fill="url(%23ballShine)"><animate attributeName="cy" values="100;120;100" dur="3s" repeatCount="indefinite"/><animate attributeName="r" values="16;18;16" dur="3s" repeatCount="indefinite"/></circle><circle cx="400" cy="90" r="14" fill="url(%23ballShine)"><animate attributeName="cy" values="90;110;90" dur="3.5s" repeatCount="indefinite"/><animate attributeName="r" values="14;16;14" dur="3.5s" repeatCount="indefinite"/></circle><circle cx="600" cy="110" r="18" fill="url(%23ballShine)"><animate attributeName="cy" values="110;130;110" dur="4s" repeatCount="indefinite"/><animate attributeName="r" values="18;20;18" dur="4s" repeatCount="indefinite"/></circle><circle cx="800" cy="95" r="15" fill="url(%23ballShine)"><animate attributeName="cy" values="95;115;95" dur="3.2s" repeatCount="indefinite"/><animate attributeName="r" values="15;17;15" dur="3.2s" repeatCount="indefinite"/></circle><circle cx="1000" cy="105" r="17" fill="url(%23ballShine)"><animate attributeName="cy" values="105;125;105" dur="3.8s" repeatCount="indefinite"/><animate attributeName="r" values="17;19;17" dur="3.8s" repeatCount="indefinite"/></circle><circle cx="1200" cy="100" r="14" fill="url(%23ballShine)"><animate attributeName="cy" values="100;120;100" dur="3.4s" repeatCount="indefinite"/><animate attributeName="r" values="14;16;14" dur="3.4s" repeatCount="indefinite"/></circle></g><g opacity="0.3"><path d="M250,115 L275,140 M275,115 L250,140" stroke="white" stroke-width="3" stroke-linecap="round"><animateTransform attributeName="transform" type="rotate" from="0 262.5 127.5" to="360 262.5 127.5" dur="8s" repeatCount="indefinite"/><animate attributeName="opacity" values="0.5;1;0.5" dur="2s" repeatCount="indefinite"/></path><path d="M650,125 L675,150 M675,125 L650,150" stroke="white" stroke-width="3" stroke-linecap="round"><animateTransform attributeName="transform" type="rotate" from="0 662.5 137.5" to="360 662.5 137.5" dur="10s" repeatCount="indefinite"/><animate attributeName="opacity" values="0.5;1;0.5" dur="2.5s" repeatCount="indefinite"/></path><path d="M1050,120 L1075,145 M1075,120 L1050,145" stroke="white" stroke-width="3" stroke-linecap="round"><animateTransform attributeName="transform" type="rotate" from="0 1062.5 132.5" to="360 1062.5 132.5" dur="9s" repeatCount="indefinite"/><animate attributeName="opacity" values="0.5;1;0.5" dur="2.2s" repeatCount="indefinite"/></path><polygon points="450,135 462,147 450,159 438,147" fill="none" stroke="white" stroke-width="3"><animateTransform attributeName="transform" type="rotate" from="0 450 147" to="360 450 147" dur="12s" repeatCount="indefinite"/><animate attributeName="opacity" values="0.4;0.9;0.4" dur="2s" repeatCount="indefinite"/></polygon><polygon points="850,130 862,142 850,154 838,142" fill="none" stroke="white" stroke-width="3"><animateTransform attributeName="transform" type="rotate" from="0 850 142" to="360 850 142" dur="11s" repeatCount="indefinite"/><animate attributeName="opacity" values="0.4;0.9;0.4" dur="2.3s" repeatCount="indefinite"/></polygon><polygon points="1250,138 1262,150 1250,162 1238,150" fill="none" stroke="white" stroke-width="3"><animateTransform attributeName="transform" type="rotate" from="0 1250 150" to="360 1250 150" dur="10s" repeatCount="indefinite"/><animate attributeName="opacity" values="0.4;0.9;0.4" dur="2.1s" repeatCount="indefinite"/></polygon></g><path d="M0,140 Q360,120 720,140 T1440,140 L1440,200 L0,200 Z" fill="url(%23ballGrad)" opacity="0.35"><animate attributeName="d" values="M0,140 Q360,120 720,140 T1440,140 L1440,200 L0,200 Z;M0,145 Q360,125 720,145 T1440,145 L1440,200 L0,200 Z;M0,140 Q360,120 720,140 T1440,140 L1440,200 L0,200 Z" dur="5s" repeatCount="indefinite"/></path><g opacity="0.25"><circle cx="100" cy="140" r="6" fill="white"><animate attributeName="opacity" values="0;1;0" dur="2s" repeatCount="indefinite"/></circle><circle cx="300" cy="150" r="5" fill="white"><animate attributeName="opacity" values="0;1;0" dur="2.5s" repeatCount="indefinite" begin="0.5s"/></circle><circle cx="500" cy="145" r="7" fill="white"><animate attributeName="opacity" values="0;1;0" dur="2.2s" repeatCount="indefinite" begin="1s"/></circle><circle cx="700" cy="155" r="6" fill="white"><animate attributeName="opacity" values="0;1;0" dur="2.8s" repeatCount="indefinite" begin="0.3s"/></circle><circle cx="900" cy="148" r="5" fill="white"><animate attributeName="opacity" values="0;1;0" dur="2.4s" repeatCount="indefinite" begin="0.8s"/></circle><circle cx="1100" cy="152" r="6" fill="white"><animate attributeName="opacity" values="0;1;0" dur="2.6s" repeatCount="indefinite" begin="0.6s"/></circle><circle cx="1350" cy="145" r="5" fill="white"><animate attributeName="opacity" values="0;1;0" dur="2.3s" repeatCount="indefinite" begin="1.2s"/></circle></g></svg>') no-repeat center center;
  background-size: cover;
  pointer-events: none;
  opacity: 1;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.back-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  color: white;
  margin-right: 16px;
}

.back-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.back-icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.header-info {
  flex: 1;
}

.header-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 4px 0;
  color: white;
}

.header-subtitle {
  font-size: 14px;
  opacity: 0.8;
  margin: 0;
}

/* 筛选器 */
.filter-container {
  background: white;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.filter-row {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.lottery-type-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.status-filters {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.filter-label {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  white-space: nowrap;
}

.lottery-select {
  min-width: 130px;
}

.lottery-select :deep(.el-input) {
  border-radius: 10px;
}

.lottery-select :deep(.el-input__inner) {
  background: white;
  border: 2px solid #e9ecef;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  transition: all 0.3s ease;
  height: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.lottery-select :deep(.el-input__inner:hover) {
  border-color: #4facfe;
  box-shadow: 0 4px 12px rgba(79, 172, 254, 0.15);
  transform: translateY(-1px);
}

.lottery-select :deep(.el-input.is-focus .el-input__inner) {
  border-color: #4facfe !important;
  box-shadow: 0 0 0 4px rgba(79, 172, 254, 0.15), 0 4px 12px rgba(79, 172, 254, 0.15) !important;
  transform: translateY(-1px);
}

.lottery-select :deep(.el-select__caret) {
  color: #4facfe;
  font-size: 16px;
  transition: all 0.3s ease;
}

/* 下拉面板样式 */
.lottery-select :deep(.el-select-dropdown) {
  border: 2px solid #e9ecef;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  margin-top: 4px;
}

.lottery-select :deep(.el-select-dropdown__item) {
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  transition: all 0.2s ease;
}

.lottery-select :deep(.el-select-dropdown__item:hover) {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
}

.lottery-select :deep(.el-select-dropdown__item.selected) {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  font-weight: 600;
}

.filter-wrapper {
  display: flex;
  justify-content: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}

.filter-btn {
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  border-radius: 20px;
  padding: 8px 20px;
  font-size: 16px;
  font-weight: 500;
  color: #495057;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-btn:hover {
  background: #e9ecef;
  border-color: #dee2e6;
}

.filter-btn.active {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  border-color: #4facfe;
  color: white;
  box-shadow: 0 2px 8px rgba(79, 172, 254, 0.3);
}

/* 内容容器 */
.records-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 20px;
}

/* 加载状态 */
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

.loading-spinner {
  text-align: center;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #4facfe;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 16px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  color: #666;
  font-size: 14px;
  margin: 0;
}

/* 空状态 */
.empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.empty-content {
  text-align: center;
  max-width: 300px;
}

.empty-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px auto;
  color: #ddd;
  stroke-width: 1;
}

.empty-title {
  font-size: 18px;
  color: #666;
  margin: 0 0 24px 0;
  font-weight: 500;
}

.start-btn {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  color: white;
  border: none;
  border-radius: 24px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(79, 172, 254, 0.3);
}

.start-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(79, 172, 254, 0.4);
}

/* 记录网格 */
.records-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

.record-card-modern {
  background: white;
  border-radius: 12px;
  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.3s ease;
  border: 1px solid #f0f0f0;
}

.record-card-modern:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.record-header {
  padding: 14px 16px 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.period-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.period-number {
  font-size: 16px;
  font-weight: 700;
  color: #333;
}

.status-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.status-badge.warning {
  background: linear-gradient(135deg, #ffd93d, #ff9f1c);
  color: white;
}

.status-badge.success {
  background: linear-gradient(135deg, #56ab2f, #a8e6cf);
  color: white;
}

.status-badge.danger {
  background: linear-gradient(135deg, #ff416c, #ff4b2b);
  color: white;
}

.status-badge.info {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
}

.status-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.predict-date {
  font-size: 12px;
  color: #999;
}

.record-body {
  padding: 0 16px 12px 16px;
}

/* 球号显示 */
.predicted-numbers {
  padding: 12px;
  background: #f8f9fa;
  border-radius: 10px;
}

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

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

.ball {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.ball-red {
  background: linear-gradient(135deg, #e53e3e, #ff6b6b);
}

.ball-blue {
  background: linear-gradient(135deg, #2196f3, #64b5f6);
}

.separator {
  color: #666;
  font-weight: bold;
  font-size: 18px;
  margin: 0 4px;
}

/* 记录信息 */
.record-info {
  display: flex;
  flex-direction: column;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid #f5f5f5;
}

.info-row:last-child {
  border-bottom: none;
}

.info-label {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.result-text {
  font-weight: 600;
  font-size: 14px;
}

.result-won { 
  color: #52c41a;
  background: rgba(82, 196, 26, 0.1);
  padding: 4px 8px;
  border-radius: 12px;
}

.result-pending { 
  color: #faad14;
  background: rgba(250, 173, 20, 0.1);
  padding: 4px 8px;
  border-radius: 12px;
}

.result-lost { 
  color: #ff4d4f;
  background: rgba(255, 77, 79, 0.1);
  padding: 4px 8px;
  border-radius: 12px;
}

.bonus-amount {
  font-weight: 700;
  font-size: 16px;
  color: #52c41a;
}

.bonus-amount.zero-bonus {
  color: #999;
  font-size: 14px;
}

.prize-note {
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(250, 173, 20, 0.1);
  border-radius: 6px;
  font-size: 11px;
  color: #faad14;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.info-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* 分页和统计信息容器 */
.pagination-summary-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 16px;
  margin-bottom: 16px;
  padding: 0 20px;
  flex-wrap: wrap;
}

.pagination-wrapper-center {
  flex: 0 0 auto;
}

.pagination-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pagination-btn {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid #e0e0e0;
  background: white;
  color: #666;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination-btn:hover:not(.disabled) {
  border-color: #4facfe;
  color: #4facfe;
}

.pagination-btn.disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.pagination-icon {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.page-numbers {
  display: flex;
  gap: 6px;
}

.page-number {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid #e0e0e0;
  background: white;
  color: #666;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
  font-size: 15px;
}

.page-number:hover {
  border-color: #4facfe;
  color: #4facfe;
}

.page-number.active {
  background: #4facfe;
  border-color: #4facfe;
  color: white;
}

/* 记录统计 */
.records-summary {
  flex: 0 0 auto;
}

.summary-text {
  font-size: 14px;
  color: #999;
  padding: 0 8px;
  font-weight: 400;
  white-space: nowrap;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .predict-records-page {
    min-height: calc(100vh - 55px);
  }
  
  .page-header-modern {
    padding: 16px 0;
  }
  
  .header-content {
    padding: 0 16px;
  }
  
  .back-btn {
    width: 40px;
    height: 40px;
    margin-right: 12px;
  }
  
  .back-icon {
    width: 20px;
    height: 20px;
  }
  
  .header-title {
    font-size: 20px;
  }
  
  .header-subtitle {
    font-size: 12px;
  }
  
  .filter-container {
    padding: 16px;
  }
  
  .filter-row {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
  }
  
  .lottery-type-selector {
    flex: 0 0 auto;
    min-width: 180px;
  }
  
  .status-filters {
    flex: 1;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .filter-label {
    font-size: 13px;
  }
  
  .lottery-select {
    min-width: 110px;
  }
  
  .lottery-select :deep(.el-input) {
    border-radius: 8px;
  }
  
  .lottery-select :deep(.el-input__inner) {
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 8px;
  }
  
  .lottery-select :deep(.el-select__caret) {
    font-size: 14px;
  }
  
  .filter-wrapper {
    gap: 15px;
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-start;
  }
  
  .filter-btn {
    padding: 6px 16px;
    font-size: 15px;
  }
  
  .records-container {
    padding: 16px;
  }
  
  .record-card-modern {
    border-radius: 12px;
  }
  
  .record-header {
    padding: 16px 16px 0 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .record-body {
    padding: 0 16px 8px 16px;
  }
  
  .ball {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }
  
  .predicted-numbers {
    padding: 12px;
  }
  
  .balls-display {
    gap: 6px;
  }
  
  .red-balls {
    gap: 3px;
  }
  
  .summary-text {
    font-size: 13px;
  }
  
  .pagination-summary-container {
    gap: 12px;
    padding: 0 16px;
  }
  
  .pagination-btn {
    width: 28px;
    height: 28px;
  }
  
  .page-number {
    min-width: 28px;
    height: 28px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .header-content {
    padding: 0 12px;
  }
  
  .filter-container {
    padding: 12px;
  }
  
  .filter-row {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
  
  .lottery-type-selector {
    flex: 0 0 auto;
    min-width: 100px;
  }
  
  .status-filters {
    flex: 1;
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }
  
  .filter-wrapper {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }
  
  .filter-label {
    font-size: 12px;
  }
  
  .lottery-select {
    min-width: 90px;
    width: 100%;
  }
  
  .lottery-select :deep(.el-input) {
    border-radius: 8px;
  }
  
  .lottery-select :deep(.el-input__inner) {
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 8px;
  }
  
  .lottery-select :deep(.el-select__caret) {
    font-size: 12px;
  }
  
  .filter-btn {
    padding: 4px 8px;
    font-size: 13px;
    min-width: auto;
    flex: 0 0 auto;
  }
  
  .records-container {
    padding: 12px;
  }
  
  .ball {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  
  .period-number {
    font-size: 14px;
  }
  
  .status-badge {
    font-size: 11px;
    padding: 4px 8px;
  }
  
  .info-row {
    padding: 6px 0;
  }
  
  .info-label, .result-text {
    font-size: 13px;
  }
  
  .bonus-amount {
    font-size: 14px;
  }
  
  .summary-text {
    font-size: 14px;
  }
  
  .pagination-summary-container {
    gap: 8px;
    margin-top: 12px;
    margin-bottom: 12px;
    padding: 0 12px;
  }
  
  .pagination-wrapper {
    gap: 4px;
  }
  
  .pagination-btn {
    width: 30px;
    height: 30px;
  }
  
  .page-number {
    min-width: 30px;
    height: 30px;
    font-size: 15px;
  }
  
  .pagination-icon {
    width: 14px;
    height: 14px;
  }
}
</style> 