<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-07-19 09:52:46
-->
<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/djbDetail.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: {
      /**
       * @description: loadData
       * @author: renchao
       */
      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,
        };
      },
      /**
       * @description: handleNodeClick
       * @param {*} data
       * @param {*} node
       * @param {*} elem
       * @author: renchao
       */
      handleNodeClick (data, node, elem) {
        this.loadComponent(data.form);
      },
      /**
       * @description: loadComponent
       * @param {*} form
       * @author: renchao
       */
      loadComponent (form) {
        console.log(form, 'formformformform');
        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>