<!--
 * @Author: sjl
 * @Date: 2023-04-18 16:31:23
 * @Descripttion: 
-->
<template>
  <div>
    <div class="toolBox">
      <div @click="setClass(0)" @mouseover="getTip('初始范围')" @mouseout="closetip" :class="bkclick[0] ? 'divclick' : ''">
        <img src="../../assets/images/toolBox/reset.png" />
      </div>
      <div @click="setClass(1)" @mouseover="getTip('图层控制')" @mouseout="closetip" :class="bkclick[1] ? 'divclick' : ''">
        <img src="../../assets/images/toolBox/tuceng.png" />
      </div>
      <div @click="setClass(2)" @mouseover="getTip('底图切换')" @mouseout="closetip" :class="bkclick[2] ? 'divclick' : ''">
        <img src="../../assets/images/toolBox/ditu.png" />
      </div>
      <div>
        <img src="../../assets/images/toolBox/line.png" style="height: 1px" />
      </div>
      <div @click="setClass(3)" @mouseover="getTip('距离测量')" @mouseout="closetip" :class="bkclick[3] ? 'divclick' : ''">
        <img src="../../assets/images/toolBox/celiang.png" />
      </div>
      <div @click="setClass(4)" @mouseover="getTip('面积测量')" @mouseout="closetip" :class="bkclick[4] ? 'divclick' : ''">
        <img src="../../assets/images/toolBox/mianji.png" />
      </div>
      <div @click="setClass(5)" @mouseover="getTip('截图')" @mouseout="closetip" :class="bkclick[5] ? 'divclick' : ''">
        <img src="../../assets/images/toolBox/jietu.png" />
      </div>
      <div @click="setClass(6)" @mouseover="getTip('收藏')" @mouseout="closetip" :class="bkclick[6] ? 'divclick' : ''">
        <img src="../../assets/images/toolBox/shoucang.png" />
      </div>
      <div @click="setClass(8)" @mouseover="getTip('重要测站监测信息')" @mouseout="closetip" :class="bkclick[8] ? '' : ''">
        <img src="../../assets/images/toolBox/open-impoint.png" v-if="!bkclick[8]"/>
        <img src="../../assets/images/toolBox/close-impoint.png" v-if="bkclick[8]"/>
      </div>
      <div @click="setClass(7)" @mouseover="getTip('面板收起')" @mouseout="closetip" :class="bkclick[7] ? 'divclick' : ''">
        <img src="../../assets/images/toolBox/souqi.png" />
      </div>
    </div>
    <div class="hover-info" :style="px" v-show="infoShow">
      {{ info }}
    </div>
    <div :class="`boxtools ${mapStore.leftSideMenu ? 'boxtools3' : 'boxtools2'}`">
      <!--  -->
      <!-- <div class="leftPanel">
        <img
          src="../../assets/images/rightshou.png"
          :class="{ rotated: !mapStore.leftSideMenu }"
          @click="mapStore.leftSideMenu = !mapStore.leftSideMenu"
          alt=""
      /></div> -->
      <!-- 地名搜索模块 -->
      <searchInfo v-show="!addDoubleScreen" @closeSeachStatus="closeSeachStatus" v-if="showSearchStatus" />
      <!-- 图层控制模块 -->
      <div class="checkbox-group" v-show="layerStatus">
        <layerControl @closeLayerStatus="closeLayerStatus" />
      </div>
      <!-- 底图切换模块 -->
      <div class="mapControlDiv" v-show="basemapStatus">
        <mapControl @changeMapStatus="changeMapStatus" />
      </div>
      <!-- 流域信息 -->
      <!-- <showDrainage @changeDrainageStatus="changeDrainageStatus" :pageShow="showDrainageStatus" v-show="showDrainageStatus" /> -->
      <!-- 漫游模块 -->
      <div class="checkbox-group3" v-show="basinStatus">
        <wander @changeBasinStatus="changeBasinStatus" />
      </div>
      <!-- 标会模块 -->
      <!-- <div v-show="drawStatus" v-if="addDoubleScreen"> -->
      <div v-show="drawStatus">
        <Draw @changeDrawStatus="changeDrawStatus" />
      </div>
      <!-- 图例模块 -->
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, ref, toRefs, defineEmits, onMounted } from 'vue';
import Draw from './Draw.vue';
import { useMapStore } from '/@/store/modules/map';
import nwj from '../../assets/images/nwj.png';
import gnss from '../../assets/images/GNSS.png';
import sscgq from '../../assets/images/sscgq.png';
import spjcq from '../../assets/images/spjcq.png';
import xcy from '../../assets/images/tuli/xcy.png';
// import hp from '../../assets/images/tuli/hp.png';
// import bcnsl from '../../assets/images/tuli/bcnsl.png';

