<template>
  <!-- 地图工具 -->
  <div class="toolMap">
    <div class="clearFeature" @click="clearFeature" v-show="clearShow" title="清除">
      <img :src="getImageUrl('clearJm.png', 'images/gisMap')" />
    </div>
    <el-tooltip placement="left">
      <div class="clearFeature" @click="clearFeature" v-show="clearShow" title="切换底图" style="top: 270px">
        <img :src="getImageUrl('Frame.png', 'images/gisMap')" />
      </div>
      <template #content>
        <el-button :type="activeName == 'first' ? 'warning' : 'primary'" @click="handleRiver('first')"> 深色 </el-button>
        <el-button :type="activeName == 'second' ? 'warning' : 'primary'" @click="handleRiver('second')"> 影像 </el-button>
      </template>
    </el-tooltip>
  </div>
</template>
<script>
export default {
  components: {},
  props: {},
  setup(props) {
    const allData = reactive({
      mousetool: null,
      clearShow: false,
      activeName: 'first',
    });
    //地图模式切换
    function handleRiver(val) {
      allData.activeName = val;
    }
    //绘制工具
    const mapFeatureDraw = () => {
      allData.mousetool = null;
      window.mouseTool = new LKMap.MouseTool(newfiberMap.map, {
        position: 'top-right', // 工具停靠位置
        orientation: 'horizontal', // 工
      });
      allData.mousetool = mouseTool;
      // 将工具添加至地图上
      newfiberMap.map.addControl(allData.mousetool);
      setTimeout(() => {
        allData.clearShow = true;
      }, 3000);
    };
    const clearFeature = () => {
      newfiberMap.map
        .getAllOverlays()
        .filter(i => !i.newfiberId)
        .forEach(i => i.remove());
    };
    onMounted(() => {
      nextTick(() => {
        mapFeatureDraw();
      });
    });
    //地图移动，更新标注位置
    onBeforeUnmount(() => {});
    return {
      ...toRefs(allData),
      mapFeatureDraw,
      clearFeature,
      handleRiver,
    };
  },
};
</script>
<style lang="scss">
.toolMap {
  // prettier-ignore
  .clearFeature {
    margin: 5px;
    box-sizing: border-box;
    height: 38PX;
    width: 38PX;
    border-radius: 4px;
    border: 1px solid #8e94a2;
    margin-right: 10px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    line-height: 38px;
    text-align: center;
    position: absolute;
    z-index: 999;
    right: 465px;
    top: 220PX;
    cursor: pointer;
    img{
      margin-top:5PX;
    }
  }
}
.lkmap-ctrl-top-right {
  position: absolute;
  right: 470px;
  top: 30px;
  background: transparent;
  width: 50px;
  .lkmap-mouse-tool-box {
    background: transparent;
    padding: 0px;
    display: flex;
    flex-direction: column;
  }
  .lkmap-ctrl.lkmap-mouse-tool {
    margin: 0;
    float: none;
    width: 60px;
  }
  .lkmap-mouse-tool-box {
    box-shadow: 0 2px 6px 0 rgba(97, 113, 166, 0);
  }
  .lkmap-mouse-tool-items.lkmap-mouse-tool-marker {
    margin: 5px;
    background-color: transparent;
    border: 1px solid #8e94a2;
  }
  .lkmap-mouse-tool-items.lkmap-mouse-tool-circle {
    margin: 5px;
    background-color: transparent;
    border: 1px solid #8e94a2;
  }
  .lkmap-mouse-tool-items.lkmap-mouse-tool-distance {
    margin: 5px;
    background-color: transparent;
    border: 1px solid #8e94a2;
  }
  .lkmap-mouse-tool-items.lkmap-mouse-tool-measureArea {
    margin: 5px;
    background-color: transparent;
    border: 1px solid #8e94a2;
  }
  .lkmap-mouse-tool-items.lkmap-mouse-tool-clear {
    display: none;
  }
  .lkmap-mouse-tool-items.lkmap-mouse-tool-circleMarker {
    display: none;
  }
  .lkmap-mouse-tool-items.lkmap-mouse-tool-polyline {
    display: none;
  }
  .lkmap-mouse-tool-items.lkmap-mouse-tool-polygon {
    display: none;
  }
  .lkmap-mouse-tool-items.lkmap-mouse-tool-rectangle {
    display: none;
  }
  .lkmap-mouse-tool-items.lkmap-mouse-tool-ellipse {
    display: none;
  }
  .lkmap-mouse-tool-items.lkmap-mouse-tool-rectZoomIn {
    display: none;
  }
  .lkmap-mouse-tool-items.lkmap-mouse-tool-rectZoomOut {
    display: none;
  }
}
</style>