<template>
  <div class="trend-analysis">
    <div class="header">
      <!-- 返回按钮 -->
      <div class="back-button-container">
        <el-button @click="$router.back()" icon="ArrowLeft" size="medium">
          返回
        </el-button>
      </div>
      
      <h2>活跃性分析</h2>
      <p>查看红球和蓝球历史数据统计</p>
      
      <!-- 球类选择切换 -->
      <div class="ball-type-tabs">
        <el-radio-group v-model="ballType" @change="switchBallType">
          <el-radio-button label="red">🔴 红球</el-radio-button>
          <el-radio-button label="blue">🔵 蓝球</el-radio-button>
        </el-radio-group>
      </div>
    </div>

    <!-- 功能按钮区域 -->
    <div class="analysis-buttons">
      <el-card 
        class="analysis-card" 
        :class="{ active: currentView === 'all' }"
        @click="loadData('all')"
        shadow="hover"
      >
        <div class="btn-icon">📊</div>
        <div class="btn-text">
          <div class="btn-title">历史数据</div>
          <div class="btn-desc">查看所有历史数据</div>
        </div>
      </el-card>

      <el-card 
        class="analysis-card"
        :class="{ active: currentView === 'top' }"
        @click="loadData('top')"
        shadow="hover"
      >
        <div class="btn-icon">🏆</div>
        <div class="btn-text">
          <div class="btn-title">历史排行</div>
          <div class="btn-desc">历史数据排行榜</div>
        </div>
      </el-card>

      <el-card 
        class="analysis-card"
        :class="{ active: currentView === '100' }"
        @click="loadData('100')"
        shadow="hover"
      >
        <div class="btn-icon">📈</div>
        <div class="btn-text">
          <div class="btn-title">百期数据</div>
          <div class="btn-desc">最近100期数据</div>
        </div>
      </el-card>

      <el-card 
        class="analysis-card"
        :class="{ active: currentView === 'top100' }"
        @click="loadData('top100')"
        shadow="hover"
      >
        <div class="btn-icon">🎯</div>
        <div class="btn-text">
          <div class="btn-title">百期排行</div>
          <div class="btn-desc">最近100期数据排行</div>
        </div>
      </el-card>
    </div>

    <!-- 数据显示区域 -->
    <el-card class="data-container" shadow="never">
      <div v-if="loading" class="loading">
        <el-skeleton :rows="10" animated />
      </div>

      <el-alert
        v-else-if="error"
        :title="error"
        type="error"
        show-icon
        :closable="false"
        style="margin-bottom: 20px;"
      >
        <template #default>
          <el-button @click="retryLoad" type="primary" size="small">重试</el-button>
        </template>
      </el-alert>

      <div v-else-if="tableData.length > 0" class="data-table-container">
        <div class="table-header">
          <h3>{{ getTableTitle() }}</h3>
          <div class="table-info">
            <span>共 {{ tableData.length }} 条记录</span>
          </div>
        </div>

        <el-table :data="paginatedData" stripe style="width: 100%">
          <el-table-column 
            v-for="column in getTableColumns()" 
            :key="column.key" 
            :prop="column.key"
            :label="column.title"
          >
            <template #default="scope">
              <span :class="getColumnClass(column.key, scope.row[column.key])">
                {{ formatValue(column.key, scope.row[column.key], scope.$index) }}
              </span>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination" v-if="totalPages > 1">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="tableData.length"
            :page-size="pageSize"
            v-model:current-page="currentPage"
          />
        </div>
      </div>

      <el-empty v-else-if="!loading" description="暂无数据" />
    </el-card>
  </div>
</template>

<script>
import { lotteryApi } from '@/api'
import {
  ElButton,
  ElCard,
  ElRadioGroup,
  ElRadioButton,
  ElSkeleton,
  ElAlert,
  ElTable,
  ElTableColumn,
  ElPagination,
  ElEmpty
} from 'element-plus'
import { ArrowLeft } from '@element-plus/icons-vue'

