<template>
  <div>
    <el-autocomplete v-model="modelValue"
                     :fetch-suggestions="querySearchAsync"
                     :maxlength="maxlength"
                     :show-word-limit="showWordLimit"
                     :placeholder="placeholder"
                     :clearable="clearable"
                     :disabled="disabled"
                     :debounce="debounce"
                     :trigger-on-focus="triggerOnFocus"
                     @input="inputChage"
                     class="autocompleteClass"
                     @select="handleSelect">
    </el-autocomplete>
  </div>
</template>

<script>
import supplierInfoManageApi from '@/api/enterpriseInfoManage/supplierInfoManageApi.js'
export default {
  name: 'enterpriseName',
  data () {
    return {
      restaurants: [],
      sourceData: []
    }
  },
  props: {
    // v-model绑定的数据
    value: {
      type: String,
      default: function () {
        return null
      }
    },
    clearable: {
      type: Boolean,
      default: () => {
        return true
      }
    },
    disabled: {
      type: Boolean,
      default: () => {
        return true
      }
    },
    debounce: {
      type: Number,
      default: function () {
        return 300
      }
    },
    // 最大输入长度
    maxlength: {
      type: Number,
      default: () => {
        return 100
      }
    },
    // 显示个数
    showWordLimit: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    // 输入框占位文本
    placeholder: {
      type: String,
      default: () => {
        return ''
      }
    },
    // tagCode
    tagCode: {
      type: String,
      default: () => {
        return null
      }
    },
    // name
    name: {
      type: String,
      default: () => {
        return null
      }
    }
  },
  computed: {
    triggerOnFocus () {
      return false
    },
    modelValue: {
      get: function () {
        return this.value
      },
      set: function (value) {
        this.$emit('input', value)
      }
    }
  },
  methods: {
    querySearchAsync (queryString, cb) {
      // console.log(queryString)
      let len = queryString.length
      if (len >= 2) {
        this.loadCount1(queryString, cb)
      } else {
        cb(null)
      }
      // var restaurants = this.restaurants
      // var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants
      // cb(results)
    },
    inputChage () {
      this.$emit('selectChanged', {}, this.name, [])
    },
    handleSelect (item) {
      this.$set(this, 'modelValue', item.value)
      if (this.name) {
        var filter = this.sourceData.filter(it => it.keyId === item.keyId)
        this.$emit('selectChanged', item, this.name, filter)
      }
    },
    createStateFilter (queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    loadCount1 (queryString, cb) {
      this.restaurants = []
      this.sourceData = []
      supplierInfoManageApi.enterpriseInfo.getEnterpriseInfo({ enterpriseName: queryString }).then(res => {
        if (res.data) {
          this.sourceData = res.data
          res.data.forEach(it => {
            this.restaurants.push({ value: it.enterpriseName, keyId: it.keyId, creditCode: it.creditCode })
          })
        }
        if (cb) {
          let restaurants = this.restaurants
          let results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants
          cb(results)
        }
      })
    }
  },
  watch: {
    // tagCode (val) {
    //   this.loadCount()
    // },
    modelValue (val, old) {
      if (!old) {
        return null
      }
      var regex = /[~!@#$%^&()_+/！@#￥?%……&、（）——‘；;'。.><”"“"\\[\],]/
      if (regex.test(val)) {
        old = old.replace(regex, '')
        this.modelValue = old
      }
    }
  }
}
</script>

<style scoped>
</style>
