<template>
  <div class="content">
    <div class="left">
      <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="right">
      <component :is="componentTag" v-bind="currentSelectProps" />
    </div>
  </div>
</template>
<script>
import { getBdcqljqtsx } from "@/api/registerBook.js";
import { loadTreeData, getNode } from "./djbFrameData.js";
export default {
  data () {
    return {
      //接收参数
      // propsParam: this.$attrs,
      //左侧目录
      catalog: {},
      //选择加载哪一个组件
      componentTag: "",
      //子组件接收参数
      currentSelectProps: {},
      //左侧树形结构数据
      treedata: [],
      defaultNode: "",
      defaultProps: {
        value: "id",
        children: "children",
        label: "label",
      },
      showTab: "bdcqldjml", // 选中状态,根据表格中权利类型判断
    };
  },
  props: ["formData"],
  mounted () {
    this.loadData();
  },
  methods: {
    loadData () {
      getBdcqljqtsx({
        bdcdyid: this.formData.bdcdyid,
        bdcdyh: this.formData.bdcdyh,
      }).then((res) => {
        if (res.code === 200) {
          this.treedata = loadTreeData(res.result, this.formData.bdcdyh);
          this.$nextTick(function () {
            this.defaultNode = getNode(this.formData.qllx, { linShi: 0, xianShi: 0, liShi: 0 }, "");
            this.$refs.tree.setCurrentKey(this.defaultNode.id); //data[0].id为默认选中的节点
            this.loadComponent(this.defaultNode.form);
          });
        }
      });
      this.currentSelectProps = {
        bdcdyid: this.formData.bdcdyid,
        bdcdyh: this.formData.bdcdyh,
        qllx: this.formData.qllx,
        bsmQlxx: this.formData.bsmQlxx,
      };
    },
    handleNodeClick (data, node, elem) {
      this.loadComponent(data.form);
    },
    loadComponent (form) {
      this.componentTag = (r) =>
        require.ensure([], () => r(require("@/views/registerBook/" + form)));
    },
  },
};
</script>
<style scoped lang="scss">
/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;
}
</style>