<script setup lang="ts">
import {ref,onMounted} from "vue";
import ApprovalAction from "/@/components/workbench/common/ApprovalAction.vue";
import uploadFile from "/@/components/Upload/index.vue";
import {getByProcessInstanceId} from "/@/api/investment/committeeApplication";
import {useMessage} from "/@/hooks/message";
import {ProjectExitFeedback} from "/@/views/invMid/committeeReview/interface/type";
import {useI18n} from "vue-i18n";
import FlowFormView from '/@/components/workbench/common/FlowFormView.vue'
interface DetailRow {
	label: string;
	value?: string;
	type?: 'text' | 'files';
	files?: Array<{ name: string; url: string }>;
}

const route = useRoute()
const isPreview = route.query.isPreview === 'true'
const message = useMessage();
const detailRows = ref<DetailRow[]>([]);
const loading = ref(false);
const { t } = useI18n();
const fetchDetails = () => {
	loading.value = true;
	/*
	* ?.split(',').map((fileName: string): { name: string; url: string } => {
					const name: string = fileName.split('fileName=')[1];
					return {
						name,
						url: fileName,
					};
				}),
	* */
	getByProcessInstanceId(processInstanceId.value).then(res =>{
		const row = res.data;
		detailRows.value = [
			{
				label: t('committeeReviewLibrary.drawer.department'),
				value: row.applicationDept,
			},
			{
				label: t('committeeReviewLibrary.drawer.applyDate'),
				value: row.createTime,
			},
			{
				label: t('committeeReviewLibrary.drawer.submitItem'),
				value: row.reviewNotes,
			},
			{
				label: t('committeeReviewLibrary.drawer.projectName'),
				value: row.projectName,
			},
			{
				label: t('committeeReviewLibrary.drawer.materials'),
				type: 'files',
				value: row.attachmentList ? JSON.parse(row.attachmentList) : []
			},
			{
				label: t('committeeReviewLibrary.drawer.applyOpinion'),
				value: row.applicationDeptOpinion,
			},
			{
				label: t('committeeReviewLibrary.drawer.investmentOpinion'),
				value: row.investmentDeptOpinion,
			},
			{
				label: t('committeeReviewLibrary.drawer.relatedOpinion'),
				value: row.cooperationDeptOpinion,
			},
			{
				label: t('committeeReviewLibrary.drawer.groupOpinion'),
				value: row.groupLeaderOpinion,
			},
		];
	}).catch(err => {
		message.error(err.msg);
	}).finally(() => {
		loading.value = false;
	});
};
const status = ref('pending');
const taskId = ref('');
const processInstanceId = ref('')
onMounted(()=>{
	taskId.value = route.query.taskId as string
	processInstanceId.value = route.query.processInstanceId as string
	fetchDetails()
	detailRows.value = [
		{
			label: t('committeeReviewLibrary.drawer.department'),
			value: '',
		},
		{
			label: t('committeeReviewLibrary.drawer.applyDate'),
			value: '',
		},
		{
			label: t('committeeReviewLibrary.drawer.submitItem'),
			value: '',
		},
		{
			label: t('committeeReviewLibrary.drawer.projectName'),
			value: '',
		},
		{
			label: t('committeeReviewLibrary.drawer.materials'),
			type: 'files',
			value:'',
		},
		{
			label: t('committeeReviewLibrary.drawer.applyOpinion'),
			value: '',
		},
		{
			label: t('committeeReviewLibrary.drawer.investmentOpinion'),
			value: '',
		},
		{
			label: t('committeeReviewLibrary.drawer.relatedOpinion'),
			value: '',
		},
		{
			label: t('committeeReviewLibrary.drawer.groupOpinion'),
			value: '',
		},
	];
})
</script>

<template>
	<el-card style="height: 100%">
		<el-row :gutter="20">
			<el-col :span="isPreview ? 24 : 18">
				<FlowFormView :process-instance-id="processInstanceId" />
				<div class="title" style="text-align: center">专委会评审信息审核</div>
				<el-table :data="detailRows" border style="width: 100%" class="detail-table" v-loading="loading">
					<el-table-column prop="label" :label="t('committeeReviewLibrary.drawer.label')" width="220" />
					<el-table-column prop="value" :label="t('committeeReviewLibrary.drawer.value')">
						<template #default="{ row }">
							<div v-if="row.type === 'files'" class="file-list">
								<upload-file v-model="row.value" disabled/>
							</div>
							<span v-else>{{ row.value }}</span>
						</template>
					</el-table-column>
				</el-table>
			</el-col>
			<el-col :span="6" v-if="!isPreview">
				<ApprovalAction :status="status" :process-instance-id="processInstanceId" :task-id="taskId"/>
			</el-col>
		</el-row>
	</el-card>
</template>

<style scoped lang="scss">
.title {
	font-size: 18px;
	font-weight: 600;
	text-align: center;
	margin-bottom: 12px;
}
</style>