<template>
  <div>
    <el-popover
      placement="bottom"
      :width="width"
      trigger="click"
      popper-class="popoverInputClass"
      v-model="popoverShow"
    >
      <ul class="el-select-dropdown__list">
        <li
          class="el-select-dropdown__item"
          v-for="(item, idx) in liData"
          :key="idx"
          @click="selectItem(item)"
        >
          <span>{{ item }}</span>
        </li>
      </ul>
      <c-input v-model="model" slot="reference">
        <template v-slot:suffix>
          <i
            class="el-icon-arrow-down"
            v-if="!popoverShow"
            @click="popoverShow = false"
          ></i>
          <i class="el-icon-arrow-up" v-else @click="popoverShow = true"></i>
        </template>
      </c-input>
    </el-popover>
  </div>
</template>

<script>
export default {
  data() {
    return {
      popoverShow: false,
      width: null,
    };
  },
  props: {
    value: {
      type: [String, Number],
      default: undefined,
    },
    liData: {
      type: Array,
      default: [],
    },
  },
  computed: {
    model: {
      get() {
        return this.value;
      },
      set(newVal) {
        this.$emit("input", newVal);
      },
    },
  },
  mounted() {
    this.width = this.$el.clientWidth;
  },
  methods: {
    selectItem(val) {
       this.popoverShow = false;
       this.model = val;
    },
  },
};
</script>

<style>
.el-popper.popoverInputClass {
  margin: 12px 0 5px;
  padding: 0;
}
</style>

<style scoped>
.el-select-dropdown__list {
  list-style: none;
  padding: 6px 0;
  margin: 0;
  box-sizing: border-box;
  padding-inline-start: 0;
}
.el-select-dropdown__item {
  font-size: 14px;
  padding: 0 20px;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #606266;
  height: 34px;
  line-height: 34px;
  box-sizing: border-box;
  cursor: pointer;
}
</style>