<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-08-17 13:56:50
-->
<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="addlist(item)">
              <span>
                {{ item.label }}
              </span>
            </span>
          </template>
          <el-button
            v-for="(item, index) in item.children"
            :re='item'
            :key="index"
            class="sfqcontent"
            @click="addlist(item, index)">
            {{ item.label }}
          </el-button>
        </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: [],
        activeName: 0,
        // 查询参数
        queryForm: {},

        defaultNode: "",
        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
              this.setstyle(index, 0);
            } else {
              this.sfqdata.push(loadsfqData(res.result, val.bdcdyh, val.bdcdyid));
              this.activeName = this.sfqdata.length - 1;
              this.$nextTick(() => {
                this.setstyle(this.sfqdata.length - 1, 0);
              })
            }
          }
        });
        this.currentSelectProps = {
          bdcdyid: val.bdcdyid,
          bdcdyh: val.bdcdyh,
          qllx: this.formData.qllx,
          bsmQlxx: this.formData.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 },
                ""
              );
              this.$refs.tree.setCurrentKey(this.defaultNode.id); //data[0].id为默认选中的节点
              this.loadComponent(this.defaultNode.form);
              this.setstyle(0, 0);
            });
          }
        });
        this.currentSelectProps = {
          bdcdyid: this.currentSelectProps.bdcdyid,
          bdcdyh: this.currentSelectProps.bdcdyh,
          qllx: this.currentSelectProps.qllx,
          bsmQlxx: this.currentSelectProps.bsmQlxx,
        };
      },
      /*
          点击登记簿菜单
         */
      /**
       * @description: 点击登记簿菜单
       * @param {*} data
       * @author: renchao
       */
      handleNodeClick (data) {
        this.loadComponent(data.form);
      },

      /**
* @description: setstyle
* @param {*} data
* @author: renchao
* 设置样式和点击定位到当前功能
*/
      setstyle (newindex, index) {
        if (index == 0) {
          this.loadComponent(this.$refs.sfq[newindex].$children[0].$attrs.re.form);
        }
        let dpme = this.$refs.sfq[newindex].$children[0].$el
        if (index != 0) {
          dpme.style.backgroundColor = "#ffffff";
          dpme.style.color = "black";
          dpme.style.border = "none";
        } else {
          dpme.style.backgroundColor = "#f5f5f5";
          dpme.style.color = "#0079fe";
          dpme.style.borderRight = "4px solid #0079fe";
        }
      },
      /**
    * @description: addlist
    * @param {*} data
    * @author: renchao
    * 新增列表功能
    */
      addlist (data, index) {
        let newindex = this.sfqdata.findIndex((item) => {
          return item.bdcdyid == data.bdcdyid;
        });
        this.setstyle(newindex, index);
        this.currentSelectProps.bdcdyid = data.bdcdyid;
        this.loadComponent(data.form);
      },
      /**
     * @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: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;
  }
  /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/.sfqcontent {
    white-space: wrap;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    height: 100px;
    word-break: break-word;
    display: inline;
    span {
      font-size: 13px;
      display: block;
      line-height: 15px;
      margin-left: 70px;
    }
    height: 45px;
    border: 1px solid rgb(228, 228, 228);
    border-right: 4px solid #f5f5f5;
  }
  .sfqcontent:hover {
    background-color: #f5f5f5;
    color: black;
  }
  .sfqcontent:focus {
    background-color: #f5f5f5;
    color: #0079fe;
    border-right: 4px solid #0079fe;
  }
</style>