<template>
  <!--  拖拽demo-->
  <transition-group name="drag"
                    class="list"
                    tag="ul"
  >
    <li
      v-for="(item, index) in sortList"
      :key="item.groupId"
    >
      <span>{{`第${index + 1}志愿:`}}</span>
      <span @dragenter="dragenter($event, index)"
            @dragover="dragover($event, index)"
            @dragstart="dragstart(index)"
            class="list-item"
            draggable>{{ item.groupName }}</span>
      <el-tag style="cursor: pointer" @click="del(index)" type="danger">删除</el-tag>
    </li>
  </transition-group>
</template>
<script>
export default {
  // props: {
  //   sortList: {
  //     type: Array,
  //     default:_ => []
  //   }
  // },
  data() {
    return {
      dragIndex: '',
      enterIndex: '',
      sortList: [],
    }
  },
  methods: {
    init(data) {
      this.sortList = data
    },
    dragstart(index) {
      this.dragIndex = index
    },
    dragenter(e, index) {
      e.preventDefault()
      // 避免源对象触发自身的dragenter事件
      if (this.dragIndex !== index) {
        const source = this.sortList[this.dragIndex]
        this.sortList.splice(this.dragIndex, 1)
        this.sortList.splice(index, 0, source)
        // 排序变化后目标对象的索引变成源对象的索引
        this.dragIndex = index
      }
    },
    shuffle() {
      this.sortList = this.$shuffle(this.sortList)
    },
    del(index) {
      this.sortList[index].selected = false
      this.sortList.splice(index,1)
    },
    dragover(e, index) {
      e.preventDefault()
    }
  }
}
</script>
<style lang="scss" scoped>
.list {
  padding-left: 0;
  list-style: none;

  .drag-move {
    transition: transform .3s;
  }
  li{
    font-size: 14px;
    margin-bottom: 6px;
  }
  .list-item {
    cursor: move;
    display:inline-block ;
    margin: 0 10px;
    width: 160px;
    background: #42b983;
    border-radius: 4px;
    font-size: 14px;
    color: #FFF;
    height: 30px;
    line-height: 30px;
    text-align: center;
  }
}
</style>
