<!--
 * @Description: workFrame左侧菜单列表-普通
 * @Autor: renchao
 * @LastEditTime: 2023-05-25 10:42:50
-->
<template>
  <div class="leftmenu" :class="{ 'animation-map-drawer': isShowdrawer }">
    <div v-if="this.isShowdrawer">
      <div class="title">
        登记簿列表
      </div>
       <el-tree ref="tree" :data="treedata" :props="defaultProps" @node-click="handleNodeClick"
        :default-expand-all="true" :expand-on-click-node="false" node-key="id" :default-checked-keys="[showTab]">
      </el-tree>
    </div>
    <div class="map-drawer-click map-drawer" v-if="!isShowdrawer" @click="
          () => {
            this.isShowdrawer = !this.isShowdrawer;
          }
        "></div>
    <div class="map-drawer-expand map-drawer" v-else @click="
          () => {
            this.isShowdrawer = !this.isShowdrawer;
          }
        "></div>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import { leftMenu } from "@/api/fqsq.js"
  import { deleteSlbdcdy } from "@/api/ywbl.js";
  import { getBdcqljqtsx } from "@/api/registerBook.js";
import { loadTreeData, getNode } from "./djbFrameData.js";
  export default {
    data () {
      return {
           //受理申请标识码
        bsmSlsq: this.$route.query.bsmSlsq,
        //当前流程所在环节
        bestepid: this.$route.query.bestepid,
           //受理申请标识码
        bdcdyid: this.$route.query.bdcdyid,
        //当前流程所在环节
        bdcdyh: this.$route.query.bdcdyh,
        qllx:this.$route.query.qllx,
        // 默认选中
        activeIndex: '0',
        // 折叠
        isShowdrawer: true,
        // 批量操作
        showBatch: false,
        //批量操作按钮名称
        batchButtonName: '',
        //左侧菜单数据集合
        unitData: [],
        // 设置表单传递数据
        currentSelectProps: {},
          //左侧树形结构数据
      treedata: [],
      defaultNode: "",
           defaultProps: {
        value: "id",
        children: "children",
        label: "label",
      },
      showTab: "bdcqldjml", // 选中状态,根据表格中权利类型判断
      }
    },
    mounted () {
      this.loadBdcdylist();
    },
    computed: {
      ...mapGetters(['isRefresh'])
    },
    watch: {
      isRefresh: {
        handler (newVal, oldVal) {
          if (newVal) this.loadBdcdylist()
        },
        immediate: true
      }
    },
    methods: {
      //读取申请单元信息
      loadBdcdylist () {
        this.loadData ()
      },
      // 获取登记簿菜单
       loadData () {
      getBdcqljqtsx({
        bdcdyid: this.bdcdyid,
        bdcdyh: this.bdcdyh,
      }).then((res) => {
        if (res.code === 200) {
          console.log("res.result","res.result",res.result);
          this.treedata = loadTreeData(res.result, this.bdcdyh);
            console.log("this.treedata","this.treedata",this.treedata);
          this.$nextTick(function () {
            this.defaultNode = getNode(this.qllx, { linShi: 0, xianShi: 0, liShi: 0 }, "");
            this.$refs.tree.setCurrentKey(this.defaultNode.id); //data[0].id为默认选中的节点
            this.$parent.loadComponent(this.currentSelectProps,this.defaultNode);
          });
        }
      });
      this.currentSelectProps = {
        bdcdyid: this.bdcdyid,
        bdcdyh: this.bdcdyh,
        qllx: this.qllx,
        bsmQlxx: this.bsmQlxx,
      };
      // this.$parent.stepForm();
    },
    handleNodeClick (data, node, elem) {
      this.$parent.loadComponent(this.currentSelectProps,data);
    },

  }
  }
</script>
<style scoped lang='scss'>
  @import "~@/styles/mixin.scss";
  @import "../../workFrame.scss";
  .leftmenu ul {
    height: calc(100vh - 120px);
  }
  /deep/.rollTable {
  height: calc(100vh - 240px) !important;
}

.content {
  width: 100%;
  height: 100%;
  display: flex;

  .left {
    width: 256px;
    height: 704px;
    background-color: #f5f5f5;
    color: #333;
    border: 1px solid rgb(228, 228, 228);
  }

  .right {
    width: calc(100% - 256px);
    height: 704px;
    // overflow-y: scroll;
    overflow: auto;
    background-color: #f5f5f5;
    border: 1px solid rgb(228, 228, 228);
  }
}

/deep/ .expanded.el-tree-node__expand-icon,
/deep/ .el-tree-node__expand-icon {
  visibility: hidden;
}

/deep/ .el-tree-node__content {
  border: 1px solid rgb(228, 228, 228);
  height: 45px;
}

/deep/ .el-tree-node:focus>.el-tree-node__content {
  background-color: #f5f5f5;
  color: #0079fe;
  border-right: 4px solid #0079fe;
}

/deep/.el-tree-node {
  white-space: pre-wrap;
}

/deep/ .is-current>.el-tree-node__content {
  background-color: #f5f5f5;
  color: #0079fe;
  border-right: 4px solid #0079fe;
}
.title-batch{
  background-color: salmon;

}
</style>