<template>
  <el-card>
    <div class="row">
      <div class="col-6">
        <draggable class="list-group" tag="ul" v-model="routeList" v-bind="dragOptions" @start="dragStart" @end="dragEnd">
          <transition-group type="transition" :name="!drag ? 'flip-list' : null">
            <li class="list-group-item" v-for="item in routeList" :key="item.routePriority">
              <i :class="item.fixed ? 'fa fa-anchor' : 'glyphicon glyphicon-pushpin'
                " @click="item.fixed = !item.fixed" aria-hidden="true"></i>
              {{ item.route }}
            </li>
          </transition-group>
        </draggable>
      </div>
    </div>
  </el-card>
</template>

<script>
import draggable from "vuedraggable";
export default {
  name: "YlDraggable",
  props: {
    routeList: {
      // 航线
      type: Array,
      default: () => [],
    },
    dragOptions: {
      // 拖拽配置
      type: Object,
      default: () => {
        return {
          animation: 200,
          group: "description",
          disabled: false,
          ghostClass: "ghost"
        }
      },
    },
  },
  components: {
    draggable
  },
  data() {
    return {};
  },
  created() {},
  methods: {
    // 排序
    sort() {
      this.routeList = this.routeList.sort((a, b) => a.routePriority - b.routePriority);
    },
    // 开始拖拽
    dragStart() {

    },
    // 结束拖拽
    dragEnd() {
      this.$emit("dragEnd", this.routeList);
    },
  },
};
</script>

<style lang="scss">
.el-card__body {
  padding: 15px 10px 0px 10px !important;
}

.list-group {
  min-height: 20px;
  max-height: 150px;
  overflow: auto;
  margin-top: 0;
  padding: 0;

  &::-webkit-scrollbar {
    width: 7px;
    height: 7px;
  }

  &::-webkit-scrollbar-track {
    background-color: #fff;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 20px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: #409eff;
  }

  &::-webkit-scrollbar-track-piece {
    background: #F2F6FC;
  }
}

.list-group-item {
  cursor: move;
  padding: 5px 0px;
}

.list-group-item i {
  cursor: pointer;
}
</style>