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

<script>
import knowledgeBaseApi from '@/api/assetaudit/knowledgeBaseApi'
export default {
  name: 'assetCodesData',
  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 50
      }
    },
    // 显示个数
    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
      }
    }
  },
  mounted () {
    this.restaurants = this.loadAll()
  },
  computed: {
    triggerOnFocus () {
      return false
    },
    modelValue: {
      get: function () {
        return this.value
      },
      set: function (value) {
        this.$emit('input', value)
      }
    }
  },
  methods: {
    querySearchAsync (queryString, cb) {
      this.loadCount1(queryString, cb)
    },
    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) {
      let queryArray = []
      queryArray.push(queryString)
      if (cb) {
        let restaurants = this.restaurants
        let results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants
        cb(results)
      }
      queryArray = []
    },
    loadAll () {
      knowledgeBaseApi.knowledgeBaseList.getSelect({ 'type': '06' }).then(res => {
        if (res.data) {
          this.sourceData = res.data
          res.data.forEach(it => {
            this.restaurants.push({ value: it.name })
          })
        }
      })
      return this.restaurants
    }
  }
  // watch: {
  //   modelValue (val, old) {
  //     var regex = /[~!@#$%^&()_+/！@#￥?%……&、（）——‘；;'。.><”"“"\\[\],]/
  //     if (regex.test(val)) {
  //       old = old.replace(regex, '')
  //       this.modelValue = old
  //     }
  //   }
  // }
}
</script>

<style scoped>
</style>
