<script setup lang="ts">
import {reactive,ref} from 'vue';
import layout from '/@/views/h5/layout/index.vue';
import {getInvestmentProjectsPlanByProcessInstanceId} from "/@/api/common";
import {useRoute} from 'vue-router';
import {
	cityStrategyOptions,
	constructionNatureOptions,
	Enums,
	investmentAreaOptions,
	investmentCategoryOptions, mainBusinessOptions,
	projectDirectionDetailsOptions, projectImportantOptions,
	projectNatureOptions, projectSourceOptions, strategicIndustryOptions
} from "/@/hooks/enums"
const route = useRoute();
interface showText {
	title?: string;
	label?: string;
	content?: string;
	key?: string;
	isFile?: boolean;
	isOneCol?: boolean;
	unit?: string;
	isTableTitle?: boolean;
	children?: showText[];
	Enums?: Enums[];
}

const labelForm: showText[] = [
	{title: '申报信息', isOneCol: true},
	{label: '项目名称', key: 'projectName'},
	{label: '所属集团', key: 'groupCompany'},
	{label: '项目性质', key: 'projectNature', isFile: false, Enums: projectNatureOptions},
	{label: '项目主体单位', key: 'projectMainEntity', isFile: false},
	{label: '项目业主单位', key: 'projectOwnerUnit', isFile: false},
	{label: '投资类别', key: 'investmentCategory', isFile: false,Enums: investmentCategoryOptions},
	{label: '投资区域', key: 'investmentArea', isFile: false,Enums:investmentAreaOptions},
	{label: '项目地址', key: 'projectAddress', isFile: false},
	{label: '项目详细地址', key: 'projectAddressDetail', isFile: false},
	{label: '项目投向', key: 'projectInvestmentDirection', isFile: false},
	{label: '投向细分', key: 'investmentDirectionSegmentation', isFile: false,Enums:projectDirectionDetailsOptions},
	{label: '项目来源', key: 'projectSource', isFile: false,Enums:projectSourceOptions},
	{label: '建设性质', key: 'constructionNature', isFile: false,Enums:constructionNatureOptions},
	{label: '重大投资项目', key: 'majorInvestmentProjects', isFile: false},
	{label: '重点项目', key: 'keyProject', isFile: false,Enums:projectImportantOptions},
	{label: '是否属于主业范围', key: 'isMainBusiness', isFile: false,Enums:[{label: '是', value: '1'}, {label: '否', value: '0'}]},
	{label: '主业类型', key: 'mainBusinessTypes', isFile: false,Enums:mainBusinessOptions},
	{label: '主业代码', key: 'mainBusinessCode', isFile: false},
	{label: '是否属于制造业', key: 'isManufacturingIndustry', isFile: false,Enums:[{label: '是', value: '1'}, {label: '否', value: '0'}]},
	{label: '是否属于战略新兴产业', key: 'isStrategicEmergingIndustries', isFile: false,Enums:strategicIndustryOptions},
	{label: '城市战略', key: 'urbanStrategy', isFile: false,Enums:cityStrategyOptions},
	{label: '项目实施开始时间', key: 'projectStartTime', isFile: false},
	{label: '项目实施结束时间', key: 'projectEndTime', isFile: false},
	{title: '本年投资计划总额', isOneCol: true},
	{label: '计划投资年度', key: 'planInvestmentYear', isFile: false},
	{label: '计划形象额度', key: 'planImageQuota', isFile: false, unit: '万元'},
	{label: '计划支付额度', key: 'planPaymentLimit', isFile: false, unit: '万元'},
	{label: '自有资金', key: 'ownedFunds', isFile: false, unit: '万元'},
	{label: '财政资金', key: 'financialFunds', isFile: false, unit: '万元'},
	{label: '其他资金', key: 'otherFunds', isFile: false, unit: '万元'},
	{label: '对外募集资助', key: 'externalRaisedCapital', isFile: false, unit: '万元'},
	{label: '财政资金来源说明', key: 'governmentFundSourceDesc', isFile: false, isOneCol: true},
	{label: '其他资金来源说明', key: 'otherFundSourceDesc', isFile: false, isOneCol: true},
	{title: '项目概述', isOneCol: true},
	{label: '项目概述', key: 'projectDesc', isFile: false, isOneCol: true},
	{label: '备注', key: 'remark', isFile: false, isOneCol: true},
	{label: '项目初步方案', key: 'projectPreliminaryPlan', isFile: false, isOneCol: true},
	{label: '项目初步方案附件', key: 'projectPreliminaryPlanAttachment', isFile: true},
	{title: '项目投资情况', isOneCol: true},
	{label: '项目总投资金额', key: 'projectTotalAmount', isFile: false, unit: '万元'},
	{label: '截至上年度累计完成投资额', key: 'lastYearCompleted', isFile: false, unit: '万元'},
	{label: '我方项目总投资金额', key: 'ourInvestmentTotalAmount', isFile: false, unit: '万元'},
	{label: '我方截止上年底累计完成投资额', key: 'ourLastYearCompleted', isFile: false, unit: '万元'},
	{title: '年度项目投资信息', isOneCol: true}
]
function labelEnum(key:string, Enums: Enums[]) {
	return Enums?.find(item => item.value === key)?.label;
}
const labelTable: showText[] = [
	{label: '计划投资年度', key: 'plannedInvestmentYear'},
	{label: '计划形象额度', key: 'plannedImageAmount'},
	{label: '计划支付额度', key: 'plannedPaymentAmount'},
	{label: '自有资金', key: 'selfFunding'},
	{label: '对外募集资金', key: 'externalFunding'},
	{label: '财政资金', key: 'fiscalFunding'},
	{label: '其他资金', key: 'otherFunding'},
	{label: '财政资金来源说明', key: 'fiscalFundingSource'},
	{label: '其他资金来源说明', key: 'otherFundingSource'},
	{label: '', key: 'projectPlanId'},
];
const labelForm2: showText[] = [
	{title: '项目决策信息', isOneCol: true},
	{label: '决策类型', key: 'decisionType'},
	{label: '是否完成立项程序', key: 'isProjectApprovalCompleted'},
	{label: '立项程序文件号', key: 'projectApprovalFileNo'},
	{label: '立项文件信息', key: 'projectApprovalFileInfo'},
	{label: '是否完成决策程序', key: 'isDecisionProcedureCompleted'},
	{label: '决策程序文件号', key: 'decisionProcedureFileNo'},
	{label: '决策文件信息', key: 'decisionFileInfo'},
];
const tableData = reactive([]);
const processInstanceId = ref<string>(route.query.processInstanceId)
getInvestmentProjectsPlanByProcessInstanceId(processInstanceId.value).then(res =>{
	Object.assign(tableData,res.data);
});
</script>

