<template>
  <div class="map-querybar">
    <input
      style="border: 0px; outline: none"
      type="search"
      class="querybar-ssk1"
      placeholder="搜索地点"
      autocomplete="off"
      v-model="parameters.keywords"
    />
    <div class="querybar-ssk2" @click="handlerSearchPOL">
      <i class="fa fa-search fa-2x"></i>
      搜索
    </div>
    <div class="map-querybar-result" v-show="showSearchListWindow">
      <div class="search-top">
        <span></span>
        <i class="fa fa-close fa-2x" @click="hiddenSearchListWindow"></i>
      </div>
      <div
        class="search-contain"
        ref="searchContain"
        @scroll="handleScroll($event)"
        v-show="searchResultList.length"
      >
        <div
          class="map-querybar-result-i"
          v-for="(item, index) in searchResultList"
          v-bind:key="index"
        >
          <div class="i-top">
            <h3>{{ item.name }}</h3>
            <div @click="handlerFlyToPoint(item)">查看</div>
          </div>
          <div class="i-bottom">
            <span>{{ item.address }}</span>
          </div>
        </div>
        <span class="list-none" v-show="!hasNextPage">~~没有更多了~~</span>
      </div>
      <img
        class="none"
        v-show="!searchResultList.length"
        src="/img/none.png"
        alt=""
      />
      <span  v-show="!searchResultList.length">没有搜索到相关的地点</span>
    </div>
  </div>
</template>
<script>
const GD_POL_KEY = "ee7f561fae9249aeb971bcc661083438";
// const GD_POL_KEY = "6346891d57dee39c07b16d9942868fbc";
const GD_SEARCH_URL = "https://restapi.amap.com/v5/place/text?";
import { gcj02towgs84 } from 'coordtransform'
import axios from "axios";
export default {
  name: "search",
  props:['globalmap'],
  data() {
    return {
      parameters: {
        key: GD_POL_KEY,
        keywords: "",
        region: "371325",
        citylimit: true,
        page_num: 1,
        page_size: 20,
      },
      searchResultList: [],
      debounceTime: undefined,
      hasNextPage: true,
      showSearchListWindow: false,
    };
  },
  methods: {
    // 查询
    handlerSearchPOL() {
      if (!this.parameters.keywords) {
        this.$message({
          type: "warning",
          message: "请输入搜索关键词",
        });
        return false;
      }
      this.parameters.page_num = 1;
      this.resetScroll("searchContain");
      this.getPOLData();
    },
    getPOLData() { 
      
      axios({
        method: "get",
        url: `${GD_SEARCH_URL}`,
        params: {
          ...this.parameters,
        },
      }).then(
        (res) => {
          if (res.status == 200 && res.data && res.data.pois) {
            this.count = res.data.count;
            let resLength = res.data.pois.length;
            if (this.parameters.page_num == 1) {
              this.searchResultList = res.data.pois;
              this.hasNextPage = resLength >= this.parameters.page_size;
            } else {
              if (resLength) {
                this.searchResultList = this.searchResultList.concat(
                  res.data.pois
                );
                this.hasNextPage = resLength >= this.parameters.page_size;
              } else {
                this.hasNextPage = false;
              }
            }
            this.showSearchListWindow = true;
          } else {
            this.$message({
              type: "error",
              message: `搜索接口错误:${res.data.info}`,
            });
          }
        },
        (err) => {
          console.log(err);
          this.$message({
            type: "error",
            message: "搜索接口错误",
          });
        }
      );
    },
    //搜索滚动条回到顶部
    resetScroll(ref_contain) {
      this.$nextTick(() => {
        if (this.$refs[ref_contain]) {
          // 滚动元素跳转到顶部
          this.$refs[ref_contain].scrollTop = 0;
        }
      });
    },
    // 滚动时，加载下一页数据
    handleScroll(e) {
      let _this = this;
      if (this.debounceTime) {
        clearTimeout(this.debounceTime);
      }
      this.debounceTime = setTimeout(function () {
        let el = e.target;
        if (el.scrollTop + el.clientHeight >= el.scrollHeight) {
          //控制页数
          let page = _this.parameters.page_num;
          if (_this.hasNextPage) {
            page++;
            _this.parameters.page_num = page;
            _this.getPOLData();
          }
        }
        this.debounceTime = undefined;
      }, 100);
    },
    hiddenSearchListWindow() {
      this.showSearchListWindow = false;
      this.parameters.page_num = 1
      this.parameters.keywords = ''
      this.searchResultList = []
      this.hasNextPage = true
    },
    handlerFlyToPoint(e){
      console.log(this.globalmap)
      // TODO 根据返回的坐标格式做跳转
      let lngLat = e.location.split(',').map(e=>parseFloat(e))
      var wgs84Coordinate = gcj02towgs84(...lngLat);
      this.globalmap.flyToPoint(wgs84Coordinate,{radius:400,"pitch":-90});
    }
  },
};
</script>
<style scoped>
.map-querybar {
  top: 150px;
  left: 575px;
  position: absolute;
  flex-wrap: wrap;
  width: 340px;
  height: 47px;
  background-image: url(/img/sousuokuang.png);
  background-size: 100% 100%;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
}

.querybar-ssk1 {
  background-color: transparent;
  width: 230px;
  height: 47px;
  font-size: 14px;
  color: #ffffff;
  padding: 0 20px 0 20px;
}

.querybar-ssk2 {
  border-color: #082b2b;
  color: #ff9811;
  width: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
}

.querybar-ssk2 .fa {
  margin-right: 10px;
  font-size: 20px;
  cursor: pointer;
}

.map-querybar-result {
  width: 340px;
  height: 500px;
  box-sizing: border-box;
  padding: 0 10px 20px 10px;
  position: absolute;
  top: 53px;
  left: 0;
  background-color: rgba(8, 43, 43, 0.7);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
}
.map-querybar-result .none {
  width: 120px;
  height: 120px;
  margin: 50px auto 10px;
}
.map-querybar-result >span{
  text-align: center;
}

.map-querybar-result .search-top {
  display: flex;
  height: 40px;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #d2d2d2;
}
.search-contain {
  width: 100%;
  height: 102%;
  overflow-y: scroll;
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.map-querybar-result-i {
  color: #ffffff;
}

.map-querybar-result-i .i-top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  min-height: 40px;
}

.map-querybar-result-i .i-top h3 {
  font-weight: bold;
  font-size: 14px;
}

.map-querybar-result-i .i-top div {
  width: 50px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  border-radius: 6px;
  background-color: #ff9811;
  cursor: pointer;
}

.map-querybar-result-i .i-bottom {
  width: 100%;
  padding-bottom: 10px;
  border-bottom: 1px dotted #d2d2d2;
}

.map-querybar-result-i .i-bottom span {
  font-size: 12px;
  color: #d2d2d2;
}
.list-none{
  text-align: center;
  display: block;
  width: 100%;
  margin-top: 10px;
}
</style>
