<template>
<!-- 地点查询 -->
<div class='searchDivAll'>
  <div class="bottonList">
    <span class="bottonListSpan" style="padding-left: 5px; color: #fff">搜索</span>
    <div @click="closeSeachStatus" style="float: right; cursor: pointer; margin-right: 10px; color: #25c7e3">
      <CloseOutlined type="delete-outlined" title="关闭" />
    </div>
  </div>
  <div class="searchInfoDiv">
    <div class="inputDiv">
      <a-input
        class="searchInput"
        allow-clear
        @change="clearData"
        placeholder="请输入关键字"
        v-model:value="key"
      >
      </a-input>
      <span class="searchBotton" @click="getTypeList">搜索</span>
    </div>
    <div v-show="showList" class="dataContent">
      <div class="dataListDiv">
        <div class="typeList">
          <template v-for="(item, index) in dataList" :key="'typeItem_' + index">
            <div
              class="typeItem"
              @click="changeList(item, index)"
              :class="currentIndex == index ? 'currentDiv' : ''"
            >
              <span class="typeicon"></span>
              <span class="typeTitle">{{ item.type }}</span>
              <span class="typeNumber">({{ item.value }})</span>
            </div>
          </template>
        </div>
        <div class="currentList" ref="currentListDom">
          <template v-for="(item, index) in currentData" :key="'dataItem_' + index">
            <div
              class="dataItem"
              @click="goTo(item, index)"
              :class="currentItemIndex == index ? 'currentDiv' : ''"
            >
              <span class="dataIcon">{{ item.name }}</span>
              <span v-if="type == '全部'" class="dataType">({{ item.type }})</span>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</div>

</template>

<script>
  import { SearchOutlined,CloseOutlined } from '@ant-design/icons-vue';
  import { ref, reactive, onMounted, onUnmounted, defineComponent } from 'vue';
  import { getLocalInfo, getTotalLocalInfo } from '/@/api/map/getData.ts';
  import { message } from 'ant-design-vue';
  import TFMapUitl from '/@/utils/TFMapUitl.ts';
  import waterLocation from '/@/views/map/drainageBasin/waterLocation.js';
  export default defineComponent({
    name: 'searchInfo',
    components: { SearchOutlined ,CloseOutlined},
    setup(_,ctx) {
      const key = ref('');
      let currentListDom = ref(null);
      let pageInfo = null;
      let type = ref('');
      let searchAction = true;
      initPageInfo();
      //初始化翻页
      function initPageInfo() {
        pageInfo = {
          size: 10,
          current: 1,
          total: 0,
        };
        type.value = '';
      }
      //滑动条监听,到底部的时候重新请求数据
      function listenerScroll(e) {
        if (e && e.target && e.target.clientHeight + e.target.scrollTop >= e.target.scrollHeight) {
          //判断是否滑动到底部
          if (pageInfo.total != 0 && pageInfo.total == currentData.length) {
            //当前数据总数与currentData数据总数一致时不进行查询
            return;
          } else {
            pageInfo.current++;
            getDataList();
          }
        }
      }
    const closeSeachStatus = () => {
      TFMapUitl.clearPointLocation_list(window.map);
      ctx.emit('closeSeachStatus');
    };
      //注册滑动事件
      onMounted((e) => {
        currentListDom.value.addEventListener('scroll', listenerScroll);
      });
      //取消滑动事件
      onUnmounted((e) => {
        try {
          currentListDom.value.removeEventListener('scroll', listenerScroll);
        } catch (error) {}
      });

      const dataList = reactive([]);
      let showList = ref(false);
      let currentIndex = ref(0);
      let currentItemIndex = ref(-1);
      let currentData = reactive([]);

      let lastSeachInfo=null;
      /**
       * 查询分类统计数据
       */
      function getTypeList() {
        lastSeachInfo=key.value+"";
        if (!searchAction) {
          return;
        }
        if (!key.value) {
          message.info('请输入查询关键字');
          return;
        }
        searchAction = false;
        dataList.splice(0, dataList.length);
        const searchInfo=key.value+"";
        getTotalLocalInfo({ name: key.value }).then((res) => {
          if (res.code == 1) {
            dataList.push(...res.result);
            let all = 0;
            res.result.forEach((item) => {
              all += item.value;
            });
            dataList.unshift({
              type: '全部',
              value: all,
            });
            changeList(dataList[0], 0);
            showList.value = true;
          }
          searchAction = true;
          if(lastSeachInfo!=searchInfo){//最后记录的查询条件和查询的内容不符合的时候，再次进行查询
            getTypeList();
          }
        });
      }

      /**
       * 查询数据
       */
      function getDataList() {
        const params = { name: key.value, size: pageInfo.size, current: pageInfo.current };
        if (type.value && type.value != '全部' && type.value != '') {
          params.type = type.value;
        }
        getLocalInfo(params).then((res) => {
          if (res.code == 1) {
            pageInfo.total = res.result.total;
            currentData.push(...res.result.records);
          }
        });
      }

      /**
       * 清空currentData的数据
       */
      function clearDataList() {
        currentData.splice(0, currentData.length); //清空数据
        initPageInfo(); //初始化翻页条件
        currentItemIndex.value = -1;
      }

      /**
       * 当前查看的数据
       */
      function changeList(item, index) {
        currentIndex.value = index;
        clearDataList();
        type.value = item.type;
        getDataList();
      }

      /**
       * 关闭查询
       */
      function clearData() {
        if (!key.value) {
          showList.value = false;
          dataList.splice(0, dataList.length - 1);
          clearDataList();
          TFMapUitl.clearPointLocation_list(window.map);
        } else {
          getTypeList();
        }
      }

      /**
       * 定位
       */
      function goTo(i, index) {
        currentItemIndex.value = index;
        if(i.type=='流域'||i.type=='河段'){
          waterLocation.goTo(i.id);
        }else{
          let op = {
            destination: { x: i.x, y: i.y, z: 15000 },
            orientation: { heading: 6.283185307179586, pitch: -1.5688928482139568, roll: 0 },
          };
          map.flyTo(op, 1, () => {
            TFMapUitl.mapPointLocation_list([i.x, i.y]);
          });
        }
      }

      return {
        key,
        getDataList,
        dataList,
        showList,
        currentIndex,
        currentItemIndex,
        currentData,
        currentListDom,
        getTypeList,
        changeList,
        goTo,
        type,
        clearData,
        closeSeachStatus
      };
    },
  });