<template>
	<layout title="投资项目计划审核" task-id="" :processInstanceId="processInstanceId">
		<div class="investment-list" >
			<div class="investment-item" v-for="item in labelForm" :key="item.key" :class="item.isOneCol ? 'one-col' : ''">
				<div class="title" v-if="item.title">{{item.title}}</div>
				<div class="label" v-if="item.Enums">{{labelEnum(item.label, item.Enums)}}</div>
				<div class="label" v-else>{{item.label}}</div>
				<div class="content">
					<upload-file v-if="item.isFile" :model-value="JSON.parse(tableData[item.key] || '[]') || []"  disabled/>
					<div v-else><span>{{tableData[item.key]}}</span><span v-if="item.unit">{{item.unit}}</span></div>
				</div>
			</div>
		</div>
		<el-table :data="tableData.projectInvestmentEntities" border style="width: 100%" height="300" :cell-style="{textAlign: 'center'}" :row-style="{textAlign: 'center'}" :header-cell-style="{textAlign: 'center'}">
			<el-table-column type="index" label="序号" width="60"></el-table-column>
			<el-table-column v-for="item in labelTable" :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 v-if="item.children">
						<el-table-column v-for="child in item.children" :key="child?.key" :label="child?.label" min-width="150">
							<template #default="scope1">
								<div v-if="item.isFile">
									<upload-file v-model="scope1.row[child.key]" disabled/>
								</div>
								<div v-else>
									<span>{{scope1.row[child?.key]}}</span>
									<span v-if="child.unit">{{child.unit}}</span>
								</div>
							</template>
						</el-table-column>
					</template>
				</template>

			</el-table-column>
		</el-table>
		<div class="investment-list" >
			<div class="investment-item" v-for="item in labelForm2" :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(tableData[item.key] || '[]') || []"  disabled/>
					<div v-else><span>{{tableData[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>