<template>
  <steps :active="route.query.id==='-1'?currentStep-1:currentStep" @setDetail="setDetail" @stepChange="stepChange"
         :reportType="route.query.id==='-1'?'direct':''">
    <template #content>
      <collection-detail
          :formData="commonForm.formData"
          :data="commonForm"
          :processViewer="commonProvessViewer"
          v-show="showActive == '00'"
          :loading="loading"
      />
      <summary-detail v-show="showActive == '10'" :formData="commonForm.formData" :data="commonForm"
                      :processViewer="commonProvessViewer" :loading="loading" :fileListShow="fileListShow"/>
      <ApprovalDetail type="approval" v-show="showActive == '20'" :formData="commonForm.formData"
                      :data="commonForm" :processViewer="commonProvessViewer" :loading="loading"
                      :fileListShow="fileListShow"/>
      <ApprovalDetail type="execute" v-show="showActive == '40'" :formData="commonForm.formData"
                      :data="commonForm" :processViewer="commonProvessViewer" :loading="loading"
                      :fileListShow="fileListShow"/>
      <ApprovalDetail type="archivist" v-show="showActive == '50'" :formData="commonForm.formData" :data="commonForm"
                      :processViewer="commonProvessViewer" :loading="loading" :fileListShow="fileListShow"/>

    </template>
  </steps>
  <opinion v-if="commonForm.taskId" :formData="commonForm.formData" :taskId="commonForm.taskId"/>
</template>

<script setup lang="jsx">
import {useProcessStore} from '@/stores/processStore.js';
import CollectionDetail from "@/components/DetailComponent/CollectionDetail.vue";
import SummaryDetail from "@/components/DetailComponent/SummaryDetail.vue";
import ApprovalDetail from "@/components/DetailComponent/ApprovalDetail.vue";
import {getMapProjectStateInfo} from '@/components/steps/api';
import {ElLoading, ElNotification} from "element-plus";
import Opinion from "@/components/DetailComponent/Opinion.vue";

const route = useRoute()
const activeName = ref('first')
const loading = ref(false)
const processStore = useProcessStore()
const fileListShow = ref('READ')
const currentStep = ref()
route.query.step == '10' && (currentStep.value = 1)
route.query.step == '20' && (currentStep.value = 2)
route.query.step == '40' && (currentStep.value = 3)
route.query.step == '50' && (currentStep.value = 4)
const showActive = ref()
const commonForm = ref({})
const commonProvessViewer = ref(true)

const getAllInfo = async (state) => {
  const loading = ElLoading.service({fullscreen: true})
  try {
    commonProvessViewer.value = false
    loading.value = true
    const {data, code, msg} = await getMapProjectStateInfo(route.query.projectId, state)
    if (code === 1000) {
      loading.value = false
    } else {
      ElNotification({
        title: '提示',
        message: msg,
        type: 'error'
      })
      loading.close()
    }
    if (data === undefined) return;
    commonForm.value = data
    processStore.setDesign(data)
    processStore.runningList.value = data.runningList;
    processStore.endList.value = data.endList;
    processStore.noTakeList.value = data.noTakeList;
    processStore.refuseList.value = data.refuseList;
    processStore.passList.value = data.passList;
    nextTick(() => {
      commonProvessViewer.value = true
      if (data.formPermMap["fileList"]) {
        fileListShow.value = data.formPermMap["fileList"].perm
      }
    })
    loading.close()
  } catch {
    loading.close()
  }
}


const setDetail = (active) => {
  showActive.value = active
  getAllInfo(active)
}

const stepChange = (data) => {
  showActive.value = data.active
  getAllInfo(data.active)
}
</script>

<style scoped lang="scss">
.detail-block {
  padding-top: 15px;

  :deep(.el-tabs__nav-scroll) {
    width: 100%;
    display: flex;

    .el-tabs__nav {
      display: flex;
      flex: 1;

      .el-tabs__item {
        flex: 1;
        font-size: 16px;
      }

      .is-active {
        color: black;
        background-color: #DED0B2;
      }
    }
  }
}
</style>
