<template>
  <div class="farm-detail">
    <a-descriptions :title="farm.name" bordered :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }">
      <a-descriptions-item label="养殖场ID">{{ farm.id }}</a-descriptions-item>
      <a-descriptions-item label="动物数量">{{ farm.animalCount || '未知' }}</a-descriptions-item>
      <a-descriptions-item label="位置坐标">
        {{ farm.location ? `${farm.location.lat.toFixed(4)}, ${farm.location.lng.toFixed(4)}` : '未知' }}
      </a-descriptions-item>
      <a-descriptions-item label="设备数量">
        {{ farmDevices.length }}
      </a-descriptions-item>
      <a-descriptions-item label="预警数量">
        <a-badge :count="farmAlerts.length" :number-style="{ backgroundColor: farmAlerts.length > 0 ? '#f5222d' : '#52c41a' }" />
      </a-descriptions-item>
      <a-descriptions-item label="创建时间">
        {{ farm.createdAt ? new Date(farm.createdAt).toLocaleString() : '未知' }}
      </a-descriptions-item>
    </a-descriptions>
    
    <a-divider orientation="left">设备状态</a-divider>
    <a-table 
      :dataSource="farmDevices" 
      :columns="deviceColumns" 
      :pagination="{ pageSize: 5 }" 
      size="small"
      :loading="loading.devices"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'status'">
          <a-tag :color="record.status === 'online' ? 'green' : 'red'">
            {{ record.status === 'online' ? '在线' : '离线' }}
          </a-tag>
        </template>
      </template>
    </a-table>
    
    <a-divider orientation="left">预警信息</a-divider>
    <a-table 
      :dataSource="farmAlerts" 
      :columns="alertColumns" 
      :pagination="{ pageSize: 5 }" 
      size="small"
      :loading="loading.alerts"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'level'">
          <a-tag :color="getAlertLevelColor(record.level)">
            {{ getAlertLevelText(record.level) }}
          </a-tag>
        </template>
        <template v-if="column.key === 'created_at'">
          {{ new Date(record.created_at).toLocaleString() }}
        </template>
      </template>
    </a-table>
  </div>
</template>

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

// 定义组件属性
const props = defineProps({
  // 养殖场ID
  farmId: {
    type: [Number, String],
    required: true
  }
})

// 数据存储
const dataStore = useDataStore()

// 加载状态
const loading = ref({
  devices: false,
  alerts: false
})

// 获取养殖场信息
const farm = computed(() => {
  return dataStore.farms.find(f => f.id == props.farmId) || {}
})

// 获取养殖场设备
const farmDevices = computed(() => {
  return dataStore.devices.filter(d => d.farm_id == props.farmId)
})

// 获取养殖场预警
const farmAlerts = computed(() => {
  return dataStore.alerts.filter(a => a.farm_id == props.farmId)
})

// 设备表格列定义
const deviceColumns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '类型',
    dataIndex: 'type',
    key: 'type',
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
  }
]

// 预警表格列定义
const alertColumns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '类型',
    dataIndex: 'type',
    key: 'type',
  },
  {
    title: '级别',
    dataIndex: 'level',
    key: 'level',
  },
  {
    title: '时间',
    dataIndex: 'created_at',
    key: 'created_at',
  }
]

// 获取预警级别颜色
function getAlertLevelColor(level) {
  switch(level) {
    case 'high': return 'red'
    case 'medium': return 'orange'
    case 'low': return 'blue'
    default: return 'default'
  }
}

// 获取预警级别文本
function getAlertLevelText(level) {
  switch(level) {
    case 'high': return '高'
    case 'medium': return '中'
    case 'low': return '低'
    default: return '未知'
  }
}

// 监听养殖场ID变化，确保数据已加载
watch(() => props.farmId, async (newId) => {
  if (newId) {
    // 确保数据已加载
    if (dataStore.farms.length === 0) {
      await dataStore.fetchAllData()
    }
  }
}, { immediate: true })
</script>

<style scoped>
.farm-detail {
  padding: 16px;
}
</style>