<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-07-19 09:52:59
-->
<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";
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.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: 通过不动产业务号获取参数
     * @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) {
      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,
            };
            // this.$refs.tree.setCurrentKey(this.defaultNode.id); //data[0].id为默认选中的节点
            // this.loadComponent(this.defaultNode.form);

            // this.setstyle(0, 0, this.iskey);
          });
        }
      });
    },
    /*
          点击登记簿菜单
         */
    /**
     * @description: 点击登记簿菜单
     * @param {*} data
     * @author: renchao
     */
    handleNodeClick(data) {
      this.loadComponent(data.form);
    },

    /**
     * @description: setstyle
     * @param {*} data
     * @author: renchao
     * 设置样式和点击定位到当前功能
     */
    // setstyle (newindex, index, key) {
    //   if (key != undefined || this.keyy == index) {
    //     if (key != undefined) {
    //       this.keyy = key
    //     }
    //     this.loadComponent(this.$refs.sfq[newindex].$children[this.keyy].$attrs.re.form);
    //     let dpme = this.$refs.sfq[newindex].$children[this.keyy].$el
    //     dpme.style.backgroundColor = "#f5f5f5";
    //     dpme.style.color = "#0079fe";
    //     dpme.style.borderRight = "4px solid #0079fe";
    //   } else {
    //     let dpme = this.$refs.sfq[newindex].$children[this.keyy].$el
    //     dpme.style.backgroundColor = "#ffffff";
    //     dpme.style.color = "black";
    //     dpme.style.border = "none";
    //   }
    // },
    /**
     * @description: tap
     * @param {*} data
     * @author: renchao
     * 新增列表功能
     */
    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: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/.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>