<template>
  <div class="container">
    <!-- 顶部内容框 -->
    <div class="topButton">
      <!-- 左侧业务功能按钮 -->
      <ul>
        <li
          @click="operation(item)"
          v-for="(item, index) in leftButtonList"
          :key="index"
        >
          <svg-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 v-if="this.isShowdrawer">
          <div class="title">申请单元列表({{ unitData.length }})</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>
            </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, index) in tabList"
              :key="index"
            >
            </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 { leftMenu, stepExpandInfo, getStepFormInfo } from "@/api/fqsq.js";
import publicFlow from "./mixin/public.js";
import { popupDialog } from "@/utils/popup.js";
import NoticeBar from "@/components/NoticeBar/index";
import { getWorkFlowImage } from "@/api/workflow/jsydsyqFlow.js";
export default {
  mixins: [publicFlow],
  components: {
    NoticeBar,
  },
  data() {
    return {
      // 流程图
      imgSrc: "",
      // 折叠
      isShowdrawer: true,
      // 默认选中
      activeIndex: "0",
      //受理申请标识码
      bsmSlsq: this.$route.query.bsmSlsq,
      //当前流程所在环节
      bestepid: this.$route.query.bestepid,
      //顶部左侧按钮集合
      leftButtonList: [],
      //顶部右侧按钮集合
      rightButtonList: [],
      //左侧菜单数据集合
      unitData: [],
      //设置那个表单选中
      tabName: "",
      //表单集合
      tabList: [],
      //选择加载哪一个组件
      componentTag: "",
      //设置表单组件是否刷选值
      fresh: 10,
      //设置表单传递数据
      currentSelectProps: {},
      //是否开启材料分屏
      splitScreen: false,
      //材料分屏表单
      clxxForm: "",
      //材料信息选择卡索引
      clxxIndex: "",
      //材料信息选项卡对象
      clxxTab: {},
    };
  },
  mounted() {
    this.loadBdcdylist();
    this.flowInitParam();
  },

  methods: {
    //加载流程初始参数
    flowInitParam() {
      var formdata = new FormData();
      formdata.append("bsmSlsq", this.bsmSlsq);
      formdata.append("bestepid", this.bestepid);
      formdata.append("type", "READ_ONLY");
      stepExpandInfo(formdata).then((res) => {
        if (res.code === 200) {
          this.leftButtonList = res.result.button;
          this.rightButtonList = res.result.operation;
        }
      });
    },
    //流程环节操作按钮
    operation(item) {
      //按钮 B1:流程图 B2:材料分屏 B3:材料导入 B4:登记簿 B5:证书预览 B6：打印申请书
      //操作按钮 登簿：record  转件：transfer  退回：back  退出：signout
      switch (item.value) {
        case "B1":
          getWorkFlowImage(this.bsmSlsq, this.$route.query.bestepid).then(
            (res) => {
              let { result } = res;
              popupDialog("流程图", "workflow/components/processViewer", {
                xml: result.xml,
                finishedInfo: {
                  finishedTaskSet: result.finishedTaskSet,
                  unfinishedTaskSet: result.unfinishedTaskSet,
                  rejectedTaskSet: result.rejectedTaskSet,
                  finishedSequenceFlowSet: result.finishedSequenceFlowSet,
                },
                allCommentList: result.historyTaskList,
              });
            }
          );
          break;
        case "B5":
          this.zsylFlag = true;
          break;
        case "B2": //材料分屏按钮
          this.splitScreen = this.splitScreen ? false : true;
          this.$store.dispatch("app/settScreen", this.splitScreen);
          if (this.splitScreen) {
            //如果当前选项卡为材料信息内容，递减到上一个选项卡内容
            if (this.tabName == this.clxxTab.value) {
              this.tabName = this.tabList[this.clxxIndex - 1].value;
              this.getFromRouter(this.tabList[this.clxxIndex - 1].value);
            }
            this.tabList.splice(this.clxxIndex, 1);
          } else {
            this.tabList.splice(this.clxxIndex, 1, this.clxxTab);
          }
          break;
        case "signout":
          window.close();
          break;
      }
    },
    //读取申请单元信息
    loadBdcdylist() {
      var formdata = new FormData();
      formdata.append("bsmSlsq", this.bsmSlsq);
      formdata.append("bestepid", this.bestepid);
      leftMenu(formdata).then((res) => {
        if (res.code === 200) {
          this.unitData = res.result;
          this.currentSelectProps = res.result[0];
          this.unitClick(0);
        }
      });
    },
    //申请单元点击事件
    unitClick(index) {
      this.currentSelectProps = this.unitData[index];
      this.currentSelectProps.type = "ONLY_READ";
      getStepFormInfo(this.currentSelectProps).then((res) => {
        if (res.code === 200) {
          this.fresh++;
          //获取单元对应的所有表单信息
          this.tabList = res.result;
          //默认加载第一个表单信息
          this.tabName = res.result[0].value;
        }
      });
    },
  },
};
</script>