<template>
  <div class="tree-panel">
    <el-tree
      ref="treeRef"
      :data="deplist"
      node-key="itemclassid"
      :current-node-key="currentKey"
      highlight-current
      default-expand-all
      :expand-on-click-node="false"
      @node-click="handleClick">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span class="icon_btn">
          <slot name="add" :data="data"></slot>
          <slot name="edit" :data="data"></slot>
          <slot name="del" :data="data"></slot>
        </span>
      </span>
    </el-tree>
  </div>
</template>

<script>


export default {
  components:{
  },
  data () {
    return {
      deplist:[],
      departmentid:0,
      currentKey:null
    }
  },
  methods:{
    async department (callback) {
      const res = await this.$api.requested({
          "id": "20220922110403",
          "version":1,
          "content": {
            "sa_brandid":0
          }
      })
      
      // // 数据格式转换成elementui-tree所需的格式
      res.data = res.data.map(item => {
        item.ttemclass.forEach(item2 => {
          item2.sa_brandid = item.sa_brandid
        })
        return {
          brandname:item.brandname,
          rowindex:item.rowindex,
          sa_brandid:item.sa_brandid,
          subdep:item.ttemclass
        }
      })
      this.editId(res.data)
      this.deplist = this.createMenu(res.data)
      callback && callback()
    },
    editId(array) {
      function _editId(id,data) {
        data.sa_brandid = id
        if(data.subdep && data.subdep.length > 0) {
          data.subdep.forEach(item => {
            _editId(id,item)
          })
        }
        
      }
      array.forEach(item => {
        _editId(item.sa_brandid,item)
      })
    },
    createMenu (array) {
      var that = this
      let arr = []
      function convertToElementTree(node) {
        // 新节点
        var elNode = {
          label: node["brandname"] || node['itemclassname'],
          parentid:node['parentid'],
          value:node['itemclassid'],
          sa_brandid:node['sa_brandid'],
          changeby:node["changeby"],
          changedate:node['changedate'],
          createby:node['createby'],
          createdate:node['createdate'],
          itemclassfullname:node['itemclassfullname'],
          itemclassfullnum:node["itemclassfullnum"],
          itemclassid:node['itemclassid'],
          itemclassname:node['itemclassname'],
          itemclassnum:node['itemclassnum'],
          children: []
        }
          
        if (node.subdep && node.subdep.length > 0) {
          // 如果存在子节点
          for (var index = 0; index < node.subdep.length; index++) {
          // 遍历子节点, 把每个子节点看做一颗独立的树, 传入递归构造子树, 并把结果放回到新node的children中
          elNode.children.push(convertToElementTree(node.subdep[index]));
          }
        }
        return elNode;
      }
      array.forEach((element) => {
        arr.push(convertToElementTree(element))
      });
      return arr
    },
    handleClick (row,node,VueComponent) {
      this.$emit('onClick',node)
    },
    setCurrentKey (id) {
      this.currentKey = id
      this.$nextTick(() => {
        this.$refs['treeRef'].setCurrentKey(this.currentKey)
      })
    },
  },
  watch: {
  },
  mounted () {
    this.department(()=>{
      this.$emit('onClick',{data:this.deplist[0].children[0]})
      this.setCurrentKey(this.deplist[0].children[0].itemclassid)
    })
  }
}

</script>
<style>
.tree-panel .el-tree {
  background: none;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
  background: none;
}
</style>
<style scoped>
.tree-panel{
  padding: 16px;
  font-size: 14px;
  width:100%;
  background: #FAFAFA;
}
.icon_btn {
  display: flex;
  width: 100px;
  justify-content: space-between;
}
</style>