export default {
  name: 'TrendAnalysis',
  components: {
    ElButton,
    ElCard,
    ElRadioGroup,
    ElRadioButton,
    ElSkeleton,
    ElAlert,
    ElTable,
    ElTableColumn,
    ElPagination,
    ElEmpty
  },
  data() {
    return {
      loading: false,
      error: null,
      currentView: '',
      ballType: 'red', // 'red' 或 'blue'
      tableData: [],
      currentPage: 1,
      pageSize: 20
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.tableData.length / this.pageSize)
    },
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize
      return this.tableData.slice(start, start + this.pageSize)
    }
  },
  methods: {
    async loadHistoryAll() {
      this.currentView = 'all'
      this.currentPage = 1
      this.loading = true
      this.error = null
      
      try {
        const response = await lotteryApi.getHistoryAll()
        if (response.success) {
          this.tableData = response.data || []
        } else {
          this.error = response.message || '获取数据失败'
        }
      } catch (error) {
        console.error('获取历史全部记录失败:', error)
        this.error = '网络请求失败，请重试'
      } finally {
        this.loading = false
      }
    },

    async loadHistory100() {
      this.currentView = '100'
      this.currentPage = 1
      this.loading = true
      this.error = null
      
      try {
        const response = await lotteryApi.getHistory100()
        if (response.success) {
          this.tableData = response.data || []
        } else {
          this.error = response.message || '获取数据失败'
        }
      } catch (error) {
        console.error('获取最近100期记录失败:', error)
        this.error = '网络请求失败，请重试'
      } finally {
        this.loading = false
      }
    },

    async loadHistoryTop() {
      this.currentView = 'top'
      this.currentPage = 1
      this.loading = true
      this.error = null
      
      try {
        const response = await lotteryApi.getHistoryTop()
        if (response.success) {
          this.tableData = response.data || []
        } else {
          this.error = response.message || '获取数据失败'
        }
      } catch (error) {
        console.error('获取历史排行记录失败:', error)
        this.error = '网络请求失败，请重试'
      } finally {
        this.loading = false
      }
    },

    async loadHistoryTop100() {
      this.currentView = 'top100'
      this.currentPage = 1
      this.loading = true
      this.error = null
      
      try {
        const response = await lotteryApi.getHistoryTop100()
        if (response.success) {
          this.tableData = response.data || []
        } else {
          this.error = response.message || '获取数据失败'
        }
      } catch (error) {
        console.error('获取100期排行记录失败:', error)
        this.error = '网络请求失败，请重试'
      } finally {
        this.loading = false
      }
    },

    // 蓝球数据获取方法
    async loadBlueHistoryAll() {
      this.currentView = 'all'
      this.currentPage = 1
      this.loading = true
      this.error = null
      
      try {
        const response = await lotteryApi.getBlueHistoryAll()
        if (response.success) {
          this.tableData = response.data || []
        } else {
          this.error = response.message || '获取数据失败'
        }
      } catch (error) {
        console.error('获取蓝球历史全部记录失败:', error)
        this.error = '网络请求失败，请重试'
      } finally {
        this.loading = false
      }
    },

    async loadBlueHistory100() {
      this.currentView = '100'
      this.currentPage = 1
      this.loading = true
      this.error = null
      
      try {
        const response = await lotteryApi.getBlueHistory100()
        if (response.success) {
          this.tableData = response.data || []
        } else {
          this.error = response.message || '获取数据失败'
        }
      } catch (error) {
        console.error('获取蓝球最近100期记录失败:', error)
        this.error = '网络请求失败，请重试'
      } finally {
        this.loading = false
      }
    },

    async loadBlueHistoryTop() {
      this.currentView = 'top'
      this.currentPage = 1
      this.loading = true
      this.error = null
      
      try {
        const response = await lotteryApi.getBlueHistoryTop()
        if (response.success) {
          this.tableData = response.data || []
        } else {
          this.error = response.message || '获取数据失败'
        }
      } catch (error) {
        console.error('获取蓝球历史排行记录失败:', error)
        this.error = '网络请求失败，请重试'
      } finally {
        this.loading = false
      }
    },

    async loadBlueHistoryTop100() {
      this.currentView = 'top100'
      this.currentPage = 1
      this.loading = true
      this.error = null
      
      try {
        const response = await lotteryApi.getBlueHistoryTop100()
        if (response.success) {
          this.tableData = response.data || []
        } else {
          this.error = response.message || '获取数据失败'
        }
      } catch (error) {
        console.error('获取蓝球100期排行记录失败:', error)
        this.error = '网络请求失败，请重试'
      } finally {
        this.loading = false
      }
    },

    // 切换球类型
    switchBallType() {
      this.currentView = ''
      this.tableData = []
      this.currentPage = 1
      this.error = null
    },

    // 统一的数据加载方法
    loadData(viewType) {
      if (this.ballType === 'red') {
        switch (viewType) {
          case 'all':
            this.loadHistoryAll()
            break
          case '100':
            this.loadHistory100()
            break
          case 'top':
            this.loadHistoryTop()
            break
          case 'top100':
            this.loadHistoryTop100()
            break
        }
      } else {
        switch (viewType) {
          case 'all':
            this.loadBlueHistoryAll()
            break
          case '100':
            this.loadBlueHistory100()
            break
          case 'top':
            this.loadBlueHistoryTop()
            break
          case 'top100':
            this.loadBlueHistoryTop100()
            break
        }
      }
    },

    getTableTitle() {
      const ballTypeText = this.ballType === 'red' ? '红球' : '蓝球'
      const titles = {
        'all': `${ballTypeText}历史全部记录`,
        '100': `${ballTypeText}最近100期数据`,
        'top': `${ballTypeText}历史数据排行`,
        'top100': `${ballTypeText}100期数据排行`
      }
      return titles[this.currentView] || '数据列表'
    },

         getTableColumns() {
       // 根据不同的视图返回不同的列配置
       if (this.currentView === 'all') {
         // 历史全部记录 - 显示完整数据
         return [
           { key: 'ballNumber', title: '球号' },
           { key: 'frequencyCount', title: '出现次数' },
           { key: 'frequencyPercentage', title: '出现频率(%)' },
           { key: 'averageInterval', title: '平均隐现期' },
           { key: 'maxHiddenInterval', title: '最长隐现期' },
           { key: 'maxConsecutiveCount', title: '最大连出期' },
           { key: 'pointCoefficient', title: '活跃系数' }
         ]
       } else if (this.currentView === '100') {
         // 最近100期 - 只显示有数据的列
         return [
           { key: 'ballNumber', title: '球号' },
           { key: 'frequencyCount', title: '出现次数' },
           { key: 'averageInterval', title: '平均隐现期' },
           { key: 'maxConsecutiveCount', title: '最大连出期' },
           { key: 'pointCoefficient', title: '活跃系数' }
         ]
       } else if (this.currentView === 'top' || this.currentView === 'top100') {
         return [
           { key: 'no', title: '排名' },
           { key: 'ballNumber', title: '球号' },
           { key: 'pointCoefficient', title: '活跃系数' }
         ]
       }
       return []
     },

         getColumnClass(key, value) {
       if (key === 'ballNumber') {
         return this.ballType === 'red' ? 'ball-number red-ball' : 'ball-number blue-ball'
       } else if (key === 'pointCoefficient') {
         return 'point-coefficient'
       } else if (key === 'no') {
         return 'ranking'
       }
       return ''
     },

         formatValue(key, value, index) {
       if (key === 'no') {
         // 排名显示为连续数字（当前页面索引 + 全局偏移）
         return (this.currentPage - 1) * this.pageSize + index + 1
       } else if (key === 'frequencyPercentage' && typeof value === 'number') {
         return value.toFixed(2)
       }
       return value
     },

         retryLoad() {
       if (this.currentView) {
         this.loadData(this.currentView)
       }
     },

    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--
      }
    },

    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++
      }
    }
  }
}
</script>

