<template>
  <div>
    <Dropdown trigger="click" style="width:100%;" placement="bottom" @on-click="_dropDown">
      <Input
        v-model="value"
        :name="name"
        :placeholder="placeholder"
        icon="ios-search"
        style="width:100%"
        @on-change="_query"
        @on-focus="_inputFocus"
      />
      <DropdownMenu slot="list" style="max-height: 200px;overflow: auto">
        <DropdownItem v-for="item in downData" :key="item" :name="item">
          {{ item }}
        </DropdownItem>
      </DropdownMenu>
    </Dropdown>
  </div>
</template>

<script>
export default {
  props: {
    name: null,
    value: null,
    placeholder: null,
    downData: null,
    focus: null
  },
  data() {
    return {}
  },
  mounted() {},
  methods: {
    // 选择
    _dropDown(data) {
      this.$emit('on-result-change', 'select', data)
      this.value = data
    },
    // 查询
    _query() {
      this.$emit('on-result-change', 'query', this.value)
    },
    // 聚焦
    _inputFocus() {
      if (this.focus !== undefined) {
        this.$emit('on-result-change', 'focus')
      }
    }
  }
}
</script>
