<template>
  <!-- 双屏展示的数据控制 -->
  <div class="skyDataControlDvie" @blur="searchPanleShow = false">
    <div class="searchDiv">
      <a-input class="searchInput" @focus="getDataList" allow-clear placeholder="请输入关键字" @change="getDataList" v-model:value="key">
        <template #prefix>
          <SearchOutlined @click="getDataList" />
        </template>
      </a-input>
      <span style="color: #2bc1ff">{{ title }}</span>
    </div>
    <div class="searchPanle" v-show="searchPanleShow">
      <div @click="searchPanleShow = false" style="float: right; cursor: pointer; margin-right: 10px; color: #25c7e3">
        <CloseOutlined type="delete-outlined" title="关闭" />
      </div>
      <div class="searchList">
        <template v-for="(item, index) in layerList" :key="'layerList_' + index">
          <div class="layerItem">
            <div @click="upOrOff(item)" class="layerGroup">
              <CaretDownOutlined title="点击收缩" v-if="!item.show" class="layerIcon" />
              <CaretRightOutlined title="点击展开" v-if="item.show" class="layerIcon" />
              <div class="layerTitle" :sjlxmc="item.sjlxmc" :sjlx="item.sjlx">{{ item.sjlxmc || item.sjlx }}</div>
            </div>
            <template v-for="(item2, index2) in item.data" :key="'layerItem_' + index + '_' + index2">
              <div @click="showLayer(item2, index2)" v-show="!item.show" :class="item2.active ? 'active' : ''" class="itemDiv">
                {{ item2.zymc }}
              </div>
            </template>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from 'vue';
import { getSourceInfo } from '/@/api/map/getData.ts';
import TFMapUitl from '/@/utils/TFMapUitl.ts';
import eventBus from '/@/utils/eventBus';
import { CaretUpOutlined, SearchOutlined, CaretRightOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
import { Item } from 'ant-design-vue/lib/menu';
import { CloseOutlined } from '@ant-design/icons-vue';
export default {
  name: 'skyDataControl',
  props: {
    title: null,
    mapType: null,
  },
  components: { CaretUpOutlined, SearchOutlined, CaretRightOutlined, CaretDownOutlined, CloseOutlined },
  setup(props) {
    const title = props.title;
    let fristSearch = true;
    let searchAction = true;
    let currentMap = null;
    let currentMapConfig = null;
    if (props.mapType == 'map') {
      currentMap = window.map;
      currentMapConfig = window.mapConfig;
    } else if (props.mapType == 'doubleScreenMap') {
      currentMap = window.doubleScreenMap;
      currentMapConfig = window.doubleScreenMapConfig;
    }
    const key = ref('');
    let currentItem = null;
    const layerList = reactive([]);
    let searchPanleShow = ref(false);

    /**
     * 展开和收缩
     */
    function upOrOff(item) {
      item.show = !item.show;
    }

    /**
     * 获取对比数据
     */
    function getDataList() {
      if (searchAction) {
        searchAction = false;
      }
      TFMapUitl.clearArray(layerList);
      getSourceInfo({ size: 1000, current: 1, searchStr: key.value }).then((res) => {
        const tempData = [];
        const filedData = [];
        TFMapUitl.clearArray(layerList);
        if (res.code == 1) {
          res.result.records.forEach((item, index) => {
            item.active = false;
            item.show = true;
            if (!item.code) {
              item.code = 'code_' + index;
            }
            if (item.sjlx) {
              if (currentItem && currentItem.id == item.id) {
                item.active = true;
              }
              const tempKey = item.sjlx + '_sjlx';
              if (tempData[tempKey]) {
                tempData[tempKey].data.push(item);
              } else {
                filedData.push(tempKey);
                tempData[tempKey] = { data: [item], sjlx: item.sjlx, sjlxmc: item.sjlxmc };
                tempData.push(tempData[tempKey]);
              }
            }
          });
          filedData.forEach((item) => {
            delete tempData[item];
          });
        }
        layerList.push(...tempData);
        // window.mapConfig.layerList.push(...tempData);
        searchAction = true;
        searchPanleShow.value = true;
      });
    }

    /**
     * 展示选中的图层内容
     */
    function showLayer(data, index) {
      if (currentItem) {
        //关闭之前的图层
        currentItem.active = false;
        controlLayer(currentItem);
      }
      // console.log(currentItem, 'currentItem');
      // console.log(currentItem.code, 'currentItem.code');
      console.log(data, 'data');
      console.log(index, 'index');
      console.log(props.mapType, 'props.mapType');
      //打开当前图层
      currentItem = data;
      currentItem.active = true;
      controlLayer(currentItem);
      searchPanleShow.value = false;
      key.value = currentItem.zymc;
      data.type = props.mapType;
      eventBus.emit('getTitleInMap', data);
      eventBus.emit('getTitle', data);
    }

    /**
     * 地图中图层的控制
     */
    function controlLayer(item) {
      const tempLayer = currentMap.setLayer2D(item.code);
      if (!tempLayer && !item.active) {
        //地图未加载，状态为不显示则直接返回
        return;
      }
      if (!tempLayer && item.active) {
        currentMap.layer2d.add({
          id: item.code,
          title: item.zymc,
          epsg: item.epsg,
          type: item.type == '高德' ? 'GD' : item.type == '百度' ? 'BD' : 'SUPER',
          show: item.active,
          url: item.fbdz,
        });

        // var p = {
        //     x: 120.214585,
        //     y: 30.237884
        // }
        // let word = new TFMap.Word(p, "文字", "#ffffff", "#00b7ee", "30px sans-serif").init().setClassify("unit*").flyTo();
        // currentMap.addOverlay(word);
      }
      if (tempLayer) {
        //图层存在的情况，直接根据item.active进行控制
        currentMap.showLayer2D(item.code, item.active, true);
        if (window.doubleScreenMap) window.doubleScreenMap.showLayer2D(item.code, item.active, true);
      }
    }

    return {
      layerList,
      title,
      key,
      searchPanleShow,
      showLayer,
      getDataList,
      upOrOff,
    };
  },
};
</script>

<style lang="less" scoped>
.skyDataControlDvie {
  width: 300px;
  width: 300px;
  border: 1px solid rgb(4 143 231 / 50%);
  background: rgba(5, 83, 124, 0.7);
  border-radius: 4px;
  .searchInput {
    width: calc(100% - 60px);
    padding: 10px;
    border: none !important;
    &:focus {
      border: none;
    }
    &:after {
      content: '';
      border-left: 2px solid;
      border-image: linear-gradient(to top, rgba(87, 138, 239, 0.01), rgb(87 138 239), rgba(87, 138, 239, 0.01)) 1;
    }
  }
  /deep/.ant-input-affix-wrapper-focused {
    border: none;
    box-shadow: none;
  }
  .searchDiv {
    // background: #05537C;
    // background: rgba(5,83,124,0.7);
    border-radius: 4px;
  }
  .searchPanle {
    width: 300px;
    position: absolute;
    top: -310px;
    height: 300px;
    background: rgba(3, 26, 38, 0.86);
    border-radius: 3px;
    border: 1px solid rgb(18 66 92);
    .searchList {
      overflow-y: auto;
      height: 100%;
    }
    .itemDiv {
      font-size: 14px;
      padding: 7px 0px;
      padding-left: 40px;
    }
    .itemDiv.active {
      color: #26f1fe;
    }
    .layerGroup {
      display: flex;
      align-items: center;
      padding: 7px 0px;
      .layerIcon {
        font-size: 20px;
        padding: 0px 10px;
      }
      .layerTitle {
        font-size: 16px;
      }
    }
  }
}
</style>
