<template>
  <!-- 流程 -->
  <view>
    <PageHead :title="props.title"  :backUrl="props.backUrl"><slot name="action"></slot></PageHead>
    <scroll-view class="tab-box" scroll-x="true" scroll-left="120">
      <view
        class="tab-item"
        v-for="(item, index) in tabHeadList"
        :key="index"
        @tap="changeCurrentTabIndex(index)"
        data-eventsync="true"
      >
        <view class="title" :class="state.currentTabIndex == index ? 'cur' : ''">{{
          item.title
        }}</view>
        <view v-if="state.currentTabIndex == index" class="hr"></view>
      </view>
      <!-- 关联任务 -->
      <block v-if="state.relationTasks.length > 0">
        <view
          class="tab-item"
          v-for="(item, index) in state.relationTasks"
          :key="index"
          :class="state.currentTabIndex == index + tabHeadList.length ? 'cur' : ''"
          @tap="changeCurrentTabIndex(index + tabHeadList.length)"
          >{{ item.title }}</view
        >
      </block>
    </scroll-view>
    <view class="content">
      <view class="tab-content">
        <FormInformation
          ref="formInfoRef"
          v-show="state.currentTabIndex == 0"
          :formInfos="props.data.formInfos"
          :opinionsComponents="data.opinionsComponents"
          :opinions="data.opinions"
          :formAssignmentData="data.formAssignmentData"
          :disabled="props.disabled"
          :workflowData="props.workflowData"
        ></FormInformation>
        <ProcessInformation
          v-if="state.currentTabIndex == 1"
          :content="props.data.workflowChat"
        ></ProcessInformation>
        <FlowRecord
          v-if="state.currentTabIndex == 2"
          :processId="props.data.processId"
          :content="props.data.taskRecords"
        ></FlowRecord>
        <SummaryOfAttachments
          v-if="state.currentTabIndex == 3"
          :processId="props.data.processId"
        ></SummaryOfAttachments>
      </view>
    </view>
  </view>
  <slot name="footer"><!-- 审批意见 --></slot>
</template>

<script setup>
import { ref, reactive } from "vue";
import PageHead from "@/components/layout/PageHead.vue";
import FormInformation from "./FormInformation.vue"; //表单信息
import ProcessInformation from "./ProcessInformation.vue"; //流程信息
import FlowRecord from "./FlowRecord.vue"; //流程记录
import SummaryOfAttachments from "./SummaryOfAttachments.vue"; //附件汇总
const state = reactive({
  currentTabIndex: 0,
  relationTasks: [],
});
const props = defineProps({
  title: String,
  data: Object,
  backUrl:{
    type:String,
    default:''
  },
  disabled:{
    type:Boolean,
    default:false
  },
  workflowData:{
    type:Object,
    default:()=>{
      return {}
    }
  }
});
let formInfoRef = ref();
const tabHeadList = [
  {
    title: "表单信息",
  },
  {
    title: "流程信息",
  },
  {
    title: "流程记录",
  },
  {
    title: "附件汇总",
  },
];
function changeCurrentTabIndex(index) {
  state.currentTabIndex = index;
}
function validateForm() {
  return formInfoRef.value.validateForm();
}
function getFormModels() {
  return formInfoRef.value.getFormModels();
}
function getUploadComponentIds() {
  return formInfoRef.value.getUploadComponentIds();
}
defineExpose({ validateForm, getFormModels, getUploadComponentIds });
</script>

<style lang="scss" scoped>
.tab-box {
  white-space: nowrap;
  width: 100%;
  padding-top: 28rpx;
  padding-left: 56rpx;
}
.tab-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-right: 67rpx;
  .title {
    font-size: 27rpx;
    font-weight: bold;
    color: #253954;
    line-height: 32rpx;
  }
  .cur {
    color: #5e95ff;
  }
  .hr {
    width: 38rpx;
    height: 8rpx;
    background: #5e95ff;
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    margin-top: 7rpx;
  }
}

.content {
  padding: 28rpx;
}
</style>
