<template>
  <div class="legend-toolbar">
    <!-- 图例面板（包含图例容器和折叠按钮） -->
    <div class="legend-panel">
      <!-- 图例容器 -->
      <transition name="legend-collapse">
        <div
          v-show="!isCollapsed"
          class="legend-container"
          :style="{ backgroundImage: `url(${backgroundImg})` }"
        >
          <div
            v-for="item in computedLegendItems"
            :key="item.key"
            class="legend-item"
            :class="{ active: isActive(item.key) }"
            @click="handleItemClick(item.key)"
          >
            <img :src="item.icon" :alt="item.label" class="legend-icon" />
            <span class="legend-label">{{ item.label }}</span>
          </div>
        </div>
      </transition>

      <!-- 折叠/展开按钮 -->
      <button
        type="button"
        class="collapse-toggle"
        :aria-label="isCollapsed ? '展开图例' : '折叠图例'"
        :aria-expanded="!isCollapsed"
        @click="toggleCollapse"
      >
        <img
          :src="isCollapsed ? upArrowIcon : downArrowIcon"
          :alt="isCollapsed ? '展开图例' : '折叠图例'"
          class="collapse-icon"
        />
      </button>
    </div>

    <!-- 清除按钮 -->
    <!-- <div class="clear-button" @click="handleClearClick">
      <img :src="clearIcon" alt="清除" class="clear-icon" />
    </div> -->
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'

// 导入图例背景图和控制图标
import backgroundImg from '../assets/legendTool/图例工具栏iconBg.png'
import downArrowIcon from '../assets/legendTool/下箭头.png'
import upArrowIcon from '../assets/legendTool/上箭头 .png'
// import clearIcon from '../assets/legend/清除icon.png'

// 导入图例图标（普通图标和定位图标）
import commonRoadIcon from '../assets/legendTool/普通公路icon.png'
import commonRoadMarkerIcon from '../assets/legendTool/普通公路icon定位.png'
import videoIcon from '../assets/legendTool/视频icon.png'
import videoMarkerIcon from '../assets/legendTool/视频icon定位.png'
import trafficMonitorIcon from '../assets/legendTool/交调icon.png'
import trafficMonitorMarkerIcon from '../assets/legendTool/交调icon定位.png'
import bridgeIcon from '../assets/legendTool/桥梁icon.png'
import bridgeMarkerIcon from '../assets/legendTool/桥梁icon定位.png'
import tunnelIcon from '../assets/legendTool/隧洞icon.png'
import tunnelMarkerIcon from '../assets/legendTool/隧洞icon定位.png'
import serviceFacilityIcon from '../assets/legendTool/服务设施icon.png'
import serviceFacilityMarkerIcon from '../assets/legendTool/服务设施icon定位.png'
import riskRoadIcon from '../assets/legendTool/风险路段icon.png'
import riskRoadMarkerIcon from '../assets/legendTool/风险路段icon定位.png'
import hazardPointIcon from '../assets/legendTool/涉灾隐患点icon.png'
import hazardPointMarkerIcon from '../assets/legendTool/涉灾隐患点icon定位.png'
import blockEventIcon from '../assets/legendTool/阻断事件icon.png'
import blockEventMarkerIcon from '../assets/legendTool/阻断事件icon定位.png'
import emergencyForceIcon from '../assets/legendTool/应急力量icon.png'
import emergencyForceMarkerIcon from '../assets/legendTool/应急力量icon定位.png'
import weatherAlertIcon from '../assets/legendTool/气象预警icon.png'
import weatherAlertMarkerIcon from '../assets/legendTool/气象预警icon定位.png'

// 默认图例项配置（包含普通图标和地图定位图标）
const defaultLegendItems = [
  { key: 'commonRoad', label: '普通公路', icon: commonRoadIcon, markerIcon: commonRoadMarkerIcon },
  { key: 'video', label: '视频', icon: videoIcon, markerIcon: videoMarkerIcon },
  { key: 'trafficMonitor', label: '交调', icon: trafficMonitorIcon, markerIcon: trafficMonitorMarkerIcon },
  { key: 'bridge', label: '桥梁', icon: bridgeIcon, markerIcon: bridgeMarkerIcon },
  { key: 'tunnel', label: '隧洞', icon: tunnelIcon, markerIcon: tunnelMarkerIcon },
  { key: 'serviceFacility', label: '养护站', icon: serviceFacilityIcon, markerIcon: serviceFacilityMarkerIcon },
  { key: 'riskRoad', label: '高海拔路段', icon: riskRoadIcon, markerIcon: riskRoadMarkerIcon },
  { key: 'hazardPoint', label: '涉灾隐患点', icon: hazardPointIcon, markerIcon: hazardPointMarkerIcon },
  { key: 'blockEvent', label: '阻断事件', icon: blockEventIcon, markerIcon: blockEventMarkerIcon },
  { key: 'emergencyForce', label: '应急力量', icon: emergencyForceIcon, markerIcon: emergencyForceMarkerIcon },
  { key: 'weatherAlert', label: '气象预警', icon: weatherAlertIcon, markerIcon: weatherAlertMarkerIcon }
]

