<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-12-13 14:24:09
-->
<template>
  <div class="content loadingtext">
    <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>
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item
          class="sfqqq"
          ref="sfq"
          v-for="(item, index) in sfqdata"
          :key="index"
          :name="index">
          <template slot="title">
            <span class="text" @click="tap(item)">
              <span>
                {{ item.label }}
              </span>
            </span>
          </template>
          <p
            v-for="(item, index) in item.children"
            :re="item"
            :key="index"
            :class="[isActive == index ? activeCls : '', errorCls]"
            @click="taplist(item, index)">
            <span>
              {{ item.label }}
            </span>
            <span>
              {{ item.zt }}
            </span>
          </p>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="right">
      <component
        :is="componentTag"
        @getBdcdyh="getBdcdyh"
        v-bind="currentSelectProps" />
    </div>
  </div>
</template>
<script>
  import { getBdcqljqtsx, getBdcqljqtsxBdcdyh } from "@/api/djbDetail.js";
  import { loadTreeData, loadsfqData, getNode } from "./djbFrameData.js";
  export default {
    data () {
      return {
        //接收参数
        // propsParam: this.$attrs,
        //左侧目录
        catalog: {},
        //选择加载哪一个组件
        componentTag: "",
        //子组件接收参数
        currentSelectProps: {},
        //左侧树形结构数据
        treedata: [],
        sfqdata: [],
        keyy: "",
        iskey: "",
        activeName: 0,
        // 查询参数
        queryForm: {},

        defaultNode: "",
        isActive: "",
        activeCls: "select",
        errorCls: "unselected",
        defaultProps: {
          value: "id",
          children: "children",
          label: "label",
        },
        showTab: "bdcqldjml", // 选中状态,根据表格中权利类型判断
      };
    },
    mounted () {
      this.loadData(this.getCaption(window.location.href));
    },
    methods: {
      // 截取字符的方法
      /**
       * @description: 截取字符的方法
       * @param {*} obj
       * @author: renchao
       */
      getCaption (obj) {
        let index = obj.lastIndexOf("=");
        obj = obj.substring(index + 1, obj.length);
        return obj;
      },
      /**
       * @description: getBdcdyh
       * @author: miaofang
       * 点击不动产单元号事件
       */
      getBdcdyh (val) {
        this.addloadData(val);
      },
      /**
       * @description: addloadData
       * @author: miaofang
       */
      addloadData (val) {
        getBdcqljqtsx({
          bdcdyid: val.bdcdyid,
          bdcdyh: val.bdcdyh,
        }).then((res) => {
          if (res.code === 200) {
            if (this.sfqdata.some((item) => item.bdcdyid === val.bdcdyid)) {
              let index = this.sfqdata.findIndex((item) => {
                return item.bdcdyid == val.bdcdyid;
              });
              this.activeName = index;
            } else {
              this.sfqdata.push(loadsfqData(res.result, val.bdcdyh, val.bdcdyid));
              this.activeName = this.sfqdata.length - 1;
            }
          }
        });
        this.currentSelectProps = {
          bdcdyid: val.bdcdyid,
          bdcdyh: val.bdcdyh,
          qllx: this.currentSelectProps.qllx,
          bsmQlxx: this.currentSelectProps.bsmQlxx,
        };
      },
      /**
       * @description: loadData
       * @author: renchao
       */
      loadData (val) {
        getBdcqljqtsxBdcdyh({
          bdcdyh: val,
        }).then((res) => {
          if (res.code === 200) {
            this.treedata = loadTreeData(val);
            this.sfqdata.push(loadsfqData(res.result, val, res.result.bdcdyid));
            this.$nextTick(function () {
              this.defaultNode = getNode(
                res.result.ztqllx,
                { linShi: 0, xianShi: 0, liShi: 0 },
                res.result.bdcdylx || ""
              );
              this.sfqdata[0].children.forEach((item, index) => {
                if (item.id == this.defaultNode.id) {
                  this.loadComponent(item.form);
                  this.isActive = index;
                }
              });
              this.currentSelectProps = {
                bdcdyid: res.result.bdcdyid,
                bdcdyh: val,
                qllx: res.result.qllx,
                bsmQlxx: this.currentSelectProps.bsmQlxx,
              };
            })
          }
        })
      },
      /**
       * @description: 点击登记簿菜单
       * @param {*} data
       * @author: renchao
       */
      handleNodeClick (data) {
        this.loadComponent(data.form);
      },
      tap (data, index) {
        this.loadComponent(data.form);
      },
      /**
      * @description: taplist
      * @param {*} data
      * @author: renchao
      * 新增列表功能
      */
      taplist (data, index) {
        this.loadComponent(data.form);
        this.isActive = index;
      },
      /**
     * @description: loadComponent
     * @param {*} form
     * @author: renchao
     */
      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 {
    white-space: pre-wrap;
  }

  /deep/.el-collapse-item__header {
    width: 100%;
    cursor: pointer;
    position: relative;
    .el-collapse-item__arrow {
      position: absolute;
      top: 15px;
      right: 0px;
    }
    align-items: center;
    .text {
      width: 100%;
      height: 45px;
      display: inline-block;
      span {
        margin-left: 60px;
        padding-top: 10px;
        display: inline-block;
        line-height: 15px;
      }
      height: 45px;
      border: 1px solid rgb(228, 228, 228);
      border-right: 4px solid #f5f5f5;
    }
    height: 45px;
    display: inline-block;
    line-height: 45px;
    border: 1px solid rgb(228, 228, 228);
  }
  /deep/.el-collapse-item__content {
    padding-bottom: 5px;
  }
  /deep/.unselected {
    // white-space: wrap;
    border: none;
    cursor: pointer;
    width: 250px;
    height: 45px;
    border: 1px solid rgb(228, 228, 228);
    border-right: 4px solid #f5f5f5;
    margin: auto;
    text-align: center;
    align-items: center;
    span {
      width: 100%;
      display: inline-block;
      justify-content: center;
      align-items: center;
    }
  }

  .select {
    border: none;
    cursor: pointer;
    width: 250px;
    height: 45px;
    background-color: #f5f5f5;
    color: #0079fe;
    border-right: 4px solid #0079fe;
    margin: auto;
    text-align: center;
    align-items: center;
    span {
      width: 100%;
      display: inline-block;
      justify-content: center;
      align-items: center;
    }
  }
</style>