<template>
  <!-- 地点查询 -->
  <div class="drainageBasinDiv">
    <!-- <div class="inputDiv">
      <a-input
        class="searchInput"
        allow-clear
        @change="clearData"
        placeholder="请输入关键字"
        v-model:value="key"
      >
      </a-input>
      <span class="searchBotton" @click="searchInfo">搜索</span>
    </div> -->
    <div class="bottonList">
      <span class="bottonListSpan" style="padding-left: 5px">河段定位</span>
      <div @click="closeDrainag" style="float: right; cursor: pointer; margin-right: 10px; color: #25c7e3">
        <CloseOutlined type="delete-outlined" title="关闭" />
      </div>
    </div>
    <div v-show="showList" class="dataContent">
      <div class="dataListDiv">
        <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 style="padding-left: 10px" class="dataIcon">{{ item.lymc }}</span>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { SearchOutlined } from '@ant-design/icons-vue';
import { ref, reactive, onMounted, onUnmounted, defineComponent, watch, getCurrentInstance } from 'vue';
import { getRiverInfo } from '/@/api/map/getData.ts';
import { message } from 'ant-design-vue';
import TFMapUitl from '/@/utils/TFMapUitl.ts';
import { CloseOutlined } from '@ant-design/icons-vue';
import waterLocation from './waterLocation';
export default defineComponent({
  name: 'drainageBasin',
  components: { SearchOutlined, CloseOutlined },
  props: {
    pageShow: null,
  },

  setup(props, ctx) {
    const key = ref('');
    let currentListDom = ref(null);
    let pageInfo = null;
    let type = ref('');
    let searchAction = true;
    initPageInfo();
    //关闭本模块
    function closeDrainag() {
      ctx.emit('changeDrainageStatus', false);
    }
    const message = ref(props.pageShow);
    watch(
      () => props.pageShow,
      (newVal) => {
        if (!props.pageShow) {
          currentItemIndex.value = -1;
          deleteHL();
        }
      }
    );
    //初始化翻页
    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) || pageInfo.total < currentData.length) {
          //当前数据总数与currentData数据总数一致时不进行查询
          return;
        } else {
          pageInfo.current++;
          getDataList();
        }
      }
    }
    //注册滑动事件
    onMounted((e) => {
      currentListDom.value.addEventListener('scroll', listenerScroll);
    });
    //取消滑动事件
    onUnmounted((e) => {
      try {
        currentListDom.value.removeEventListener('scroll', listenerScroll);
      } catch (error) {}
    });

    let showList = ref(true);
    let currentIndex = ref(0);
    let currentItemIndex = ref(-1);
    let currentData = reactive([]);
    getDataList();
    /**
     * 查询数据
     */
    function getDataList() {
      if (!searchAction) {
        return;
      }
      searchAction = false;
      const params = { size: 1000, current: 1 };
      // const params = { searchStr: key.value, size: pageInfo.size, current: pageInfo.current };
      getRiverInfo(params).then((res) => {
        if (res.code == 1) {
          pageInfo.total = res.result.total;
          currentData.push(...res.result.records);
          showList.value = true;
          searchAction = true;
        }
      });
    }

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

    /**
     * 删除河流
     */
    function deleteHL() {
      waterLocation.deleteHL();
    }

    /**
     * 关闭查询
     */
    function clearData() {
      clearDataList();
      if (!key.value) {
        showList.value = false;
      } else {
        getDataList();
      }
    }

    /**
     * 查询按钮
     */
    function searchInfo() {
      clearDataList();
      getDataList();
    }

    /**
     * 定位
     */
    function goTo(item, index) {
      currentItemIndex.value = index;
      waterLocation.goTo(item.id);
    }

    return {
      key,
      getDataList,
      showList,
      currentIndex,
      currentItemIndex,
      currentData,
      currentListDom,
      goTo,
      type,
      clearData,
      searchInfo,
      closeDrainag,
    };
  },
});
</script>

<style lang="less" scoped>
.drainageBasinDiv {
  position: absolute;
  top: 204px;
  left: 60px;
  width: 290px;
  color: #fff;
  // background-color: rgba(8, 39, 55, 0.5);
  // box-shadow: inset 0px 0px 2px 2px rgba(4, 143, 231, 0.7);
  padding: 0px 0px 10px 0px;

  border: 1px solid rgba(39, 209, 238, 0.3);
  background: #031A26;
  opacity: 0.86;
  border-radius: 3px;
  .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%);
    height: 100%;
    display: block;
    font-size: 16px;
    width: 70px;
    color: white;
  }
  .searchInput {
    height: 100%;
    width: calc(100% - 70px);
    border: 1px solid #0f88fe;
    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: 5px;
    }
    .currentDiv {
      background: rgba(11, 84, 142, 0.7);

      color: #0afdfa;
    }
    .dataItem {
      padding: 5px;
      font-size: 16px;
      &:hover {
        background: rgba(11, 84, 142, 0.7);
      }
    }
    .currentList {
      width: 100%;
      height: 100%;
      overflow-y: auto;
      padding: 0px 5px 7px 5px;
      // background: #04233d;
      border-bottom-right-radius: 4px;
      border-top-right-radius: 4px;
    }
  }
  .bottonListDiv {
    font-size: 16px;
    color: #25c7e3;
    padding: 5px 12px 0px 0px;
    position: relative;
    float: right;
  }
  .bottonList {
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 16px;
    background: #031a26;
    // opacity: 0.86;
    border-bottom: 1px solid #0b5d7c;
    width: 100%;
    .bottonListSpan {
      padding-left: 15px;
      font-size: 16px;
    }
  }
}

.drainageBasinDiv: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;
}

.currentList::-webkit-scrollbar {
  width: 4px;
}

.currentList::-webkit-scrollbar-track {
  // background-color: #0d4f57;
}

.currentList::-webkit-scrollbar-thumb {
  background-color: #007e8f;
}
</style>
