<template>
    <el-card style="height: 100%" v-loading="detailLoading">
        <el-row :span="24" :gutter="20" style="height: 100%">
            <el-col :span="isPreview ? 24 : 18" style="height: 100%" :class="isPreview ? '' : 'border-r border-[#e5e7eb]'">
                <FlowFormView :processInstanceId="id"/>
                <div class="form-main-title">
                    {{ isUpdate ? t('cooperationUnit.updateTitle') : t('cooperationUnit.title') }}
                </div>
                <CooperationUnitView :data="detailsData || []" />
            </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 { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router'
import FlowFormView from '/@/components/workbench/common/FlowFormView.vue';
import CooperationUnitView from '/@/components/investment/common/CooperationUnitView.vue'
import ApprovalAction from "/@/components/workbench/common/ApprovalAction.vue";
import { viewExternalCooperationUnitAPI } from '/@/api/investment/cooperationUnit';
import { useMessage } from '/@/hooks/message';
import {getExternalCooperationUnitsByProcessInstanceId} from "/@/api/flow/flow";

const { t } = useI18n();
const message = useMessage()
const route = useRoute()
const isPreview = route.query.isPreview === 'true'
const id = ref('')
const isUpdate = ref(false)
const detailLoading = ref(false)
const detailsData = ref<any>(null)

const fetchDetails = async () => {
    detailLoading.value = true
    try {
        const res = await getExternalCooperationUnitsByProcessInstanceId(id.value);
        const detail = res.data;
        detailsData.value = detail
    } catch (error: any) {
        message.error(error?.msg || error?.message || '获取详情失败');
    } 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>
