<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-09-21 14:57:51
-->
<template>
  <div class="container">
    <!-- 顶部内容框 -->
    <div class="topButton">
      <!-- 左侧业务功能按钮 -->
      <ul>
        <li
          @click="operation(item)"
          v-for="(item, index) in leftButtonList"
          :key="index">
          <svg-icon class="icon" :icon-class="item.icon" />
          <span class="iconName">{{ item.name }}</span>
        </li>
      </ul>
      <ul>
        <li
          @click="operation(item)"
          v-for="(item, index) in rightButtonList"
          :key="index">
          <svg-icon class="icon" :icon-class="item.icon" />
          <span class="iconName">{{ item.name }}</span>
        </li>
      </ul>
    </div>
    <!-- 内容框架 -->
    <div class="containerFrame">
      <!-- 左侧菜单栏 区分业务-->
      <ordinaryMenu ref="Menu" @getCurrentSelectProps="getCurrentSelectProps" />
      <div class="leftCon">
        <!-- 分屏左侧预览 -->
        <div v-if="splitScreen" class="splitScreen-con">
          <component :is="clxxForm" v-bind="currentSelectProps" :key="fresh" />
        </div>
        <!-- 表单内容区域 -->
        <div class="rightContainer">
          <div class="count">
            当前流程所在环节:
            <span>{{ this.zbhj }}</span>
          </div>
          <el-tabs
            v-model="tabName"
            :before-leave="beforeLeave"
            @tab-click="handleClick">
            <el-tab-pane
              :label="item.name"
              :name="item.value"
              v-for="item in tabList"
              :key="item.value">
            </el-tab-pane>
          </el-tabs>
          <component
            :key="fresh"
            :is="componentTag"
            v-bind="currentSelectProps" />
        </div>
      </div>
    </div>
    <!-- 新增补录信息勾选权利类型 -->
    <qllxDailog ref="qllxlist" />
  </div>
</template>
<style scoped lang="scss">
  @import "~@/styles/mixin.scss";
  @import "./workFrame.scss";