// 定义 props
const props = defineProps({
  /**
   * 自定义图例项配置
   * @type {Array<{ key: string; label: string; icon: string; markerIcon?: string; markerType?: string }>}
   */
  legendItems: {
    type: Array,
    default: null
  },

  /**
   * 根据key显示对应图例
   */
  legendKeys: {
    type: Array,
    default: null
  },

  /**
   * Marker 数据配置（可选）
   * 如果提供，将在事件中传递完整的 marker 数据
   * @type {Record<string, { markers?: Array; icon?: string; markerIcon?: string; meta?: any }>}
   */
  markerConfig: {
    type: Object,
    default: null
  },

  /**
   * 初始激活的图例项 key 列表
   * @type {Array<string>}
   */
  defaultActive: {
    type: Array,
    default: () => []
  },

  /**
   * 支持 v-model 的激活项列表（受控模式）
   * @type {Array<string>}
   */
  modelValue: {
    type: Array,
    default: null
  },

  /**
   * 兼容旧版：标记点切换回调函数
   * @deprecated 推荐使用 @marker-toggle 事件
   */
  // onMarkerToggle: {
  //   type: Function,
  //   default: null
  // }
})

// 定义 emits
const emit = defineEmits(['marker-toggle', 'clear', 'update:modelValue', 'collapse-change'])

// 计算图例项配置（支持自定义）
const computedLegendItems = computed(() => {
  if(props.legendKeys && props.legendKeys.length > 0) {
    return props.legendKeys.map(key => {
      const item = defaultLegendItems.find(item => item.key === key)
      return item
    })
  }

  return props.legendItems && props.legendItems.length > 0
    ? props.legendItems
    : defaultLegendItems
})

// 激活的图例项（使用 Set 管理唯一值）
// 支持受控和非受控两种模式
const internalActiveItems = ref(new Set(props.defaultActive))

// 折叠状态（默认展开）
const isCollapsed = ref(false)

// 如果是受控模式（提供了 modelValue），同步外部状态
watch(
  () => props.modelValue,
  (newValue) => {
    if (newValue !== null && Array.isArray(newValue)) {
      internalActiveItems.value = new Set(newValue)
    }
  },
  { immediate: true }
)

// 同步 defaultActive 的变化
watch(
  () => props.defaultActive,
  (newValue) => {
    // 仅在非受控模式下同步
    if (props.modelValue === null && Array.isArray(newValue)) {
      internalActiveItems.value = new Set(newValue)
    }
  }
)

// 获取当前激活项集合（优先使用外部状态）
const activeItems = computed(() => {
  return props.modelValue !== null && Array.isArray(props.modelValue)
    ? new Set(props.modelValue)
    : internalActiveItems.value
})

/**
 * 判断图例项是否激活
 * @param {string} key - 图例项 key
 * @returns {boolean}
 */
const isActive = (key) => {
  return activeItems.value.has(key)
}

/**
 * 构建事件 payload
 * @param {string} key - 图例项 key
 * @param {boolean} active - 是否激活
 * @returns {Object}
 */
const buildPayload = (key, active) => {
  const payload = { key, active }
  const legendItem = computedLegendItems.value.find((item) => item.key === key)

  // 如果提供了 markerConfig，附加完整数据
  if (props.markerConfig && props.markerConfig[key]) {
    const config = props.markerConfig[key]
    if (config.markers) payload.markers = config.markers
    if (config.icon) payload.icon = config.icon
    if (config.markerIcon) payload.markerIcon = config.markerIcon
    if (config.meta) payload.meta = config.meta
  }

  // 从默认图例项或自定义图例项中获取图标信息
  if (legendItem) {
    // 只在 payload 中不存在时才赋值（markerConfig 优先）
    if (!payload.icon && legendItem.icon) {
      payload.icon = legendItem.icon
    }
    if (!payload.markerIcon && legendItem.markerIcon) {
      payload.markerIcon = legendItem.markerIcon
    }
    if (legendItem.label) payload.label = legendItem.label
    if (legendItem.markerType) payload.markerType = legendItem.markerType
  }

  return payload
}