<style scoped>
.trend-analysis {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 20px;
}

.header {
  text-align: center;
  margin-bottom: 30px;
  position: relative;
}

.back-button-container {
  position: absolute;
  left: 20px;
  top: 0;
}

.header h2 {
  color: #2c3e50;
  font-size: 28px;
  margin-bottom: 10px;
  font-weight: 700;
}

.header p {
  color: #7f8c8d;
  font-size: 16px;
}

.ball-type-tabs {
  margin-top: 20px;
}

.analysis-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.analysis-card {
  cursor: pointer;
  transition: all 0.3s ease;
}

.analysis-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(52, 152, 219, 0.15);
  border-color: #3498db;
}

.analysis-card.active {
  background-color: #eaf5ff;
  border-color: #3498db;
  box-shadow: 0 8px 25px rgba(52, 152, 219, 0.2);
}

.analysis-card.active :deep(.el-card__body) {
  background: transparent;
  color: #303133;
}

.btn-icon {
  font-size: 32px;
  min-width: 40px;
  text-align: center;
  margin-bottom: 10px;
}

.btn-text {
  text-align: center;
}

.btn-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.analysis-card.active .btn-title {
  color: #2980b9;
}

.btn-desc {
  font-size: 14px;
  opacity: 0.8;
}

.analysis-card.active .btn-desc {
  color: #3498db;
}

.data-container {
  overflow: hidden;
}

.loading {
  padding: 40px;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #ebeef5;
}

.table-header h3 {
  margin: 0;
  font-size: 18px;
}

.table-info {
  font-size: 14px;
  color: #909399;
}

.pagination {
  display: flex;
  justify-content: center;
  padding: 20px;
}

.ball-number {
  color: white;
  padding: 4px 8px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 14px;
  min-width: 30px;
  text-align: center;
  display: inline-block;
}

.red-ball {
  background: #e74c3c;
}

.blue-ball {
  background: #3498db;
}

.point-coefficient {
  color: #e74c3c;
  font-weight: 700;
}

.ranking {
  background: #f39c12;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 700;
  display: inline-block;
}

@media (max-width: 768px) {
  .trend-analysis {
    padding: 15px;
  }
  
  .back-button-container {
    position: static;
    text-align: left;
    margin-bottom: 15px;
  }
  
  .header {
    margin-bottom: 20px;
  }
  
  .analysis-buttons {
    grid-template-columns: 1fr;
  }
}
</style> 