<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));
}

// 值改变后的操作
function selectchange(value) {
  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);
  }
}

function filterMethod(value) {
  console.log('filterMethod', value);
  if (value) {
    filterList.value = SelectList.value.filter(item => item.name.includes(value));
  } else {
    filterList.value = SelectList.value;
  }
}

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>