<template>
  <div v-if="tasks&&tasks.length>0">
    <draggable
      class="dragArea"
      tag="div"
      v-bind="dragOptions"
      :list="tasks"
      :group="{ name: 'g1' }"
      @end="end"
    >
      <template v-for="(el,index) in tasks">
        <div
          draggable=".item"
          class="list-group-item"
          :class="el.children&&el.children.length==1&&!el.children[0].name?'nested-2':'nested-1'"
          v-if="el.name"
          :key="index"
        >
          <div class="flexbox name">
            <span class="ellipsis hidden font12" style="width:calc(100% - 16px)">{{ el.name }}</span>
            <div style="margin-left:auto" @click="deleteItem(el,index)">
              <!-- <span class="iconfont icon-Group-13 pdr5"></span> -->
              <span class="iconfont icon-Group-17" title="删除"></span>
            </div>
          </div>
          <biTreeDraggable
            :tasks="el.children"
            @dragEndTree="$emit('dragEndTree', tasks)"
            @delTree="(e) => $emit('delTree',  {el:e.el,tasks:tasks})"
          ></biTreeDraggable>
        </div>
      </template>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  name: 'biTreeDraggable',
  components: {
    draggable
  },
  computed: {
    dragOptions() {
      return {
        group: 'nested',
        ghostClass: 'ghost',
        animation: 150,
        fallbackOnBody: true,
        swapThreshold: 0.65
      }
    }
  },
  props: {
    tasks: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      el: {}
    }
  },
  methods: {
    end() {
      this.$emit('dragEndTree', this.tasks)
    },
    deleteItem(el, index) {
      this.tasks.splice(index, 1)
      this.el = el
      this.$emit('delTree', { tasks: this.tasks, el: el })
    }
  }
}
</script>
<style scoped lang="scss">
.dragArea {
  min-height: 50px;
  // outline: 1px dashed;
}
.list-group {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
}

.list-group-item {
  margin-top: 5px;
  position: relative;
  display: block;
  padding: 5px;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
  cursor: move;
}
.nested-1 {
  background-color: #e6e6e6;
}

.nested-2 {
  background-color: #cccccc;
}
.nested-3 {
  background-color: #b3b3b3;
}
.name {
  padding-bottom: 3px;
  line-height: 1;
  align-items: center;
  .iconfont {
    // color: var(--button_color);
    cursor: pointer;
    &:hover {
      color: var(--button_color);
    }
  }
}
</style>