import xb from '../../assets/images/eqp/dzd/xb.png';
import bh from '../../assets/images/eqp/dzd/bh.png';
import bcnsl from '../../assets/images/eqp/dzd/bcnsl.png';
import nsl from '../../assets/images/eqp/dzd/nsl.png';
import hp from '../../assets/images/eqp/dzd/hp.png';
import bt from '../../assets/images/eqp/dzd/bt.png';
import qzswkt from '../../assets/images/eqp/dzd/qzswkt.png';

import tailBaseLine from './TailBaseLine.vue';
import mapControl from './mapControl.vue';
import wander from './wander.vue';
import searchInfo from './searchInfo.vue';
import { CloseOutlined } from '@ant-design/icons-vue';
import eventBus from '/@/utils/eventBus';
import showDrainage from './drainageBasin/index.vue';
import TFMapUitl from '/@/utils/TFMapUitl.ts';
import GNSS from '../../assets/images/eqp/list/GNSS.png';
import CSJCY from '../../assets/images/eqp/list/CSJCY.png';
import CXY from '../../assets/images/eqp/list/CXY.png';
import CZSJXJCZ from '../../assets/images/eqp/list/CZSJXJCZ.png';
import FWSYFSJCZ from '../../assets/images/eqp/list/FWSYFSJCZ.png';
import HSJC from '../../assets/images/eqp/list/HSJC.png';
import JGMCXBJCZ from '../../assets/images/eqp/list/JGMCXBJCZ.png';
import KPDZY from '../../assets/images/eqp/list/KPDZY.png';
import LDJXYLJCZ from '../../assets/images/eqp/list/LDJXYLJCZ.png';
import LFWYJZ from '../../assets/images/eqp/list/LFWYJZ.png';
import NSWJCZ from '../../assets/images/eqp/list/NSWJCZ.png';
import NWJ from '../../assets/images/eqp/list/NWJ.png';
import SBJCZ from '../../assets/images/eqp/list/SBJCZ.png';
import SMGSLJ from '../../assets/images/eqp/list/SMGSLJ.png';
import SPA from '../../assets/images/eqp/list/SPA.png';
import SPJCY from '../../assets/images/eqp/list/SPJCY.png';
import SWJCY from '../../assets/images/eqp/list/SWJCY.png';
import SWSYJCZ from '../../assets/images/eqp/list/SWSYJCZ.png';
import WZJCZ from '../../assets/images/eqp/list/WZJCZ.png';
import XS_FSWDCLZ from '../../assets/images/eqp/list/XS-FSWDCLZ.png';
import XSZ from '../../assets/images/eqp/list/XSZ.png';
import YLJCZ from '../../assets/images/eqp/list/YLJCZ.png';
import YTHXBQLJCZ from '../../assets/images/eqp/list/YTHXBQLJCZ.png';
import ZHQXZ from '../../assets/images/eqp/list/ZHQXZ.png';
import layerControl from './layerControl/index.vue';

