<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">
      <!-- 左侧菜单栏 -->
      <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>
  </div>
</template>
<style scoped lang="scss">
  @import "~@/styles/mixin.scss";
  @import "./workFrame.scss";
</style>
<script>
  import { mapGetters } from 'vuex'
  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: "",
      };
    },
    computed: {
      ...mapGetters(['isRefresh'])
    },
    watch: {
      isRefresh: {
        handler (newVal, oldVal) {
          if (newVal) this.updateDialog()
        }
      }
    },
    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();
      },
      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>