<!--
 * @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="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: [],
        keyy: "",
        iskey: "",
        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, 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.iskey = 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
    * 新增列表功能
    */
      addlist (data, index) {
        if (index != undefined) {
          let newindex = this.sfqdata.findIndex((item) => {
            return item.bdcdyid == data.bdcdyid;
          });
          this.setstyle(newindex, index);
          this.currentSelectProps.bdcdyid = data.bdcdyid;
          this.loadComponent(data.form);
        } else {
          this.loadComponent(data.form);
          let newindex = this.sfqdata.findIndex((item) => {
            return item.bdcdyid == data.bdcdyid;
          });
          this.setstyle(newindex, 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/.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>