<template>
    <el-select ref="dragSelect" v-model="selectVal" v-bind="$attrs" class="drag-select" multiple v-on="$listeners">
      <slot />
    </el-select>
  </template>
  
  <script>
  import Sortable from 'sortablejs'
  
  export default {
    name: 'DragSelect',
    props: {
      value: {
        type: Array,
        required: true
      }
    },
    computed: {
      selectVal: {
        get() {
          return [...this.value]
        },
        set(val) {
          this.$emit('input', [...val])
        }
      }
    },
    mounted() {
      this.setSort()
    },
    methods: {
      setSort() {
        const el = this.$refs.dragSelect.$el.querySelectorAll('.el-select__tags > span')[0]
        this.sortable = Sortable.create(el, {
          ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
          setData: function(dataTransfer) {
            dataTransfer.setData('Text', '')
            // to avoid Firefox bug
            // Detail see : https://github.com/RubaXa/Sortable/issues/1012
          },
          onEnd: evt => {
            const targetRow = this.value.splice(evt.oldIndex, 1)[0]
            this.value.splice(evt.newIndex, 0, targetRow)
          }
        })
      }
    }
  }
  </script>
  
  <style scoped>
  .drag-select >>> .sortable-ghost {
    opacity: .8;
    color: #fff!important;
    background: #42b983!important;
  }
  
  .drag-select >>> .el-tag {
    cursor: pointer;
  }
  </style>