<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-05-24 15:31: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 @getCurrentSelectProps="getCurrentSelectProps" />
      <div class="leftCon">
        <!-- 分屏左侧预览 -->
        <div v-if="splitScreen" class="splitScreen-con">
          <component :is="clxxForm" v-bind="currentSelectProps" :key="fresh" />
        </div>
        <!-- 表单内容区域 -->
        <div class="rightContainer">
          <el-tabs v-model="tabName" :before-leave="beforeLeave">
            <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>
  </div>
</template>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
@import "./workFrame.scss";
</style>
<script>
import WorkFlow from "./mixin/index";
import publicFlow from "./mixin/public.js";
// import { getStepFormInfo } from "@/api/fqsq.js"
// import { getForm } from "./flowform"
import NoticeBar from "@/components/NoticeBar/index";
import { unClaimTask } from "@/api/ywbl.js";
import ProcessViewer from "./components/processViewer.vue";
// 引入左侧菜单
import ordinaryMenu from "./components/leftmenu/ordinaryMenu.vue";
import selectBdc from "@/views/ywbl/ywsq/selectBdc.vue";
import { loadTreeData, getNode } from "./components/leftmenu/djbFrameData";
// 登记簿数据信息

import { getBdcqljqtsx } from "@/api/registerBook.js";
export default {
  components: {
    selectBdc,
    NoticeBar,
    ProcessViewer,
    ordinaryMenu,
  },
  mixins: [WorkFlow, publicFlow],
  data() {
    return {
      isDialog: false,
      bsmSlsq: this.$route.query.bsmSlsq,
      //当前流程所在环节
      bestepid: this.$route.query.bestepid,
      //受理申请标识码
      bdcdyid: this.$route.query.bdcdyid,
      //当前流程所在环节
      bdcdyh: this.$route.query.bdcdyh,
      qllx: this.$route.query.qllx,
      //设置那个表单选中
      tabName: "",
      //设置那个表单选择
      currentSelectTab: {},
      //表单集合
      tabList: [],
      //选择加载哪一个组件
      componentTag: "",
      //设置表单传递数据
      currentSelectProps: {},
      //材料分屏表单
      clxxForm: "",
      //材料信息选择卡索引
      clxxIndex: "",
      //材料信息选项卡对象
      clxxTab: {},
      //页面监听时间
      _beforeUnload_time: "",
    };
  },
  mounted() {
    this.$store.dispatch("user/refreshPage", false);
    //添加页面监听事件
    window.addEventListener("beforeunload", (e) => this.beforeunloadHandler(e));
    window.addEventListener("unload", (e) => this.unloadHandler(e));
  this.tabset()
  },
  destroyed() {

    window.removeEventListener("beforeunload", (e) =>
      this.beforeunloadHandler(e)
    );
    window.removeEventListener("unload", (e) => this.unloadHandler(e));
  },
  methods: {
    getCurrentSelectProps(val) {
      // this.loadData();
    },

    beforeunloadHandler() {
      this._beforeUnload_time = new Date().getTime();
    },
    unloadHandler(e) {
      this._gap_time = new Date().getTime() - this._beforeUnload_time;
      //判断是窗口关闭还是刷新
      if (this._gap_time <= 10) {
        //取消认领
        unClaimTask(this.bsmSlsq, this.bestepid);
      }
    },
    tabset(){
     this.tabList = [
          {
            name: "受理情况",
            value: "plfdcq2",
            sort: 1,
          },
          {
            name: "材料信息",
            value: "clxx",
            sort: 2,
          },
        ];
        this.tabName = 'plfdcq2';
    },

    // 获取登记簿菜单
    // loadData() {
    //   getBdcqljqtsx({
    //     bdcdyid: this.bdcdyid,
    //     bdcdyh: this.bdcdyh,
    //   }).then((res) => {
    //     if (res.code === 200) {
    //       this.treedata = loadTreeData(res.result, this.bdcdyh);
    //       this.$nextTick(function () {
    //         this.defaultNode = getNode(
    //           this.qllx,
    //           { linShi: 0, xianShi: 0, liShi: 0 },
    //           ""
    //         );
    //         this.$refs.tree.setCurrentKey(this.defaultNode.id); //data[0].id为默认选中的节点
    //         // this.$parent.loadComponent(this.currentSelectProps,this.defaultNode);
    //       });
    //     }

    //   });
    //   this.currentSelectProps = {
    //     bdcdyid: this.bdcdyid,
    //     bdcdyh: this.bdcdyh,
    //     qllx: this.qllx,
    //     bsmQlxx: this.bsmQlxx,
    //   };
    //   // this.$parent.stepForm();
    // },

    loadComponent(currentSelectProps, data) {
       this.tabset()
      this.currentSelectProps = currentSelectProps;
      this.componentTag = (r) =>
        require.ensure([], () => r(require("@/views/djbBook/" + data.form)));

    },
    // 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>