<template>
  
  <el-tree
 
    :data="data"
    :props="defaultProps"
    @node-click="handleNodeClick"
    :show-checkbox="true"
    :check-strictly="false"
    @check-change="checkChange"
    @check="check"
  >
    <span class="span-ellipsis" slot-scope="{ node, data }">
      <i class="el-icon-menu" v-if="data.nodeTag === 'top'"> </i>
      <i class="el-icon-reading" v-if="data.nodeTag === 'caseType'"> </i>
      <span :title="node.label">{{ node.label }}</span>
    </span>
  </el-tree>

</template>
    
<script>
import {getanjian,getanjianinfo}  from '@/api/detailDitu' 

export default {
  data() {
    return {
      data: [
      
      ],
      defaultProps: {
        children: "children",
        label: "lable",
      },
      gr:[]
    };
  }, 
  created(){
         this.getanjian()
  },
  methods: {
    fn(){
        this.$emit('fn')
    },
    async getanjian(){
          const res = await getanjian ()
           this.data = res.data
            //  console.log(this.data);
     },
    handleNodeClick(data, a, b) {
        // console.log(data,'data');
      // this.$emit('handleNodeClickCheckBox',data)
    },
   async check(a,b){
      let arr = b.checkedNodes;
      let arr2 = []
      arr.forEach(item =>{
        arr2.push(item.nodeId)
      })
      // console.log(arr2);
      let arr3 = arr2.join(',')
       const res = await getanjianinfo(arr3)
      //  console.log(res);
      // console.log(arr3);
      this.$emit('check',res)
    },
    async checkChange(a,b,c) {
    },
  },
};
</script>

<style lang="scss">
.el-checkbox-group {
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .el-checkbox {
    margin-bottom: 5px;
  }
  .el-icon-menu ,.el-icon-reading,.el-icon-s-custom{
  color:#142380;
}
}
</style>