<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";
  import { searchTaskToDo } from "@/api/ywbl";
  import {
    leftMenu
  } from "@/api/fqsq.js";
  export default {
    data () {
      return {
        //接收参数
        // propsParam: this.$attrs,
        //左侧目录
        catalog: {},
        //选择加载哪一个组件
        componentTag: "",
        //子组件接收参数
        currentSelectProps: {},
        //左侧树形结构数据
        treedata: [],
        // 查询参数
        queryForm: {},

        defaultNode: "",
        defaultProps: {
          value: "id",
          children: "children",
          label: "label",
        },
        showTab: "bdcqldjml", // 选中状态,根据表格中权利类型判断
      };
    },
    mounted () {
      this.getdata()

    },
    methods: {
      // 截取字符的方法
      getCaption (obj) {
        let index = obj.lastIndexOf("=");
        obj = obj.substring(index + 1, obj.length);
        return obj
      },
      // 通过不动产业务号获取参数
      getdata () {
        this.queryForm = {
          bdcdyh: this.getCaption(window.location.href),
          currentPage: 1,
          djlx: "",
          pageSize: 10,
          qllx: "",
          ywh: "",
          ywly: ""
        }
        if (this.queryForm) {
          searchTaskToDo({
            ...this.queryForm,
          }).then((res) => {
            if (res.code === 200) {
              let { records } = res.result;

              this.loadBdcdylist(records[0].bsmSlsq, records[0].bestepid);
            }
          });
        }

      },

      // 获取不动产信息
      loadBdcdylist (a, b) {
        var formdata = new FormData();
        formdata.append("bsmSlsq", a);
        formdata.append("bestepid", b);
        leftMenu(formdata).then((res) => {
          if (res.code === 200) {
            if (res.result) {
              this.currentSelectProps = res.result[0];
              this.loadData();
            }
          }
        });
      },
      loadData () {
        getBdcqljqtsx({
          bdcdyid: this.currentSelectProps.bdcdyid,
          bdcdyh: this.currentSelectProps.bdcdyh,
        }).then((res) => {
          if (res.code === 200) {
            this.treedata = loadTreeData(res.result, this.currentSelectProps.bdcdyh);
            this.$nextTick(function () {
              this.defaultNode = getNode(this.currentSelectProps.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.currentSelectProps.bdcdyid,
          bdcdyh: this.currentSelectProps.bdcdyh,
          qllx: this.currentSelectProps.qllx,
          bsmQlxx: this.currentSelectProps.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(120vh - 254px) !important;
  }

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

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

    .right {
      width: calc(100% - 256px);
      height: 100%;
      // 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>