<script setup lang="ts">
import {reactive} from 'vue';
import layout from '/@/views/h5/layout/index.vue';

interface showText {
	title?: string;
	label?: string;
	content?: string;
	key?: string;
	isFile?: boolean;
	isOneCol?:boolean;
	unit?: string;
	isTableTitle?: boolean;
	children?: showText[]
}
interface InvestmentFunding {
	id: number; // 主键ID
	plannedInvestmentYear: number; // 计划投资年度
	plannedImageAmount: number; // 计划形象额度
	plannedPaymentAmount: number; // 计划支付额度
	selfFunding: number; // 自有资金
	externalFunding: number; // 对外募集资金
	fiscalFunding: number; // 财政资金
	otherFunding: number; // 其他资金
	fiscalFundingSource: string; // 财政资金来源说明
	otherFundingSource: string; // 其他资金来源说明
	projectPlanId: number; // 投资项目id
}

const showTextArray = reactive<showText[]>([
	{title:'申报信息', isFile: false,isOneCol:true},
	{label: '项目名称', content: '', key: 'projectName', isFile: false},
	{label: '所属集团', content: '', key: 'groupName', isFile: false},
	{label: '项目性质', content: '', key: 'projectNature', isFile: false},
	{label: '项目主体单位', content: '', key: 'projectMainEntity', isFile: false},
	{label: '项目业主单位', content: '', key: 'projectOwnerUnit', isFile: false},
	{label: '投资类别', content: '', key: 'investmentCategory', isFile: false},
	{label: '投资区域', content: '', key: 'investmentArea', isFile: false},
	{label: '项目地址', content: '', key: 'projectAddress', isFile: false},
	{label: '项目详细地址', content: '', key: 'projectAddressDetail', isFile: false, isOneCol:true},
	{label: '项目投向', content: '', key: 'projectInvestmentDirection', isFile: false},
	{label: '投向细分', content: '', key: 'investmentDirectionSegmentation', isFile: false},
	{label: '项目来源', content: '', key: 'projectSource', isFile: false},
	{label: '建设性质', content: '', key: 'constructionNature', isFile: false},
	{label: '重大投资项目', content: '', key: 'majorInvestmentProjects', isFile: false},
	{label: '重点项目', content: '', key: 'keyProject', isFile: false},
	{label: '是否属于主业范围', content: '', key: 'isMainBusiness', isFile: false},
	{label: '主业类型', content: '', key: 'mainBusinessTypes', isFile: false},
	{label: '主业代码', content: '', key: 'mainBusinessCode', isFile: false},
	{label: '是否属于制造业', content: '', key: 'isManufacturingIndustry', isFile: false},
	{label: '是否属于战略新兴产业', content: '', key: 'isStrategicEmergingIndustries', isFile: false},
	{label: '城市战略', content: '', key: 'urbanStrategy', isFile: false},
	{label: '项目实施开始时间', content: '', key: 'projectStartTime', isFile: false},
	{label: '项目实施结束时间', content: '', key: 'projectEndTime', isFile: false},
	{label: '计划投资年度', content: '', key: 'planInvestmentYear', isFile: false},
	{label: '计划形象额度', content: '', key: 'planImageQuota', isFile: false,unit:'万元'},
	{label: '计划支付额度', content: '', key: 'planPaymentLimit', isFile: false,unit:'万元'},
	{label: '自筹资金', content: '', key: 'ownedFunds', isFile: false,unit:'万元'},
	{label: '财政资金', content: '', key: 'financialFunds', isFile: false,unit:'万元'},
	{label: '其他资金', content: '', key: 'otherFunds', isFile: false,unit:'万元'},
	{label: '对外募集资助', content: '', key: 'externalRaisedCapital', isFile: false},
	{label: '财政资金来源说明', content: '', key: 'governmentFundSourceDesc', isFile: false},
	{label: '其他资金来源说明', content: '', key: 'otherFundSourceDesc', isFile: false},
	{label: '项目描述', content: '', key: 'projectDesc', isFile: false,isOneCol:true},
	{title: '项目投资基本情况',  isFile: false,isOneCol:true},
	{label: '备注', content: '', key: 'remark', isFile: false,isOneCol:true},
	{label: '项目初步方案', content: '', key: 'projectPreliminaryPlan', isFile: false},
	{label: '项目初步方案附件', content: '', key: 'projectPreliminaryPlanAttachment', isFile: true},
	{label: '项目总投资金额', content: '', key: 'projectTotalAmount', isFile: false,unit:'万元'},
	{label: '截至上年度累计完成投资额', content: '', key: 'lastYearCompleted', isFile: false,unit:'万元'},
	{label: '我方项目总投资金额', content: '', key: 'ourInvestmentTotalAmount', isFile: false,unit:'万元'},
	{label: '我方截止上年底累计完成投资额', content: '', key: 'ourLastYearCompleted', isFile: false,unit:'万元'},
	{title:'年度项目投资信息', isOneCol:true},
])
const showTextArray2 = reactive<showText[]>([
	{title: '项目决策信息', isFile: false,isOneCol:true},
	{label: '决策类型', content: '', key: 'decisionType', isFile: false},
	{label: '是否完成立项程序', content: '', key: 'isProjectApprovalCompleted', isFile: false},
	{label: '立项程序文件号', content: '', key: 'projectApprovalFileNo', isFile: false},
	{label: '立项文件信息', content: '', key: 'projectApprovalFileInfo', isFile: false,isOneCol:true},
	{label: '是否完成决策程序', content: '', key: 'isDecisionProcedureCompleted', isFile: false},
	{label: '决策程序文件号', content: '', key: 'decisionProcedureFileNo', isFile: false},
	{label: '决策程序文件信息', content: '', key: 'decisionFileInfo', isFile: false,isOneCol:true},
 ])

