<!--author: qiu.bl-->
<style scoped>
</style>
<template>
  <div v-if="icon" class="el-autocomplete">
    <el-autocomplete
      class="inline-input"
      v-model="state1"
      maxlength="8"
      :fetch-suggestions="querySearch"
      custom-item="my-item-zh"
      placeholder="请输入内容"
      :trigger-on-focus="keyup"
      @select="handleSelect"
      icon="close"
      :on-icon-click="handleIconClick"
    ></el-autocomplete>
  </div>
  <div v-else class="el-autocomplete">
    <el-autocomplete
      class="inline-input"
      v-model="state1"
      maxlength="8"
      :fetch-suggestions="querySearch"
      placeholder="请输入内容"
      :trigger-on-focus="keyup"
      @select="handleSelect"
      icon="close"
      :on-icon-click="handleIconClick"
    ></el-autocomplete>
  </div>
</template>
<script>
  import Vue from 'vue'
  Vue.component('my-item-zh', {
    functional: true,
    render: function (h, ctx) {
      var item = ctx.props.item
      return h('li', ctx.data, [
        h('div', { attrs: { class: 'name' } },
          [h('i', { attrs: { class: item.icon } }), '  ' + item.value]
        )])
//        h('div', { attrs: { class: 'name' } }, [item.value]),
//        h('span', { attrs: { class: 'addr' } }, [item.address])
    },
    props: {
      item: { type: Object, required: true }
    }
  })
  export default {
    props: {
      filmode: { // 过滤方式；0:代表本地过滤，1：服务器过滤
        type: Number,
        default: 0
      },
      datasource: {
        type: Array, // 数据源
        default: []
      },
      filType: { // 过滤类型；0：单列数据过滤，1：整条数据过滤
        type: Number,
        default: 1
      },
      fileName: {
        type: Array,
        default: ['value']
      },
      keyup: {
        type: Boolean,
        default: false
      },
      icon: {
        type: Boolean,
        default: false
      },
      vals: {
        type: String,
        default: ''
      }
    },
    mounted () {
      if (this.filmode === 0) {
        this.restaurants = this.datasource
      }
      this.state1 = this.vals
    },
    data () {
      return {
        restaurants: [],
        state1: '',
        isTrue: false
      }
    },
    methods: {
      querySearch (queryString, cb) {
        let restaurants = this.restaurants
        let results = []
        if (this.filType === 0) {
          results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
        } else if (this.filType === 1) {
          results = queryString ? restaurants.filter(this.createFilterLine(queryString)) : restaurants
        }
        // 调用 callback 返回建议列表的数据
        cb(results)
        if (results.length > 0) {
          this.$emit('on-change', JSON.stringify(results))
        } else {
          this.$emit('on-change', JSON.stringify([]))
        }
//        console.log('results:', results)
      }, // 查询
      createFilter (queryString) {
        return (restaurant) => {
          return (restaurant.value.indexOf(queryString.toLocaleUpperCase()) === 0)
        }
      }, // 过滤单列数据
      createFilterLine (queryString) {
        return (restaurant) => {
          this.isTrue = false
          this.tempMen(restaurant, queryString)
          return (this.isTrue === true)
        }
      }, // 过滤整条数据
      tempMen (obj, str) {
        for (let i in obj) {
          for (let j in this.fileName) {
            if (this.fileName[j] === i) {
              if (obj[i] !== undefined && obj[i].toString().toLocaleUpperCase().indexOf(str.toLocaleUpperCase()) === 0) {
                this.isTrue = true
              }
            }
          }
        }
      },
      handleSelect (item) {
        this.$emit('on-change', JSON.stringify(item))
      },
      handleIconClick () {
        this.state1 = ''
        this.$emit('on-change', JSON.stringify(this.datasource))
      }
    },
    watch: {
      isTrue (newv, oldv) {
        this.isTrue = newv
      },
      datasource (newv, oldv) {
        this.restaurants = newv
      },
      vals (newv, old) {
        this.state1 = newv
      },
      state1 (newv, old) {
        console.log('vals===state1====', newv)
        console.log('this.datasource', this.datasource)
        if (newv === '') {
          this.$emit('on-change', JSON.stringify(this.datasource))
          this.state1 = newv
        } else {
          this.state1 = newv
        }
      }
    }
  }
</script>

