<template>
  <el-card shadow="never" class="map-card fill-card">
    <template #header>
      <span class="card-header-title">统一调度地图</span>
    </template>
    <div class="map-header">
      <div class="map-actions">
        <el-checkbox-group v-model="visibleLayers" size="small">
          <el-checkbox-button v-for="layer in layerOptions" :label="layer.value" :key="layer.value">
            {{ layer.label }}
          </el-checkbox-button>
        </el-checkbox-group>
      </div>
    </div>
    <ResourceOverviewCard />
    <div class="map-container">
      <DispatchMap
        :visible-layers="visibleLayers"
        :highlight-marker-id="highlightMarkerId"
        @marker-clicked="handleMarkerClick"
        @event-pin-changed="handleEventPinChanged"
        @task-created="handleTaskCreated"
      />
    </div>
  </el-card>
</template>

<script>
import ResourceOverviewCard from './ResourceOverviewCard.vue'
import DispatchMap from './DispatchMap.vue'

export default {
  name: 'DispatchMapPanel',
  components: {
    ResourceOverviewCard,
    DispatchMap
  },
  props: {
    highlightMarkerId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      layerOptions: [
        { value: 'events', label: '事件', color: '#FF9800' },
        { value: 'teams', label: '队伍', color: '#67C23A' },
        { value: 'warehouses', label: '仓库', color: '#909399' },
        { value: 'experts', label: '专家', color: '#F56C6C' },
        { value: 'vehicles', label: '车辆', color: '#8B5CF6' },
        { value: 'cameras', label: '摄像头', color: '#409EFF' }
      ],
      visibleLayers: ['events', 'teams', 'warehouses', 'cameras']
    }
  },
  methods: {
    handleMarkerClick(markerInfo) {
      // 转发所有标记点击事件到父组件
      this.$emit('marker-clicked', markerInfo)
    },
    handleEventPinChanged(payload) {
      this.$emit('event-pin-changed', payload)
    },
    handleTaskCreated(taskData) {
      this.$emit('task-created', taskData)
    }
  }
}
</script>

<style lang="scss" scoped>
.map-card {
  height: 100%;
  padding: 16px;
  box-sizing: border-box;

  ::v-deep .el-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 15px 0 0;
    height: calc(100% - 40px);
  }
}

.card-header-title {
  font-weight: 600;
  font-size: 14px;
}

.map-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.map-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.map-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
</style>