<script setup lang="ts">
import {reactive} from 'vue';
import layout from '/@/views/h5/layout/index.vue';
import {getInvestmentProjectsPlanByProcessInstanceId} from "/@/api/common";
import {useRoute} from "vue-router";
import {getInvestmentProjectsProgressGetByProcessInstanceIdAPI} from "/@/api/investment/progressOfInvestmentProjects";
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[]>([
	{title:'项目投资进度申报', isFile: false,isOneCol:true},
	{label: '项目名称', content: '', key: 'projectName', isFile: false},
	{label: '项目状态', content: '', key: 'projectStatus', isFile: false},
	{label: '建设阶段', content: '', key: 'constructionStage', isFile: false},
	{label: '项目实施主体单位', content: '', key: 'implementingBody', isFile: false},
	{label: '项目总投资金额', content: '', key: 'projectTotalAmount', isFile: false, unit:'万元'},
	{label: '项目开始截至本月未累计完成投资', content: '', key: 'cumulativeInvestmentToDate', isFile: false, unit:'万元',isOneCol:true},
	{label: '完成率', content: '', key: 'completionRate', isFile: false, unit:'%'},
	{label: '项目开始截至本月末累计完成支付额', content: '', key: 'cumulativePaymentToDate', isFile: false, unit:'万元',isOneCol:true},
	{label: '支付完成率', content: '', key: 'paymentCompletionRate', isFile: false, unit:'%'},
	{label: '汇报年度', content: '', key: 'annualReport', isFile: false},
	{label: '本年度计划投资额', content: '', key: 'annualPlannedInvestment', isFile: false, unit:'万元'},
	{label: '本企业本年度截至本月未完成投资', content: '', key: 'ytdRemainingInvestment', isFile: false, unit:'万元',isOneCol:true},
	{label: '本年投资形象额', content: '', key: 'investmentTotalAmount', isFile: false, unit:'万元'},
	{label: '本年投资形象额完成率', content: '', key: 'investmentCompletionRate', isFile: false, unit:'%'},
	{label: '计划支付额', content: '', key: 'plannedPayment', isFile: false, unit:'万元'},
	{label: '完成支付额', content: '', key: 'actualPayment', isFile: false, unit:'万元'},
	{label: '本年投资计划完成率', content: '', key: 'investmentPlanCompletionRate', isFile: false, unit:'%'},
	{label: '成效', content: '', key: 'achievements', isFile: false, isOneCol:true},
	{label: '需协调解决事项', content: '', key: 'coordinationIssues', isFile: false, isOneCol:true},
	{label: '下一步工作安排', content: '', key: 'nextWorkPlan', isFile: false, isOneCol:true},
	{label: '当前阶段佐证材料上传', content: '', key: 'supportingDocuments', isFile: true},
	{label: '备注', content: '', key: 'remarks', isFile: false, isOneCol:true},
	{label: '是否为该项目最后一次申报', content: '', key: 'isFinalApplication', isFile: false},
])
const testData = reactive({
	projectName: 'XX市智慧城市建设项目',
	projectStatus: '在建',
	constructionStage: '主体施工阶段',
	implementingBody: 'XX市城市建设投资有限公司',
	projectTotalAmount: 10000,
	cumulativeInvestmentToDate: 3500,
	completionRate: 35,
	cumulativePaymentToDate: 3200,
	paymentCompletionRate: 32,
	annualReport: 2024,
	annualPlannedInvestment: 4000,
	ytdRemainingInvestment: 500,
	investmentTotalAmount: 3500,
	investmentCompletionRate: 87.5,
	plannedPayment: 3800,
	actualPayment: 3200,
	investmentPlanCompletionRate: 84.2,
	achievements: '已完成基础建设，核心系统开发进度达80%',
	coordinationIssues: '需要协调电力部门加快供电设施建设，环保部门加快环评审批',
	nextWorkPlan: '继续推进系统集成测试，预计下月完成主体工程建设',
	supportingDocuments: '/attachments/progress-evidence-2024.pdf',
	remarks: '项目整体进展顺利，资金使用规范',
	isFinalApplication: 0
});
const processInstanceId = ref(route.query.processInstanceId as string)
getInvestmentProjectsProgressGetByProcessInstanceIdAPI(processInstanceId.value).then(res =>{
	Object.assign(testData,res.data)
})
</script>

<template>
	<layout title="投资项目进度审核" task-id="" :process-instance-id="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 {
	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>