<template>
  <div>
    <el-autocomplete
      style="width: 100%"
      v-model="name"
      :fetch-suggestions="querySearchAsync"
      placeholder=""
      :debounce="0"
      @select="handleSelect"
    ></el-autocomplete>
  </div>
</template>

<script>
export default {
  props: {
    searchFun: {
      type: Function,
      default: () => {}
    },
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      name: ''
    }
  },
  watch: {
    value(newValue) {
      this.name = newValue
    }
  },
  async created() {},
  methods: {
    handleSelect(value) {
      this.$emit('change', value.productId + '+' + value.value)
    },
    async querySearchAsync(queryString, cb) {
      let data = []

      if (queryString) {
        this.$emit('updateQuery', queryString)
      }

      data = await this.searchFun()
      data = data.filter(item => ~item.value.indexOf(queryString))
      cb(
        data.map(item => ({
          value: item.label,
          productId: item.productId
        }))
      )
    }
  }
}
</script>

<style></style>
