<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-08-15 10:57:30
-->
<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>
      <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";
export default {
  data() {
    return {
      activeName: 0,
      //接收参数
      // propsParam: this.$attrs,
      //左侧目录
      catalog: {},
      //选择加载哪一个组件
      componentTag: "",
      //子组件接收参数
      currentSelectProps: {},
      //左侧树形结构数据
      treedata: [],
      sfqdata: [],
      defaultNode: "",
      defaultProps: {
        value: "id",
        children: "children",
        label: "label",
      },
      showTab: "bdcqldjml", // 选中状态,根据表格中权利类型判断
    };
  },
  props: ["formData"],
  mounted() {
    this.loadData(this.formData.bdcdyh);
  },
  methods: {

     /**
     * @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.formData.bdcdyid,
        bdcdyh: val,
      }).then((res) => {
        if (res.code === 200) {
          this.treedata = loadTreeData(val);
          this.sfqdata.push(
            loadsfqData(res.result, val, this.formData.bdcdyid)
          );
          this.$nextTick(function () {
            this.defaultNode = getNode(
              this.formData.qllx,
              { linShi: 0, xianShi: 0, liShi: 0 },
              this.formData.bdcdylx || ""
            );
            this.$refs.tree.setCurrentKey(this.defaultNode.id); //data[0].id为默认选中的节点
            this.loadComponent(this.defaultNode.form);
            this.setstyle(0,0);
          });
        }
      });
      this.currentSelectProps = {
        bdcdyid: this.formData.bdcdyid,
        bdcdyh: val,
        qllx: this.formData.qllx,
        bsmQlxx: this.formData.bsmQlxx,
      };
    },
    /**
     * @description: handleNodeClick
     * @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(100vh - 300px) !important;
}

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

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

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