<script setup lang="ts">
import {reactive} from 'vue';
import layout from '/@/views/h5/layout/index.vue';
import {ref} from 'vue';
import {useRoute} from 'vue-router';
import {getProjectExitPlanFeedbackByProcessInstanceId} from "/@/api/investment/projectExitPlan";
const route = useRoute();
interface showText {
	title?: string;
	label?: string;
	content?: string;
	key?: string;
	isFile?: boolean;
	isOneCol?:boolean;
	unit?: string;
	isTableTitle?: boolean;
	children?: showText[]
}
const showTextArray = reactive<showText[]>([
	{label: '项目名称', key: 'projectName', isFile: false},
	{label:'退出时间',key:'exitTime',isFile:false},
	{label:'退出执行人',key:'exitExecutor',isFile:false},
	{label:'退出说明',key:'exitRemark',isFile:false,isOneCol:true},
	{label:'退出文件',key:'exitAttachment',isFile:true,isOneCol:true},
])
const testData = reactive({
	projectName: 'XX市智慧城市建设项目',
	exitTime: '2024-09-15',
	exitExecutor: '李总监',
	exitRemark: '项目已顺利完成退出流程，股权转让手续已全部办理完毕，相关资金已到账。',
	exitAttachment: '/attachments/exit-document-2024.pdf'
});

const processInstanceId = ref<string>(route.query.processInstanceId);
getProjectExitPlanFeedbackByProcessInstanceId(processInstanceId.value).then(res =>{
	Object.assign(testData,res.data);
});
</script>

<template>
	<layout title="项目退出反馈审核" task-id="" :processInstanceId="processInstanceId">
		<div class="investment-list" >
			<div class="investment-item" v-for="item in showTextArray" :key="item.key" :class="item.isOneCol ? 'one-col' : ''">
				<div class="title" v-if="item.title">{{item.title}}</div>
				<div class="label">{{item.label}}</div>
				<div class="content">
					<upload-file v-if="item.isFile" :model-value="JSON.parse(testData[item.key]) || []"  disabled/>
					<div v-else><span>{{testData[item.key]}}</span><span v-if="item.unit">{{item.unit}}</span></div>
				</div>
			</div>
		</div>
	</layout>
</template>

<style scoped lang="scss">
.investment-list {
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	font-size: 14px;
	box-sizing: border-box;

}
.investment-list .investment-item {
	width: 50%;
	margin: 8px 0;
	box-sizing: border-box;
}
.investment-list .investment-item .title {
	width: 100%;
	font-size: 16px;
	font-weight: 700;
}
.investment-list .investment-item .label {
	color: #858585;
	padding: 0;
	margin-bottom: 5px;
	text-align: left;
	box-sizing: border-box;
}
.investment-list .investment-item .content {
	color: #333333;
	line-height: 1;
}
.investment-list .one-col {
	width: 100%;
}
</style>