<style>
  .other_Style{
    color:#409EFF;
  }
</style>
<template>
  <div>
    <el-input placeholder="输入关键字进行过滤" size="small" style="width:99%;margin-bottom:10px;" v-model="filterText">
    </el-input>
    <el-tree :data="dataList" node-key="Id" ref="tree" :props="defaultProps" filter
      :filter-node-method="filterNode" @check="handleCheck" :check-strictly="true" show-checkbox
      :check-on-click-node="true">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span :class="{'other_Style':data.children&&data.children.length>0}">{{ data.Name }}</span>
      </span>
    </el-tree>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        dataList: [],
        activeName: "1",
        filterText: '',
        msg: {
          Name: "", //页面名称
          pageIndex: 1,
          pageSize: 10,
        },
        defaultProps: {
          children: 'children',
          label: 'Name'
        },
        checkedObj: {}
      };
    },
    created() {},
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val.trim());
      }
    },
    methods: {
      //获取所有菜单
      getList() {
        this.apipost("/api/Share/GetShareCategoryList", this.msg, res => {
          if (res.data.resultCode == 1) {
            var dataArray = res.data.data;
            this.dataList = dataArray;
          } else {
            this.Error(res.data.message);
          }
        })
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.Name.indexOf(value) !== -1;
      },
      //check单选      
      handleCheck(a, b) {
        //a为传递给 data 属性的数组中该节点所对应的对象；b为树目前的选中状态对象
        if (b.checkedKeys.length > 0) {
          this.$refs.tree.setCheckedKeys([a.Id]);
          this.checkedObj = a;
        }
      },
      //父组件调用方法
      getMaterial(){
        if(this.checkedObj.Level==2){
          this.dataList.forEach(x=>{
            if(x.children.length>0){
              x.children.forEach(y=>{
                if(y.Id==this.checkedObj.Id){
                  this.checkedObj.LevelOne=x.Name;
                }
              })
            }
          })
        }
        if(this.checkedObj.Level==3){
          this.dataList.forEach(x=>{
            if(x.children.length>0){
              x.children.forEach(y=>{
                if(y.children.length>0){
                  y.children.forEach(z=>{
                    if(z.Id==this.checkedObj.Id){
                      this.checkedObj.LevelOne=x.Name;
                      this.checkedObj.LevelTwo = y.Name;
                    }
                  })
                }
              })
            }
          })
        }
        return this.checkedObj;
      },
      //清空多选方法
      toggleSelection(rows) {
        this.$refs.tree.setCheckedKeys([]) 
      },
    },
    mounted() {
      this.getList();
    }
  };

</script>