const showTextArrayTable = reactive<showText[]>(	[
	{label: '计划投资年度', content: '', key: 'plannedInvestmentYear', isFile: false},
	{label: '计划形象额度', content: '', key: 'plannedImageAmount', isFile: false},
	{label: '计划支付额度', content: '', key: 'plannedPaymentAmount', isFile: false,unit:'万元'},
	{label:'资金来源',children:[
			{label: '自筹资金', content: '', key: 'selfFunding', isFile: false,unit:'万元'},
			{label: '对外募集资金', content: '', key: 'externalFunding', isFile: false,unit:'万元'},
			{label: '财政资金', content: '', key: 'fiscalFunding', isFile: false,unit:'万元'},
			{label: '其他资金', content: '', key: 'otherFunding', isFile: false,unit:'万元'},
			{label: '财政资金来源说明', content: '', key: 'fiscalFundingSource', isFile: false},
			{label: '其他资金来源说明', content: '', key: 'otherFundingSource', isFile: false}
		]}
])
const testData = {
	projectName: 'XX市智慧城市建设项目',
	groupName: 'XX城市建设投资集团',
	projectNature: '新建项目',
	projectMainEntity: 'XX市城市建设投资有限公司',
	projectOwnerUnit: 'XX市大数据管理局',
	investmentCategory: '基础设施投资',
	investmentArea: 'XX市高新区',
	projectAddress: 'XX市高新区科技大道',
	projectAddressDetail: '科技大道88号，高新区政务服务中心旁',
	projectInvestmentDirection: '智慧城市建设',
	investmentDirectionSegmentation: '智慧政务',
	projectSource: '政府投资项目',
	constructionNature: '新建',
	majorInvestmentProjects: '是',
	keyProject: '是',
	isMainBusiness: '是',
	mainBusinessTypes: '城市基础设施建设与运营',
	mainBusinessCode: 'E4851',
	isManufacturingIndustry: '否',
	isStrategicEmergingIndustries: '是',
	urbanStrategy: '数字城市战略',
	projectStartTime: '2024-01-01',
	projectEndTime: '2026-12-31',
	planInvestmentYear: 2024,
	planImageQuota: 5000,
	planPaymentLimit: 3000,
	ownedFunds: 2000,
	financialFunds: 1500,
	otherFunds: 500,
	externalRaisedCapital: 1000,
	governmentFundSourceDesc: '市级财政专项资金',
	otherFundSourceDesc: '社会资本参与',
	projectDesc: '建设城市大脑、智慧交通、智慧政务等系统，提升城市治理现代化水平',
	remark: '需协调多个部门，跨年度实施',
	projectPreliminaryPlan: '已编制完成初步方案',
	projectPreliminaryPlanAttachment: '/attachments/preliminary-plan.pdf',
	projectTotalAmount: 10000,
	lastYearCompleted: 1500,
	ourInvestmentTotalAmount: 8000,
	ourLastYearCompleted: 1200,
	decisionType: '三重一大决策',
	isProjectApprovalCompleted: '是',
	projectApprovalFileNo: 'XZC〔2023〕156号',
	projectApprovalFileInfo: '《关于XX市智慧城市建设项目立项的批复》',
	isDecisionProcedureCompleted: '是',
	decisionProcedureFileNo: 'JCC〔2023〕89号',
	decisionFileInfo: '《关于审议通过XX市智慧城市建设项目投资方案的决议》'
};
const investmentFundingTestData: InvestmentFunding = {
	id: 1001,
	plannedInvestmentYear: 2024,
	plannedImageAmount: 5000.50,
	plannedPaymentAmount: 3000.25,
	selfFunding: 2000.00,
	externalFunding: 1000.00,
	fiscalFunding: 1500.75,
	otherFunding: 500.25,
	fiscalFundingSource: "市级财政专项资金",
	otherFundingSource: "社会资本参与",
	projectPlanId: 2001
};
const tableData = reactive<InvestmentFunding[]>([investmentFundingTestData]);
</script>

<template>
	<layout title="投资与资源利用专委会审核" task-id="">
		<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="tableData" 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 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 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 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>