<template>
  <div class="customTree">
    <nested-draggable :tasks="listData" @clickNode="clickNode" @contextmenu="contextmenu" :options="options" @setState="setState"/>
  </div>
</template>

<script>

import nestedDraggable from "./nested";
import {v4 as uuidv4} from 'uuid'

export default {
  name: "NewTree",
  components: {
    nestedDraggable
  },

  props: {
    value: {
      required: false,
      type: Array,
      default: () => {
        return [{
          label: "节点1", value: 1, isGroup: true, unFold: false,
          children: [
            {label: "节点33", value: 33}
          ]
        },
          {label: "节点2", value: 2,delete:true},
          {label: "节点3", value: 3},]
      }
    },
    //右侧图表与配置项
    options: {
      type:Array,
      default:()=>{
        return[
          {
            type:"delete",
            iconClass:"iconfont-map map-icon-shanchu"
          }
        ]
      },
      required: false
    }
  },

  data() {
    return {
      drag: false,
      listData: []
    }
  },
  mounted() {
    this.setIdAndCheckData(this.value)
    this.listData = this.value;
  },
  methods: {
    setIdAndCheckData(dataArr) {
      for (let i = 0; i < dataArr.length; i++) {
        let item = dataArr[i];
        item.isActive = false;
        //添加id
        if (!item.id) {
          item.id = uuidv4();
        }

        if (item.isGroup) {
          //默认展开
          item.unFold=true

          if (!item.children) {
            item.children = [];//初始化
          } else if (item.children.length > 0) {
            //递归赋值
            this.setIdAndCheckData(item.children)
          }
        }
      }
    },
    //添加文件夹
    addFold(){
      this.listData.push({
        label: "新建分组", id: uuidv4(), isGroup: true, unFold: true,isActive:false,
        children: []
      })
    },
    //新建节点
    addNode(){
      this.listData.push({
        label: "新建分组", id: uuidv4(), isGroup: false, isActive:false
      })
    },
    //删除激活项
    deleteSelect(){
      this.listData=this._getInActive(this.listData)
    },

    getSelect(){
      return this._getSelect(this.listData)
    },
    //获取当前激活的选项
    _getSelect(arr){
      let data =JSON.parse(JSON.stringify(arr))
      let target=[];
      for (let i = this.data.length-1; i >=0 ; i--) {
        if(data[i].isActive){
          target.push(data[i])
        }else if(data[i].isGroup){
          target.concat(this._getSelect(data[i].children));
        }
      }
      return target;
    },

    _getInActive(arr){
      let data =JSON.parse(JSON.stringify(arr))
      for (let i = this.data.length-1; i >=0 ; i--) {
        if(data[i].isActive){
          data.splice(i,1)
        }else if(data[i].isGroup){
          data[i].children=this._getInActive(data[i].children);
        }
      }
      return data
    },
    //根据id 删除
    deleteById(id){
      this.listData=this._deleteById(this.listData,id)
    },
    _deleteById(arr,id){
      let data =JSON.parse(JSON.stringify(arr))
      for (let i = this.data.length-1; i >=0 ; i--) {
        if(data[i].id===id){
          data.splice(i,1)
        }else if(data[i].isGroup){
          data[i].children=this._deleteById(data[i].children,id);
        }
      }
      return data
    },


    deleteActive(){

    },
    clickNode(item){
      this.$emit('clickNode',item)
    },
    contextmenu(val){
      this.$emit('contextmenu',val)
    },
    //点击右侧状态按钮事件
    setState(el,type){
      this.$emit('setState',el,type)
    },
  }
}
</script>

<style scoped lang="less">
.customTree {
  width: 100%;
  height: 100%;
  background-color: #242a30;
}
</style>
