<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-07-25 16:15:46
-->
<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">
      <!-- 左侧菜单栏 区分业务-->
      <segmentMenu v-if="['A0320099','A0330099' ].includes(slsq.djqxbm)" @getCurrentSelectProps="getCurrentSelectProps" />
      <ordinaryMenu v-else @getCurrentSelectProps="getCurrentSelectProps" />

      <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" @tab-click="handleClick">
            <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>
  </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/workFlow.js"
  import { getForm } from "./flowform"
  import NoticeBar from "@/components/NoticeBar/index";
  // 引入左侧菜单
  import ordinaryMenu from "./components/leftmenu/ordinaryMenu.vue"
  // 引入左侧菜单
  import segmentMenu from "./components/leftmenu/segmentMenu.vue"
  export default {
    mixins: [WorkFlow, publicFlow],
    components: {
      NoticeBar,
      ordinaryMenu,
      segmentMenu
    },
    data () {
      return {
        // 流程图
        imgSrc: "",
        // 折叠
        isShowdrawer: true,
        // 默认选中
        activeIndex: "0",
        //受理申请标识码
        bsmSlsq: this.$route.query.bsmSlsq,
        //当前流程所在环节
        bestepid: this.$route.query.bestepid,
        // 判断类型
        type: "READ_ONLY",
        //设置那个表单选中
        tabName: "",
        //表单集合
        tabList: [],
        //选择加载哪一个组件
        componentTag: "",
        //设置表单组件是否刷选值
        fresh: 10,
        //设置表单传递数据
        currentSelectProps: {},
        //是否开启材料分屏
        splitScreen: false,
        ableOperation: false,
        //材料分屏表单
        clxxForm: "",
        //材料信息选择卡索引
        clxxIndex: "",
        //材料信息选项卡对象
        clxxTab: {},
      };
    },
    methods: {
      /**
       * @description: getCurrentSelectProps
       * @param {*} val
       * @author: renchao
       */
      getCurrentSelectProps (val) {
        this.currentSelectProps = val
      },
      //申请单元点击事件
      /**
       * @description: 申请单元点击事件
       * @param {*} index
       * @author: renchao
       */
      stepForm (index) {
        this.currentSelectProps.type = "READ_ONLY"
        getStepFormInfo(this.currentSelectProps).then((res) => {
          if (res.code === 200) {
            this.fresh++;
            //获取单元对应的所有表单信息
            this.tabList = res.result;
            //默认加载第一个表单信息
            //默认加载第一个表单信息
            let arr = res.result.filter(item => item.defaultForm)
            if (arr.length > 0) {
              this.tabName = arr[0].value;
            } else {
              this.tabName = res.result[0].value;
            }
            this.ableOperation = this.tabList[0].ableOperation
            //批量操作无分屏按钮
            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;
                }
              })
            }
          }
        })
      },
         //选项卡切换事件
    /**
     * @description: 右侧表单选项卡事件
     * @param {*} handleClick
     * @author: renchao
     */
    handleClick(a) {
      let p = Object.keys(this.tabList[0]).filter(
        (item) => item == "ableOperation"
      );
      if (p) {
        this.ableOperation = this.tabList[a.index].ableOperation;
      }
    },
    }
  }
</script>