<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-11-08 14:56:03
-->
<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>
      <ElCollapse v-model="activeName" accordion>
        <ElCollapse-item
          class="sfqqq"
          ref="sfq"
          v-for="(item, index) in sfqdata"
          :key="index"
          :name="index">
          <template slot="title">
            <span class="text" :class="[titleActive == index ? 'nameSelect' : '']" @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>
        </ElCollapse-item>
      </ElCollapse>
    </div>
    <div class="right">
      <component
        :is="componentTag"
        @getBdcdyh="getBdcdyh"
        v-bind="currentSelectProps" />
    </div>
  </div>
</template>
<script>
  import { getBdcqljqtsx } from "@/api/djbDetail.js";
  import ElCollapse from "@/components/collapse/index";
  import ElCollapseItem from "@/components/collapse/src/collapse-item.vue";
  import { loadTreeData, loadsfqData, getNode } from "./djbFrameData.js";
  export default {
    comments: {
      ElCollapse, ElCollapseItem
    },
    data () {
      return {
        activeName: 0,
        titleActive: "",
        //接收参数
        // 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.titleActive = -1
              this.titleActive = this.activeName
            } else {
              this.sfqdata.push(loadsfqData(res.result, val.bdcdyh, val.bdcdyid));
              this.activeName = this.sfqdata.length - 1;
              this.isActive = ""
              this.titleActive = this.activeName
            }
          }
        });
        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.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: addlist
       * @param {*} data
       * @author: renchao
       * 新增列表功能
       */
      tap (data, index) {
        this.activeName = index.toString()
        this.isActive = -1
        this.titleActive = index
        this.loadComponent(data.form);
      },
      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">
  .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;
    }
  }
  .nameSelect {
    color: #000000;
    font-weight: 700;
  }
  .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>