<template>
  <div class="search-container">
    <div class="search-input">
      <a-input
        placeholder="请输入资源编号或地址"
        v-model:value="keyword"
        allow-clear
        @blur="onInputBlue"
      ></a-input>
    </div>
    <div class="search-button" @click="searchArea">
      <img src="/statistical/search-btn.png" alt="" />
    </div>

    <div class="search-result-container" v-if="showSearchResult">
      <div class="result-item" v-for="(item, index) in searchResult" @click="toPosition(item)">
        <div class="search-icon">
          <img src="/statistical/search-icon.png" alt="" />
        </div>
        <div class="level-0">{{ item.type?item.serialNumber: item.id }}</div>
        <div class="level-1"></div>
        <div class="level-2">{{ item.type? getTypeName(item.type): `${item.county}  ${item.street}` }}</div>
      </div>
      <a-empty v-if="searchResult.length == 0" />
    </div>
    <!-- <div class="filter-container">
      <div class="filter-name">{{ currentFilter }}</div>
      <div class="filter-icon" @click="handlerChangeFilterOptions">
        <CaretDownOutlined />
      </div>
      <div class="filter-item-container" v-if="showFilterOptions">
        <div
          class="filter-item"
          v-for="(item, index) in filters"
          :key="index"
          @click="handlerCheckedFilter(item.name)"
          >{{ item.name }}</div
        >
      </div>
    </div> -->
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted, defineExpose, defineEmits, watch } from 'vue';
  import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons-vue';
  import axios from 'axios';
  // import { getLoadDroneCaseInfoDetail, getPolygonCenter } from '@/api/tiankongdi/index';
  // import { homePageLoadCaseInfoTuBanList } from '@/api/demo/system';
  // import { getLoadCaseInfoMineralsTuBanList } from '@/api/minerals/index';
  import { WktToGeojson } from '@/components/MapboxMaps/src/WktGeojsonTransform';
  import { transformGCJ2WGS } from '@/utils/EpsgTransform';
  import { getPolygonCenter } from '@/api/tiankongdi/index'

  const emits = defineEmits(['toPosition', 'handlerFilter', 'flyToLocation']);
  const props = defineProps(['layer', 'layerSettings']);
  watch(
    () => props.layerSettings,
    () => {
      subjectName.value = props.layerSettings.subjectname;
      subjectTable.value = props.layerSettings.tablename;
      Object.keys(props.layerSettings.legend[0]).forEach((item) => {
        if (item != '默认') {
          filters.value.push({ name: item });
        }
      });
    },
  );
  const subjectName = ref();
  const subjectTable = ref();
  async function toPosition(item) {
    if (item.location) {
      let newCoord = transformGCJ2WGS(item.location[1], item.location[0]);
      if (newCoord) {
        emits('toPosition', [newCoord.lon, newCoord.lat]);
      }
      return
    }
    let filter = '"Id"=\'' + item.id + "'";
    let point = await getPolygonCenter({ tablename: 'view_shp_idle', filter: filter });
    console.log('point',point)
    if (point.length > 0) {
      try {
        let geojson = WktToGeojson(point[0].centroid_point);
        emits('toPosition', geojson.coordinates);
      } catch (e) {}
    }
  }
  const searchResult = ref<any>([]);

  const filters: any = ref([
    {
      name: '全部',
    },
  ]);


  const showSearchResult = ref(false);
  const showFilterOptions = ref(false);
  const address = ref()

  onMounted(() => {});

  function onInputFocus() {
    showSearchResult.value = true;
  }

  function onInputBlue() {
    showSearchResult.value = false;
  }
  async function searchAddress(){
    axios({
        method: 'get',
        url: `https://restapi.amap.com/v3/geocode/geo?key=ed310f0b1f6cfd93edfba42f1a09d4d9&address=`+address.value,
    }).then((res) => {
        if(res.data){
          let location = res.data.geocodes[0].location.split(',')
          emits('flyToLocation', location);
        }
    });
  }
  const keyword = ref('');

  async function searchArea() {
    if (keyword.value.match(/^[0-9A-Z]+(-[0-9A-Z]+)*$/)) {
      searchResult.value = [];
      const params = { page: 1, limit: 10,  key: keyword.value};
      const types = [1,2,3,5]
      
    } else {
      // 地名搜索
      axios
        .get(
          'https://restapi.amap.com/v5/place/text?&key=ee7f561fae9249aeb971bcc661083438&keywords=' +
            keyword.value +
            '&region=371300&citylimit=true&page_num=1&page_size=10',
        )
        .then((res) => {
          if (res.data.info == 'OK') {
            searchResult.value = [];
            res.data?.pois?.forEach((item, index) => {
              let obj = {
                id: item.name,
                county: item.cityname,
                street: item.adname,
                location: item.location?.split(','),
              };
              searchResult.value.push(obj);
            });
            showSearchResult.value = true;
          }
        });
    }
  }

  watch(
    () => keyword.value,
    (newVal) => {
      if (!newVal) {
        showSearchResult.value = false;
        searchResult.value = [];
      }
    },
  );
  const getTypeName = (type) => {
    switch(type){
      case 3:
        return '土地资源'
      case 2:
        return '房屋'
      case 1:
        return '农业生产设施'
      case 5:
        return '水域'
    }
  }
  // 抛出函数
  defineExpose({});
