<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-07-28 15:20:00
-->
<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>
      <!-- <NoticeBar
        class="NoticeBar"
        :noticeList="noticeList"
        v-if="noticeList.length > 0"
      /> -->
    </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 ProcessViewer from "./components/processViewer.vue";

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,
    };
  },
  mounted() {
    // this.getleftMenubl()
  },

  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;
            console.log("加载的右侧界面组件名称", this.tabList);
            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) {
      console.log("row", 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);
        });
    },
    // openDialog () {
    //   this.$store.dispatch('user/refreshPage', false)
    //   let data = JSON.parse(localStorage.getItem('ywbl'))
    //   let title
    //   if (data?.sqywmc) {
    //     title = "申请业务：" + data?.sqywmc
    //   } else {
    //     title = "申请业务：" + data?.djywmc
    //   }

    //   this.$popupDialog(title, "ywbl/ywsq/selectBdc", { 'djywbm': this.$route.query.sqywbm, 'isJump': true, 'sqywInfo': data }, "80%", true)
    // }
  },
};
</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>