<script setup lang="ts">
import {reactive,onMounted} from 'vue';
import {useRoute} from "vue-router"
import layout from '/@/views/h5/layout/index.vue';
import {getReserveInvestmentProjectsByProcessInstanceId} from "/@/api/flow/flow";
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: '项目名称', key: 'projectName', isFile: false },
	{ label: '项目主体单位', key: 'projectMainEntity', isFile: false },
	{ label: '项目业主单位', key: 'projectOwnerUnit', isFile: false },
	{ label: '项目实施开始日期', key: 'projectStartTime', isFile: false },
	{ label: '项目实施结束日期', key: 'projectEndTime', isFile: false },
	{ label: '投资类别', key: 'investmentCategory', isFile: false },
	{ label: '项目性质', key: 'projectNature', isFile: false },
	{ label: '项目负责人姓名', key: 'projectLeaderName', isFile: false },
	{ label: '负责人联系电话', key: 'projectLeaderPhone', isFile: false },
	{ label: '项目来源', key: 'projectSource', isFile: false },
	{ label: '建设性质', key: 'constructionNature', isFile: false },
	{ label: '重点项目', key: 'keyProject', isFile: false },
	{ label: '重大投资项目', key: 'majorInvestmentProjects', isFile: false },
	{ label: '是否属于主业务范围', key: 'isMainBusiness', isFile: false },
	{ label: '主业种类', key: 'mainBusinessTypes', isFile: false },
	{ label: '主业代码', key: 'mainBusinessCode', isFile: false },
	{ label: '项目投向', key: 'projectInvestmentDirection', isFile: false },
	{ label: '投向细分', key: 'investmentDirectionSegmentation', isFile: false },
	{ label: '是否属于战略新兴产业', key: 'isStrategicEmergingIndustries', isFile: false },
	{ label: '城市战略', key: 'urbanStrategy', isFile: false },
	{ label: '是否属于制造业', key: 'isManufacturingIndustry', isFile: false },
	{ label: '投资区域', key: 'investmentArea', isFile: false },
	{ label: '项目地址', key: 'projectAddress', isFile: false,isOneCol: true },
	{ label: '详细地址', key: 'projectAddressDetail', isFile: false, isOneCol: true },
	{ label: '我方是否控股', key: 'isControllingStake', isFile: false },
	{ label: '我方占股比例', key: 'shareholdingRatio', isFile: false },
	{ label: '项目总投资金额', key: 'projectTotalAmount', isFile: false, unit: '万元' },
	{ label: '截至上年底累计完成投资金额', key: 'lastYearCompleted', isFile: false, unit: '万元' },
	{ label: '我方总投资金额', key: 'ourInvestmentTotalAmount', isFile: false, unit: '万元' },
	{ label: '我方截至上年底累计完成投资金额', key: 'ourLastYearCompleted', isFile: false, unit: '万元' },
	{ label: '项目概述', key: 'projectDesc', isFile: false, isOneCol: true },
	{ label: '进展描述', key: 'progressDesc', isFile: false, isOneCol: true },
	{ label: '项目建议书及相关附件', key: 'attachmentUrl', isFile: true, isOneCol: true },
	{ title: '项目投资估算', isFile: false, isOneCol: true },
	{ label: '企业自有资金', key: 'enterpriseOwnFunds', isFile: false, unit: '万元' },
	{ label: '政府投资资金', key: 'governmentInvestmentFunds', isFile: false, unit: '万元' },
	{ label: '对外募集资金', key: 'externalRaisedFunds', isFile: false, unit: '万元' },
	{ label: '其他资金', key: 'otherFunds', isFile: false, unit: '万元' },
	{title:'项目合作方信息', isFile: false, isOneCol: true}
])
const showTextArray2:showText[] = [
	{ title: '决策程序信息', isFile: false, isOneCol: true },
	{ label: '决策类型', key: 'decisionType', isFile: false },
	{ label: '是否完成立项程序', key: 'isProjectApprovalCompleted', isFile: false },
	{ label: '立项程序文件号', key: 'projectApprovalFileNo', isFile: false },
	{ label: '立项文件信息', key: 'projectApprovalFileInfo', isFile: false, isOneCol: true },
	{ label: '是否完成决策程序', key: 'isDecisionProcedureCompleted', isFile: false },
	{ label: '决策程序文件号', key: 'decisionProcedureFileNo', isFile: false },
	{ label: '决策文件信息', key: 'decisionFileInfo', isFile: false, isOneCol: true },
]
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 showTextArrayTable: showText[] = [
	{label:'合作方名称',key:'cooperationName'},
		{label:'合作方性质',key:'cooperationNature'},
		{label:'合作方实际控股人',key:'cooperationController'},
		{label:'占股比例',key:'shareholdingRatio',unit:'%'},
]
const dataList:any = reactive([])
const processInstanceId = ref<string|undefined>('');
const taskId = ref<string|undefined>('');
onMounted(() => {
	if (route.query.taskId) {
		taskId.value = route.query.taskId as string;
	}
	if (route.query.processInstanceId){
		processInstanceId.value = route.query.processInstanceId as string;
		getData()
	}
});
const getData = async () => {
	const res = await getReserveInvestmentProjectsByProcessInstanceId(processInstanceId.value as string);
	Object.assign(testData, (res as any)?.data ?? res);
	Object.assign(dataList, (res as any)?.data?.cooperationUnits ?? []);
}
</script>

<template>
	<layout title="投资项目进度审核" :task-id="taskId" :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" 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>
		<el-table :data="dataList" border style="width: 100%" height="300" :header-cell-style="{textAlign: 'center'}">
			<el-table-column type="index" label="序号" width="60"></el-table-column>
			<el-table-column v-for="item in showTextArrayTable" :key="item?.key" :label="item?.label" min-width="150"

			>
				<template #default="scope">
					<div v-if="item.isFile">
						<upload-file v-model="scope.row[item.key]" disabled/>
					</div>
					<div v-else>
						<span>{{scope.row[item?.key]}}</span>
						<span v-if="item.unit">{{item.unit}}</span>
					</div>
				</template>

			</el-table-column>
		</el-table>
		<div class="investment-list" >
			<div class="investment-item" v-for="item in showTextArray2" :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 {
	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>