<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" />
    </div>
    <!-- 内容框架 -->
    <div class="containerFrame">
      <!-- 左侧菜单栏 -->
      <div class="leftmenu" :class="{ 'animation-map-drawer': isShowdrawer }">
        <el-menu
          :default-active="activeIndex"
          @select="batchUnitClick"
          class="title-batch"
          v-if="showBatch"
        >
          <el-menu-item index="-1" key="-1" class="menus">
            <div>{{ batchButtonName }}</div>
          </el-menu-item>
        </el-menu>
        <div v-if="this.isShowdrawer">
          <div class="title">
            申请单元列表({{ unitData.length }})
            <el-button
              type="text"
              class="batchDel"
              @click="handleBatchDel"
              v-if="unitData.length > 1"
              >批量删除</el-button
            >
          </div>
          <el-menu :default-active="activeIndex" @select="unitClick">
            <el-menu-item
              v-for="(item, index) in unitData"
              :index="index.toString()"
              :key="index"
            >
              <div>
                <p>{{ item.bdcdyh }}</p>
                <p class="title-detail">{{ item.zl }}</p>
              </div>
              <i
                class="el-icon-delete"
                v-if="unitData.length > 1"
                @click.stop="handleDel(item)"
              ></i>
            </el-menu-item>
          </el-menu>
        </div>
        <div
          class="map-drawer-click map-drawer"
          v-if="!isShowdrawer"
          @click="
            () => {
              this.isShowdrawer = !this.isShowdrawer;
            }
          "
        ></div>
        <div
          class="map-drawer-expand map-drawer"
          v-else
          @click="
            () => {
              this.isShowdrawer = !this.isShowdrawer;
            }
          "
        ></div>
      </div>
      <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>
    <!-- 打印模板需要此模块 -->
    <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>
    <selectBdc
      v-model="isDialog"
      :djywbm="$route.query.sqywbm"
      :isJump="true"
      @updateDialog="updateDialog"
    />
  </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 { deleteFlow, unClaimTask } from "@/api/ywbl.js";
import ProcessViewer from "./components/processViewer.vue";
import selectBdc from "@/views/ywbl/ywsq/selectBdc.vue";
export default {
  components: {
    selectBdc,
    NoticeBar,
    ProcessViewer,
  },
  mixins: [WorkFlow, publicFlow],
  data() {
    return {
      isDialog: false,
      // 折叠
      isShowdrawer: true,
      // 默认选中
      activeIndex: "0",
      //受理申请标识码
      bsmSlsq: this.$route.query.bsmSlsq,
      //当前流程所在环节
      bestepid: this.$route.query.bestepid,
      //设置那个表单选中
      tabName: "",
      //设置那个表单选择
      currentSelectTab: {},
      //表单集合
      tabList: [],
      //选择加载哪一个组件
      componentTag: "",
      //设置表单传递数据
      currentSelectProps: {},
      //材料分屏表单
      clxxForm: "",
      //材料信息选择卡索引
      clxxIndex: "",
      //材料信息选项卡对象
      clxxTab: {},
      //页面监听时间
      _beforeUnload_time: "",
      //批量操作
      showBatch: false,
      //批量操作按钮名称
      batchButtonName: "",
    };
  },
  mounted() {
    //添加页面监听事件
    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: {
    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);
      }
    },
    changeLoadIndex() {
      this.loadIndex++;
    },
    closeDialog() {
      this.myValue = false;
    },
    // 更新列表
    updateDialog() {
      this.loadBdcdylist();
    },
    // 删除左侧列表
    handleDel(item) {
      this.$confirm("确定要删除吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          var formdata = new FormData();
          formdata.append("bsmSldyList", item.bsmSldy.split(","));
          formdata.append("bsmSlsq", this.bsmSlsq);
          deleteFlow(formdata).then((res) => {
            if (res.code == 200) {
              this.$message.success("删除成功");
              this.loadBdcdylist();
            } else {
              this.$message.error(res.message);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //申请单元点击事件
    stepForm(index) {
      getStepFormInfo(this.currentSelectProps).then((res) => {
        if (res.code === 200) {
          this.fresh++;
          //获取单元对应的所有表单信息
          this.tabList = res.result;
          //默认加载第一个表单信息
          this.tabName = res.result[0].value;
          //批量操作无分屏按钮
          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;
              }
            });
          }
        }
      });
    },
    //申请单元点击事件
    unitClick(index) {
      this.currentSelectProps = this.unitData[index];
      this.currentSelectProps.batchOperation = false;
      this.activeIndex = index.toString();
      this.stepForm(index);
    },
    //批量按钮点击事件
    batchUnitClick() {
      this.currentSelectProps.batchOperation = true;
      this.activeIndex = "-1";
      this.stepForm();
    },
  },
};
</script>