<script setup>
import { onMounted, reactive, ref } from 'vue'
import store from '@/store'
import { useRoute } from 'vue-router'
import ProjectProgress from './components/projectProgress.vue'
import ProjectInfo from './components/projectInfo.vue'
import SummarizeInfo from './components/summarizeInfo.vue'
import FlowRecordDialog from './components/flowRecordDialog.vue'
import { prePlanDetail, processSchedule, projectDetail } from '@/http/apis/projectStoreManage/projectStore'
import { dictionary } from '@/http/apis/projectCollection/projectCollectionEnter'
const { statusOptions } = store.dictStore.globalDicts || {},
  route = useRoute()
// 一级切换栏
const activeName1 = ref('1'),
  changeTab = (val) => {
    activeName1.value = val
    if (val === '1') {
      projectInfoRef.value.getTabs()
    } else if (val === '2') {
      constructInfoRef.value.getTabs()
    }
  },
  // 项目详情
  projectInfoRef = ref(),
  detailData = ref({
    projectCode: ''
  }),
  getDetail = async () => {
    const res = await projectDetail(route.query.id)
    if (res.data.prePlanProjectId) {
      const res1 = await prePlanDetail(res.data.prePlanProjectId)
      detailData.value = {
        ...res1.data,
        baseHistorProjs: res1.data?.baseHistorProjId?.split('；').map((i, k) => {
          return {
            baseProjId: i,
            baseProjName: res1.data?.baseHistorProjName.split('；')[k],
            baseProjSetYear: res1.data?.baseHistorProjYear.split('；')[k]
          }
        }) || []
      }
      constructDetailData.value = {
        ...res.data,
        baseHistorProjs: res.data?.baseHistorProjId?.split('；').map((i, k) => {
          return {
            baseProjId: i,
            baseProjName: res.data?.baseHistorProjName.split('；')[k],
            baseProjSetYear: res.data?.baseHistorProjYear.split('；')[k]
          }
        }) || []
      }
    } else {
      detailData.value = {
        ...res.data,
        baseHistorProjs: res.data?.baseHistorProjId?.split('；').map((i, k) => {
          return {
            baseProjId: i,
            baseProjName: res.data?.baseHistorProjName.split('；')[k],
            baseProjSetYear: res.data?.baseHistorProjYear.split('；')[k]
          }
        }) || []
      }
      constructDetailData.value = null
    }
    if (route.name === 'projectIrsDocDetail') {
      activeName1.value = '3'
      summarizeInfoRef.value.setActiveName('终验信息')
    } else if (route.name === 'reviewCheckProjectListProjectDetail') {
      activeName1.value = '3'
      summarizeInfoRef.value.setActiveName('建设方案审查意见')
    }
  },
  // 建设方案
  constructInfoRef = ref(),
  constructDetailData = ref(),
  // 审核记录
  flowRecordDialogData = reactive({
    visible: false,
    flowData: undefined,
    sjFlowData: undefined
  }),
  showFlowRecordDialog = (data, content) => {
    flowRecordDialogData.visible = true
    if (data) {
      flowRecordDialogData.flowData = JSON.parse(JSON.stringify(data))
      flowRecordDialogData.flowData = changeProgressInfo(flowRecordDialogData.flowData)
    } else {
      flowRecordDialogData.flowData = undefined
    }
    flowRecordDialogData.sjFlowData = content || undefined
  },
  changeProgressInfo = (data) => {
    data.forEach(res => {
      if (res.children) {
        const nodeIds = []
        const newChildren = []
        res.children.forEach(child => {
          if (!nodeIds.includes(child.nodeId)) {
            nodeIds.push(child.nodeId)
            newChildren.push({
              nodeId: child.nodeId,
              approvalMode: child.approvalMode,
              name: child.name,
              taskId: child.taskId,
              nodeType: child.nodeType,
              list: [{ ...child }],
              userIds: [child.userId]
            })
          } else {
            newChildren.find(i => i.nodeId === child.nodeId).list.push(child)
            newChildren.find(i => i.nodeId === child.nodeId).userIds.push(child.userId)
          }
        })
        res.children = newChildren
      } else {
        res['userIds'] = [res.userId]
      }
    })
    return data
  },
  closeFlowRecordDialog = () => {
    flowRecordDialogData.visible = false
  },
  // 进度条记录
  stepData = ref(),
  getProcessSchedule = async () => {
    const res = await processSchedule(route.query.id)
    stepData.value = res.data
  },
  // 是否可以下载附件
  getIsDownLoadFile = () => {
    return true
  },
  dictionaryList = ref([]),
  summarizeInfoRef = ref()
