<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>
export default {
  data() {
    return {
      //接收参数
      // propsParam: this.$attrs,
      //左侧目录
      catalog: {},
      //选择加载哪一个组件
      componentTag: "JSYDSYQ",
      //子组件接收参数
      currentSelectProps: {},
      //左侧树形结构数据
      treedata: [
        {
          id: "djbfm",
          form: "djbfm.vue",
          label: "登记簿封面",
          children: [
            {
              id: "zdjbxx",
              form: "zdjbxx.vue",
              label: "宗地基本信息",
            },
            {
              id: "bdcqldjml",
              form: "bdcqldjml.vue",
              label: "不动产权利登记目录",
              children: [
                {
                  id: "bdcqljqtsx",
                  form: "bdcqljqtsx.vue",
                  label: "不动产权利及其他事项",
                  children: [],
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      showTab: "djxxTable", // 选中状态,根据表格中权利类型判断
    };
  },
  props: ["formData"],
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      this.treedata[0].children[1].children[0].children.push({
        id: "jsydsyq",
        form: "jsydsyq.vue",
        label: "国有建设用地使用权(临:0，现:0，历:0)",
      });
      this.treedata[0].children[1].children[0].children.push({
        id: "diyaq",
        form: "dyaq.vue",
        label: "抵押权(临:0，现:0，历:0)",
      });
      this.treedata[0].children[1].children[0].children.push({
        id: "diyiq",
        form: "diyiq.vue",
        label: "地役权(临:0，现:0，历:0)",
      });
      this.treedata[0].children[1].children[0].children.push({
        id: "ygdj",
        form: "ygdj.vue",
        label: "预告登记(临:0，现:0，历:0)",
      });
      this.treedata[0].children[1].children[0].children.push({
        id: "yydj",
        form: "yydj.vue",
        label: "异议登记(临:0，现:0，历:0)",
      });
      this.treedata[0].children[1].children[0].children.push({
        id: "cfdj",
        form: "cfdj.vue",
        label: "查封登记(临:0，现:0，历:0)",
      });
      //alert(this.formData.bdcdyid);
      this.currentSelectProps = {
        bdcdyid: this.formData.bdcdyid,
        qllx: this.formData.qllx,
        bsmQlxx: this.formData.bsmQlxx,
      };

      this.componentTag = (r) =>
        require.ensure([], () =>
          r(require("@/views/registerBook/jsydsyq.vue"))
        );
    },
    handleNodeClick(data, node, elem) {
      this.componentTag = (r) =>
        require.ensure([], () =>
          r(require("@/views/registerBook/" + data.form))
        );
    },
  },
};
</script>
<style scoped lang="scss">
.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>