<template>
  <div class="table-stats-container">
    <div class="header">
      <h2>统计数据表格</h2>
      <p>基于MySQL数据库的真实统计数据</p>
    </div>
    
    <div class="canvas-container">
      <canvas 
        ref="tableCanvas" 
        :width="canvasWidth" 
        :height="canvasHeight"
        class="stats-canvas"
      ></canvas>
    </div>
    
    <div class="loading" v-if="loading">
      <a-spin size="large" />
      <p>正在加载数据...</p>
    </div>
    
    <div class="error" v-if="error">
      <a-alert 
        :message="error" 
        type="error" 
        show-icon 
        @close="error = null"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { message } from 'ant-design-vue'
import { api } from '@/utils/api'

// 响应式数据
const tableCanvas = ref(null)
const loading = ref(false)
const error = ref(null)
const tableData = ref([])
const canvasWidth = ref(600)
const canvasHeight = ref(300)

// 获取统计数据
const fetchTableStats = async () => {
  try {
    loading.value = true
    error.value = null
    
    const response = await api.get('/stats/public/table')
    
    if (response.data.success) {
      tableData.value = response.data.data
      await nextTick()
      drawTable()
    } else {
      throw new Error(response.data.message || '获取数据失败')
    }
  } catch (err) {
    console.error('获取统计数据失败:', err)
    error.value = err.message || '获取统计数据失败'
    message.error('获取统计数据失败')
  } finally {
    loading.value = false
  }
}

// 绘制表格
const drawTable = () => {
  if (!tableCanvas.value || !tableData.value.length) return
  
  const canvas = tableCanvas.value
  const ctx = canvas.getContext('2d')
  
  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  
  // 设置字体和样式
  ctx.font = '16px Arial, sans-serif'
  ctx.textAlign = 'left'
  ctx.textBaseline = 'middle'
  
  // 表格参数
  const startX = 50
  const startY = 50
  const rowHeight = 50
  const col1Width = 200
  const col2Width = 150
  const tableWidth = col1Width + col2Width
  const tableHeight = (tableData.value.length + 1) * rowHeight
  
  // 绘制表格边框
  ctx.strokeStyle = '#d9d9d9'
  ctx.lineWidth = 1
  
  // 绘制外边框
  ctx.strokeRect(startX, startY, tableWidth, tableHeight)
  
  // 绘制列分隔线
  ctx.beginPath()
  ctx.moveTo(startX + col1Width, startY)
  ctx.lineTo(startX + col1Width, startY + tableHeight)
  ctx.stroke()
  
  // 绘制表头
  ctx.fillStyle = '#f5f5f5'
  ctx.fillRect(startX, startY, tableWidth, rowHeight)
  
  // 绘制表头边框
  ctx.strokeRect(startX, startY, tableWidth, rowHeight)
  
  // 绘制表头文字
  ctx.fillStyle = '#262626'
  ctx.font = 'bold 16px Arial, sans-serif'
  ctx.fillText('数据描述', startX + 10, startY + rowHeight / 2)
  ctx.fillText('统计数值', startX + col1Width + 10, startY + rowHeight / 2)
  
  // 绘制数据行
  ctx.font = '16px Arial, sans-serif'
  tableData.value.forEach((item, index) => {
    const y = startY + (index + 1) * rowHeight
    
    // 绘制行分隔线
    ctx.beginPath()
    ctx.moveTo(startX, y)
    ctx.lineTo(startX + tableWidth, y)
    ctx.stroke()
    
    // 绘制数据
    ctx.fillStyle = '#262626'
    ctx.fillText(item.description, startX + 10, y + rowHeight / 2)
    
    // 数值用不同颜色显示
    ctx.fillStyle = '#1890ff'
    ctx.font = 'bold 16px Arial, sans-serif'
    ctx.fillText(item.value.toLocaleString(), startX + col1Width + 10, y + rowHeight / 2)
    ctx.font = '16px Arial, sans-serif'
  })
  
  // 绘制标题
  ctx.fillStyle = '#262626'
  ctx.font = 'bold 20px Arial, sans-serif'
  ctx.textAlign = 'center'
  ctx.fillText('农场统计数据表', startX + tableWidth / 2, 25)
  
  // 绘制数据来源说明
  ctx.font = '12px Arial, sans-serif'
  ctx.fillStyle = '#8c8c8c'
  ctx.fillText('数据来源：MySQL数据库实时查询', startX + tableWidth / 2, startY + tableHeight + 30)
}

// 组件挂载时获取数据
onMounted(() => {
  fetchTableStats()
})
</script>

<style scoped>
.table-stats-container {
  padding: 24px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

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

.header h2 {
  margin: 0 0 8px 0;
  color: #262626;
  font-size: 24px;
  font-weight: 600;
}

.header p {
  margin: 0;
  color: #8c8c8c;
  font-size: 14px;
}

.canvas-container {
  display: flex;
  justify-content: center;
  margin: 24px 0;
}

.stats-canvas {
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  background: #fafafa;
}

.loading {
  text-align: center;
  padding: 40px;
}

.loading p {
  margin-top: 16px;
  color: #8c8c8c;
}

.error {
  margin-top: 16px;
}
</style>