<template>
  <div>
    <el-dropdown
      trigger="click"
      size="small"
      placement="bottom-start"
      style="width:100%;"
      @command="_dropDown"
    >
      <Input
        v-model="value"
        :name="name"
        :placeholder="placeholder"
        icon="ios-search"
        style="width:100%"
        @on-change="_query"
        @on-blur="_inputBlur"
        @on-focus="_inputFocus"
      />
      <el-dropdown-menu slot="dropdown" style="max-height: 200px;overflow: auto;">
        <el-dropdown-item v-for="(item,index) in downData" :key="index" :command="item">
          {{ showKey?item[showKey]:item }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  props: [
    'name',
    'showKey',
    'value',
    'placeholder',
    'downData',
    'showError',
    'blur',
    'focus',
    'handleObj'
  ],
  data() {
    return {
      selectObj: {}
    }
  },
  methods: {
    // 选择
    _dropDown(data) {
      this.$emit('on-result-change', 'select', data, this.handleObj)
      if (this.showKey) {
        this.value = data[this.showKey]
      } else {
        this.value = data
      }
      this.selectObj = data
      // this.isFocus = false;
    },
    // 查询
    _query() {
      if (this.showKey) {
        const obj = {}
        obj[this.showKey] = this.value
        this.$emit('on-result-change', 'query', obj, this.handleObj)
      } else {
        this.$emit('on-result-change', 'query', this.value, this.handleObj)
      }
    },
    _inputBlur() {
      if (this.value && this.blur !== undefined) {
        // 失去焦点有值时触发
        this.$emit('on-result-change', 'blur', '', this.handleObj)
      }
    },
    // 聚焦
    _inputFocus() {
      // this.isFocus = true;
      if (this.focus !== undefined) {
        this.$emit('on-result-change', 'focus', '', this.handleObj)
      }
    }
  }
}
</script>
<style>
.iview-input-error .ivu-input {
  border: 1px solid #eb6877 !important;
}
.el-dropdown-menu__item {
  max-width: 400px !important;
}
</style>
