<template>
  <div class="table-analysis-container">
    <!-- 工具栏 -->
    <div class="toolbar">
      <el-button @click="goBack" type="default" size="medium" icon="ArrowLeft">
        返回
      </el-button>
    </div>

    <div class="header">
      <h1>表相查询</h1>
    </div>

    <!-- 加载状态 -->
    <el-card v-if="loading" class="loading-container" shadow="never">
      <el-skeleton :rows="10" animated />
    </el-card>

    <!-- 错误状态 -->
    <el-card v-else-if="error" class="error-container" shadow="never">
      <el-alert
        :title="error"
        type="error"
        show-icon
        :closable="false"
        style="margin-bottom: 20px;"
      />
      <el-button @click="fetchData" type="primary">重新加载</el-button>
    </el-card>

    <!-- 数据表格 -->
    <el-card v-else-if="drawsData.length > 0" class="table-container" shadow="never">
      <div class="table-wrapper">
        <el-table
          :data="drawsData"
          border
          style="width: 100%"
          :highlight-current-row="true"
          @current-change="handleCurrentChange"
          height="calc(100vh - 150px)"
        >
          <el-table-column
            prop="drawId"
            label="期号"
            width="80"
            fixed="left"
            align="center"
          />
          
          <!-- 红球列 -->
          <el-table-column label="红球" align="center">
            <el-table-column
              v-for="num in 33"
              :key="`red-${num}`"
              :label="formatNumberLabel(num)"
              width="40"
              align="center"
            >
              <template #default="scope">
                <div v-if="isRedBallHit(scope.row, num)" class="ball red-ball" :class="{'double-digits': num >= 10}">
                  {{ num }}
                </div>
              </template>
            </el-table-column>
          </el-table-column>
          
          <!-- 蓝球列 -->
          <el-table-column label="蓝球" align="center">
            <el-table-column
              v-for="num in 16"
              :key="`blue-${num}`"
              :label="formatNumberLabel(num)"
              width="40"
              align="center"
            >
              <template #default="scope">
                <div v-if="isBlueBallHit(scope.row, num)" class="ball blue-ball" :class="{'double-digits': num >= 10}">
                  {{ num }}
                </div>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <!-- 无数据状态 -->
    <el-card v-else class="no-data-container" shadow="never">
      <el-empty description="暂无开奖数据" />
    </el-card>
  </div>
</template>

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

export default {
  name: 'SsqTableAnalysis',
  components: {
    ElButton,
    ElCard,
    ElSkeleton,
    ElAlert,
    ElTable,
    ElTableColumn,
    ElEmpty
  },
  data() {
    return {
      drawsData: [],
      loading: false,
      error: null,
      selectedRowIndex: null // 选中的行索引
    }
  },
  async mounted() {
    await this.fetchData()
  },
  methods: {
    // 返回上一页
    goBack() {
      // 获取当前彩票类型，优先使用路由参数，否则使用默认值 'ssq'
      const lotteryType = this.$route.query.lotteryType || 'ssq'
      this.$router.push({
        path: '/data-analysis',
        query: { lotteryType: lotteryType }
      })
    },
    
    // 选中行
    handleCurrentChange(row) {
      this.selectedRowIndex = row ? this.drawsData.indexOf(row) : null
    },
    
    // 获取数据
    async fetchData() {
      this.loading = true
      this.error = null
      
      try {
        console.log('开始获取最新100期开奖数据')
        const response = await lotteryApi.getRecent100Draws()
        
        if (response && response.success && response.data) {
          this.drawsData = response.data
          console.log('获取开奖数据成功，共', this.drawsData.length, '期')
          console.log('第一条数据示例:', this.drawsData[0])
          if (this.drawsData.length > 0) {
            console.log('红球数据:', this.getRedBalls(this.drawsData[0]))
            console.log('蓝球数据:', this.drawsData[0].blueBall)
          }
        } else {
          this.error = response?.message || '获取数据失败'
          console.error('获取数据失败:', response)
        }
      } catch (error) {
        console.error('获取开奖数据出错:', error)
        this.error = error?.response?.data?.message || '网络错误，请稍后重试'
        
        // 添加测试数据以便调试
        this.drawsData = [
          {
            id: 1,
            drawId: '2025101',
            drawPeriod: '2025101',
            drawDate: '2025-01-01',
            redBall1: 1,
            redBall2: 2,
            redBall3: 3,
            redBall4: 4,
            redBall5: 5,
            redBall6: 6,
            blueBall: 7
          },
          {
            id: 2,
            drawId: '2025100',
            drawPeriod: '2025100',
            drawDate: '2025-01-02',
            redBall1: 6,
            redBall2: 9,
            redBall3: 10,
            redBall4: 13,
            redBall5: 30,
            redBall6: 33,
            blueBall: 7
          }
        ]
        console.log('使用测试数据:', this.drawsData)
      } finally {
        this.loading = false
      }
    },
    
    // 获取红球数组
    getRedBalls(draw) {
      const balls = []
      if (draw.redBall1) balls.push(parseInt(draw.redBall1))
      if (draw.redBall2) balls.push(parseInt(draw.redBall2))
      if (draw.redBall3) balls.push(parseInt(draw.redBall3))
      if (draw.redBall4) balls.push(parseInt(draw.redBall4))
      if (draw.redBall5) balls.push(parseInt(draw.redBall5))
      if (draw.redBall6) balls.push(parseInt(draw.redBall6))
      return balls
    },
    
    // 判断红球是否命中
    isRedBallHit(draw, num) {
      const redBalls = this.getRedBalls(draw)
      return redBalls.includes(num)
    },
    
    // 判断蓝球是否命中
    isBlueBallHit(draw, num) {
      return parseInt(draw.blueBall) === num
    },
    
    // 格式化数字标签，确保两位数显示在一行
    formatNumberLabel(num) {
      // 直接返回数字，CSS会处理双位数的显示
      return num;
    }
  }
}
</script>

