<template>
  <div
    class="search-select"
    @keyup.up.prevent="navigateOptions($event, 'prev')"
    @keyup.down.prevent="navigateOptions($event, 'next')"
    @keyup.enter.prevent="selectOption"
  >
    <el-input
      ref="input"
      v-model="content"
      class="search-select__input"
      :placeholder="placeholder"
      @input="handleInputChange"
      @focus="handleFocus"
      @blur="handleBlur"
    />
    <div
      v-if="visible && value !== ''"
      class="select-down"
    >
      <div
        v-for="(item, index) in list"
        :key="getKey(item, index)"
        :class="['select-down__item', {'select-down__item--active': currentId === index}]"
        @mouseover="currentId = index"
        @click="handleSelect(item)"
      >
        <div
          v-for="(showItem, index) in showList"
          :key="getKey(showItem, index)"
          :style="`flex: ${showItem.flex}`"
          :class="`select-down__box select-down__${showItem.name}`"
        >
          <span>{{ item[showItem.name] || '--' }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SearchSelect',
  props: {
    value: {
      default: '',
      type: String,
    },
    placeholder: {
      default: '请输入',
      type: String,
    },
    list: {
      default: () => [],
      type: Array,
    },
    showList: {
      default: () => [],
      type: Array,
    }
  },
  data() {
    return {
      content: '',
      visible: false,
      currentId: 0
    }
  },
  watch: {
    value(val) {
      this.content = val
    }
  },
  methods: {
    handleFocus() {
      this.visible = true
      this.$emit('input', this.content)
    },
    handleInputChange(params) {
      this.$emit('update:value', params)
      this.$emit('input', params)
    },
    navigateOptions(e, params) {
      e.target.selectionStart = this.content.length
      if (params === 'next') this.currentId = this.currentId === this.list.length - 1 ? 0 : this.currentId + 1
      if (params === 'prev') this.currentId = this.currentId === 0 ? this.list.length - 1 : this.currentId - 1
    },
    selectOption() {
      this.visible = false
      this.$refs.input.blur()
      this.$emit('select', this.list[this.currentId])
    },
    handleBlur() {
      const timer = setTimeout(() => {
        this.visible = false
        clearTimeout(timer)
      }, 300)
    },
    handleSelect(item) {
      this.$emit('select', item)
    },
    getKey (item, index) {
      return btoa(escape(`${item}_${index}`))
    }
  },
};
</script>

<style lang="less">
.search-select{
  position: relative;
  width: 100%;

  &__input{
    width: 100%;
  }
}

.select-down{
    width: 100%;
    position: absolute;
    z-index: 100;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    border-radius: 4px;
    border: 0 solid #d0d0d1;
    background-color: #fff;
    overflow: hidden;
    margin-top: 10px;

    &__item{
      height: 30px;
      line-height: 30px;
      display: flex;
      justify-content: space-between;
      text-align: center;
      box-sizing: border-box;
      padding: 0 15px;

      &--active{
        background-color: #eee;
      }
    }

    &__box{
      text-align: center;
      overflow: hidden;

      &:first-of-type{
        text-align: left;
      }
    }
  }
</style>
