<template>
  <div class="zoom-control">
    <LayerSwitcher
      class="layer-switcher"
      :map="map"
      :categories="vehicleCategories"
      @layerChange="onLayerChange"
      @setCategoryVisibility="handleSetCategoryVisibility"
      ref="layerSwitcherRef"
    />

    <div
      class="compass-container"
      :style="{ transform: `rotate(${-rotation}deg)` }"
    >
      <div class="rotate-left" @click="rotateLeft" title="向右旋转90°"></div>
  
      <div class="rotate-right" @click="rotateRight" title="向左旋转90°"></div>
    </div>
    <div class="zoom-in" @click="onZoomIn"></div>
    <div class="zoom-out" @click="onZoomOut"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from "vue";
import LayerSwitcher from "./LayerSwitcher.vue";

// 导入图片资源
import leftArrowActiveImg from "../../../assets/images/left_arrow_active.png";
import rightArrowActiveImg from "../../../assets/images/right_arrow_active.png";
import zoomInActiveImg from "../../../assets/images/zoomInActive.png";
import zoomOutActiveImg from "../../../assets/images/zoomOutActive.png";
import layerActiveImg from "../../../assets/images/layerActive.png";

[leftArrowActiveImg, rightArrowActiveImg, zoomInActiveImg, zoomOutActiveImg, layerActiveImg].forEach(src => {
  const img = new window.Image();
  img.src = src;
});
// 定义props接受地图实例
const props = defineProps({
  map: Object, // 地图实例
  resetView: {
    type: Function,
    default: null,
  },
  vehicleCategories: {
    type: Object,
    default: () => ({})
  },
  vehicleMovementControl: {
    type: Object,
    default: null
  }
});

// 组件引用
const layerSwitcherRef = ref(null);

// 地图旋转角度 (弧度转换为度)
const rotation = ref(0);

// 向父组件发出事件
const emit = defineEmits([
  "compass",
  "zoomIn",
  "zoomOut",
  "layerChange",
  "rotate",
  "setCategoryVisibility"
]);

// 监听地图视图变化，更新旋转角度
function updateRotation() {
  if (props.map && props.map.getView()) {
    // OpenLayers中旋转角度是弧度，转换为度
    rotation.value = (props.map.getView().getRotation() * 180) / Math.PI;
  }
}

// 重置地图旋转
function resetRotation() {
  if (props.map) {
    // 重置旋转为0
    props.map.getView().animate({
      rotation: 0,
      duration: 300,
    });
    emit("rotate", 0);
  }
}

// 向左旋转地图（逆时针）
function rotateLeft() {
  if (props.map) {
    const currentRotation = props.map.getView().getRotation();
    const newRotation = currentRotation - Math.PI / 2; // 旋转90度（逆时针）
    props.map.getView().animate({
      rotation: newRotation,
      duration: 300,
    });
    emit("rotate", (newRotation * 180) / Math.PI);
  }
}

// 向右旋转地图（顺时针）
function rotateRight() {
  if (props.map) {
    const currentRotation = props.map.getView().getRotation();
    const newRotation = currentRotation + Math.PI / 2; // 旋转90度（顺时针）
    props.map.getView().animate({
      rotation: newRotation,
      duration: 300,
    });
    emit("rotate", (newRotation * 180) / Math.PI);
  }
}


// 放大地图
function onZoomIn() {
  emit("zoomIn");
  if (props.map) {
    const currentZoom = props.map.getView().getZoom();
    props.map.getView().animate({
      zoom: currentZoom + 1,
      duration: 250,
    });
  }
}

// 缩小地图
function onZoomOut() {
  emit("zoomOut");
  if (props.map) {
    const currentZoom = props.map.getView().getZoom();
    props.map.getView().animate({
      zoom: currentZoom - 1,
      duration: 250,
    });
  }
}

// 图层变化处理
function onLayerChange(layerInfo) {
  console.log("ZoomControl收到图层变化:", layerInfo);
  // 将图层信息传递给父组件
  emit("layerChange", layerInfo);
}

// 处理分类可见性设置
function handleSetCategoryVisibility(type, settings) {
  // 发送到父组件
  emit('setCategoryVisibility', type, settings);
  
  // 如果props中有vehicleMovementControl，直接调用其方法
  if (props.vehicleMovementControl && props.vehicleMovementControl.setCategoryVisibility) {
    props.vehicleMovementControl.setCategoryVisibility(type, settings);
  }
}

// 监听地图旋转事件
let rotationListener = null;