</style>
<script>
  import WorkFlow from "./mixin/index";
  import { getForm } from "./flowform";
  import { getStepFormInfo } from "@/api/workFlow.js";
  import NoticeBar from "@/components/NoticeBar/index";
  import ordinaryMenu from "./components/leftmenu/ordinaryMenu.vue";
  import qllxDailog from "./djbBook/components/qllxDailog";
  import selectBdc from "@/views/ywbl/ywsq/selectBdc.vue";
  import { loadTreeData, getNode } from "./components/leftmenu/djbFrameData.js";
  // 登记簿数据信息
  import { addRepairRecord } from "@/api/djbRepair.js";
  // 获取权利类型数组

  import { getBdcqljqtsx } from "@/api/djbDetail.js";
  export default {
    components: {
      selectBdc,
      NoticeBar,
      ordinaryMenu,
      qllxDailog,
    },
    mixins: [WorkFlow],
    data () {
      return {
        bsmSlsq: this.$route.query.bsmSlsq,
        //当前流程所在环节
        bestepid: this.$route.query.bestepid,
        //当前流程所在环节
        zbhj: this.$route.query.zbhj,
        //设置那个表单选中
        tabName: "",
        isEdit: true,
        // 弹框显示
        dialogVisible: true,
        //表单集合
        tabList: [],
        //选择加载哪一个组件
        componentTag: "",
        //设置表单传递数据
        currentSelectProps: {},
        // 首次拿到的业务信息
        oneSelectProps: {},
        //材料信息选择卡索引
        oneget: true,
        //页面监听时间
        _beforeUnload_time: "",
        treedata: {},
        tabdata: [],
        bsmRepair: "",
        defaultNode: {},
        clxxForm: "",
        //材料信息选择卡索引
        clxxIndex: "",
        //材料信息选项卡对象
        clxxTab: {},
        ableOperation: false,
      };
    },
    methods: {
      /**
       * @description: stepForm
       * @param {*} qllx
       * @author: renchao
       */
      stepForm (qllx) {
        this.oneSelectProps.qllx = qllx;
        if (this.$refs.Menu.supplementarylist.length) {
          getStepFormInfo(this.oneSelectProps).then((res) => {
            this.$nextTick(function () {
              this.tabList = res.result;
              this.tabName = this.tabList[0].value;
              this.ableOperation = this.tabList[0].ableOperation;
              this.getFromRouter(this.tabName);

              if (this.tabList.length != 8) {
                let that = this;
                this.tabList.forEach(function (item, index) {
                  if (item.value == "clxx") {
                    that.clxxIndex = index;
                    that.clxxForm = getForm(item.value, that.$route.query.sqywbm);
                    that.clxxTab = item;
                  }
                })
              }
            })
          })
        }
      },
      /**
       * @description: 获取右侧选项卡
       * @param {*} val
       * @author: renchao
       */
      getCurrentSelectProps (val) {
        this.bsmRepair = val.bsmRepair;
        if (val.bdcdyid) {
          this.oneSelectProps = val;
        }
        this.currentSelectProps = val;
        if (this.currentSelectProps.bsmRepair) {
          this.stepForm(this.currentSelectProps.qllx);
        } else if (!this.oneget) {
          this.getdjblist();
        }
        if (this.oneget) {
          this.oneget = false;
          this.stepForm(this.currentSelectProps.qllx);
        }
      },
      /**
       * @description: 获取渲染登记簿列表
       * @author: renchao
       */
      getdjblist () {
        getBdcqljqtsx({
          bdcdyid: this.currentSelectProps.bdcdyid,
          bdcdyh: this.currentSelectProps.bdcdyh,
        }).then((res) => {
          if (res.code === 200) {
            this.treedata = loadTreeData(res.result);
            this.$nextTick(function () {
              this.defaultNode = getNode(this.currentSelectProps.qllx, {
                linShi: 0,
                xianShi: 0,
                liShi: 0,
              });
              this.tabName = this.defaultNode.id; //data[0].id为默认选中的节点
            });
            let settree = JSON.parse(JSON.stringify(this.treedata));
            this.tabdata = [
              ...settree,
              ...settree[1].children[0].children[0].children,
            ];
            this.tabdata.forEach((item, index, arr) => {
              arr[index].name = item.label;
              arr[index].value = item.id;
            });
            this.tabList = this.tabdata;
          }
        });
      },
      /**
       * @description: 右侧表单选项卡事件
       * @param {*} handleClick
       * @author: renchao
       */
      handleClick (a) {
        let p = Object.keys(this.tabList[0]).filter(
          (item) => item == "ableOperation"
        );
        if (p) {
          this.ableOperation = this.tabList[a.index].ableOperation;
        }
      },
      /**
       * @description: 右侧表单选项卡事件
       * @param {*} activeName
       * @author: renchao
       */

      beforeLeave (activeName) {
        if (activeName && activeName != 0) this.getFromRouter(activeName);
      },
      /**
       * @description: 切换选项卡内容组件
       * @param {*} tabname
       * @author: renchao
       */
      getFromRouter (tabname) {
        this.componentTag = getForm(tabname);
      },
      changeywh () {
        this.$refs.Menu.getleftMenubl("change");
      },
      /**
       * @description: 增加补录记录
       * @param {*} row
       * @param {*} del
       * @author: renchao
       */
      addRepairRecord (row, del) {
        let from = {
          bsmQlxx: "",
          bsmSlsq: this.bsmSlsq,
          bsmSldy: this.currentSelectProps.bsmSldy,
          operate: "C",
          qllx: "",
        };
        if (row) {
          from.bsmQlxx = row.bsmQlxx;
          if (del) {
            from.operate = del;
          } else {
            from.operate = row.bsmQlxx ? "U" : "C";
          }
          from.qllx = row.qllx;
        }
        addRepairRecord(from)
          .then((res) => {
            if (res.code == "200") {
              this.$refs.qllxlist.dialogVisible = false;
              this.$nextTick(() => {
                this.$refs.Menu.getleftMenubl(res.result);
                this.$message({
                  type: "success",
                  message: "补录成功!",
                });
              });
            } else {
              this.$alert(res.message, "提示", {
                confirmButtonText: "确定",
                type: "warning"
              })
            }
          })
          .catch((res) => {
            console.log("错", res)
          })
      }
    }
  }
</script>
<style scoped lang="scss">
  .rightContainer {
    position: relative;
  }
  .count {
    font-size: 14px;
    position: absolute;
    right: 25px;
    top: 12px;
    height: 30px;
    span {
      font-weight: 600;
      color: #3498db;
    }
  }
</style>