<style scoped>
.table-analysis-container {
  min-height: calc(100vh - 70px);
  background: #f8f9fa;
  padding: 10px;
}

/* 工具栏样式 */
.toolbar {
  margin-bottom: 15px;
}

.header {
  text-align: center;
  margin-bottom: 15px;
}

.header h1 {
  color: #333;
  font-size: 24px;
  margin-bottom: 5px;
}

.header p {
  color: #666;
  font-size: 14px;
}

/* 加载状态 */
.loading-container {
  margin-bottom: 20px;
}

/* 错误状态 */
.error-container {
  margin-bottom: 20px;
  text-align: center;
  padding: 20px;
}

/* 表格容器 */
.table-container {
  margin-bottom: 20px;
}

.table-wrapper {
  overflow-x: auto;
}

/* 自定义表格样式 */
:deep(.el-table) {
  --el-table-header-bg-color: #f5f7fa;
  --el-table-header-text-color: #333;
  --el-table-row-hover-bg-color: #ecf5ff;
}

:deep(.el-table__header) th {
  padding: 2px 0;
  height: 32px;
  font-size: 12px; /* 减小表头字体大小 */
}

:deep(.el-table__header .cell) {
  padding: 0 !important; /* 移除单元格内边距 */
  white-space: nowrap;
  line-height: 1;
}

/* 对两位数的表头标签应用特殊样式 */
:deep(.el-table__header th[class*="is-leaf"]:nth-child(n+11)) .cell {
  font-size: 11px; /* 缩小两位数字体 */
  letter-spacing: -0.5px; /* 减少字母间距 */
}

:deep(.el-table__body) td {
  padding: 4px 0;
  height: 34px;
}

:deep(.el-table--border .el-table__cell) {
  border-right: 1px solid #ebeef5;
}

:deep(.el-table__fixed-right) {
  height: 100%;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.08);
}

/* 无数据状态 */
.no-data-container {
  margin-bottom: 20px;
  padding: 40px;
  text-align: center;
}

/* 球体样式 */
.ball {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 10px;
  margin: 0 auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

/* 两位数的球使用更小字体 */
.double-digits {
  font-size: 9px;
  letter-spacing: -0.5px;
}

/* 红球样式 */
.red-ball {
  background: linear-gradient(135deg, #ff5252 0%, #d32f2f 50%, #b71c1c 100%);
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  border: 1px solid #b71c1c;
}

.red-ball::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 3px;
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  opacity: 0.8;
}

/* 蓝球样式 */
.blue-ball {
  background: linear-gradient(135deg, #42a5f5 0%, #1976d2 50%, #0d47a1 100%);
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  border: 1px solid #0d47a1;
}

.blue-ball::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 3px;
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  opacity: 0.8;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .table-analysis-container {
    padding: 5px;
  }
  
  .header h1 {
    font-size: 20px;
  }
  
  .header p {
    font-size: 12px;
  }
  
  .toolbar {
    margin-bottom: 10px;
  }
  
  /* 在移动端调整球体大小 */
  .ball {
    width: 20px;
    height: 20px;
    font-size: 9px;
  }
  
  .ball::before {
    width: 4px;
    height: 4px;
  }
}
</style>