</script>

<style type="less" scoped>
.addressbox{
  width: 100%;
  height: 100%;
  display: flex;
  background-image: url('/statistical/search-bg.png');
  background-size: 100% 100%;
  border-top-right-radius: 8px;
  position: relative;
  .search-input {
    flex: auto;
    height: 100%;
  }
  .search-button {
    width: 62px;
    height: 36px;
    border-top-right-radius: 8px;
    background: #0a62c6;
    text-align: center;
    line-height: 36px;
    cursor: pointer;
  }
}

  .search-container {
    width: 100%;
    height: 100%;
    display: flex;
    background-image: url('/statistical/search-bg.png');
    background-size: 100% 100%;
    border-top-right-radius: 8px;
    position: relative;
    .search-input {
      flex: auto;
      height: 100%;
    }
    .search-button {
      width: 62px;
      height: 36px;
      border-top-right-radius: 8px;
      background: #0a62c6;
      text-align: center;
      line-height: 36px;
      cursor: pointer;
    }
    .search-result-container {
      width: 100%;
      position: absolute;
      top: 36px;
      left: 0px;
      background: rgba(11, 39, 68, 0.8);
      border: 1px solid #0a62c6;
      border-top: 0px;
      padding: 8px 0px;
      .result-item {
        width: 100%;
        height: 38px;
        color: #e1ecf8;
        display: flex;
        line-height: 38px;
        padding: 0px 12px;
        font-size: 14px;
        .search-icon {
          width: 28px;
          height: 36px;
        }
        .level-0 {
          max-width: 160px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .level-1 {
          margin: 0px 6px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .level-2 {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        &:hover {
          cursor: pointer;
          background: #0f3863;
        }
      }
    }

    .filter-container {
      position: absolute;
      top: 0px;
      right: -120px;
      width: 100px;
      border-radius: 6px;
      height: 36px;
      background: #0a62c6;
      line-height: 36px;
      color: #fff;
      display: flex;
      cursor: pointer;
      .filter-name {
        width: 70px;
        text-align: center;
        padding: 0px 2px;
        font-size: 14px;
        position: relative;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        &::after {
          content: '';
          width: 2px;
          height: 22px;
          position: absolute;
          top: 7px;
          right: 0px;
          background: #0751a5;
        }
      }
      .filter-icon {
        width: 30px;
        line-height: 38px;
        text-align: center;
      }
      .filter-item-container {
        width: 100%;
        position: absolute;
        background: rgba(11, 39, 68, 0.8);
        border: 1px solid #0a62c6;
        top: 36px;
        left: 0px;
        .filter-item {
          height: 36px;
          text-align: center;
          &:hover {
            cursor: pointer;
            background: #0f3863;
          }
        }
      }
    }
  }

  ::v-deep .mapboxgl-ctrl-logo {
    display: none !important;
  }

  ::v-deep .ant-input {
    background: none;
    border: 0px;
    color: #5e90e1;
    line-height: 30px;
    text-indent: 8px;
    outline: none;
    &::placeholder {
      color: #5e90e1;
    }
  }

  ::v-deep .ant-input-affix-wrapper {
    background: none;
    border: 0px;
    color: #5e90e1;
    line-height: 30px;
    text-indent: 8px;
    outline: none;
  }

  ::v-deep .anticon svg {
    color: #fff !important;
  }

  ::v-deep .ant-input::placeholder {
    color: #5e90e1;
  }

  ::v-deep .ant-empty-description {
    color: #fff;
  }
</style>
