<template>
  <div>
    <!--<Dropdown trigger="click" @on-click="_dropDown" style="width:100%;"-->
    <!--placement="bottom">-->
    <!--<Input :name="name" v-model="value"-->
    <!--:placeholder="placeholder"-->
    <!--icon="ios-search"-->
    <!--@on-change="_query"-->
    <!--@on-blur="_inputBlur"-->
    <!--@on-focus="_inputFocus"-->
    <!--style="width:100%"-->
    <!--:class="{'iview-input-error':showError === ''}"/>-->
    <!--<DropdownMenu slot="list" style="max-height: 200px;overflow: auto">-->
    <!--<DropdownItem v-for="(item,index) in downData" :key="index" :name="item">{{showKey?item[showKey]:item}}-->
    <!--</DropdownItem>-->
    <!--</DropdownMenu>-->
    <!--</Dropdown>-->

    <el-dropdown
      @command="_dropDown"
      trigger="click"
      size="small"
      placement="bottom-start"
      style="width:100%;"
      class="dropdownBox"
    >
      <Input
        v-model="dataValue"
        :name="name"
        :placeholder="placeholder"
        :class="{'iview-input-error':showError === ''}"
        @on-change="_query"
        @on-blur="_inputBlur"
        @on-focus="_inputFocus"
        :maxlength="maxlength?maxlength:10000"
        icon="ios-search"
        style="width:100%"
      />
      <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',
  //   'placeholder',
  //   'downData',
  //   'value',
  //   'showError',
  //   'blur',
  //   'focus',
  //   'handleObj'
  // ],
  props: {
    name: null,
    showKey: null,
    placeholder: null,
    downData: null,
    value: null,
    // 当此值为空时，显示红框
    showError: null,
    blur: null,
    focus: null,
    handleObj: null,
    maxlength: null
  },
  data() {
    return {
      selectObj: {},
      // value: null
      dataValue: this.value,
      dataHandObj: this.handleObj
      // isFocus: false
    }
  },
  watch: {
    value: function(newVal, oldVal) {
      this.dataValue = newVal
    }
  },
  mounted() {},
  methods: {
    // 选择
    _dropDown(data) {
      this.$emit('on-result-change', 'select', data, this.dataHandObj)
      if (this.showKey) {
        this.dataValue = data[this.showKey]
      } else {
        this.dataValue = data
      }
      this.selectObj = data
      // this.isFocus = false;
    },
    // 查询
    _query() {
      if (this.showKey) {
        const obj = {}
        obj[this.showKey] = this.dataValue
        this.$emit('on-result-change', 'query', obj, this.dataHandObj)
      } else {
        this.$emit(
          'on-result-change',
          'query',
          this.dataValue,
          this.dataHandObj
        )
        // console.log(this.dataValue)
      }
    },
    _inputBlur() {
      if (this.dataValue && this.blur !== undefined) {
        // 失去焦点有值时触发
        this.$emit('on-result-change', 'blur', '', this.dataHandObj)
      }
    },
    // 聚焦
    _inputFocus() {
      // console.log('下拉选项', this.downData, this.showKey)
      // this.isFocus = true;
      if (this.focus !== undefined) {
        this.$emit('on-result-change', 'focus', '', this.dataHandObj)
      }
    }
  }
}
</script>
<style>
/*.ivu-modal-mask {*/
/*  z-index: 1000 !important;*/
/*}*/
/*.ivu-modal-wrap {*/
/*  z-index: 1000 !important;*/
/*}*/
.iview-input-error .ivu-input {
  border: 1px solid #eb6877 !important;
}
/*.el-dropdown-menu__item {*/
/*  z-index: 3000 !important;*/
/*  max-width: 400px !important;*/
/*}*/
.el-dropdown-menu {
  z-index: 2147483647 !important;
}
.el-select-dropdown {
  z-index: 2147483647 !important;
}
.el-dropdown-menu__item {
  max-width: 400px !important;
}
</style>
