<!--
 * @Description: 
 * @Autor: Heloise
 * @Date: 2022-07-11 10:15:15
 * @LastEditors: Heloise
 * @LastEditTime: 2022-09-13 16:16:33
-->
<template>
  <div class="el-drag-list" :class="[{ 'is-collapse': collapse }]">
    <ul ref="elDragUl" class="el-drag-list__ul">
      <template v-if="!collapse"
        ><li
          v-for="(item, index) in list"
          :key="item.key"
          :class="[
            {
              'is-hover': hoverIndex === index || activeIndex === index,
            },
            { 'is-drag': item.isDrag },
            { 'is-choosen': item.key === selectedVal },
          ]"
          @mouseenter="hoverIndex = index"
          @mouseleave="hoverIndex = -1"
          v-clickoutside="onClickOutside"
        >
          <i
            v-if="
              activeIndex === index || (item.isDrag && hoverIndex === index)
            "
            :class="['el-drag-list__i', 'bi-iconfont-drag']"
          ></i>
          <template v-else>
            <div
              v-if="item.colorKey"
              class="el-drag-list__i el-drag-list__block"
              :class="[`el-drag-list--normal-${item.colorKey}`]"
            >
              <div class="block"></div>
            </div>
            <i v-if="item.icon" :class="['el-drag-list__i', item.icon]"></i>
          </template>
          <el-text-tooltip
            :content="item.value"
            :width="item.icon ? 'calc(100% - 12px)' : 'calc(100% - 10px)'"
            :row="1"
            @click.native="getVal(item)"
          ></el-text-tooltip>
          <el-dropdown
            v-show="
              activeIndex === index ||
              (showBtns && item.isDrag && hoverIndex === index)
            "
            placement="bottom"
            trigger="click"
          >
            <span class="el-dropdown-link">
              <i
                @click="clickMore(index)"
                class="el-drag-list__more bi-iconfont-more"
                :class="[
                  { 'el-drag-list__more-active': activeIndex === index },
                ]"
              ></i>
            </span>
            <el-dropdown-menu slot="dropdown" :visible-arrow="false">
              <slot :item="item"></slot>
            </el-dropdown-menu>
          </el-dropdown>
          <span
            v-show="
              !(
                activeIndex === index ||
                (showBtns && item.isDrag && hoverIndex === index)
              )
            "
            >{{ item.count }}</span
          >
        </li>
      </template>
      <template v-else>
        <li
          v-for="item in list"
          :key="item.key"
          :class="{ 'is-choosen': item.key === selectedVal }"
        >
          <el-tooltip
            class="item"
            effect="dark"
            :content="item.value"
            placement="right"
          >
            <div
              class="el-drag-list__block"
              :class="[`el-drag-list--normal-${item.colorKey}`]"
            >
              <div class="block"></div>
            </div>
          </el-tooltip>
        </li>
      </template>
    </ul>
  </div>
</template>

<script>
import Sortable from 'sortablejs';
import Clickoutside from 'bi-element/src/utils/clickoutside';
export default {
  name: 'ElDragList',
  props: {
    value: [String, Number],
    dragList: {
      type: Array,
      default() {
        return [];
      }
    },
    showBtns: {
      type: Boolean,
      default: false
    },
    collapse: {
      type: Boolean,
      default: false
    }
  },
  directives: { Clickoutside },
  data() {
    return {
      activeIndex: -1,
      hoverIndex: -1,
      list: []
    };
  },
  watch: {
    list: {
      handler: function(newVal) {
        this.$emit('getListVal', newVal);
      },
      deep: true
    }
  },
  computed: {
    selectedVal: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit('getVal', value);
      }
    }
  },
  created() {
    this.list = this.dragList;
  },
  mounted() {
    let dom = this.$refs.elDragUl;
    Sortable.create(dom, {
      draggable: '.is-drag',
      sort: true,
      animation: 150,
      forceFallback: true,
      dragClass: 'el-drag-list__drag',
      onEnd: (evt) => {
        this.list.splice(evt.newIndex, 0, this.list.splice(evt.oldIndex, 1)[0]);
      }
    });
  },
  methods: {
    clickMore(index) {
      this.activeIndex = index;
    },
    getVal(key) {
      this.selectedVal = key;
    },
    onClickOutside() {
      this.activeIndex = -1;
    }
  }
};
</script>
