<script name="projectHistory" setup>

import { historyList, projectDetail } from '@/http/apis/projectStoreManage/projectStore'
import { nextTick, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import ProjectInfo from '@/pages/projectStoreManage/projectStore/projectDetail/components/projectInfo.vue'
import NoData from '@/components/noData/index.vue'
import FlowRecord from '@/pages/toDoCenter/components/flowRecord.vue'

const route = useRoute(),
  projectInfoRef = ref(),
  activeName = ref('1'),
  tabChange = async (val) => {
    activeName.value = val
    list.value = val === '1' ? basicList.value : constructList.value
    menuActive.value = list.value?.[0]?.version + '' || undefined
    setData(list.value?.[0])
    await nextTick()
    projectInfoRef.value?.getTabs()
  },
  setData = (data) => {
    projectData.value = data
    const process = JSON.parse(JSON.stringify(data.process))
    flowData.value = {
      processProgressVo: {
        ...process.processProgressVo,
        progressInfo: changeProgressInfo(process.processProgressVo.progressInfo)
      }
    }
  },
  detailData = ref({}),
  list = ref([]),
  basicList = ref([]),
  constructList = ref([]),
  menuActive = ref(),
  loading = ref(true),
  getHistory = async () => {
    const res = await historyList(route.query.id)
    loading.value = false
    basicList.value = res.data.basic
    constructList.value = res.data.construct
    list.value = basicList.value
    menuActive.value = basicList.value[0].version + ''
    setData(list.value?.find(i => i.version === menuActive.value * 1))
    await nextTick()
    projectInfoRef.value?.getTabs()
  },
  getDetail = async () => {
    const res = await projectDetail(route.query.id)
    detailData.value = res.data
  },
  projectData = ref(null),
  flowData = ref(),
  handleSelect = (key) => {
    setData(list.value?.find(i => i.version + '' === key))
  },
  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,
              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
  }
onMounted(() => {
  getHistory()
  getDetail()
})
</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">{{ detailData.projectName }}</p>
          <div class="mt-8 search">
            <el-form label-suffix=":">
              <el-row :gutter="24">
                <el-col :span="6">
                  <el-form-item label="申报单位">{{ detailData.buildOrgName||'-' }}</el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="主管单位">{{ detailData.superOrg||'-' }}</el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="创建时间">{{ detailData.createOn||'-' }}</el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="更新时间">{{ detailData.updateOn||'-' }}</el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </el-card>
  <el-card v-loading="loading" shadow="never" class="mb-16 tab-card">
    <template #header>
      <el-tabs v-model="activeName" @tab-change="tabChange">
        <el-tab-pane label="申报信息" name="1" />
        <el-tab-pane label="建设方案" name="2" />
      </el-tabs>
    </template>
    <div v-if="list?.length" class="flex">
      <el-menu
        :default-active="menuActive"
        @select="handleSelect"
      >
        <el-menu-item v-for="(item,index) in list" :key="index" :index="item.version+''">
          <template #title>{{ item.versionStr }}</template>
        </el-menu-item>
      </el-menu>
      <div style="width: 80%">
        <project-info v-if="list?.length&&projectData" ref="projectInfoRef" :detail-data="projectData" />
        <el-card shadow="never" class="mt-8">
          <template #header>
            审核记录
          </template>
          <flow-record :flow-data="flowData?.processProgressVo?.progressInfo||[]" />
        </el-card>
      </div>
    </div>
    <no-data v-else />
  </el-card>
</template>
