<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="flip-list">
            <li
              class="list-group-item"
              v-for="(item, i) in routeList"
              :key="item.route"
            >
              <i
                :class="
                  item.fixed ? 'fa fa-anchor' : 'glyphicon glyphicon-pushpin'
                "
                @click="item.fixed = !item.fixed"
                aria-hidden="true"
              ></i>
              <span v-if="item.isEtesRoute == 'Y' || item.etesRule == 'Y'"
                ><i class="route-count">{{ ++i }}</i
                >{{ item.route }}【ET86航线】</span
              >
              <span v-else
                ><i class="route-count">{{ ++i }}</i
                >{{ item.route }}</span
              >
            </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;
}
.route-count {
  font-family: initial;
  font-style: inherit;
  margin-right: 15px;
}
</style>