<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 }} {{ item.value }}</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 }">
        <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 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;
                this.$popupDialog("流程图", "workflow/components/processViewer", {
                  xml: result.xml,
                  finishedInfo: {
                    finishedTaskSet: result.finishedTaskSet,
                    unfinishedTaskSet: result.unfinishedTaskSet,
                    rejectedTaskSet: result.rejectedTaskSet,
                    finishedSequenceFlowSet: result.finishedSequenceFlowSet,
                  },
                  allCommentList: result.historyTaskList,
                }, '80%', true);
              }
            );
            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;
          case "rm":
            this.del()
            window.close();
        }
      },
      del () {
        let formdata = new FormData();
        formdata.append("bsmSlsq", this.bsmSlsq);
        this.$confirm("确定要删除吗, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            deleteFlow(formdata).then((res) => {
              if (res.code === 200) {
                this.handleDel();
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.queryClick();
              } else {
                this.$message.error(res.message);
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
      //读取申请单元信息
      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>