<template>
  <a-col :md="24" :sm="24" style="background:#fff;">
    <div class="page-head">
      <div class="left">部门管理</div>
      <div class="right">
        <a href="javascript:;" @click="addClick">新增</a>
        <a href="javascript:;" @click="editClick">修改</a>
        <a href="javascript:;" @click="deleteClick">删除</a>
      </div>
    </div>
    <a-tree
      @expand="onExpand"
      :expandedKeys="expandedKeys"
      :autoExpandParent="autoExpandParent"
      v-model="checkedKeys"
      @select="onSelect"

      :treeData="treeData"
    />
  </a-col>
</template>
<script>
  // Tree
  const treeData = [
    {
      title: '0-0',
      key: '0-0',
      children: [
        {
          title: '0-0-0',
          key: '0-0-0',
          children: [
            { title: '0-0-0-0', key: '0-0-0-0' },
            { title: '0-0-0-1', key: '0-0-0-1' },
            { title: '0-0-0-2', key: '0-0-0-2' }
          ]
        }
      ]
    }
  ]

  //tree键值对
  const trees = {};

  //对树形图进行重置
  function toTree(list,text){
    if(!text){
       text = "0-";
    }
    let list2 = new Array();
    for(let i=0;i<list.length;i++){
      let item = list[i];
      item["key"] = text+i;
      item["title"] = item["name"];
      trees[text+i] = item;
      if(item.children){
        item.children = toTree(item.children,(text+i+"-"));
      }
      list2.push(item);
    }
    return list2;
  }

import { getList, tabList } from '@/api/system'
import { FlatToNested } from '@/utils/tableDataFormat'

export default {
  data () {
    return {
      expandedKeys: [],
      autoExpandParent: false,
      checkedKeys: [],
      selectedKeys: [],
      treeData,
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData(){
      getList().then(res => {

        let data_tmp = new Array();
        //data_tmp.push({id:0,name:"系统"});
        res.forEach(element => {
          if(element.id == 0){
            data_tmp.push(element);
          }
        });
        res.forEach(element => {
          if(element.id != 0){
            data_tmp.push(element);
          }
        });
        let list = FlatToNested(data_tmp,{idProperty:"id",parentProperty:"pId"});

        let list2 = toTree(list);
        this.treeData =list2;
      })
    },
    onExpand (expandedKeys) {

      this.expandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    onCheck (checkedKeys) {

      this.checkedKeys = checkedKeys
    },
    onSelect (selectedKeys,info) {

      this.$emit("select",trees[selectedKeys])
    },
    addClick(){
      this.$emit('treeAdd');
    },
    editClick(){
      this.$emit('treeEdit');
    },
    deleteClick(){
      this.$emit('treeDelete');
    }
  },

  name:'treeList'
}
</script>
<style scoped lang="less">
  .page-head{
    padding: 10px 5px 10px 5px;
    .left{
      float: left;
    }
    .right{
      float: right;
      text-align: right;
      a{
        margin: 0px 3px;
      }
    }
    &:after{
      content: "";
      display: block;
      overflow: hidden;
      height: 0px;
      font-size: 0px;
      clear: both;
    }
  }
</style>