export default defineComponent({
  name: 'ToolMenu',
  components: { tailBaseLine, mapControl, wander, CloseOutlined, searchInfo, showDrainage, Draw, layerControl },
  setup() {
    const data = reactive({
      searchValue: ref(''),
      dialogVisible: ref(false),
    });
    let showZaihai = ref(true);
    let showDev = ref(true);
    const mapDimensionType = ref(0);
    const emit = defineEmits(['map23changeEvent']);
    //二三维切换
    let view3 = true;
    let pitch_view3 = null;
    const change23 = () => {
      map.removeOverlay();
      mapDimensionType.value = !mapDimensionType.value;
      map.terrain2To3();
      setTimeout(() => eventBus.emit('map23changeEvent'), 1000);
    };
    const change23_bak = () => {
      map.removeOverlay();
      if (view3) {
        view3 = false;
        map.event.drag(() => {
          if (mapConfig.saveView3) mapConfig.saveView3 = null;
        });
      }
      mapDimensionType.value = !mapDimensionType.value;
      if (mapDimensionType.value) {
        mapConfig.saveView3 = map.getView(false);
        mapConfig.saveView4 = map.getView(false);
        var heading = mapConfig.saveView3.orientation.heading;
        var roll = mapConfig.saveView3.orientation.roll;
        pitch_view3 = mapConfig.saveView3.orientation.pitch;
        map.flyTo({
          destination: map.getCenterPoint(),
          orientation: { heading: heading, pitch: -1.5321367005794904, roll: roll },
        });
      } else {
        if (mapConfig.saveView3) {
          map.flyTo(mapConfig.saveView3);
        } else {
          var view = map.getView(false);
          var heading = view.orientation.heading;
          var roll = view.orientation.roll;
          map.flyTo({
            destination: map.getCenterPoint(),
            // orientation: { heading: heading, pitch: pitch_view3 || -0.7853981633974483, roll: roll },
            orientation: mapConfig.saveView4.orientation,
          });
        }
      }
      if (mapDimensionType.value) {
        // view3 = map.getView(false);
        // map.flyTo({
        //   destination: map.getCenterPosition(),
        //   orientation: { heading: 0, pitch: Cesium.Math.toRadians(-90.0), roll: 0 },
        // });
      } else {
        // if (view3) map.flyTo(view3);
      }
      map.showTerrain();
      // emit('map23changeEvent');
      setTimeout(() => eventBus.emit('map23changeEvent'), 2000);
    };

    const mapStore = useMapStore();
    //
    // 地图视图截图
    // 地图视图截图
    let showScreenshot = ref(true);
    let mainImgSource = ref('');
    let assistantImgSource = ref('');
    let doubleScreenState = ref(true);
    let scaleValue = ref('');
    const mapScreenshot = () => {
      var maximumRadius = map.components.viewer.scene.globe.ellipsoid.maximumRadius;
      var scale = maximumRadius / map.components.viewer.camera.positionCartographic.height;
      scaleValue.value = (scale * 2).toFixed(2) + 'km';
      console.log('当前比例尺：' + scale);
      console.log(map.components.levelCoordinates, 'Components');

      var camera = map.components.viewer.scene.camera;
      var heading = Cesium.Math.toDegrees(camera.heading);
      console.log('指北针角度', heading);

      var compassElement = document.querySelector('.sm-compass-outer-ring');

      // 设置指北针的旋转角度
      compassElement.style.transform = `rotate(-${heading}deg)`;
      compassElement.style.webkitTransform = `rotate(-${heading}deg)`;

      // console.log(map.components.viewer.scene,'scene');
      let scene = map.components.viewer.scene;
      const scaleBar = scene.scalebar;

      //  const scale = scaleBar.getScale();
      //  console.log(scale,'scaleBar');
      if (doubleScreenState) {
        // 未打开双屏对比
        map.mapPrint();
      } else {
        // 打开双屏对比
        mainImgSource.value = map.mapPrint(null, null, null, true);
        assistantImgSource.value = doubleScreenMap.mapPrint(null, null, null, true);
        // 下载
        setTimeout(() => {
          downloadImg();
        }, 200);
      }
    };

    /**
     * 下载图片
     */
    function downloadImg() {
      var date = new Date();
      const canvasID = document.getElementById('farmImage');
      const rect = document.getElementById('farmImage').getBoundingClientRect();
      // 生成图片并上传到数据库保存
      html2canvas(canvasID, {
        scale: 1, // 数值越大生成的图片越清晰
        useCORS: true,
        allowTaint: true,
        y: 0, // 滚动条高度修复
        x: 0,
        allowTaint: true, //开启跨域
        useCORS: true,
        scrollX: 0,
        scrollY: rect.top, // 关键代码
        height: rect.height, // 加高度，避免截取不全
        width: rect.width - 1,
      }).then((canvas) => {
        let dataURL = canvas.toDataURL('image/jpeg'); // 拿到数据流
        var aLink = document.createElement('a'); // 创建一个a标签
        var blob = base64ToBlob(dataURL);
        var event = document.createEvent('HTMLEvents');
        event.initEvent('click', true, true);
        aLink.download = '地图视图' + date.getTime() + '.' + blob.type.split('/')[1]; // 使用时间戳给文件命名
        aLink.href = URL.createObjectURL(blob);
        console.log(aLink.href);
        aLink.click();
      });
    }

    /**
     * base64转Blob对象
     */
    function base64ToBlob(code) {
      var parts = code.split(';base64,');
      var contentType = parts[0].split(':')[1];
      var raw = window.atob(parts[1]);
      var rawLength = raw.length;
      var uint8Array = new Uint8Array(rawLength);
      for (var i = 0; i < rawLength; i++) {
        uint8Array[i] = raw.charCodeAt(i);
      }
      return new Blob([uint8Array], { type: contentType });
    }
    // 测量
    const measure = (type) => {
      map.measure(type, (e) => {
        console.log('返回的测量主对象:', e);
      });
    };
    const remove = () => {
      if (map.drawObj) map.drawObj.remove();
      if (map.measureTool) map.measureTool.destroy();
      if (map.analysisObj) map.analysisObj.remove();
      if (window.doubleScreenMap) window.doubleScreenMap.drawObj.remove();
    };
    const sideMenu = () => {
      mapStore.setSideMenu();
      // mapStore.setLeftSideMenu();
      // mapStore.setRightSideMenu();
      if (mapStore.sideMenu) {
        mapStore.leftSideMenu = true;
        mapStore.rightSideMenu = true;
      } else {
        mapStore.leftSideMenu = false;
        mapStore.rightSideMenu = false;
      }
      var navigation = document.getElementsByClassName('cesium-viewer-navigationContainer')[0];
      var tool = document.getElementsByClassName('toolBox')[0];
      var changeMap = document.getElementsByClassName('toolmap')[0];
      var legendBox = document.getElementsByClassName('legend-box')[0];
      var tuli = document.getElementsByClassName('tuli')[0];
      var classLegend = document.getElementsByClassName('class-legend')[0];
      var classLegend2 = document.getElementsByClassName('class-legendtwo')[0];

      if (mapStore.sideMenu) {
        if (navigation) navigation.style.right = '400px';
        if (navigation) tool.style.right = '450px';
        if (navigation) changeMap.style.right = '450px';
        if (navigation) legendBox.style.right = '450px';
        if (navigation) tuli.style.right = '500px';
        if (navigation) classLegend.style.left = '470px';
        if (navigation) classLegend2.style.left = '470px';

      } else {
        if (navigation) navigation.style.right = '-10px';
        if (navigation) tool.style.right = '20px';
        if (navigation) changeMap.style.right = '20px';
        if (navigation) legendBox.style.right = '20px';
        if (navigation) tuli.style.right = '20px';
        if (navigation) classLegend.style.left = '20px';
        if (navigation) classLegend2.style.left = '20px';

      }
    };
    return {
      showZaihai,
      showDev,
      mapDimensionType,
      activeKey: ref('1'),
      ...toRefs(data),
      change23,
      mapStore,
      mapScreenshot,
      mainImgSource,
      assistantImgSource,
      showScreenshot,
      measure,
      remove,
      sideMenu
    };
  },

  data() {
    return {
      options: [
        // { label: "地形", value: "1", type: true },
        // { label: '水文气象专题', title: true, value: 'tdtjb', type: true },
        { label: '河流', value: 'hl', type: true, sliderValue: 100 },
        { label: '路网专题', title: true, value: 'tdtjb', type: true, sliderValue: 100 },
        { label: '路网', value: 'gdlw', type: true, sliderValue: 100 },
        { label: '铁路', value: 'tl', type: true, sliderValue: 100 },
        { label: '行政区专题', title: true, value: 'tdtjb', type: true, sliderValue: 100 },
        { label: '行政区划', value: 'xzqh', type: false, sliderValue: 100 },
        { label: '地质专题', title: true, value: 'tdtjb', type: true, sliderValue: 100 },
        { label: '区域地质图', value: 'zdzm', type: false, sliderValue: 100 },
        { label: '地震断裂带图', value: 'dzdmhx', type: false, sliderValue: 100 },
        // { label: '影像', value: 'tdtjb', type: true },
        // { label: '矢量', value: 'gdsl', type: false },
        // { label: '白母变形体区域', value: 'bmbxtqy', type: true },
      ],
      basemap: [
        { label: '影像', value: 'tdtjb', type: true },
        { label: '矢量', value: 'gdsl', type: false },
        // { label: '区域地质图', value: 'zdzm', type: false },
      ],
      selectedOptions: [],
      tuliType: false, //图例的显示与隐藏参数
      layerStatus: false, //图层控制的显示与隐藏参数
      basemapStatus: false, //地图切换显示与隐藏参数
      basinStatus: false, //漫游的显示与隐藏参数
      drawStatus: false, //标会工具的显隐
      showSearchStatus: false, //地点查询的显示与隐藏参数
      showDrainageStatus: false, //流域信息的显示与隐藏参数
      modelType: {
        //modelType里面的字段需要与
        showSearchStatus: 'showSearchStatus', //地点查询的显示与控制
        layerStatus: 'layerStatus', //图层管理
        basemapStatus: 'basemapStatus', //底图切换
        basinStatus: 'basinStatus', //漫游
        drawStatus: 'drawStatus',
        showDrainageStatus: 'showDrainageStatus', //流域信息
      },
      sbList: [
        { id: '1', imgUrl: GNSS, name: 'GNSS' },
        { id: '2', imgUrl: ZHQXZ, name: '综合气象站' },
        { id: '3', imgUrl: NWJ, name: '泥位计' },
        { id: '4', imgUrl: SPJCY, name: '视频监测仪' },
        { id: '5', imgUrl: WZJCZ, name: '微震监测站' },
        { id: '6', imgUrl: SWJCY, name: '水位监测仪' },
        { id: '7', imgUrl: CSJCY, name: '次声监测仪' },
        { id: '8', imgUrl: KPDZY, name: '宽频地震仪' },
        { id: '9', imgUrl: YTHXBQLJCZ, name: '一体化雪崩气浪监测站' },
        { id: '10', imgUrl: LDJXYLJCZ, name: '流动积雪压力监测站' },
        { id: '11', imgUrl: XS_FSWDCLZ, name: '雪深-风速温度测量站' },
        { id: '12', imgUrl: JGMCXBJCZ, name: '激光脉冲雪崩监测站' },
        { id: '13', imgUrl: SPA, name: '积雪特性分析（SPA）测量站' },
        { id: '14', imgUrl: FWSYFSJCZ, name: '风温湿压辐射监测站' },
        { id: '15', imgUrl: CZSJXJCZ, name: '称重式降雪监测站' },
        { id: '16', imgUrl: YLJCZ, name: '雨量监测站' },
        { id: '17', imgUrl: NSWJCZ, name: '泥水位监测站' },
        { id: '18', imgUrl: SBJCZ, name: '声波监测站' },
        { id: '19', imgUrl: LFWYJZ, name: '裂缝位移计站' },
        { id: '20', imgUrl: SWSYJCZ, name: '水位渗压监测站' },
        { id: '21', imgUrl: HSJC, name: '湖深监测' },
        { id: '22', imgUrl: CXY, name: '测斜仪' },
        { id: '23', imgUrl: SMGSLJ, name: '石墨杆收敛计' },
      ],
      zzbhList: [
        { id: 1, imgUrl: xb, name: '雪崩' },
        { id: 2, imgUrl: hp, name: '滑坡' },
        { id: 3, imgUrl: bt, name: '崩塌' },
        { id: 4, imgUrl: bh, name: '冰湖' },
        { id: 5, imgUrl: nsl, name: '泥石流' },
        { id: 6, imgUrl: bcnsl, name: '冰川泥石流' },
        { id: 7, imgUrl: qzswkt, name: '潜在失稳块体' },
        // { id: 4, imgUrl: qxz, name: '气象站' },
      ],
      layerList: [],
      addDoubleScreen: false,
      //
      bkclick: [false, false, false, false, false, false, false, false,false],
      info: '',
      infoShow: false,
      px: '',
    };
  },

  mounted() {
    // eventBus.on('mapConfig', (e) => this.stageLayer(e));
    eventBus.on('doubleScreenControl', () => {
      this.addDoubleScreen = !this.addDoubleScreen;
    });
    eventBus.on('closeToolMenu', (e) => {
      this.controlModel('closeAll');
    });
  },

  methods: {
    flyHome() {
      const tempData = {
        destination: { x: 93.8, y: 26.02060211195423, z: 666896.88999354467 },
        // destination: { x: 94.44066857601297, y: 26.00104492171595, z: 666896.88999354467 },
        orientation: { heading: 6.283185307179586, pitch: -1.0182023771170687, roll: 6.283185307179586 },
      };
      map.flyTo(tempData, 1);
      // map.setView(tempData, 1);

      //双屏存在的情况下，同时进行初始位置定位
      if (window.doubleScreenMap) {
        window.doubleScreenMap.flyTo(tempData, 1);
      }
    },
    setClass(i) {
      this.bkclick.forEach((item, index) => {
        if (i !== 0 && i !== 5 && i !== 3&& i !== 4) {
          if (i === index) {
            this.bkclick[i] = !this.bkclick[i];
          } else {
            this.bkclick[index] = false;
          }
        }
      });
      if (i == 1) {
        this.controlModel(this.modelType.layerStatus);
      } else if (i == 2) {
        this.controlModel(this.modelType.basemapStatus);
      } else if (i == 6) {
        this.controlModel(this.modelType.basinStatus);
      } else if (i == 0) {
        this.flyHome();
        if(window.breathMarker){
                window.breathMarker.breathe()
                window.breathMarker=null
              }
      } else if (i == 5) {
        this.mapScreenshot();
      } else if (i == 3) {
        // if (this.bkclick[3]) {
          this.measure('measure_length');
        // } else {
        //   // 清除
        //   this.remove();
        // }
      } else if (i == 4) {
        // if (this.bkclick[4]) {
          this.measure('measure_area');
        // } else {
        //   // 清除
        //   this.remove();
        // }
      } else if (i == 7) {
        this.sideMenu()
      }else if (i == 8) {
        // 控制重要站点显隐
        window.impointNotShow=this.bkclick[8]
       if(this.bkclick[8]){
        // 关闭
        window.clearImpoint()
       }else{
        //显示
        window.impointFlag=true
        window.getImportSites()
       }
      }
    },
    getTip(i) {
      this.info = i;
      this.infoShow = true;
      if (this.mapStore.sideMenu) {
        if (i == '初始范围') {
          this.px = ' right: 500px;top: 540px;';
        } else if (i == '图层控制') {
          this.px = ' right: 500px;top: 570px;';
        } else if (i == '底图切换') {
          this.px = ' right: 500px;top: 600px;';
        } else if (i == '距离测量') {
          this.px = ' right: 500px;top: 630px;';
        } else if (i == '面积测量') {
          this.px = ' right: 500px;top: 660px;';
        } else if (i == '截图') {
          this.px = ' right: 500px;top: 690px;';
        } else if (i == '收藏') {
          this.px = ' right: 500px;top: 710px;';
        } else if (i == '面板收起') {
          this.px = ' right: 500px;top: 750px;';
        }else if(i=='重要测站监测信息'){
          this.px = ' right: 500px;top: 730px;';
        }
      } else {
        if (i == '初始范围') {
          this.px = ' right: 70px;top: 540px;';
        } else if (i == '图层控制') {
          this.px = ' right: 70px;top: 570px;';
        } else if (i == '底图切换') {
          this.px = ' right: 70px;top: 600px;';
        } else if (i == '距离测量') {
          this.px = ' right: 70px;top: 630px;';
        } else if (i == '面积测量') {
          this.px = ' right: 70px;top: 660px;';
        } else if (i == '截图') {
          this.px = ' right: 70px;top: 690px;';
        } else if (i == '收藏') {
          this.px = ' right: 70px;top: 710px;';
        } else if (i == '面板收起') {
          this.px = ' right: 70px;top: 750px;';
        }else if(i=='重要测站监测信息'){
          this.px = ' right: 70px;top: 730px;';
        }
      }

    },
    closetip() {
      this.infoShow = false;
    },
    //图层控制模块使用滑动条时，阻止事件向上冒泡
    transparency2(event) {
      if (event.cancelBubble instanceof Boolean) {
        event.cancelBubble = true;
      }
      if (event.preventDefault && typeof event.preventDefault == 'function') {
        event.preventDefault();
      }
    },
    //图层控制模块中图层透明度控制
    transparency(option, key) {
      map.setLayer2D(option.value, 'alpha', option.sliderValue / 100);
    },
    //根据类型控制模块的打开与关闭
    controlModel(type) {
      for (let item in this.modelType) {
        if (this.modelType[item] != type) {
          this[item] = false;
        } else {
          this[item] = !this[item];
        }
      }
      //点击按钮时关闭时间轴，由于在不同的组件中没有使用共同的状态管理，故每次点击都去关闭
      eventBus.emit('timelineClose', false);
    },

    //图层控制、图层的显示与隐藏
    layer(e) {
      console.log(e);
      if (e.value == 1) {
      } else {
        if (!e.title) {
          if (e.value == 'hl') {
            map.showOverlay('hlgeojson*', !e.type);
          } else {
            map.showLayer2D(e.value, !e.type);
          }
        }
      }
    },
    //关闭搜索面板
    closeSeachStatus() {
      this.showSearchStatus = false;
      TFMapUitl.clearPointLocation_list(window.map);
    },
    // 关闭图层面板
    closeLayerStatus() {
      this.layerStatus = false;
    },
    // 关闭底图切换
    changeMapStatus(value) {
      this.basemapStatus = value.value;
    },
    // 关闭我的收藏
    changeBasinStatus(value) {
      this.basinStatus = value.value;
    },
    // 关闭我的收藏
    changeDrawStatus(value) {
      this.drawStatus = value.value;
    },
    // 关闭河段定位
    changeDrainageStatus(value) {
      this.showDrainageStatus = value;
    },
  },
});
</script>
<style lang="less" scoped>
::v-deep .ant-tabs-bar {
  border-bottom: 0px solid #303030 !important;
}

