<script setup name="projectCollectionEnterDetail">
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import BasicInfo from '@/pages/projectCollection/detail/components/basicInfo.vue'
import { dictionary, detail } from '@/http/apis/projectCollection/projectCollectionEnter'
import ApplyInfo from '@/pages/projectCollection/detail/components/applyInfo.vue'
import ApplicationInfo from '@/pages/projectCollection/detail/components/applicationInfo.vue'
import CoreBusiness from '@/pages/projectCollection/detail/components/coreBusiness.vue'
import ProjectApprovalInfo from '@/pages/projectCollection/detail/components/projectApprovalInfo.vue'
import EmpMaterials from '@/pages/projectCollection/detail/components/empMaterials.vue'
import PurchaseInfo from '@/pages/projectCollection/detail/components/purchaseInfo.vue'
import store from '@/store'
import { templateTypeList } from '@/http/apis/performanceEvaluation/indicatorTemplate'
const { statusGjOptions } = store.dictStore.globalDicts || {}
const
  tabList = ref(['项目基本信息', '项目申报信息', '项目关联信息', '核心业务', '项目立项评审信息', '项目采购、资金支付信息', '实施材料信息']),
  activeName = ref('项目基本信息'),
  changeTab = (val) => {
    activeName.value = val
  },
  route = useRoute(),
  detailData = ref(),
  getDetail = async () => {
    const id = route.query.type === '1' ? route.query.id : route.query.draftId
    const res = await detail(route.query.type, id)
    detailData.value = {
      ...res.data,
      apply: {
        ...res.data.apply,
        baseHistorProjs: res.data.apply?.baseHistorProjId?.split('；').map((i, k) => {
          return {
            baseProjId: i,
            baseProjName: res.data.apply?.baseHistorProjName.split('；')[k],
            baseProjSetYear: res.data.apply?.baseHistorProjYear.split('；')[k]
          }
        }) || []
      }
    }
    if ((detailData.value?.baseinfo?.baseConstructionType?.split('；')?.length === 1 && detailData.value?.baseinfo?.baseConstructionType?.split('；').includes('02'))) {
      tabList.value = tabList.value.filter(i => i !== '项目关联信息')
    }
    if (detailData.value?.baseinfo?.baseProjSetProg === '01') {
      tabList.value = tabList.value.filter(i => i !== '项目立项评审信息')
    }
  },
  dictionaryList = ref([]),
  templateTypeListData = ref(),
  getTemplateTypeList = async () => {
    const res = await templateTypeList()
    templateTypeListData.value = res.data
  }
onMounted(async () => {
  getTemplateTypeList()
  dictionaryList.value = (await dictionary()).data
  getDetail()
})
</script>

<template>
  <div class="px-20 pb-20 overflow-auto">
    <el-card shadow="never" class="mb-16">
      <div class="card-header">
        <div class="flex justify-between items-center">
          <div class="flex-1">
            <p class="font-bold">{{ detailData?.baseinfo?.baseProjName }}</p>
            <div class="mt-8 search">
              <el-form label-suffix=":">
                <el-row :gutter="24">
                  <el-col :span="6">
                    <el-form-item label="建设单位">{{ detailData?.baseinfo?.baseBuildDeprt||'-' }}</el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="主管单位">{{ detailData?.baseinfo?.baseManDeprt||'-' }}</el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="创建时间">{{ detailData?.baseinfo?.createOn||'-' }}</el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="更新时间">{{ detailData?.baseinfo?.updateOn||'-' }}</el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
          <div class="textRight">
            <span :class="`text-${statusGjOptions[detailData?.baseinfo?.baseProjSetProg?.slice(-1)]?.color}`">
              {{ dictionaryList?.filter(i => i.type === 'PROJECT_STATUS').find(i=>i.value===detailData?.baseinfo?.baseProjSetProg)?.label ||'-' }}
            </span>
            <p>状态</p>
          </div>
        </div>
      </div>
    </el-card>
    <el-card shadow="never" class="tab-card">
      <template #header>
        <el-tabs v-model="activeName" @tab-change="changeTab">
          <el-tab-pane
            v-for="(item,index) in tabList"
            :key="index"
            :label="item"
            :name="item"
          />
        </el-tabs>
      </template>
      <basic-info
        v-if="activeName==='项目基本信息'"
        :detail-data="detailData?.baseinfo"
        :dictionary-list="dictionaryList"
        :template-type-list-data="templateTypeListData"
      />
      <apply-info
        v-if="activeName==='项目申报信息'"
        :detail-data="detailData?.apply"
        :dictionary-list="dictionaryList"
        :basic-info-data="detailData?.baseinfo"
      />
      <application-info v-if="activeName==='项目关联信息'" :detail-data="detailData?.apply" />
      <core-business v-if="activeName==='核心业务'" :detail-data="detailData?.apply" />
      <project-approval-info
        v-if="activeName==='项目立项评审信息'"
        :detail-data="detailData?.approve"
        :dictionary-list="dictionaryList"
        :basic-info-data="detailData?.baseinfo"
      />
      <purchase-info
        v-if="activeName==='项目采购、资金支付信息'"
        :basic-info-data="detailData?.baseinfo"
        :base-proj-set-year="detailData?.apply?.baseProjSetYear"
        :dictionary-list="dictionaryList"
        :detail-data="detailData?.procures"
      />
      <emp-materials
        v-if="activeName==='实施材料信息'"
        :detail-data="detailData?.cimplement"
        :basic-info-data="detailData?.baseinfo"
        :base-proj-set-year="detailData?.apply?.baseProjSetYear"
        :approval-info-data="detailData?.approve"
      />
    </el-card>
  </div>
</template>
