<!--
 * @Description: 
 * @Autor: Heloise
 * @Date: 2022-05-23 16:02:49
 * @LastEditors: Heloise
 * @LastEditTime: 2022-08-17 14:24:06
-->
<template>
  <transition name="el-zoom-in-top" @after-leave="doDestroy">
    <ul
      class="el-dropdown-menu el-popper"
      :style="{ marginTop: !visibleArrow ? '6px' : '', minWidth: `${width}px` }"
      :class="[
        size && `el-dropdown-menu--${size}`,
        type && `el-dropdown-menu--${type}`,
        filterable && 'el-dropdown-menu__is-search',
        remoteFilterable && 'el-dropdown-menu__is-remote-search',
      ]"
      v-show="showPopper"
    >
      <div>
        <div v-if="filterable || remoteFilterable">
          <el-input
            class="el-dropdown-menu-input"
            slot="input"
            v-model="inputValue"
            :placeholder="placeholder"
            clearable
          >
            <i slot="prefix" class="el-input__icon bi-iconfont-search"></i>
          </el-input>
          <el-scrollbar v-if="searchOptions.length > 0">
            <el-dropdown-item
              v-for="item in searchOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
              :command="item.value"
              :class="[dropdown.value === item.value && 'selected']"
              ><slot name="option" :item="item"></slot
              ><span v-html="highlight(item.label)"></span
              ><i
                v-if="dropdown.value === item.value"
                class="bi-iconfont-check el-cascader-node__prefix"
              ></i
            ></el-dropdown-item>
          </el-scrollbar>
          <li v-else class="el-dropdown-menu-empty-text">
            <el-empty description="暂无数据"></el-empty>
          </li>
        </div>
        <slot></slot>
      </div>
    </ul>
  </transition>
</template>
<script>
import Popper from 'bi-element/src/utils/vue-popper';
import debounce from 'throttle-debounce/debounce';

export default {
  name: 'ElDropdownMenu',

  componentName: 'ElDropdownMenu',

  mixins: [Popper],

  props: {
    remoteFilterable: {
      type: Boolean,
      default: false
    },
    filterable: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: '搜索'
    },
    options: {
      type: Array,
      default: () => []
    },
    visibleArrow: {
      type: Boolean,
      default: true
    },
    arrowOffset: {
      type: Number,
      default: 0
    }
  },

  data() {
    return {
      inputValue: '',
      size: this.dropdown.dropdownSize,
      type: this.dropdown.popperType,
      width: this.dropdown.btnWidth
    };
  },

  inject: ['dropdown'],

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

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

  computed: {
    searchOptions() {
      let arr = [];
      if (this.remoteFilterable) {
        arr = this.options;
      } else {
        if (this.inputValue) {
          this.options.forEach((item) => {
            if (!item.disabled && item.label.includes(this.inputValue)) {
              arr.push(item);
            }
          });
        } else {
          arr = this.options;
        }
      }
      return arr;
    }
  },

  watch: {
    inputValue: {
      handler: debounce(300, function(val) {
        if (this.remoteFilterable) {
          this.$emit('remoteMethod', val);
        }
      }),
      immediate: true
    },
    'dropdown.placement': {
      immediate: true,
      handler(val) {
        this.currentPlacement = val;
      }
    }
  },

  methods: {
    highlight(text) {
      let value = this.inputValue;
      const reg = new RegExp(value, 'gi');
      return text.replace(reg, function($1) {
        return `<span class="el-dropdown-menu__item-highlight-text">${$1}</span>`;
      });
    }
  }
};
</script>
