<template>
  <draggable class="dragArea" tag="ul" :list="tasks" :group="{ name: 'g1' }" @add="add" @update="add">
    <li v-for="(el,index) in tasks" :key="el.id" :class="{isActive:el.isActive}">
      <div @click="clickItem(el,index)" :class="{isLayer:!el.isGroup,treeRow:true}"
           @contextmenu.prevent="contextMenu(el)">
        <i v-if="el.isGroup" :class="['iconfont-map',el.unFold?'map-icon-xiajiantou':'map-icon-sanjiaoright']"></i>
        <i :class="['iconfont-map',el.isGroup?'map-icon-24gl-folderOpen':'map-icon-24gl-fileText']"></i>
        <template v-if="!el.isEdit">
          <span @dblclick="dbClick(index,el)">{{ el.label }}</span>
          <div v-for="(item,index) in options" class="stateArea">
            <i :class="item.iconClass" v-show="el[item.type]" :key="index" @click="setState(el,item.type)"></i>
          </div>

        </template>
        <input v-model="el.label"
               autofocus v-else="el.isEdit"
               @blur.stop="handleInput(index,el)"
               @keyup.enter="handleInput(index,el)"/>
      </div>

      <nested-draggable v-if="el.unFold&&el.isGroup&&el.children" :tasks="el.children" @clickNode="childClick"
                        :options="options"
                        @setState="setStateChildren"
                        @contextmenu="childContextMenu(el)"/>
    </li>
  </draggable>
</template>
<script>
import draggable from "vuedraggable";


export default {
  props: {
    tasks: {
      required: true,
      type: Array
    },
    //右侧图表与配置项
    options: {
      type: Array,
      default: () => {
        return []
      },
      required: false
    }
  },
  components: {
    draggable,
  },
  name: "nested-draggable",
  data() {
    return {}
  },
  mounted() {

  },
  methods: {
    add(event) {
      console.log(event)
    },
    update(event) {
      console.log(event)
    },
    handleInput(index, el) {
      if (el.isEdit) {
        this.$set(this.tasks[index], 'isEdit', false)
        if (el.label) {
          this.$set(this.tasks[index], 'label', el.label);
        }
      }
    },
    dbClick(index, el) {
      if (!el.isEdit) {
        this.$set(this.tasks[index], 'isEdit', true)
      }
    },
    clickItem(el, index) {
      if (el.isGroup) {
        el.unFold = !el.unFold
      }
      let item = JSON.parse(JSON.stringify(this.tasks[index]));
      item.isActive = !item.isActive

      if (item.isActive) {
        this.$emit('clickNode', item)
      }
      this.$set(this.tasks, index, item)


    },

    childClick(val) {
      this.$emit('clickNode', val)
    },
    contextMenu(el) {
      this.$emit('contextmenu', el)
    },
    childContextMenu(el) {
      this.$emit('contextmenu', el)
    },
    setState(el, type) {
      this.$emit('setState', el, type)
    },
    setStateChildren(el, type) {
      this.$emit('setState', el, type)
    }
  }
};
</script>
<style scoped lang="less">
.dragArea {
  min-height: 5px;
  //outline: 1px dashed;
  outline: none;

  .dragArea {
    padding-left: 16px;
  }
}

li {
  color: white;
  list-style-type: none;
  cursor: pointer;
  text-align: left;


}

.isActive {
  background-color: #3b4855;
}

.isLayer {
  padding-left: 16px;
}

.treeRow {
  height: 25px;
  padding-right: 5px;

  &:hover {
    background-color: #3b4855;
  }
}

.stateArea {
  float: right;
  color: #999999;
}
</style>
