<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/zhcx.js";
import axios from "axios";
export default {
  data() {
    return {
      //接收参数
      // propsParam: this.$attrs,
      //左侧目录
      catalog: {},
      //选择加载哪一个组件
      componentTag: "JSYDSYQ",
      //子组件接收参数
      currentSelectProps: {},
      //左侧树形结构数据
      treedata: [],
      bdcqljqtsxData: [],
      defaultProps: {
        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.loadLeftMenu(res.result);
        }
      });
      //this.$alert(this.bdcqlml);
      this.currentSelectProps = {
        bdcdyid: this.formData.bdcdyid,
        bdcdyh: this.formData.bdcdyh,
        qllx: this.formData.qllx,
        bsmQlxx: this.formData.bsmQlxx,
      };

      this.componentTag = (r) =>
        require.ensure([], () =>
          r(require("@/views/registerBook/jsydsyq.vue"))
        );
    },
    loadLeftMenu(qlxxData) {
      this.treedata.push({
        id: "djbfm",
        form: "djbfm.vue",
        label: "登记簿封面",
        children: [],
      });
      this.treedata[0].children.push({
        id: "zdjbxx",
        form: "zdjbxx.vue",
        label: "宗地基本信息\n (" + this.formData.bdcdyh.substring(0, 19) + ")",
        children: [],
      });
      this.treedata[0].children.push({
        id: "bdcqldjml",
        form: "bdcqldjml.vue",
        label: "不动产权利登记目录",
        children: [],
      });
      this.treedata[0].children[1].children.push({
        id: "bdcqljqtsx",
        form: "bdcqljqtsx.vue",
        label:
          "不动产权利及其他事项\n (" + this.formData.bdcdyh.slice(19) + ")",
        children: [],
      });
      this.treedata[0].children[1].children[0].children.push({
        id: "jsydsyq",
        form: "jsydsyq.vue",
        label:
          qlxxData.ztqlmc +
          "(临:" +
          qlxxData.ztql.linShi +
          "，现:" +
          qlxxData.ztql.xianShi +
          "，历:" +
          qlxxData.ztql.liShi +
          ")",
      });
      this.treedata[0].children[1].children[0].children.push({
        id: "diyaq",
        form: "diyaq.vue",
        label:
          "抵押权(临:" +
          qlxxData.diyaq.linShi +
          "，现:" +
          qlxxData.diyaq.xianShi +
          "，历:" +
          qlxxData.diyaq.liShi +
          ")",
      });
      this.treedata[0].children[1].children[0].children.push({
        id: "diyiq",
        form: "diyiq.vue",
        label:
          "地役权(临:" +
          qlxxData.diyiq.linShi +
          "，现:" +
          qlxxData.diyiq.xianShi +
          "，历:" +
          qlxxData.diyiq.liShi +
          ")",
      });
      this.treedata[0].children[1].children[0].children.push({
        id: "ygdj",
        form: "ygdj.vue",
        label:
          "预告登记(临:" +
          qlxxData.ygdj.linShi +
          "，现:" +
          qlxxData.ygdj.xianShi +
          "，历:" +
          qlxxData.ygdj.liShi +
          ")",
      });
      this.treedata[0].children[1].children[0].children.push({
        id: "yydj",
        form: "yydj.vue",
        label:
          "异议登记(临:" +
          qlxxData.yydj.linShi +
          "，现:" +
          qlxxData.yydj.xianShi +
          "，历:" +
          qlxxData.yydj.liShi +
          ")",
      });
      this.treedata[0].children[1].children[0].children.push({
        id: "cfdj",
        form: "cfdj.vue",
        label:
          "查封登记(临:" +
          qlxxData.cfdj.linShi +
          "，现:" +
          qlxxData.cfdj.xianShi +
          "，历:" +
          qlxxData.cfdj.liShi +
          ")",
      });
    },
    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>