<template>
  <div class="inputSearch" v-show="Show && number == 4">
    <el-select
      v-model="selectmodel"
      placeholder="输入关键字搜索"
      style="width: 180px"
      filterable
      :filter-method="filterMethod"
      clearable
      @change="selectchange"
    >
      <el-option
        v-for="(item, index) in filterList"
        :key="item.id + index + item.id"
        :label="item.name"
        :value="item.geometry"
      >
        <el-popover
          v-if="item.name.length >= 15"
          placement="top-start"
          width="300"
          trigger="hover"
          popper-class="popperclass"
        >
          <span>{{ item.name }}</span>
          <template #reference>
            {{ item.name.slice(0, 15) + "..." }}
          </template>
        </el-popover>
        <span v-else>{{ item.name }}</span>
        <span
          style="float: right; color: var(--el-text-color-secondary); font-size: 13px"
        >
          {{ item.pointTypeName }}
        </span>
      </el-option>
    </el-select>
  </div>
</template>
<script setup>
import bus from "@/bus/";
import useUserStore from "@/store/modules/user";
const appStore = useUserStore();
const { proxy } = getCurrentInstance();
const Show = ref(true);

const props = defineProps({
  diabox: {
    type: Object,
  },
});

const number = ref(1);
const SelectList = ref(1);
const filterList = ref([]);
const selectmodel = ref("");
const getItem = ref({});
watch(
  () => appStore.MapData,
  (newValue, oldValue) => {
    if (appStore.MapData && appStore.MapData.length) {
      if (number.value === 1) {
        GetSearchList();
        number.value = 4;
      }
    }
    // 示例调用
  },
  { deep: true, once: true }
);

function GetSearchList() {
  SelectList.value = [];
  appStore.MapData.map((item) => {
    SelectList.value = SelectList.value.concat(item.data);
  });
  // console.log('MapData', appStore.MapData, SelectList.value);
  filterList.value = JSON.parse(JSON.stringify(SelectList.value));
  // debugger;
}

// 值改变后的操作
function selectchange(value) {
  if(value){
    let arr = SelectList.value.filter(item => {
      return item.geometry == value;
    });
    if (arr && arr[0]) {
      getItem.value = arr[0];
    }
    selectmodel.value = getItem.value.name;
    let feature = turf.feature(Terraformer.WKT.parse(value),_.cloneDeep(getItem.value));
    bus.emit('setHighlight',feature);
    newfiberMap.map.easeTo({center:turf.getCoords(turf.center(feature)),zoom:15});
    bus.emit('setGeoJSON', { json: turf.featureCollection([feature]), key: 'temporary' });

  }

  /*  if (value) {
    // 选中的操作
    let arr = SelectList.value.filter(item => {
      return item.geometry == value;
    });
    if (arr && arr[0]) {
      getItem.value = arr[0];
    }
    console.log('选中change', getItem.value);
  } else {
    // 清除的操作
    console.log('清除change', getItem.value);
  }*/
}
const filterMethod = _.debounce((value) => {
  if (value) {
    filterList.value = SelectList.value.filter((item) => item.name.includes(value));
    if (filterList.value.length == 0)
      bus.emit("geoRegeo", {
        name: value,
        callback: (results) => {
          filterList.value = results.geocodes.map((i, idx) => ({
            id: idx,
            name: i.formatted_address,
            geometry: `POINT(${gcoord
              .transform(i.location.split(","), gcoord.AMap, gcoord.WGS84)
              .join(" ")})`,
            pointTypeName: "地理位置",
          }));
        },
      });
  } else {
    filterList.value = SelectList.value;
  }
  // bus.emit('removeMapDatas',['temporary']);
},500)


onMounted(() => {
  bus.on("YQ_head", (val) => {
    console.log("appStore.MapData", appStore.MapData);
    if (val == false) {
      Show.value = false;
    } else {
      Show.value = true;
    }
  });
});

onBeforeUnmount(() => {
  bus.off("YQ_head");
});
</script>
<style lang="scss" scoped>
.inputSearch {
  position: fixed;
  right: 155px;
  top: 19px;
  z-index: 999;
}

:deep(.el-input__wrapper) {
  background: #032d79 !important;
}

:deep(.el-input__inner) {
  color: #fff;
}

.popperclass {
  z-index: 10000 !important;
}
</style>