::v-deep .ant-tabs-ink-bar {
  background-color: rgba(4, 143, 231, 0) !important;
}

::v-deep .ant-tabs-nav .ant-tabs-tab-active {
  color: #fcdf64;
  background: url('../../assets/images/tulibg.png') no-repeat center 31px !important;
}

ul li.tlbox img {
  margin-right: 10px;
}

ul li.tlbox {
  margin: 10px 0;
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  justify-content: flex-start;
  align-items: center;
  margin-left: 12px;
}

.tuli {
  color: #fff !important;
  width: 240px;
  height: 244px;
  // background: rgba(8, 39, 55, 0.7);
  overflow: auto;
  padding: 0px;
  // position: fixed;
  margin-top: 200px;
  bottom: 180px;
  // box-shadow: inset 0px 0px 2px 2px rgba(4, 143, 231, 0.7);
  // border: 1px solid #1778ab;

  border: 1px solid #0b5d7c;
  background: #031a26;
  opacity: 0.86;
  border-radius: 3px;
}

.tuli:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, #0b5d7c 0%, #fff 50%, rgba(255, 255, 255, 0) 99%) 1;
}

.checkbox-group label {
  display: block;
  height: 26px;
  line-height: 26px;
  margin: 4px 0px;
  display: flex;
  align-items: center;
}

