<template>
  <!-- 本模块是地图控制功能 -->
  <div class="mapControlDiv">
    <div class="mapControlDivList showAll">
      <div class="bottonList">
        <span class="bottonListSpan" style="padding-left: 5px; color: #fff">底图切换</span>
        <div @click="closeMapStatus" style="float: right; cursor: pointer; margin-right: 10px; color: #25c7e3">
          <CloseOutlined type="delete-outlined" title="关闭" />
        </div>
      </div>
      <template v-for="(item, index) in showInfoList" :key="'mapControlDivItem_' + index">
        <div class="mapControlDivItem" @click="showLayer(item)" :class="item.show ? 'pageShow' : ''" :style="'background-image: url(' + item.img + ');'">
          <a-checkbox @change.stop="showBzLayer(item)" class="mapControlCheckbox" v-model:checked="item.bzShow"  @click.stop>
            {{ item.bzTitle }}
          </a-checkbox>
          <label  class="mapControlLabel">{{ item.title }}</label>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import { ref, reactive, defineComponent } from 'vue';
import { func } from 'vue-types';
import zdzmImg from '../../assets/images/qydzt.jpg';
import dzdtImg from '../../assets/images/dzdt.png';
import yxdtImg from '../../assets/images/yxdt.png';
import dxdt from '../../assets/images/dxdt.png';

import { CloseOutlined } from '@ant-design/icons-vue';
export default defineComponent({
  name: 'mapControl',
  components: { CloseOutlined },
  setup(props, ctx) {
    const mapInfo = window.mapConfig.layers2D;
    let map = null;
    const tempEvent = window.setInterval((e) => {
      if (window.map) {
        map = window.map;
        window.clearInterval(tempEvent);
      }
    }, 200);
    const d3Info = [
      { valueId: 'zdzm', bzValueId: 'zdzmbz' },
      { valueId: 'dzdt', bzValueId: 'dtbz' },
      { valueId: 'yxdt', bzValueId: 'dtbz' },
    ];
    let tempShowList = [];
    // let showInfoList = reactive(addValue());
    // let showInfoList = ref([
    //   { "valueId": "zdzm", "bzValueId": "zdzmbz", "bzShow": true, "bzTitle": "注记", "show": false, "title": "地质", "img": "/src/assets/images/qydzt.jpg" },
    //   { "valueId": "dzdt", "bzValueId": "dtbz", "bzShow": true, "bzTitle": "注记", "show": false, "title": "地图", "img": "/src/assets/images/dzdt.png" },
    //   { "valueId": "yxdt", "bzValueId": "dtbz", "bzShow": true, "bzTitle": "注记", "show": true, "title": "影像", "img": "/src/assets/images/yxdt.png" }
    // ]);
    const showInfoList = ref([
      { bzTitle: '注记', title: '影像地图', valueId: 'yxdt', bzValueId: 'yxdt_bz', bzShow: true, show: true, img: yxdtImg },
      { bzTitle: '注记', title: '电子地图', valueId: 'dzdt', bzValueId: 'dzdt_bz', bzShow: false, show: false, img: dzdtImg },
      // { bzTitle: '注记', title: '地形图', valueId: 'dxdt', bzValueId: 'dxdt_bz', bzShow: false, show: false, img: dxdt },
      // { bzTitle: '注记', title: '地质图', valueId: 'zdzm', bzValueId: 'zdzm_bz', bzShow: false, show: false, img: zdzmImg },
    ]);
    eventBus.on('mapConfig', (e) => {
      showInfoList.value.map((i) => {
        var dt = e.find((j) => i.valueId == j.id);
        var bz = e.find((j) => i.bzValueId == j.id);
        if (dt) {
          i.title = dt.title;
          if (dt.img) i.img = dt.img;
          // i.show = dt.show;
          // if (bz) i.bzShow = bz.show;
        }
      });
    });
    function addValue() {
      //补全数据
      let showInfo = [];
      const tempInfo = [];
      mapInfo.forEach((item) => {
        tempInfo[item.id] = item;
      });
      d3Info.forEach((item) => {
        let hasFrist = true;
        let tempData = tempInfo[item.valueId];
        let tempBzData = tempInfo[item.bzValueId];
        //获取相关信息
        if (tempBzData && tempBzData.url && tempBzData.url[0]) {
          item.bzShow = item.bzShow || tempBzData.show;
          item.bzTitle = item.bzTitle || tempBzData.title;
        } else {
          //没配置标注则不显示标注图层
          delete item.bzValueId;
        }
        if (tempData && tempData.url && tempData.url[0]) {
          //有图层的情况下才显示数据
          item.show = item.show || tempData.show;
          item.title = item.title || tempData.title;
          // item.img = item.img || tempData.img;
          if (tempData.id == 'yxdt') {
            item.img = yxdtImg;
            item.show = true;
            item.bzShow = true;
          } else if (tempData.id == 'dzdt') {
            item.img = dzdtImg;
          } else if (tempData.id == 'zdzm') {
            item.img = zdzmImg;
          }
          showInfo.push(item);
        }
      });
      return showInfo;
    }

    function showLayer(data) {
      console.log('切换图层：', data);
      //展示选择图层
      const tempFunction = (item, e) => {
        if (item.bzValueId) {
          item.bzShow = e;
          controlLayer({ value: item.bzValueId, show: item.bzShow });
        }
        item.show = e;
        controlLayer({ value: item.valueId, show: item.show });
      };
      showInfoList.value.forEach((item) => {
        if (item === data) {
          tempFunction(item, !item.show);
        } else {
          tempFunction(item, false);
        }
      });
    }

    function transparency2(evenet) {
      if (typeof event.cancelBubble == 'boolean') {
        event.cancelBubble = true;
      }
      if (event.preventDefault && typeof event.preventDefault == 'function') {
        event.preventDefault();
      }
    }

    function showBzLayer(data) {
      //是否展示备注图层
      if (data.bzShow && !data.show) {
        data.bzShow = false;
        showLayer(data);
      } else {
        controlLayer({ value: data.bzValueId, show: data.bzShow });
      }
    }

    function controlLayer(item) {
      //地图中图层的控制
      map.showLayer2D(item.value, item.show);
      if (window.doubleScreenMap) {
        window.doubleScreenMap.showLayer2D(item.value, item.show);
      }
    }

    // 关闭底图切换
    let mapStatus = ref(false);
    // const emit = defineEmits(['changeBasinStatus'])
    const closeMapStatus = () => {
      mapStatus.value = false;
      ctx.emit('changeMapStatus', mapStatus);
    };

    return {
      showInfoList,
      showLayer,
      showBzLayer,
      tempShowList,
      mapStatus,
      closeMapStatus,
    };
  },
});
</script>