onMounted(() => {
  if (props.map) {
    // 初始化旋转角度
    updateRotation();

    // 添加视图变化监听器 - 使用on方法返回的事件键
    rotationListener = props.map
      .getView()
      .on("change:rotation", updateRotation);
  }
});

onUnmounted(() => {
  // 移除监听器 - 使用OpenLayers的事件解绑方式
  if (rotationListener && props.map) {
    try {
      // 正确方式是使用unByKey方法解绑事件
      import('ol/Observable').then(({ unByKey }) => {
        unByKey(rotationListener);
      }).catch(e => {
        console.error('清理事件监听器失败:', e);
      });
    } catch (e) {
      console.error('清理事件监听器失败:', e);
    }
  }
});

// 监听地图实例变化
watch(
  () => props.map,
  (newMap) => {
    if (newMap) {
      // 初始化旋转角度
      updateRotation();

      // 移除旧的监听器
      if (rotationListener) {
        try {
          import('ol/Observable').then(({ unByKey }) => {
            unByKey(rotationListener);
          }).catch(e => {
            console.error('清理事件监听器失败:', e);
          });
        } catch (e) {
          console.error('清理事件监听器失败:', e);
        }
      }

      // 添加新的视图变化监听器
      rotationListener = newMap.getView().on("change:rotation", updateRotation);
    }
  }
);

// 导出方法供外部调用
defineExpose({
  // 设置图层可见性的方法
  setLayerVisibility(layerName, visible) {
    if (layerSwitcherRef.value) {
      return layerSwitcherRef.value.setLayerVisibility(layerName, visible);
    }
    return false;
  },
  // 重置旋转
  resetRotation,
  // 获取当前旋转角度
  getRotation() {
    return rotation.value;
  },
});
</script>

<style scoped>
.zoom-control {
  position: absolute;
  bottom: 250px;
  left: 20px;
  z-index: 3000;
  width: 40px;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 25px;
}

.compass-container {
  position: relative;
  width: 40px;
  height: 40px;
  cursor: pointer;
  background: url("../../../assets/images/znzBg.png") no-repeat;
  background-size: 100% 100%;
}

.rotation-controls {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 3002;
}

.rotate-left,
.rotate-right {
  width: 24px;
  height: 24px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.rotate-left {
  left: -3px;
  background: url("../../../assets/images/left_arrow.png") no-repeat;
  background-size: 100% 100%;
  z-index: 5000;
}

.rotate-right {
  right: -3px;
  background: url("../../../assets/images/right_arrow.png") no-repeat;
  background-size: 100% 100%;
}

.rotate-left:hover,
.rotate-left:active {
  left: -3px;
  background: url("../../../assets/images/left_arrow_active.png") no-repeat;
  background-size: 100% 100%;
}
.rotate-right:hover,
.rotate-right:active {
  right: -3px;
  background: url("../../../assets/images/right_arrow_active.png") no-repeat;
  background-size: 100% 100%;
}

.layer-switcher {
  z-index: 3000;
  width: 40px;
  height: 40px;
  background: url("../../../assets/images/layer.png") no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}
.layer-switcher:hover,
.layer-switcher.active {
  background: url("../../../assets/images/layerActive.png") no-repeat;
  background-size: 100% 100%;
  opacity: 1; /* 确保不透明度为1 */
}

.zoom-in {
  background: url("../../../assets/images/zoomOut.png") no-repeat;
  background-size: 100% 100%;
  z-index: 3000;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
.zoom-in:hover,
.zoom-in.active {
  background: url("../../../assets/images/zoomOutActive.png") no-repeat;
  background-size: 100% 100%;
}

.zoom-out {
  background: url("../../../assets/images/zoomIn.png") no-repeat;
  background-size: 100% 100%;
  z-index: 3000;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
.zoom-out:hover,
.zoom-out.active {
  background: url("../../../assets/images/zoomInActive.png") no-repeat;
  background-size: 100% 100%;
}


/* 响应式调整 */
@media (max-width: 768px) {
  .zoom-in,
  .zoom-out,
  .compass-container,
  .compass-bg,
  .compass-needle {
    width: 28px;
    height: 28px;
  }

  .zoom-in,
  .zoom-out {
    background-size: 80%;
    background-position: center center;
    background-repeat: no-repeat;
  }

  .rotate-left,
  .rotate-right {
    width: 18px;
    height: 18px;
  }

  .rotate-left {
    left: -18px;
  }

  .rotate-right {
    right: -18px;
  }
}
</style>