</script>

<style lang="less" scoped>
.searchDivAll{
  // box-shadow: inset 0px 0px 2px 2px rgba(4, 143, 231, 0.7);
  // border: 1px solid #1778ab;
  position: absolute;
  top: 8px;
  left: 60px;
  // background-color: rgba(8, 39, 55, 0.5);
  width: 400px;

  border: 1px solid #0b5d7c;
  background: #031A26;
  opacity: 0.86;
  border-radius: 3px;
}
.searchDivAll: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;
}


.bottonList {
  position: relative;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 16px;
  background: #031A26;
  width: 100%;
  border-bottom: 1px solid #0b5d7c;
  .bottonListSpan {
    padding-left: 15px;
    font-size: 16px;
  }
}
  .searchInfoDiv {
    position: relative;
    padding: 10px;
    .inputDiv {
      display: flex;
      flex-direction: row;
      height: 40px;
      align-items: center;
      text-align: center;
      line-height: 40px;
    }
    .searchBotton {
      // background: linear-gradient(270deg, #1ec3ee 0%, #0f88fe 100%);
      background: linear-gradient(270deg, rgb(30 195 238 / 50%) 0%, rgb(15 136 254 / 50%) 100%);
      height: 100%;
      display: block;
      font-size: 16px;
      width: 70px;
      color: white;
      cursor: pointer;
    }
    .searchInput {
      height: 100%;
      width: calc(100% - 70px);
      border: 1px solid rgba(15,136,254,0.40); ;
      border-radius: unset;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
      color: white;
      font-size: 16px;
      &::-webkit-input-placeholder {
        color: rgba(255, 255, 255, 0.4);
      }
      &::-moz-placeholder {
        color: rgba(255, 255, 255, 0.4);
      }
      &::-moz-placeholder {
        color: rgba(255, 255, 255, 0.4);
      }
      &:-ms-input-placeholder {
        color: rgba(255, 255, 255, 0.4);
      }
    }
    .dataContent {
      width: 100%;
      height: 200px;
      .dataListDiv {
        display: flex;
        width: 100%;
        height: 100%;
        flex-direction: row;
        position: relative;
        top: 3px;
      }
      .typeList {
        width: 140px;
        background: #0b3b61;
        font-size: 16px;
        padding: 7px 5px 7px 5px;
        border-bottom-left-radius: 4px;
        border-top-left-radius: 4px;
      }
      .typeItem {
        padding: 5px;
        &:hover {
          background: #0b548e;
        }
      }
      .currentDiv {
        background: #0b548e;
        color: #0afdfa;
      }
      .dataItem {
        padding: 5px;
        font-size: 16px;
        &:hover {
          background: #0b548e;
        }
      }
      .currentList {
        width: calc(100% - 140px);
        height: 100%;
        overflow-y: auto;
        padding: 7px 5px 7px 5px;
        background: #04233d;
        border-bottom-right-radius: 4px;
        border-top-right-radius: 4px;
      }
      .dataType {
        opacity: 0.5;
      }
    }
  }
</style>
