<template>
  <view>
    <view class="searchSelect shadow" v-if="flag">
      <view class="cu-bar search bg-white">
        <view class="search-form round" style="margin-top: 0">
          <uni-easyinput type="text" v-model="searchInput" placeholder="" prefixIcon="search" @focus="InputFocus" @blur="InputBlur" @input="handleInput()" style="border: none" />
          <text class="cuIcon-search"></text>
        </view>
      </view>
      <view class="select-items">
        <view class="select-item" v-for="(item, index) in searchList" @click="clickSelectItem(item, index)" :key="index">{{ item }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "searchSelect",
  props: {
    flag: {
      type: Boolean,
      default: false,
    },
    searchList: {
      type: Array,
      // default: []
    },
    searchList2: {
      type: Array,
      // default: []
    },
  },
  data() {
    return {
      searchInput: "",
      // flag: false,
      // searchList: [],
      // searchList2: [],
    };
  },
  onload() {
    this.getSearchList();
  },
  methods: {
    //请求
    async getSearchList(ming = {}) {
      const res = await this.$myRequest({
        url: "Index/getSiteDropDownBox",
        data: ming,
      });
      res.data.data.forEach((item) => {
        this.searchList.push(item.siteName);
        this.searchList2.push(item.siteName);
      });
    },
    // 下拉选择
    clickSelectItem(item, index) {
      this.getSearchList({
        siteName: item,
      });
      this.flag = false;
    },
    handleInput() {
      var newlist = this.searchList2.filter((item) => item.indexOf(this.searchInput) > -1);
      this.searchList = newlist;
    },

    InputFocus(e) {
      this.InputBottom = e.detail.height;
    },
    InputBlur(e) {
      this.InputBottom = 0;
    },

    changeTab(Inv) {
      that.navIdx = Inv;
    },
  },
};
</script>

<style></style>
