<!--付款确认书编号-lrj-->
<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"
                     class="autocompleteClass"
                     @select="handleSelect">
    </el-autocomplete>
  </div>
</template>

<script>
import feedbackMaterialApi from '@/api/assetaudit/feedbackMaterial/feedbackMaterialApi'
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 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
    },
    api () {
      return feedbackMaterialApi.assetbycode
    },
    modelValue: {
      get: function () {
        return this.value
      },
      set: function (value) {
        value = value.replace(/[^\u4e00-\u9fa5a-zA-Z0-9\w]/g, '')
        this.$emit('input', value)
      }
    }
  },
  methods: {
    querySearchAsync (queryString, cb) {
      this.loadCount1(queryString, cb)
    },
    // 下拉操作
    handleSelect (item) {
      this.$set(this, 'modelValue', item.value)
      if (this.name) {
        var filter = this.sourceData.filter(it => it.assetInfoId === 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 = []
      let queryArray = []
      queryString = queryString.replace(/[^\u4e00-\u9fa5a-zA-Z0-9\w]/g, '')
      queryArray.push(queryString)
      this.api.create(queryArray).then(res => {
        if (res.data) {
          this.sourceData = res.data
          res.data.forEach(it => {
            this.restaurants.push({ value: it.assetCode, keyId: it.assetInfoId })
          })
          this.$store.commit('payCodeDropdownOption', res.data) // 存入vuex
        }
        if (cb) {
          let restaurants = this.restaurants
          let results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants
          cb(results)
        }
        queryArray = []
      })
    }
  }
}
</script>