<style lang="less" scoped>
.mapControlDiv {
  position: relative;
  float: left;
  width: 40px;
  right: 20px;
  height: 100px;
  //  /deep/.ant-checkbox-inner {
  // border: 1px solid white;
  // }
}

.mapControlDivList {
  position: fixed;
  float: left;
  width: 100px;
}

.mapControlDivList.showAll {
  top: -154px;
  position: relative;
  width: 160px;
  right: -80px;
  // background: rgba(8, 39, 55, 0.5);
  // box-shadow: inset 0px 0px 2px 2px rgba(4, 143, 231, 0.7);
  // border: 1px solid #1778ab;

  border: 1px solid rgba(39, 209, 238, 0.3);
  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;
  // background-position: 50% 50%;
}
.mapControlDivList.showAll:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, rgba(39, 209, 238, 0.3) 0%, #fff 50%, rgba(255, 255, 255, 0) 99%) 1;
}

label.mapControlLabel {
  position: absolute;
  bottom: 0px;
  padding: 2px 5px;
  background: rgba(0, 0, 0, 0.5);
  left: 0px;
  font-size: 12px !important;
  color: white;
}

.mapControlDivItem {
  position: relative;
  float: left;
  width: 70px;
  height: 70px;
  background-repeat: round;
  background-clip: border-box;
  margin: 5px 0px;
  margin-right: 5px;
  left: 6px;

  &:nth-child(1) {
    margin-left: 5px;
    color: white !important;
  }
  &:nth-child(3) {
    /deep/ .ant-checkbox + span {
      color: black;
    }
  }

  &:nth-child(2) {
    /deep/ .ant-checkbox + span {
      color: black;
    }
  }

  .ant-checkbox-wrapper {
    color: #000000;
  }
}

.mapControlDivItem.pageShow {
  border: 4px solid #04f7fa !important;
}

/deep/ .ant-checkbox {
  background: #c9d1d9;
  top: -1.8px;
  left: 5px;
  scale: 80%;
}

/deep/ .ant-checkbox + span {
  padding-right: 8px;
  padding-left: 8px;
  font-size: 10px;
}

.close {
  float: right;
  cursor: pointer;
  position: relative;
  width: 10%;
  top: 0px;
  right: 0px;
  text-align: right;
  padding-right: 10px;
  color: #25c7e3;
  background: rgba(30, 84, 130, 0.3);
}

.bottonList {
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 16px;
  background: #031a26;
  // opacity: 0.86;
  border-bottom: 1px solid #0b5d7c;

  .bottonListSpan {
    padding-left: 15px;
    font-size: 16px;
  }
}
</style>
