<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-09-12 10:52:18
-->
<template>
  <div class="container">
    <!-- 顶部内容框 -->
    <div class="topButton">
      <!-- 左侧业务功能按钮 -->
      <ul>
        <li v-for="(item, index) in leftButtonList" :key="index">
          <div v-if="item.value == 'B10'" @click="openPrint()">
            <svg-icon class="icon" :icon-class="item.icon" />
            <span class="iconName">{{ item.name }}</span>
          </div>
          <div v-else @click="operation(item)">
            <svg-icon class="icon" :icon-class="item.icon" />
            <span class="iconName">{{ item.name }}</span>
          </div>
        </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">
      <!-- 左侧菜单栏 区分业务-->
      <segmentMenu
        v-if="['A0320099', 'A0330099'].includes(slsq.djqxbm)"
        @getCurrentSelectProps="getCurrentSelectProps"
      />
      <ordinaryMenu v-else @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>
          <div v-show="false">
          <div v-if="shows">
            <receipt :Receiptdata="Receiptdata" id="boxaaa"/>
          </div>

          </div>
          <component
            :key="fresh"
            :is="componentTag"
            v-bind="currentSelectProps"
          />
        </div>
      </div>
    </div>
    <!-- 打印模板需要此模块 -->
    <object
      id="LODOP_OB"
      classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA"
      v-show="false"
    >
      <embed
        id="LODOP_EM"
        type="application/x-print-lodop"
        width="820"
        height="450"
        pluginspage="install_lodop32.exe"
      />
    </object>
    <el-upload
      class="fileUpdate"
      action=""
      :show-file-list="false"
      multiple
      :auto-upload="false"
      :on-change="handleChange"
      :before-upload="beforeUpload"
    >
      <el-button id="cldr" icon="el-icon-upload" type="primary" v-show="false"
        >上传</el-button
      >
    </el-upload>
  </div>
</template>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
@import "./workFrame.scss";
</style>
<script>
import printJS from 'print-js'
import WorkFlow from "./mixin/index";
import publicFlow from "./mixin/public.js";
import { getStepFormInfo, unClaimTask, getZdInfo } from "@/api/workFlow.js";
import { getForm } from "./flowform";
import NoticeBar from "@/components/NoticeBar/index";
// import ProcessViewer from "./components/processViewer.vue"
// 引入左侧菜单
import ordinaryMenu from "./components/leftmenu/ordinaryMenu.vue";
// 引入左侧菜单
import segmentMenu from "./components/leftmenu/segmentMenu.vue";
// 回执单
import receipt from "./components/receipt.vue";
import selectBdc from "@/views/ywbl/ywsq/selectBdc.vue";
import { BatchInit } from "@/api/workflow/cfdjFlow.js";
export default {
  components: {
    selectBdc,
    NoticeBar,
    ordinaryMenu,
    segmentMenu,
    receipt,
  },
  mixins: [WorkFlow, publicFlow],
  data() {
    return {
      // printObj: {
      //    id: "box",
      //     preview: true,
      // },
      isDialog: false,
      //受理申请标识码
      bsmSlsq: this.$route.query.bsmSlsq,
      //当前流程所在环节
      bestepid: this.$route.query.bestepid,
      //当前流程所在环节
      zbhj: this.$route.query.zbhj,
      //设置那个表单选中
      tabName: "",
      //设置那个表单选择
      currentSelectTab: {},
      //表单集合
      tabList: [],
      //选择加载哪一个组件
      componentTag: "",
      //设置表单传递数据
      currentSelectProps: {},
      //材料分屏表单
      clxxForm: "",
      //材料信息选择卡索引
      clxxIndex: "",
      //材料信息选项卡对象
      clxxTab: {},
      ableOperation: false,
      //页面监听时间
      _beforeUnload_time: "",
      // 宗地id
      bsmZd: "",
      Receiptdata: {},
      shows:false
    };
  },
  mounted() {
    this.$store.dispatch("user/refreshPage", false);
    //添加页面监听事件
    window.addEventListener("beforeunload", (e) => this.beforeunloadHandler(e));
    window.addEventListener("unload", (e) => this.unloadHandler(e));
  },
  destroyed() {
    window.removeEventListener("beforeunload", (e) =>
      this.beforeunloadHandler(e)
    );
    window.removeEventListener("unload", (e) => this.unloadHandler(e));
  },
  methods: {
        /**
     * @description: openPrint
     * @author:miaofang
     */
    openPrint() {

        //  获取打印回执数据
          var formdata = new FormData();
          formdata.append("bsmSldy", this.currentSelectProps.bsmSldy);
          formdata.append("bsmSlsq", this.bsmSlsq);
          formdata.append("djlx", this.currentSelectProps.djlx);
          BatchInit(formdata).then((res) => {
            if (res.code === 200 && res.result) {
                this.Receiptdata  = res.result
               this.shows=true
               setTimeout(() => {
                    this.prinsss()
               }, 100)

            }
          })

    },
       /**
     * @description: prinsss
     * @author: miaofang
     */
    prinsss(){
       printJS({
        printable: "boxaaa", // // 文档来源：pdf或图像的url，html元素的id或json数据的对象
        type: "html",
        maxWidth: 800, // 最大宽度
        font_size: "", // 不设置则使用默认字体大小
        style: `@font-face {
          font-family: "STZHONGS";
          src: url(${window.ttf}) format("truetype");
        }`,
        // 继承原来的所有样式
        targetStyles: ["*"]
      });
    },
    /**
     * @description: getCurrentSelectProps
     * @param {*} val
     * @author: renchao
     */
    getCurrentSelectProps(val) {
      this.currentSelectProps = val;
    },
    /**
     * @description: beforeunloadHandler
     * @author: renchao
     */
    beforeunloadHandler() {
      this._beforeUnload_time = new Date().getTime();
    },
    /**
     * @description: unloadHandler
     * @param {*} e
     * @author: renchao
     */
    unloadHandler(e) {
      this._gap_time = new Date().getTime() - this._beforeUnload_time;
      //判断是窗口关闭还是刷新
      if (this._gap_time <= 10) {
        //取消认领
        unClaimTask(this.bsmSlsq, this.bestepid);
      }
    },
    /**
     * @description: 申请单元点击事件
     * @param {*} index
     * @author: renchao
     */
    stepForm(index) {
      getStepFormInfo(this.currentSelectProps).then((res) => {
        if (res.code === 200) {
          // this.fresh++;
          //获取单元对应的所有表单信息
          this.tabList = res.result;
          //默认加载第一个表单信息
          let arr = res.result.filter((item) => item.defaultForm);
          if (arr.length > 0) {
            this.tabName = arr[0].value;
          } else {
            this.tabName = res.result[0].value;
          }
          this.ableOperation = this.tabList[0].ableOperation;
          //批量操作无分屏按钮
          if (index != null) {
            //处理分屏材料信息
            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: openDialog
     * @author: renchao
     */
    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
      );
    },
    //选项卡切换事件
    /**
     * @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;
      }
    },
  },
};
</script>
<style scoped lang="scss">
@page {
  size: auto;
  margin: 0mm;
}
.rightContainer {
  position: relative;
}

.count {
  font-size: 14px;
  position: absolute;
  right: 25px;
  top: 12px;
  height: 30px;
  span {
    font-weight: 600;
    color: #3498db;
  }

}
</style>