.checkbox-group2 label {
  display: block;
  height: 26px;
  line-height: 26px;
}

.checkbox-group {
  flex-wrap: wrap;
  color: #ffffff;
  // background-color: rgba(8, 39, 55, 0.5);
  padding: 10px;
  top: 255px;
  width: 310px;
  right: 10px;
  position: absolute;
  // border-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)) 1 100%;
  border: 1px solid #0b5d7c;
  background: #031a26;
  opacity: 0.86;
  border-radius: 3px;
  //  border-image: linear-gradient(90deg, rgba(39, 209, 238, 0.3) 0%, #fff 50%, rgba(255, 255, 255, 0) 99%) 4 4 4 4 !important;
}

.checkbox-group:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, #0b5d7c 0%, #fff 50%, rgba(255, 255, 255, 0) 99%) 1;
}

.checkbox-group2 {
  color: #fff;
  flex-wrap: wrap;
  // background-color: rgba(8, 39, 55, 0.5);
  padding: 10px;
  top: -54px;
  left: 81px;
  position: relative;
  // box-shadow: inset 0px 0px 2px 2px rgba(4, 143, 231, 0.7);
  // border: 1px solid #1778ab;

  border: 1px solid #0b5d7c;
  background: #031a26;
  opacity: 0.86;
  border-radius: 3px;
}