/**
 * 处理图例项点击事件
 * @param {string} key - 图例项 key
 */
const handleItemClick = (key) => {
  const newIsActive = !activeItems.value.has(key)

  // 更新状态
  const isControlled = Array.isArray(props.modelValue)
  if (isControlled) {
    // 受控模式：通过 emit 通知父组件更新
    const newActiveKeys = newIsActive
      ? [...props.modelValue, key]
      : props.modelValue.filter((k) => k !== key)
    emit('update:modelValue', newActiveKeys)
  } else {
    // 非受控模式：直接更新内部状态
    const newSet = new Set(internalActiveItems.value)
    if (newIsActive) {
      newSet.add(key)
    } else {
      newSet.delete(key)
    }
    internalActiveItems.value = newSet
  }

  // 构建并发送事件
  const payload = buildPayload(key, newIsActive)
  emit('marker-toggle', payload)
  // 兼容旧版 props 回调
  if (props.onMarkerToggle) {
    props.onMarkerToggle(
      key,
      payload.markers || [],
      payload.icon || null,
      !newIsActive
    )
  }
}

/**
 * 切换图例工具栏的折叠状态
 */
const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value
  emit('collapse-change', { collapsed: isCollapsed.value })
}

/**
 * 处理清除按钮点击事件
 */
const handleClearClick = () => {
  const clearedKeys = Array.from(activeItems.value)

  // 逐一发送关闭通知
  clearedKeys.forEach((key) => {
    const payload = buildPayload(key, false)
    emit('marker-toggle', payload)

    // 兼容旧版回调
    if (props.onMarkerToggle) {
      props.onMarkerToggle(key, payload.markers || [], payload.icon || null, false)
    }
  })

  // 更新状态
  const isControlled = Array.isArray(props.modelValue)
  if (isControlled) {
    emit('update:modelValue', [])
  } else {
    internalActiveItems.value = new Set()
  }

  // 发送清除事件
  emit('clear', { cleared: clearedKeys })
}
</script>

<style scoped lang="scss">
@use '@/styles/mixins.scss' as *;

.legend-toolbar {
  display: flex;
  align-items: center;
  gap: vw(15);
  z-index: 1000;
}

.legend-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: vh(8);
}

.legend-container {
  display: flex;
  align-items: center;
  padding: vh(10) vw(20);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  gap: vw(20);
  border-radius: vw(8);
}

.legend-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: vh(8);
  cursor: pointer;
  transition: all 0.3s ease;
  padding: vh(8) vw(8);

  &:hover {
    transform: translateY(vh(-2));

    .legend-icon {
      filter: brightness(1.2);
    }
  }

  &.active {
    .legend-icon {
      filter: brightness(1.3) drop-shadow(0 0 vw(8) rgba(30, 144, 255, 0.8));
    }

    .legend-label {
      color: #1e90ff;
      font-weight: bold;
    }
  }
}

.legend-icon {
  width: vw(40);
  height: vh(40);
  object-fit: contain;
  transition: filter 0.3s ease;
}

.legend-label {
  font-size: fs(12);
  color: #fff;
  white-space: nowrap;
  text-align: center;
  text-shadow: 0 vh(1) vh(2) rgba(0, 0, 0, 0.5);
}

.collapse-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 100%;
  padding: vh(4) 0;
  background: none;
  border: none;
  outline: none;
  transition: transform 0.3s ease;

  &:hover {
    transform: translateY(vh(-2));
  }

  &:focus-visible {
    outline: 2px solid rgba(30, 144, 255, 0.8);
    outline-offset: 2px;
  }
}

.collapse-icon {
  width: vw(24);
  height: vh(24);
  object-fit: contain;
  transition: transform 0.3s ease;
}

// 折叠动画
.legend-collapse-enter-active,
.legend-collapse-leave-active {
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform-origin: top center;
}

.legend-collapse-enter-from,
.legend-collapse-leave-to {
  opacity: 0;
  transform: scaleY(0.95);
}

.clear-button {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(vh(-2));
    box-shadow: 0 vh(4) vh(12) rgba(30, 144, 255, 0.4);
  }
}

.clear-icon {
  width: vw(40);
  height: vh(40);
  object-fit: contain;
}
</style>
