<template>
  <div class="test-analytics">
    <h2>数据加载测试页面</h2>
    
    <div class="debug-info">
      <h3>数据状态</h3>
      <p>养殖场数量: {{ dataStore.farms.length }}</p>
      <p>动物数量: {{ dataStore.animals.length }}</p>
      <p>设备数量: {{ dataStore.devices.length }}</p>
      <p>预警数量: {{ dataStore.alerts.length }}</p>
    </div>
    
    <div class="raw-data">
      <h3>原始数据</h3>
      <div class="data-section">
        <h4>养殖场数据</h4>
        <pre>{{ JSON.stringify(dataStore.farms, null, 2) }}</pre>
      </div>
      
      <div class="data-section">
        <h4>动物数据</h4>
        <pre>{{ JSON.stringify(dataStore.animals, null, 2) }}</pre>
      </div>
    </div>
    
    <div class="table-data">
      <h3>计算后的表格数据</h3>
      <pre>{{ JSON.stringify(farmTableData, null, 2) }}</pre>
    </div>
    
    <div class="actual-table">
      <h3>实际表格</h3>
      <a-table 
        :columns="farmColumns" 
        :data-source="farmTableData" 
        :pagination="false"
        size="small"
      />
    </div>
    
    <div class="actions">
      <a-button @click="refreshData" type="primary">刷新数据</a-button>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted } from 'vue'
import { useDataStore } from '../stores/data'

const dataStore = useDataStore()

// 养殖场表格数据
const farmTableData = computed(() => {
  console.log('计算farmTableData:', {
    farms: dataStore.farms.length,
    animals: dataStore.animals.length,
    devices: dataStore.devices.length,
    alerts: dataStore.alerts.length
  })
  
  return dataStore.farms.map(farm => {
    // 获取该养殖场的动物数量
    const animals = dataStore.animals.filter(animal => animal.farm_id === farm.id)
    const animalCount = animals.reduce((sum, animal) => sum + (animal.count || 0), 0)
    
    // 获取该养殖场的设备数量
    const devices = dataStore.devices.filter(device => device.farm_id === farm.id)
    const deviceCount = devices.length
    
    // 获取该养殖场的预警数量
    const alerts = dataStore.alerts.filter(alert => alert.farm_id === farm.id)
    const alertCount = alerts.length
    
    console.log(`养殖场 ${farm.name} (ID: ${farm.id}):`, {
      animalCount,
      deviceCount,
      alertCount,
      animals: animals.map(a => ({ id: a.id, farm_id: a.farm_id, count: a.count })),
      devices: devices.map(d => ({ id: d.id, farm_id: d.farm_id })),
      alerts: alerts.map(a => ({ id: a.id, farm_id: a.farm_id }))
    })
    
    return {
      key: farm.id,
      id: farm.id,
      name: farm.name,
      animalCount,
      deviceCount,
      alertCount
    }
  })
})

// 养殖场表格列定义
const farmColumns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
    width: 80
  },
  {
    title: '养殖场名称',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '动物数量',
    dataIndex: 'animalCount',
    key: 'animalCount',
    sorter: (a, b) => a.animalCount - b.animalCount
  },
  {
    title: '设备数量',
    dataIndex: 'deviceCount',
    key: 'deviceCount',
    sorter: (a, b) => a.deviceCount - b.deviceCount
  },
  {
    title: '预警数量',
    dataIndex: 'alertCount',
    key: 'alertCount',
    sorter: (a, b) => a.alertCount - b.alertCount
  }
]

const refreshData = async () => {
  console.log('手动刷新数据...')
  await dataStore.fetchAllData()
}

// 组件挂载时加载数据
onMounted(async () => {
  console.log('TestAnalytics页面开始加载数据...')
  await dataStore.fetchAllData()
  console.log('TestAnalytics页面数据加载完成')
})
</script>

<style scoped>
.test-analytics {
  padding: 20px;
}

.debug-info {
  background: #f5f5f5;
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 4px;
}

.data-section {
  margin-bottom: 20px;
}

.data-section h4 {
  margin-bottom: 10px;
}

pre {
  background: #f8f8f8;
  padding: 10px;
  border-radius: 4px;
  overflow: auto;
  max-height: 300px;
  font-size: 12px;
}

.actions {
  margin-top: 20px;
}
</style>