.checkbox-group3 {
  color: #fff;
  flex-wrap: wrap;
  // background-color: rgba(8, 39, 55, 0.5);
  padding: 0px 0px 10px 0px;
  top: 530px;
  right: 10px;
  position: relative;
  // box-shadow: inset 0px 0px 2px 2px rgba(4, 143, 231, 0.7);

  border: 1px solid #0b5d7c;
  background: #031a26;
  opacity: 0.86;
  border-radius: 3px;
}

.checkbox-group3:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, #0b5d7c 0%, #fff 50%, rgba(255, 255, 255, 0) 99%) 1;
}

checkbox-group .checkbox {
  display: flex;
  align-items: center;
  margin-right: 20px;
  font-size: 16px;
  color: #fff;
}

.checkbox input[type='checkbox'] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkmark {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  margin-left: 20px;
  border: 1px solid #fff;
  border-radius: 3px;
}

.checkmark:before {
  content: '';
  position: absolute;
  display: none;
  left: 6px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.name2 {
  display: inline-block;
  width: 123px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.checkbox input[type='checkbox']:checked+.checkmark:before {
  display: block;
}

.checkbox input[type='checkbox']:checked+.checkmark {
  background-color: #007bff;
  border-color: #007bff;
}

.boxtools {
  position: absolute;
  z-index: 999;
  top: 6rem;
  right: 490px;
}

.boxtools2 {
  animation-name: move;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

@keyframes move {
  0% {
    right: 490px;
  }

  100% {
    right: 70px;
  }
}

.boxtools3 {
  animation-name: move2;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;

  ::v-deep ul:hover {
    background: transparent;
  }
}

@keyframes move2 {
  0% {
    right: 70px;
  }

  100% {
    right: 490px;
  }
}

.boxtools li {
  margin: 5px 0;
}

.boxtools4 {
  position: fixed;
  z-index: 999;
  left: 456px;
  bottom: 120px;
}

::v-deep .tuli .ant-tabs-nav .ant-tabs-tab {
  width: 50%;
  text-align: center;
  margin: 0px !important;
}

.layerControlWrapper {
  width: 130px;
  display: flex;
  align-items: baseline;
  padding-left: 20px;
  margin-left: auto;

  .ant-slider.tftest {
    width: calc(100% - 55px);
  }

  span {
    position: relative;
    float: left;
    display: block;
    width: 50px;
  }
}

.bottonList {
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 16px;
  background: rgba(30, 84, 130, 0.3);

  .bottonListSpan {
    padding-left: 15px;
    font-size: 16px;
  }
}

.user {
  height: 100%;

  /deep/.ant-tabs-top-content.ant-tabs-content.ant-tabs-content-animated {
    height: calc(100% - 60px);

    ul {
      position: absolute;
      height: calc(100% - 70px);
      width: 99%;
      overflow-y: auto;

      li {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      span {
        overflow: hidden;
        white-space: nowrap;
        display: block;
        width: calc(100% - 40px);
        text-overflow: ellipsis;
      }
    }
  }
}

.ul::-webkit-scrollbar {
  width: 4px;
  /* 设置滚动条宽度 */
}

.ul::-webkit-scrollbar-track {
  /* 设置滚动条背景颜色 */
}

.ul::-webkit-scrollbar-thumb {
  background-color: #007e8f;
  /* 设置滚动条滑块颜色 */
  border-radius: 4px;
  /* 设置滚动条滑块圆角 */
}

.ul::-webkit-scrollbar-thumb:hover {
  background-color: #007e8f;
  /* 设置滚动条滑块在鼠标悬停时的颜色 */
}

.layerListTitle {
  display: flex;
  // background-color: aliceblue;
  line-height: 30px;
  height: 30px;
  background-image: linear-gradient(to left, rgba(0, 139, 253, 0.2), rgba(67, 255, 249, 0.2));

  /* 设置背景颜色 */
  // width: 200px;
  img {
    margin-top: 6px;
    margin-left: 0px;
    margin-right: 5px;
    width: 20px;
    height: 19px;
  }
}

.jiushidu {
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.secondimg {}

.leftPanel {
  top: 54px;
  left: -36px;
  height: 32px;
  position: absolute;
}

.rotated {
  transform: rotate(180deg);
}

//
.toolBox {
  position: absolute;
  right: 450px; 
  top: 540px;
  width: 36px;
  min-height: 230px;
  border-radius: 149px;
  opacity: 1;
  z-index: 10;

  /* 工具栏背景色 */
  background: rgba(10, 80, 110, 0.9);
  padding: 11px 0;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;

  div {
    width: 100%;
    text-align: center;

    img {
      display: inline-block;
      width: 20px;
      height: 20px;
    }
  }

  .line {
    width: 20px;
    height: 1px;
    transform: rotate(0deg);
    opacity: 1;

    border: 1px solid;
    border-image: linear-gradient(90deg, rgba(42, 207, 240, 0) 0%, #27ceef 52%, rgba(49, 209, 240, 0) 100%);
  }
}

.divclick {
  background: #103357;
}

.hover-info {
  position: absolute;
  width: 130px;
  height: 30px;
  line-height: 30px;
  border-radius: 473px;
  opacity: 1;

  background: rgba(21, 50, 76, 0.7);
  font-family: Source Han Sans CN;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0em;

  color: #ffffff;
  z-index: 11;
}

.mapControlDiv {
  position: absolute;
  right: 106px;
  top: 300px;
}
</style>
