<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-09-19 10:48:40
-->
<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 } from "@/api/djbDetail.js";
  import { loadTreeData, loadsfqData, getNode } from "./djbFrameData.js";
  import { searchTaskToDo } from "@/api/workflow/search.js";
  import { leftMenu } from "@/api/workFlow.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.getdata();
    },
    methods: {
      // 截取字符的方法
      /**
       * @description: 截取字符的方法
       * @param {*} obj
       * @author: renchao
       */
      getCaption (obj) {
        let index = obj.lastIndexOf("=");
        obj = obj.substring(index + 1, obj.length);
        return obj;
      },
      // 通过不动产业务号获取参数
      /**
       * @description: 通过不动产业务号获取参数
       * @author: renchao
       */
      getdata () {
        this.queryForm = {
          bdcdyh: this.getCaption(window.location.href),
          currentPage: 1,
          djlx: "",
          pageSize: 10,
          qllx: "",
          ywh: "",
          ywly: "",
        };
        if (this.queryForm) {
          this.$startLoading();
          searchTaskToDo({
            ...this.queryForm,
          }).then((res) => {
            if (res.code === 200) {
              let { records } = res.result;

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

      // 获取不动产信息
      /**
       * @description: 获取不动产信息
       * @param {*} a
       * @param {*} b
       * @author: renchao
       */
      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(this.currentSelectProps.bdcdyh);
            }
          }
        });
      },

      /**
      * @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) {
        getBdcqljqtsx({
          bdcdyid: this.currentSelectProps.bdcdyid,
          bdcdyh: val,
        }).then((res) => {
          if (res.code === 200) {
            this.treedata = loadTreeData(val);
            this.sfqdata.push(
              loadsfqData(res.result, val, this.currentSelectProps.bdcdyid)
            );
            this.$nextTick(function () {
              this.defaultNode = getNode(
                this.currentSelectProps.qllx,
                { 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.$refs.tree.setCurrentKey(this.defaultNode.id); //data[0].id为默认选中的节点
              // this.loadComponent(this.defaultNode.form);

              // this.setstyle(0, 0, this.iskey);

              // this.setstyle(0, 0, this.iskey);
            });
          }
        });
        this.currentSelectProps = {
          bdcdyid: this.currentSelectProps.bdcdyid,
          bdcdyh: this.currentSelectProps.bdcdyh,
          qllx: this.currentSelectProps.qllx,
          bsmQlxx: this.currentSelectProps.bsmQlxx,
        };
      },
      /*
          点击登记簿菜单
         */
      handleNodeClick (data) {
        this.loadComponent(data.form);
      },
    },
    /*
        点击登记簿菜单
       */
    /**
     * @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;
    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;
    }
    height: 45px;
    border: 1px solid rgb(228, 228, 228);
    border-right: 4px solid #f5f5f5;
  }

  .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>