<template>
    <el-card style="height: 100%" v-loading="detailLoading">
        <el-row :span="24" :gutter="20">
            <el-col :span="isPreview ? 24 : 18" style="height: 100%"  :class="isPreview ? '' : 'border-r border-[#e5e7eb]'">
                <FlowFormView :process-instance-id="id" />
                <div class="form-main-title">
                    {{ isUpdate ? t('reserveRegistration.updateTitle') : t('reserveRegistration.title') }}
                </div>
                <ProjectBasicInfoView :model-value="detailFormData"
                    :main-title="t('reserveLibrary.detail.formTitle')" />
            </el-col>
            <el-col :span="6" v-if="!isPreview">
                <ApprovalAction status="pending" task-id="1" :process-instance-id="id"></ApprovalAction>
            </el-col>
        </el-row>
    </el-card>
</template>
<script lang="ts" setup>
import ProjectBasicInfoView from '/@/components/investment/common/ProjectBasicInfoView.vue';
import type { ProjectBasicInfoFormData } from '/@/components/investment/common/ProjectBasicInfoForm.vue';
import ApprovalAction from "/@/components/workbench/common/ApprovalAction.vue";
import { useI18n } from 'vue-i18n';
import { normalizeDetailData, type ReserveInvestmentProjectItem } from '/@/api/investment/reserveRegistration';
import { useMessage } from '/@/hooks/message';
import FlowFormView from '/@/components/workbench/common/FlowFormView.vue';
import {getReserveInvestmentProjectsByProcessInstanceId} from "/@/api/flow/flow";

const { t } = useI18n();
const route = useRoute()
const isPreview = route.query.isPreview === 'true'
const message = useMessage();
const id = ref('')
const isUpdate = ref(false)
const detailFormData = reactive<ProjectBasicInfoFormData>({} as ProjectBasicInfoFormData);
const detailLoading = ref(false)

const fetchDetails = async () => {
    detailLoading.value = true
    try {
        const res = await getReserveInvestmentProjectsByProcessInstanceId(id.value);
        const detail = (res as any)?.data ?? res;
        const detailData = normalizeDetailData(detail as ReserveInvestmentProjectItem);
        Object.assign(detailFormData, detailData)
        detailFormData.partnerInfos?.splice(0, detailFormData.partnerInfos.length);
    } catch (error: any) {
        message.error(error?.msg || error?.message || t('common.operateFail') || '获取详情失败');
    } finally {
        detailLoading.value = false
    }
};
onMounted(() => {
    id.value = route.query.processInstanceId as string
    if (id.value) {
        fetchDetails()
    }
})
</script>
<style scoped>
.form-main-title {
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
    color: var(--el-text-color-primary);
}
</style>
