<template>
    <el-input :disabled='disabled' v-if='!option.length'  :placeholder="placeholder" style="width:100%" v-model='state'></el-input>
  <el-autocomplete
    v-else
    popper-class="mt-autocomplete"
    style="width:100%"
    v-model="state"
    :disabled='disabled'
    ref = 'autocomplete'
    :fetch-suggestions="querySearch"
    :placeholder="placeholder"
    @select="handleSelect">
    <template slot-scope="{ item }" v-if='children'>
      <div @click.stop='handleSelect(item)'>
        <slot v-bind:data = 'item'></slot>
      </div>
    </template>
  </el-autocomplete>
</template>
<script>
    export default {
      data () {
        return {
          restaurants: [],
          state: '',
          children: false
        }
      },
      props: {
        placeholder: {
          default: '请输入内容',
          type: String
        },
        option: {
          default: [],
          type: Array
        },
        value: {
          type: [String, Number]
        },
        disabled: {
          type: Boolean,
          default: false
        }
      },
      watch: {
        value: {
          handler (v) {
            this.state = v
          },
          immediate: true
        },
        state (v) {
          clearTimeout(this.time)
          this.$emit('input', v)
          if (this.onselect) {
            this.onselect = false
          } else {
            this.time = setTimeout(() => {
              this.$emit('onInput')
            }, 300)
          }
        },
        option (v) {
          this.$nextTick(() => {
            if (this.$refs.autocomplete) {
              this.$refs.autocomplete.$el.getElementsByTagName('input')[0].blur()
              if (!this.onselect) {
                this.$refs.autocomplete.$el.getElementsByTagName('input')[0].focus()
              }
            }
          })
        }
      },
      methods: {
        querySearch (queryString, cb) {
          var restaurants = this.option
          // var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      // 调用 callback 返回建议列表的数据

          // this.$emit('onInput')
          cb(restaurants)
        },
        createFilter (queryString) {
          return (restaurant) => {
            return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
          }
        },
        handleSelect (item) {
          clearTimeout(this.time2)
          this.onselect = true
          this.time2 = setTimeout(() => {
            if (this.children) {
              this.state = item.label
            } else {
              this.state = item.value
            }
            this.$emit('select', item)
          }, 50)
        },
        handleIconClick (ev) {
        },
        pupUpShow () {
          this.$refs.autocomplete.$el.getElementsByTagName('input')[0].input()
        }
      },
      mounted () {
        this.children = typeof this.$scopedSlots.default === 'function'
      }
    }
  </script>
<style lang='less'>
    .mt-autocomplete {
     .popper__arrow{
       display: none
     }
     &.el-popper[x-placement^=bottom] {
          margin-top: 5px;
      }
    }
    </style>
