<script setup lang="ts">
import {useRoute} from 'vue-router';
import layout from '/@/views/h5/layout/index.vue';
import {getProjectExitPlanByProcessInstanceId} from "/@/api/investment/projectExitPlan";

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:'exitRecommendation',isFile:false},
	{label:'退出方式',key:'exitMethod',isFile:false},
	{label:'执行任务',key:'executionTask',isFile:false},
	{label:'任务说明',key:'taskDescription',isFile:false,isOneCol:true},
	{label:'执行人',key:'executor',isFile:false},
	{label:'任务开始时间',key:'taskStartDate',isFile:false},
	{label:'任务完成时间',key:'taskEndDate',isFile:false},
])
const testData = reactive({
	projectName: 'XX市智慧城市建设项目',
	exitRecommendation: '建议通过股权转让方式退出',
	exitMethod: '股权转让',
	executionTask: '资产评估与交易谈判',
	taskDescription: '聘请专业评估机构对项目股权进行评估，并与潜在受让方进行谈判',
	executor: '张经理',
	taskStartDate: '2024-06-01',
	taskEndDate: '2024-08-31'
});
const route = useRoute();
const processInstanceId = ref<string>(route.query.processInstanceId as string)
getProjectExitPlanByProcessInstanceId(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" v-model="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>