<template>
  <el-popper class="autocomplete-box" ref="popperMain" :visible="visible" placement="bottom-left"  :class="{'fbg-select': true}">
    <div @mouseenter="isOverInput = true" @mouseleave="isOverInput = false" style="height: 100%">
      <el-input v-model="text" @keydown.down.prevent="handleDownChoose" @keyup.enter.prevent="handleEnter" @keydown.up.prevent="handleUpChoose" v-bind="$attrs" @input.native="handleChange"  @click="handleClick" @clear="clearData"/>
    </div>
    <div slot="popup" @keydown.down.prevent="handleDownChoose" @keyup.enter.prevent="handleEnter" @keydown.up.prevent="handleUpChoose">
      <ul class="autocomplete-list">
        <li v-for="(item, index) in data" class="autocomplete-item"  :class="{selected: index === hoverIndex}" :key="index" @click="handleSelected(item)">{{getValue(item)}}</li>
      </ul>
    </div>
  </el-popper>
</template>
<script>
import Popper from '../popper/index.vue';
import Input from '../input';
export default {
  components: {
    'el-input': Input,
    'el-popper': Popper
  },
  props: {
    fetchSuggestions: {
      type: Function,
      required: true,
      default: () => {}
    },
    value: {
      type: String,
      defaut: ''
    },
    duration: {
      type: Number,
      default: 10
    }
  },
  data() {
    return {
      visible: false,
      isOverInput: false,
      text: '',
      hoverIndex: 0,
      openStatus: false,
      timer: null,
      data: []
    };
  },
  computed: {
    count() {
      return this.data.length;
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(value) {
        this.text = value;
      }
    }
  },
  // test
  mounted() {
    document.addEventListener('click', ()=>{
      if (!this.openStatus) {
        this.visible = false;
      }
      this.openStatus = false;
    });
  },
  methods: {
    clearData(){
      this.$emit('input', '')
    },
    getValue(item) {
      return typeof item === 'string' ? item : item.value;
    },
    selected(item) {
      const value = this.getValue(item);
      this.text = value;
      this.$emit('input', value);
      this.$emit('select', item);
      let timer = setTimeout(() => {
        this.visible = false;
        clearTimeout(timer);
        timer = null;
      }, 0);
    },
    handleEnter() {
      const item = this.data[this.hoverIndex];
      this.selected(item);
    },
    handleSelected(item) {
      this.selected(item);
    },
    handleChange(e, inputValue) {
      const value = e && e.target ? e.target.value : inputValue;
      if (this.timer) {
        return false;
      }
      this.timer = setTimeout(async () => {
        this.data = []
        this.data = await this.fetchSuggestions(value);
        if (!this.data.length) {
          this.visible = false;
        } else {
          this.visible = true;
        }
        clearTimeout(this.timer);
        this.timer = null;
      }, this.duration);
    },
    handleDownChoose() {
      this.hoverIndex++;
      if (this.hoverIndex >= this.count) {
          this.hoverIndex = 0;
      }
    },
    handleUpChoose() {
      this.hoverIndex--;
      if (this.hoverIndex < 0) {
          this.hoverIndex = this.count - 1;
      }
    },
    handleClick() {
      this.openStatus = true;
      this.handleChange({}, this.text);
      // if (this.data.length) {
      //   this.visible = true;
      // }
    }
  }
}
</script>
<style lang="scss" scoped>
.autocomplete {
  &-list {
    height: 300px;
    width: 100%;
    padding: 5px 0px;
    overflow: scroll;
    background-color: #fff;
  }
  &-item {
    padding: 5px 10px;
    &:hover {
      background-color: #F5F6F7;
    }
  }
  &-item.selected {
    background-color: #F5F6F7;
  }
}
</style>
