<template>
  <div class="inputSearch" v-show="Show && number == 4">
    <el-select
      v-model="selectmodel"
      placeholder="请输入关键字"
      style="width: 140px;position: relative;"
      filterable
      popper-class="inputSearchselectclass"
      :filter-method="filterMethod"
      placement="bottom"
      clearable
      @change="selectchange"
    >
        <el-tabs v-model="activeName" class="selectTabs demo-tabs" stretch  @tab-click="tabsClick">
    <el-tab-pane label="资产" name="zhandian"></el-tab-pane>
    <el-tab-pane label="道路" name="daolu"></el-tab-pane>
  </el-tabs>
      <el-option v-for="(item, index) in filterList" :key="item.id + index + item.id" :label="item.name" :value="item.geometry">
        <el-tooltip
          effect="dark"
          :content="item.name"
          :hide-after="0"
          placement="top"
          :show-arrow="false"
          popper-class="inputSearchpopperclass"
        >
          <span v-show="item.name.length >= 15">{{ item.name.slice(0, 15) + '...' }}</span>
        </el-tooltip>
        <span v-show="item.name.length < 15">{{ item.name }}</span>
        <span style="float: right; color: #8fbffe; font-size: 12px; font-family: Source Han Sans CN">
          {{ 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);
import iconSearch from '@/views/pictureOnMap/iconSearch.vue';
import { ref } from 'vue';
const props = defineProps({
  diabox: {
    type: Object,
  },
});

const activeName = ref('zhandian');
const number = ref(1);
const SelectList = ref(1);
const filterList = ref([]);
const selectmodel = ref('');
const getItem = ref({});
// 道路数据
const roadData=ref(
  [{
  data:[
  {
    id:1,
    name:'软件园中路',
    geometry:'',
    pointTypeName:'什么什么路'
  },
  {
    id:2,
    name:'光谷大道',
    geometry:'',
    pointTypeName:'什么路'
  },
  {
    id:3,
    name:'光谷大道1',
    geometry:'',
    pointTypeName:'什么路'
  },
  {
    id:4,
    name:'光谷大道3',
    geometry:'',
    pointTypeName:'什么路'
  },
  {
    id:5,
    name:'关山大道',
    geometry:'',
    pointTypeName:'1什么路'
  },
]
  }]
)
watch(
  () => appStore.MapData,
  (newValue, oldValue) => {
    if (appStore.MapData && appStore.MapData.length) {
      if (number.value === 1) {
        GetSearchList(appStore.MapData);
        number.value = 4;
      }
    }
    // 示例调用
  },
  { deep: true, once: true }
);

function GetSearchList(data) {
  SelectList.value = [];
  data.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) {
  console.log('valuevalue',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));
    console.log('feature',feature);
    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);

const tabsClick=(e)=>{
  let type=e.paneName
  getItem.value=''
  selectmodel.value=''
  if(type=='zhandian'){
    GetSearchList(appStore.MapData)
  }else if(type=='daolu'){
    GetSearchList(roadData.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: 175px;
  top: 19px;
  z-index: 999;
  border-radius: 6px;
}
.selectTabs {
  position: absolute;
  
  width: 100%;
  left: 0;
  top: 0;
}

:deep(.el-input__wrapper) {
  background: #0d2359 !important;
  border-radius: 6px;
  box-shadow: 0 0 0 0.00521rem var(--el-select-input-focus-border-color) inset !important;
}

:deep(.el-input__wrapper:hover) {
  background: #0d2359 !important;
  border-radius: 6px;
}

:deep(.el-input__inner) {
  color: #8fbffe;
}
:deep(.el-input__inner::placeholder) {
  color: #8fbffe;
}

:deep(.el-select .el-input .el-select__caret.el-icon) {
  color: #8fbffe;
}
</style>
<style lang="scss">
.inputSearchselectclass {
  background: #0d2359 !important;
  border-radius: 6px !important;
  border: 1px solid #0b9bff !important;
  .el-scrollbar{
  padding-top: 40px;
}
  .el-select-dropdown__item {
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: 14px;
    color: #ccdfff;
  }

  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background: #243f7f !important;
  }
}

.inputSearchpopperclass {
  z-index: 10000 !important;
  background: #243f7f !important;
  color: #ccdfff !important;
  cursor: pointer;

  .el-popper.is-dark .el-popper__arrow::before {
    background: #243f7f !important;
  }
}
</style>