<template>
    <el-card style="height: 100%">
			<el-row :gutter="20">
				<el-col :span="isPreview ? 24 : 18"  :class="isPreview ? '' : 'border-r border-[#e5e7eb]'">
                    <FlowFormView :process-instance-id="processInstanceId"/>
                    <div class="page-title">
                        {{ t('mixedRegister.title') }}
                    </div>
                    <MixedRegisterSectionsView :instructionForm="tableData" :basicInfoForm="tableData" />
				</el-col>
				<el-col :span="6" v-if="!isPreview">
				<ApprovalAction status="pending" :process-instance-id="processInstanceId"></ApprovalAction>
				</el-col>
			</el-row>
		</el-card>
</template>

<script setup lang="ts">
import {computed, onMounted, reactive, ref} from 'vue';
import {useI18n} from 'vue-i18n';
import {useMessage} from '/@/hooks/message';
import {getMixedReformByProcessInstanceIdAPI, type MixedReformItem,} from '/@/api/investment/mixedReform';
import ApprovalAction from "/@/components/workbench/common/ApprovalAction.vue";
import FlowFormView from '/@/components/workbench/common/FlowFormView.vue';
import MixedRegisterSectionsView from '/@/components/investment/mixedReform/MixedRegisterSectionsView.vue';
import {useRoute} from "vue-router";

const route = useRoute();
const isPreview = route.query.isPreview === 'true'
const { t } = useI18n();
const message = useMessage();
const processInstanceId = ref('');
const taskId = ref('');
interface MixedRow {
    id: number | string;
    year: string;
    projectName: string;
    companyName: string;
    companyCode: string;
    mode: string;
    partnerNature: string;
    partnerName: string;
    type: string;
    progress: string;
    reportUnit: string;
    lastUpdateTime: string;
    lastUpdater: string;
    lastStatus: 'success' | 'failed' | 'pending';
}

const tableData = ref<MixedRow>({} as MixedRow);
const tableLoading = ref(false);

const fetchMixedReformList = async () => {
    tableLoading.value = true;
    try {
        const res = await getMixedReformByProcessInstanceIdAPI(processInstanceId.value);
				tableData.value = (res as any)?.records ?? (res as any)?.data;
    } catch (error: any) {
        message.error(error?.msg || error?.message || t('common.operateFail') || '获取列表失败');
    } finally {
        tableLoading.value = false;
    }
};
onMounted(() => {
	processInstanceId.value = route.query.processInstanceId as string;
	taskId.value = route.query.taskId as string;
	if (processInstanceId.value){
		fetchMixedReformList();
	}
});
</script>

<style scoped>
.mixed-library-wrapper {
    width: 100%;
    height: 100%;
}

.page-title {
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 12px;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.filter-section {
    display: flex;
    justify-content: flex-end;
}

.filter-buttons :deep(.el-form-item__content) {
    display: flex;
    gap: 12px;
}

.table-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
}

.total-text {
    color: var(--el-text-color-secondary);
}
</style>