onMounted(async () => {
  dictionaryList.value = (await dictionary()).data
  await getDetail()
  await getProcessSchedule()
})
</script>
<template>
  <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">{{ constructDetailData?.projectName||detailData.projectName }}</p>
          <div class="mt-8 search">
            <el-form label-suffix=":">
              <el-row :gutter="24">
                <el-col :span="6">
                  <el-form-item label="申报单位">{{ constructDetailData?.buildOrgName||detailData.buildOrgName||'-' }}</el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="主管单位">{{ constructDetailData?.superOrg||detailData.superOrg||'-' }}</el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="创建时间">{{ constructDetailData?.createOn||detailData.createOn||'-' }}</el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="更新时间">{{ constructDetailData?.updateOn||detailData.updateOn||'-' }}</el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
        <div class="textRight">
          <p v-if="constructDetailData?.status">
            <span :class="`dot mr-4 bg-${constructDetailData&&constructDetailData.status&&statusOptions[constructDetailData.status]?.color}`"></span>
            <span :class="`font-semibold text-${constructDetailData&&constructDetailData.status&&statusOptions[constructDetailData.status]?.color}`">{{ constructDetailData&&constructDetailData.status&&statusOptions[constructDetailData.stage].name }}-{{ constructDetailData&&constructDetailData.status&&statusOptions[constructDetailData.status].name }}</span>
          </p>
          <p v-else>
            <span :class="`dot mr-4 bg-${detailData&&detailData.status&&statusOptions[detailData.status]?.color}`"></span>
            <span :class="`font-semibold text-${detailData&&detailData.status&&statusOptions[detailData.status]?.color}`">{{ detailData&&detailData.status&&statusOptions[detailData.stage].name }}-{{ detailData&&detailData.status&&statusOptions[detailData.status].name }}</span>
          </p>
          <p>状态</p>
        </div>
      </div>
    </div>
  </el-card>
  <project-progress
    :detail-data="detailData"
    :step-data="stepData"
    shadow="never"
    @show-flow-record-dialog="showFlowRecordDialog"
  />
  <!-- 一级切换栏 -->
  <el-tabs
    v-model="activeName1"
    type="card"
    class="myCardTab mt-16"
    @tab-change="changeTab"
  >
    <el-tab-pane label="初步方案" name="1">
      <project-info
        ref="projectInfoRef"
        :detail-data="detailData"
        :is-down-load-file="getIsDownLoadFile()"
        :dictionary-list="dictionaryList"
      />
    </el-tab-pane>
    <el-tab-pane v-if="constructDetailData" label="建设方案" name="2">
      <project-info
        ref="constructInfoRef"
        :detail-data="constructDetailData"
        :is-down-load-file="getIsDownLoadFile()"
        :dictionary-list="dictionaryList"
      />
    </el-tab-pane>
    <el-tab-pane label="归集信息" name="3">
      <summarize-info v-if="detailData" ref="summarizeInfoRef" :detail-data="constructDetailData||detailData" />
    </el-tab-pane>
  </el-tabs>
  <flow-record-dialog
    :visible="flowRecordDialogData.visible"
    :flow-data="flowRecordDialogData.flowData"
    :sj-flow-data="flowRecordDialogData.sjFlowData"
    @close="closeFlowRecordDialog"
  />
</template>
<style lang='less' scoped>
.myCardTab{
  :deep(.el-tabs__header){
    margin: 0;
  }
}
</style>
