<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 }">
        <div class="title" @click="unitClick(-1)">{{ batchButtonName }}</div>
        <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>
    <fqsqDialog 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 fqsqDialog from "@/views/ywbl/ywsq/slectBdc.vue";
export default {
  components: {
    fqsqDialog,
    NoticeBar,
    ProcessViewer
  },
  mixins: [WorkFlow, publicFlow],
  data () {
    return {
      noticeList: [],
      isDialog: false,
      // 流程图
      // 折叠
      isShowdrawer: true,
      // 默认选中
      activeIndex: "0",
      //受理申请标识码
      bsmSlsq: this.$route.query.bsmSlsq,
      //当前流程所在环节
      bestepid: this.$route.query.bestepid,
      //设置那个表单选中
      tabName: "",
      //表单集合
      tabList: [],
      //选择加载哪一个组件
      componentTag: "",
      //设置表单传递数据
      currentSelectProps: {},
      //材料分屏表单
      clxxForm: "",
      //材料信息选择卡索引
      clxxIndex: "",
      //材料信息选项卡对象
      clxxTab: {},
      //页面监听时间
      _beforeUnload_time: ""
    }
  },
  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: "已取消删除",
          });
        });
    },
    handleBatchDel () {
      let that = this;
      this.$popup({
        title: "批量删除",
        width: "50%",
        btnShow: true,
        editItem: "workflow/components/batchDel",
        height: "600px",
        formData: {
          bsmSlsq: this.bsmSlsq,
          dataList: this.unitData,
        },
        confirm: function () {
          that.loadBdcdylist();
        }
      })
    },
    //申请单元点击事件
    unitClick (index) {
      if (index >= 0) {
        this.currentSelectProps = this.unitData[index];
        this.currentSelectProps.batchOperation = false;
      } else {
        this.currentSelectProps.batchOperation = true;
      }
      getStepFormInfo(this.currentSelectProps).then((res) => {
        if (res.code === 200) {
          this.fresh++;
          //获取单元对应的所有表单信息
          this.tabList = res.result;
          //默认加载第一个表单信息
          this.tabName = res.result[0].value;
          //处理分屏材料信息
          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;
            }
          })
        }
      })
    }
  }
}
</script>