<template>
  <!-- 双屏展示 -->
  <div class="doubleScreenDiv">
    <!-- 双屏对比 -->
    <div id="mapDiv2"> </div>
    <div v-if="showmaptitels" class="title">
      <div>{{ maptitels }}</div>
    </div>

    <div v-if="showdoubletitels" class="title2"
      ><div>{{ doubletitels }}</div></div
    >
    <!-- <div id="mapDiv2Bg"></div> -->
    <div v-if="addControl" class="toolListDiv">
      <div class="minusSquareDiv">
        <!-- <MinusSquareOutlined class='icon' /> -->
        <img :src="imageList.doubleScreenBack2" class="toolImage" />
        <span>双屏对比</span>
      </div>
      <div class="LogoutOutDiv" @click="goToMain">
        <span>返回主界面</span>
        <img :src="imageList.doubleScreenBack" class="toolImage" />
        <!-- <LogoutOutlined  class='icon' /> -->
      </div>
      <div class="lefttool">
        <div class="skyDataControlLeft">
          <skyDataControl :mapType="'map'" :title="'主视图'" />
        </div>
      </div>
      <div class="rightTool">
        <div class="skyDataControlRight">
          <skyDataControl :mapType="'doubleScreenMap'" :title="'副视图'" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, onMounted, onUnmounted } from 'vue';
import { useGeologicalStore } from '/@/store/modules/geological';
import LINGZHI from '../../assets/json/lingzhi.js';
import skyDataControl from './skyDataControl.vue';
import eventBus from '/@/utils/eventBus';
import { MinusSquareOutlined, LogoutOutlined } from '@ant-design/icons-vue';
import doubleScreenBack from '/@/assets/images/doubleScreenBack.png';
import doubleScreenBack2 from '/@/assets/images/doubleScreenBack2.png';
import { session } from '/@/utils/memory';
export default {
  name: 'mapDiv2',
  components: { skyDataControl, MinusSquareOutlined, LogoutOutlined },
  setup() {
    let db = null;
    const imageList = reactive({
      doubleScreenBack: doubleScreenBack,
      doubleScreenBack2: doubleScreenBack2,
    });
    //对比屏幕的config配置
    const tempMapConfig = {};
    //图层加载完后在加载图层控制
    const addControl = ref(false);
    const maptitels = ref();
    const showmaptitels = ref(false);

    const doubletitels = ref();
    const showdoubletitels = ref(false);

    function getMapConfig() {
      const geologicalStore = useGeologicalStore();
      geologicalStore
        .MapConfig({
          pages: 1,
          size: 1000,
        })
        .then((res) => {
          tempMapConfig.layers2D = [];
          tempMapConfig.layers3D = [];
          res.records.sort(function (a, b) {
            if (!a.jzxh) return 1;
            if (!b.jzxh) return -1;
            return a.jzxh - b.jzxh;
          });
          for (var i = 0; i < res.records.length; i++) {
            var o = res.records[i];
            if (o.scene == 1) {
              mapConfig.demUrl = mapConfig.demUrl || o.fbdz;
              mapConfig.isSct = true;
            } else if (o.scene == 2 && o.bq == 1 && o.fwfz != '测试') {
              var layer = {
                id: o.code,
                title: o.zymc,
                epsg: o.epsg,
                type: o.type == '超图' ? 'SUPER' : o.type == '百度' ? 'BD' : o.type == '高德' ? 'GD' : 'SUPER_3D',
                show: o.show,
                url: o.fbdz,
                bq: o.bq,
                fwfz: o.fwfz,
              };
              if (layer && layer.id != 'base_gdyx') {
                doubleScreenMap.layer2d.add(layer);
              }
            } else if (o.bq == '0') {
              var layer = {
                id: o.code,
                title: o.zymc,
                epsg: o.epsg,
                type: o.type == '超图' ? 'SUPER' : o.type == '百度' ? 'BD' : o.type == '高德' ? 'GD' : 'SUPER_3D',
                show: o.show,
                url: o.fbdz,
                bq: o.bq,
                fwfz: o.fbdz || o.fwfz,
              };
              doubleScreenMap.layer2d.add(layer);
            }
          }
        });
    }
    onMounted(() => {
      init();
      // getMapConfig();
    });
    function init() {
      window.doubleScreenMap = TFMC.initMap('mapDiv2');
      window.doubleScreenMapConfig = window.mapConfig;
      new TFMap.MaskRegion(doubleScreenMap, LINGZHI, 'rgba(3,22,51,0.9)', null, 5);
      db = new TFMap.DoubleScreenLinkage(map, doubleScreenMap);
      db.open(true);
      setTimeout(() => db.open(), 5000);
      addControl.value = true;
      //绘制工具初始化
      window.doubleScreenMap.draw();
    }

    //解除同步
    onUnmounted(() => {
      if (db) {
        db.close();
        db = null;
        doubleScreenMap.viewer.destroy();
        doubleScreenMap = null;
      }
    });
    eventBus.on('getTitleInMap', (data) => {
      console.log('data--地图', data.zymc, data.type);
      if (data.type === 'map') {
        showmaptitels.value = true;
        maptitels.value = data.zymc;
        console.log('地图标题加载？', maptitels.value);
      } else if (data.type === 'doubleScreenMap') {
        showdoubletitels.value = true;
        console.log('地图标题加载？', doubletitels.value);
        doubletitels.value = data.zymc;
      }
    });

    function goToMain() {
      eventBus.emit('controlScreenshot', false);
      if (db) {
        db.close();
        db = null;
        if (map.drawObj) map.drawObj.remove();
        if (map.measureTool) map.measureTool.destroy();
        map.showLayer2D('all', 'baseyx');
        eventBus.emit('doubleScreenControl', true);
        var dom = document.getElementById('mapDivlevelCoordinates');
        if (dom) {
          dom.style.bottom = '82px';
          dom.style.paddingLeft = '430px';
        }
        map.flyTo(session.getItem('maplocation'), 1);
      }
    }
    return {
      showmaptitels,
      showdoubletitels,
      doubletitels,
      maptitels,
      addControl,
      goToMain,
      imageList,
    };
  },
};
</script>

