<template>
  <div class="map-view">
    <div class="map-header">
      <h1>养殖场分布地图</h1>
      <div class="map-controls">
        <a-select
          v-model="selectedFarmType"
          style="width: 200px"
          placeholder="选择养殖场类型"
          @change="handleFarmTypeChange"
        >
          <a-select-option value="all">全部养殖场</a-select-option>
          <a-select-option value="cattle">牛养殖场</a-select-option>
          <a-select-option value="sheep">羊养殖场</a-select-option>
        </a-select>
        
        <a-button type="primary" @click="refreshMap">
          <template #icon><reload-outlined /></template>
          刷新数据
        </a-button>
      </div>
    </div>
    
    <div class="map-container">
      <baidu-map 
        :markers="filteredMarkers" 
        height="calc(100vh - 180px)" 
        @marker-click="handleFarmClick"
        @map-ready="handleMapReady"
      />
    </div>
    
    <!-- 养殖场详情抽屉 -->
    <a-drawer
      :title="`养殖场详情 - ${selectedFarmId ? dataStore.farms.find(f => f.id == selectedFarmId)?.name : ''}`"
      :width="600"
      :visible="drawerVisible"
      @close="closeDrawer"
      :bodyStyle="{ paddingBottom: '80px' }"
    >
      <farm-detail v-if="selectedFarmId" :farm-id="selectedFarmId" />
    </a-drawer>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useDataStore } from '../stores'
import { convertFarmsToMarkers } from '../utils/mapService'
import BaiduMap from '../components/BaiduMap.vue'
import FarmDetail from '../components/FarmDetail.vue'
import { message } from 'ant-design-vue'
import { ReloadOutlined } from '@ant-design/icons-vue'

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

// 地图实例
let mapInstance = null

// 养殖场类型筛选
const selectedFarmType = ref('all')

// 抽屉控制
const drawerVisible = ref(false)
const selectedFarmId = ref(null)

// 加载状态
const loading = ref(false)

// 养殖场标记
const farmMarkers = computed(() => {
  return convertFarmsToMarkers(dataStore.farms)
})

// 根据类型筛选标记
const filteredMarkers = computed(() => {
  if (selectedFarmType.value === 'all') {
    return farmMarkers.value
  }
  
  // 根据养殖场类型筛选
  // 这里假设养殖场数据中有type字段，实际项目中需要根据真实数据结构调整
  return farmMarkers.value.filter(marker => {
    const farm = marker.originalData
    if (selectedFarmType.value === 'cattle') {
      // 筛选牛养殖场
      return farm.type === 'cattle' || farm.name.includes('牛')
    } else if (selectedFarmType.value === 'sheep') {
      // 筛选羊养殖场
      return farm.type === 'sheep' || farm.name.includes('羊')
    }
    return true
  })
})

// 处理地图就绪事件
function handleMapReady(map) {
  mapInstance = map
  message.success('地图加载完成')
}

// 处理养殖场类型变化
function handleFarmTypeChange(value) {
  message.info(`已筛选${value === 'all' ? '全部' : value === 'cattle' ? '牛' : '羊'}养殖场`)
}

// 处理养殖场标记点击事件
function handleFarmClick(markerData) {
  // 设置选中的养殖场ID
  selectedFarmId.value = markerData.originalData.id
  // 打开抽屉
  drawerVisible.value = true
}

// 关闭抽屉
function closeDrawer() {
  drawerVisible.value = false
}

// 刷新地图数据
async function refreshMap() {
  loading.value = true
  try {
    await dataStore.fetchFarms()
    message.success('地图数据已更新')
  } catch (error) {
    message.error('更新地图数据失败')
  } finally {
    loading.value = false
  }
}

// 组件挂载后初始化数据
onMounted(async () => {
  if (dataStore.farms.length === 0) {
    await dataStore.fetchAllData()
  }
})
</script>

<style scoped>
.map-view {
  padding: 20px;
  height: 100%;
}

.map-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.map-controls {
  display: flex;
  gap: 16px;
}

.map-container {
  border: 1px solid #eee;
  border-radius: 4px;
  overflow: hidden;
}
</style>