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

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

<script setup lang="jsx">
import {getInfo} from "@/api/project-demand/index.js";
import {getSubCompOpt} from '@/api/user/user.js'
import {useProcessStore} from '@/stores/processStore.js';
import CollectionDetail from "@/components/DetailComponent/CollectionDetail.vue";
import {downloadFile} from "@/api/project-demand";
import SummaryDetail from "@/components/DetailComponent/SummaryDetail.vue";
import ApprovalDetail from "@/components/DetailComponent/ApprovalDetail.vue";
import { getMapProjectStateInfo } from '@/components/steps/api';
import { ElLoading } from "element-plus";
import Opinion from "@/components/DetailComponent/Opinion.vue";

const route = useRoute()
const activeName = ref('first')
const collectionData = ref({})
const summaryData = ref({})
const collectionProcessViewer = ref(true)
const loading = ref(false)
const summaryProcessViewer = ref(true)
const processStore = useProcessStore()
const companyOption = ref([])
const rules = reactive({
  auditOpinion: [{required: true, message: '请输入审核意见', trigger: 'blur'}],
})
const getCompanyOption = async () => {
  const res = await getSubCompOpt()
  companyOption.value = res.data
}

const getDemandCollectionInfo = async () => {
  if (!route.query.id) return
  await getCompanyOption()
  collectionProcessViewer.value = false
  getInfo(route.query.id).then(res => {
    let data = res.data
    collectionData.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(() => {
      collectionProcessViewer.value = true
    })
  })
}
const getDemandSummaryInfo = async () => {
  if (!route.query.id) return
  // await getCompanyOption()
  summaryProcessViewer.value = false
  getInfo(route.query.id).then(res => {
    let data = res.data
    summaryData.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(() => {
      summaryProcessViewer.value = true
    })
  })
}

const handleClick = (tab, event) => {
  console.log(tab, event)
  if (tab.props.name === 'first') {
    getDemandCollectionInfo()
  } else if (tab.props.name === 'second') {
    getDemandSummaryInfo()
  }
}
// getDemandCollectionInfo()

const commonForm = ref({})
const commonProvessViewer = ref(true)

const getAllInfo = async (state) => {
  const loading = ElLoading.service({fullscreen: true})
  try {
    state == '00' && ( await getCompanyOption() )
    commonProvessViewer.value = false
    loading.value = true
    const { data, code } = await getMapProjectStateInfo(route.query.projectId, state)
    if(state == '00') {
      collectionData.value = data;
    } else if(state == '10') {
      summaryData.value = data;
    }
    if(code===1000){
      loading.value = false
    }
    console.log(data, 'data--22');
    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(() => {
      // summaryProcessViewer.value = true
      commonProvessViewer.value = true
    })
    loading.close()
  } catch {
    loading.close()
  }

}

const showActive = ref()

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;
      }
    }
  }
}

.approval-record {
  padding-bottom: 30px;

  .process {
    position: relative;
  }
}
</style>
