<!--
 * @Date: 2022-06-01 15:23:26
 * @LastEditTime: 2022-07-12 14:31:41
 * @LastEditors: Heloise
 * @FilePath: /element/packages/dropdown/src/dropdown-list.vue
-->
<template>
  <transition name="el-zoom-in-top" @after-leave="doDestroy">
    <ul class="el-dropdown-menu el-popper" v-show="showPopper">
      <li class="el-dropdown-menu__search">
        <el-input
          size="small"
          v-if="filterable"
          v-model="dropdownSearch"
          placeholder="搜索"
          :validate-event="false"
          clearable
        >
          <i slot="prefix" class="el-input__icon bi-iconfont-search"></i>
        </el-input>
      </li>
      <!-- LIST -->
      <li
        class="el-dropdown-menu__li"
        :class="{
          'is-disabled': item.disabled,
          'el-dropdown-menu__li--divided': item.divided,
          'is-selected': defaultvalue === item.name,
        }"
        v-for="item in list"
        @click="handleClick(item)"
        :aria-disabled="disabled"
        :tabindex="disabled ? null : -1"
      >
        <slot></slot>
        {{ item.name }}
        <i
          slot="prefix"
          class="bi-iconfont-check"
          v-show="defaultvalue === item.name"
        ></i>
      </li>
      <!-- LIST-END -->
    </ul>
  </transition>
</template>
<script>
import Popper from 'bi-element/src/utils/vue-popper';
import ElInput from 'bi-element/packages/input';
import Emitter from 'bi-element/src/mixins/emitter';

export default {
  name: 'ElDropdownList',

  componentName: 'ElDropdownList',

  mixins: [Popper, Emitter],

  props: {
    visibleArrow: {
      type: Boolean,
      default: true
    },
    arrowOffset: {
      type: Number,
      default: 0
    },
    filterable: {
      type: Boolean,
      default: false
    },
    icon: {
      type: Boolean,
      default: false
    },
    dropdownList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    disabled: {
      type: Boolean,
      default: false
    },
    value: String
  },

  components: {
    ElInput
  },

  data() {
    return {
      size: this.dropdown.dropdownSize,
      dropdownSearch: '' // 过滤列表值
    };
  },

  inject: ['dropdown'],

  created() {
    this.$on('updatePopper', () => {
      if (this.showPopper) this.updatePopper();
    });
    this.$on('visible', (val) => {
      this.showPopper = val;
    });
    this.defaultvalue = this.value;
  },

  mounted() {
    this.dropdown.popperElm = this.popperElm = this.$el;
    this.referenceElm = this.dropdown.$el;
    // compatible with 2.6 new v-slot syntax
    // issue link https://github.com/ElemeFE/element/issues/14345
    this.dropdown.initDomOperation();
  },

  watch: {
    dropdownSearch: {
      immediate: true,
      handler(value) {
        this.list = value
          ? this.dropdownList.filter((item) => item.name === value)
          : this.dropdownList;
      }
    },
    'dropdown.placement': {
      immediate: true,
      handler(val) {
        this.currentPlacement = val;
      }
    }
  },
  methods: {
    handleClick(e) {
      this.defaultvalue = e.name;
      this.dispatch('ElDropdown', 'menu-item-click', [this.defaultvalue, this]);
    }
  }
};
</script>