<style lang="less" scoped>
.doubleScreenDiv {
  height: 100vh;
  width: 50%;
  position: relative;
  float: left;
}
#mapDiv2 {
  position: relative;
  width: 100%;
  // height: 100%;
  height: 1080px;
  opacity: 1;
}
#mapDiv2Bg {
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.toolListDiv {
  position: absolute;
  left: -100%;
  width: 200%;
  // top: calc(100% - 68px);
  top: 1012px;
  // background: rgba(8, 134, 207, 0.7);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(8, 134, 207, 0.7));
  z-index: 1000;
  height: 68px;
  .rightTool,
  .lefttool {
    position: relative;
    width: 50%;
    display: flex;
    flex-direction: row;
    height: 100%;
    align-items: center;
  }
  .rightTool {
    float: right;
  }
  .lefttool {
    float: left;
  }
  .skyDataControlLeft {
    margin-left: auto;
    margin-right: 30px;
  }
  .skyDataControlRight {
    margin-right: auto;
    margin-left: 30px;
  }
  .minusSquareDiv {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: auto;
    margin-left: 24px;
    position: absolute;
    height: 100%;
    .icon {
      transform: rotate(90deg);
      font-size: 18px;
      color: #0084f4;
      margin-right: 11px;
    }
    span {
      font-size: 18px;
      color: rgba(0, 0, 0, 0);
      background: linear-gradient(0deg, #6fcfff 40%, #f0faff);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  .toolImage {
    position: relative;
    top: -1px;
  }
  .LogoutOutDiv {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: auto;
    margin-right: 24px;
    position: absolute;
    right: 0px;
    height: 100%;
    z-index: 1000;
    .icon {
      font-size: 18px;
      color: #0084f4;
      margin-left: 11px;
    }
    span {
      font-size: 18px;
      color: rgba(0, 0, 0, 0);
      background: linear-gradient(0deg, #6fcfff 40%, #f0faff);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}
.title {
  padding: 0 10px;
  display: inline-block;
  font-size: 16px;
  padding-top: 0px;
  top: 100px;
  left: -560px;
  // background-color: white;
  color: #fff;
  position: absolute;
  z-index: 999;
  height: 28px;

  border: 1px solid #0b5d7c;
  background: #031a26;
  opacity: 0.86;
  border-radius: 3px;
}
.title2 {
  padding: 0 10px;
  display: inline-block;
  font-size: 16px;
  padding-top: 0px;
  top: 100px;
  left: 400px;
  // background-color: white;
  color: #fff;
  position: absolute;
  z-index: 999;
  height: 28px;

  border: 1px solid #0b5d7c;
  background: #031a26;
  opacity: 0.86;
  border-radius: 3px;
}
// 控制双屏对比中副视图指北针的显示
::v-deep .sm-compass-outer-ring {
  display: none;
}
</style>
