<template>
  <div :class="['v-auto-complete', { showTime }]">
    <ul class="v-select-ul">
      <v-select-item
        v-for="(item, index) of options"
        :key="index"
        :option="item"
      />
      <p class="v-select-dropdown__empty" v-if="options && !options.length">
        <i :class="['loading', 'iconfont icon-loading']"></i>
      </p>
    </ul>
    <div class="v-popper__arrow" style="left: 35px;"></div>
  </div>
</template>

<script>
import vSelectItem from "../Select/components/Select-item";
import { provide, getCurrentInstance, defineComponent } from "vue";
export default defineComponent({
  name: "autocomplete",
  components: {
    vSelectItem
  },
  props: {
    options: {
      type: Array,
      default: () => {
        return [];
      }
    },
    showTime: Boolean
  },
  setup() {
    const centext = getCurrentInstance();
    const selectItemChange = option => centext.emit("change", option);
    provide("change", selectItemChange);
  }
});
</script>

<style lang='less' scoped>
@import url("../../assets/css/animation.css");
@import url("../../assets/css/scrollbar.css");
@import url("./index.less");
</style>