<template>
  <steps :active="active" @setDetail="setDetail" @stepChange="stepChange">
    <template #content>
      <collection-detail v-show="showActive == '00'" :formData="summaryData.formData" :data="summaryData"
                         :processViewer="summaryProcessViewer" :companyOption="companyOption" :loading="loading"/>
      <summary-detail v-show="showActive == '10'" :formData="summaryData.formData" :data="summaryData"
                      :processViewer="summaryProcessViewer" :loading="loading"/>
      <ApprovalDetail v-show="showActive == '20'" :formData="summaryData.formData" :data="summaryData" :processViewer="summaryProcessViewer"></ApprovalDetail>

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

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

const route = useRoute()
const companyOption = ref([])
const commonForm = ref({})
const summaryData = ref({})
const summaryProcessViewer = ref(true)
const loading = ref(false)
const processStore = useProcessStore()
const active = ref(route.query.state)
const showActive = ref()
const getCompanyOption = async () => {
  const res = await getSubCompOpt()
  companyOption.value = res.data
}
const getInfo = async (state) => {
  const projectId = route.query.projectId
  if(showActive == '00'){
    await getCompanyOption()
  }
  summaryProcessViewer.value = false
  loading.value = true
  const {code, data,msg} = await getMapProjectStateInfo(projectId, state)
  ElNotification({
    title: '提示',
    message: msg,
    type: code === 1000 ? 'success' : 'error'
  })
  if(code===1000){
    summaryData.value = data;
    loading.value = false
    console.log('data-====================',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(() => {
      summaryProcessViewer.value = true
    })
  }
}

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

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

<style scoped>

</style>
