<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-09-15 10:41:10
-->
<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="tap(item, index)">
              <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";
export default {
  data() {
    return {
      activeName: 0,
      //接收参数
      // propsParam: this.$attrs,
      //左侧目录
      catalog: {},
      //选择加载哪一个组件
      componentTag: "",
      //子组件接收参数
      currentSelectProps: {},
      //左侧树形结构数据
      treedata: [],
      sfqdata: [],
      keyy: "",
      iskey: "",
      defaultNode: "",
      isActive: "",
      activeCls: "select",
      errorCls: "unselected",
      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, this.iskey);
          } 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.iskey);
            // })
          }
        }
      });
      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 },
              res.result.bdcdylx || ""
            );
            this.sfqdata[0].children.forEach((item, index) => {
              if (item.id == this.defaultNode.id) {
                this.loadComponent(item.form);
                this.isActive = index;
              }
            });
            // this.setstyle(0, 0, this.iskey);
          });
        }
      });
      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);
    },
    // 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: addlist
     * @param {*} data
     * @author: renchao
     * 新增列表功能
     */
    tap(data, index) {
      this.loadComponent(data.form);
    },
    taplist(data, index) {
      this.loadComponent(data.form);
      this.isActive = index;
    },
    /**
     * @description: loadComponent
     * @param {*} form
     * @author: renchao
     */
    loadComponent(form) {
      console.log(form, "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/.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>