<template>
	<el-row class="page-title-row mb10">
		<div class="page-title" v-if="!props.isUpdate">{{ t('planApply.title') }}</div>
		<div class="page-title" v-else>{{ t('planApply.title1') }}</div>
		<div class="page-unit">{{ t('planApply.detail.unitLabel') }}</div>
	</el-row>
	<div class="project-plan-apply-form">
		<div class="form-section-title">{{ t('planApply.applySection.title') }}</div>
		<el-form :model="formData" label-width="165px" class="plan-form" :rules="rules" ref="useForm">
			<el-row :gutter="20" class="form-row">
				<el-col :span="24">
					<el-form-item :label="t('planApply.applySection.projectName')" required prop="entity.projectName">
						<template #label>
							<span style="color: var(--el-text-color-regular)">{{ t('planApply.applySection.projectName') }}</span>
						</template>
						<el-input v-model="formData.entity.projectName" :placeholder="t('planApply.placeholder.input')" readonly>
							<template #append>
								<el-icon class="cursor-pointer interactive-icon" @click="handleSelectProject">
									<FolderOpened />
								</el-icon>
							</template>
						</el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20" class="form-row">
				<el-col :span="12">
					<el-form-item :label="t('planApply.applySection.groupName')" required prop="entity.groupCompany">
						<template #label>
							<span style="color: var(--el-text-color-regular)">{{ t('planApply.applySection.groupName') }}</span>
						</template>
						<el-input v-model="formData.entity.groupCompany" :placeholder="t('planApply.placeholder.input')" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item :label="t('planApply.applySection.projectNature')">
						<el-select v-model="formData.entity.projectNature" :placeholder="t('planApply.placeholder.select')" clearable>
							<el-option v-for="item in projectNatureOptions" :label="item.label" :value="item.value" :key="item.value" />
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20" class="form-row">
				<el-col :span="12">
					<el-form-item :label="t('planApply.applySection.projectMainUnit')" required prop="entity.projectMainEntity">
						<el-tree-select
							v-model="formData.entity.projectMainEntity"
							:data="projectMainEntityOptions"
							check-strictly
							node-key="name"
							:props="{
								value: 'name',
								label: 'name',
								children: 'children',
							}"
							:render-after-expand="false"
							@current-change="handleProjectMainUnitChange"
						/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item :label="t('reserveRegistration.basicInfo.projectOwnerUnit')">
						<el-tree-select
							v-model="formData.entity.projectOwnerUnit"
							:data="projectMainEntityOptions"
							check-strictly
							node-key="name"
							:props="{
								value: 'name',
								label: 'name',
								children: 'children',
							}"
							:render-after-expand="false"
						/>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20" class="form-row">
				<el-col :span="12">
					<el-form-item :label="t('planApply.applySection.investmentCategory')" required prop="entity.investmentCategory">
						<template #label>
							<span style="color: var(--el-text-color-regular)">{{ t('planApply.applySection.investmentCategory') }}</span>
						</template>
						<el-select v-model="formData.entity.investmentCategory" :placeholder="t('planApply.placeholder.select')" clearable>
							<el-option v-for="item in investmentCategoryOptions" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item :label="t('planApply.applySection.investmentType')" required prop="entity.investmentArea">
						<template #label>
							<span style="color: var(--el-text-color-regular)">{{ t('planApply.applySection.investmentType') }}</span>
						</template>
						<el-select v-model="formData.entity.investmentArea" :placeholder="t('planApply.placeholder.select')" clearable>
							<el-option v-for="item in investmentAreaOptions" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20" class="form-row">
				<el-col :span="12">
					<el-form-item :label="t('planApply.applySection.projectAddress')" required prop="entity.projectAddress">
						<template #label>
							<span style="color: var(--el-text-color-regular)">{{ t('planApply.applySection.projectAddress') }}</span>
						</template>
						<el-input v-model="formData.entity.projectAddress" :placeholder="t('planApply.placeholder.input')" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item :label="t('planApply.applySection.projectDetailAddress')" required prop="entity.projectAddressDetail">
						<template #label>
							<span style="color: var(--el-text-color-regular)">{{ t('planApply.applySection.projectDetailAddress') }}</span>
						</template>
						<el-input v-model="formData.entity.projectAddressDetail" :placeholder="t('planApply.placeholder.input')" />
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20" class="form-row">
				<el-col :span="12">
					<el-form-item :label="t('reserveRegistration.basicInfo.projectDirection')" required prop="entity.projectInvestmentDirection">
						<el-select v-model="formData.entity.projectInvestmentDirection" :placeholder="t('planApply.placeholder.select')" >
							<el-option v-for="item in projectDirectionOptions" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item :label="t('reserveRegistration.basicInfo.directionSubdivision')" required prop="entity.investmentDirectionSegmentation">
						<template #label>
							<span style="color: var(--el-text-color-regular)">{{ t('reserveRegistration.basicInfo.directionSubdivision') }}</span>
						</template>
						<el-select v-model="formData.entity.investmentDirectionSegmentation" :placeholder="t('planApply.placeholder.select')">
							<el-option v-for="item in ProjectDirectionDetailsOptionsEnums" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20" class="form-row">
				<el-col :span="12">
					<el-form-item :label="t('reserveRegistration.basicInfo.projectSource')" required prop="entity.projectSource">
						<template #label>
							<span style="color: var(--el-text-color-regular)">{{ t('reserveRegistration.basicInfo.projectSource') }}</span>
						</template>
						<el-select v-model="formData.entity.projectSource" :placeholder="t('planApply.placeholder.select')">
							<el-option v-for="item in projectSourceOptions" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item :label="t('planApply.applySection.constructionNature')" required prop="entity.constructionNature">
						<template #label>
							<span style="color: var(--el-text-color-regular)">{{ t('planApply.applySection.constructionNature') }}</span>
						</template>
						<el-select v-model="formData.entity.constructionNature" :placeholder="t('planApply.placeholder.select')" clearable>
							<el-option v-for="item in constructionNatureOptions" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20" class="form-row">
				<el-col :span="12">
					<el-form-item :label="t('reserveRegistration.basicInfo.majorInvestmentProject')" required prop="entity.majorInvestmentProjects">
						<el-select v-model="formData.entity.majorInvestmentProjects" :placeholder="t('planApply.placeholder.input')" >
							<el-option v-for="item in yesOrNo" :value="item.value" :label="item.label" :key="item.value"/>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item :label="t('planApply.applySection.keyProject')" required prop="entity.keyProject">
						<el-select v-model="formData.entity.keyProject" :placeholder="t('planApply.placeholder.select')" clearable>
							<el-option v-for="item in projectImportantOptions" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20" class="form-row">
				<el-col :span="12">
					<el-form-item :label="t('planApply.applySection.isWithinMainBusiness')" required prop="entity.isMainBusiness">
						<el-select v-model="formData.entity.isMainBusiness" :placeholder="t('planApply.placeholder.select')" clearable
						@change="(e:any) =>{
							if(e === '1'){
								formData.entity.mainBusinessTypes = ''
							}
						}"
						>
							<el-option v-for="item in yesOrNo" :value="item.value" :label="item.label" :key="item.value"/>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item
						:label="t('planApply.applySection.mainBusinessType')"
						:required="formData.entity.isMainBusiness === '0'"
						prop="entity.mainBusinessTypes"
					>
						<el-select v-model="formData.entity.mainBusinessTypes">
							<el-option
								v-for="item in mainBusinessOptions"
								:key="item.value"
								:label="item.label"
								:value="item.value"
								:disabled="formData.entity.isMainBusiness !== '0'"
							/>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20" class="form-row">
				<el-col :span="12">
					<el-form-item :label="t('reserveRegistration.basicInfo.mainBusinessCode')" required prop="entity.mainBusinessCode">
						<el-input v-model="formData.entity.mainBusinessCode" :placeholder="t('planApply.placeholder.input')" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item :label="t('planApply.applySection.isManufacturing')" required prop="entity.isManufacturingIndustry">
						<el-select v-model="formData.entity.isManufacturingIndustry" :placeholder="t('planApply.placeholder.select')" clearable>
							<el-option :label="t('planApply.common.yes')" :value="t('planApply.common.yes')" />
							<el-option :label="t('planApply.common.no')" :value="t('planApply.common.no')" />
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20" class="form-row">
				<el-col :span="12">
					<el-form-item :label="t('reserveRegistration.basicInfo.strategicEmergingIndustry')" required prop="entity.isStrategicEmergingIndustries">
						<el-select v-model="formData.entity.isStrategicEmergingIndustries" :placeholder="t('planApply.placeholder.select')" clearable>
							<el-option v-for="item in strategicIndustryOptions" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item :label="t('planApply.applySection.cityStrategy')" required prop="entity.urbanStrategy">
						<el-select v-model="formData.entity.urbanStrategy" :placeholder="t('planApply.placeholder.select')">
							<el-option v-for="item in cityStrategyOptions" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20" class="form-row">
				<el-col :span="12">
					<el-form-item :label="t('planApply.applySection.projectImplementationStart')" required prop="entity.projectStartTime">
						<el-date-picker
							v-model="formData.entity.projectStartTime"
							type="date"
							value-format="YYYY-MM-DD"
							:placeholder="t('planApply.placeholder.select')"
							style="width: 100%"
						/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item :label="t('planApply.applySection.projectImplementationEnd')" required prop="entity.projectEndTime">
						<el-date-picker
							v-model="formData.entity.projectEndTime"
							type="date"
							value-format="YYYY-MM-DD"
							:placeholder="t('planApply.placeholder.select')"
							style="width: 100%"
						/>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20" class="plan-investment-block">
				<el-col :span="12">
					<div class="plan-investment-panel left-panel">
						<div class="panel-title">{{ t('planApply.planInvestment.currentYearTotalTitle') }}</div>
						<div style="flex: 1">
							<el-form-item style="height: 82px" :label="t('planApply.planInvestment.planYear')">
								<el-date-picker
									v-model="formData.entity.planInvestmentYear"
									type="year"
									value-format="YYYY"
									:placeholder="t('planApply.placeholder.selectYear')"
									style="width: 100%"
								/>
							</el-form-item>
							<el-form-item style="height: 82px" :label="t('planApply.planInvestment.plannedImageQuota')+'(万元)'" required prop="entity.planImageQuota">
								<el-input-number readonly :precision="2" length="20" :controls="false" v-model="formData.entity.planImageQuota" :placeholder="t('planApply.placeholder.input')"/>
							</el-form-item>
							<el-form-item style="height: 82px" :label="t('planApply.planInvestment.annualPlanPayment')+'(万元)'" required prop="entity.planPaymentLimit">
								<el-input-number readonly :precision="2" length="20" :controls="false" v-model="formData.entity.planPaymentLimit" :placeholder="t('planApply.placeholder.input')"/>
							</el-form-item>
						</div>
					</div>
				</el-col>
				<el-col :span="12">
					<div class="plan-investment-panel right-panel">
						<div class="panel-title">{{ t('planApply.planInvestment.currentYearFundingTitle') }}</div>
						<div style="flex: 1">
							<el-form-item :label="t('planApply.investmentEstimate.capitalFunding')+'(万元)'" required prop="entity.ownedFunds">
								<el-input-number readonly :precision="2" length="20" :controls="false" v-model="formData.entity.ownedFunds" :placeholder="t('planApply.placeholder.input')"/>
							</el-form-item>
							<el-form-item :label="t('planApply.investmentEstimate.financialFunding')+'(万元)'" required prop="entity.financialFunds">
								<el-input-number readonly :precision="2" length="20" :controls="false" v-model="formData.entity.financialFunds" :placeholder="t('planApply.placeholder.input')"/>
							</el-form-item>
							<el-form-item :label="t('planApply.investmentEstimate.externalRaisedFunds')+'(万元)'" required prop="entity.externalRaisedCapital">
								<el-input-number readonly :precision="2" length="20" :controls="false" v-model="formData.entity.externalRaisedCapital" :placeholder="t('planApply.placeholder.input')"/>
							</el-form-item>
							<el-form-item :label="t('planApply.investmentEstimate.otherFunding')+'(万元)'" required prop="entity.otherFunds">
								<el-input-number readonly :precision="2" length="20" :controls="false" v-model="formData.entity.otherFunds"  :placeholder="t('planApply.placeholder.input')"></el-input-number>
							</el-form-item>
							<el-form-item :label="t('planApply.investmentEstimate.financialFundingDescription')">
								<el-input v-model="formData.entity.governmentFundSourceDesc" :placeholder="t('planApply.placeholder.input')" />
							</el-form-item>
							<el-form-item :label="t('planApply.investmentEstimate.otherFundingDescription')">
								<el-input v-model="formData.entity.otherFundSourceDesc" :placeholder="t('planApply.placeholder.input')" />
							</el-form-item>
						</div>
					</div>
				</el-col>
			</el-row>
<!--项目概述-->
			<el-row :gutter="20" class="form-row">
				<el-col :span="24">
					<el-form-item :label="t('planApply.applySection.projectOverview')" required prop="entity.projectDesc">
						<el-input v-model="formData.entity.projectDesc" :placeholder="t('planApply.placeholder.input')" />
					</el-form-item>
				</el-col>
			</el-row>

			<el-row class="form-row">
				<el-col :span="24">
					<el-form-item :label="t('planApply.applySection.projectInitialPlan')">
						<el-input v-model="formData.entity.projectPreliminaryPlan" :placeholder="t('planApply.placeholder.input')" />
					</el-form-item>
					<el-form-item :label="t('planApply.headerForm.attachments')">
						<UploadFile
							:modelValue="formData.entity.projectPreliminaryPlanAttachment"
							@change="uploadChange"
							:fileSize="20"
							type="simple"
							:limit="10"
						/>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row class="form-row">
				<el-col :span="24">
					<el-form-item :label="t('planApply.applySection.remark')">
						<el-input v-model="formData.entity.remark" :placeholder="t('planApply.placeholder.input')" />
					</el-form-item>
				</el-col>
			</el-row>
<!--项目投资情况-->
			<div class="form-section-title">{{ t('planApply.investmentStatus.title') }} 单位：{{ t('planApply.investmentEstimate.unitSuffix') }}</div>
			<el-row :gutter="20" class="form-row">
				<el-col :span="12">
					<el-form-item :label="t('planApply.investmentStatus.totalInvestmentAmount')" required prop="entity.projectTotalAmount">
						<el-input-number :precision="2" :length="20" :controls="false" min="0" v-model="formData.entity.projectTotalAmount" :placeholder="t('planApply.placeholder.input')"></el-input-number>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item :label="t('planApply.investmentStatus.cumulativeInvestmentLastYear')" required prop="entity.lastYearCompleted" label-width="230px">
						<el-input-number :precision="2" :length="20" :controls="false" min="0" v-model="formData.entity.lastYearCompleted" :placeholder="t('planApply.placeholder.input')"/>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20" class="form-row">
				<el-col :span="12">
					<el-form-item :label="t('planApply.investmentStatus.ourTotalInvestmentAmount')" required prop="entity.ourInvestmentTotalAmount">
						<el-input-number :precision="2" :length="20" :controls="false" min="0" v-model="formData.entity.ourInvestmentTotalAmount" :placeholder="t('planApply.placeholder.input')">
							<template #append>{{ t('planApply.investmentEstimate.unitSuffix') }}</template>
						</el-input-number>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item :label="t('planApply.investmentStatus.ourCumulativeInvestmentLastYear')" required prop="entity.ourLastYearCompleted" label-width="230px">
						<el-input-number  :precision="2" :length="20" :controls="false" min="0" v-model="formData.entity.ourLastYearCompleted" :placeholder="t('planApply.placeholder.input')">
							<template #append>{{ t('planApply.investmentEstimate.unitSuffix') }}</template>
						</el-input-number>
					</el-form-item>
				</el-col>
			</el-row>
<!--年度项目投资信息-->
			<div class="form-section-title">{{ t('planApply.annualInvestmentInfo.title') }}</div>
			<div class="table-actions">
				<el-button type="primary" @click="handleAddAnnualInvestment">
					{{ t('planApply.annualInvestmentInfo.add') }}
				</el-button>
				<el-button @click="handleCopyAnnualInvestment">
					{{ t('planApply.annualInvestmentInfo.copy') }}
				</el-button>
				<el-button @click="handleRemoveAnnualInvestment">
					{{ t('planApply.annualInvestmentInfo.remove') }}
				</el-button>
				<el-button @click="handleRemoveAllAnnualInvestment">
					{{ t('planApply.annualInvestmentInfo.removeAll') }}
				</el-button>
			</div>
			<el-table :data="formData.investmentProjects" border style="width: 100%" class="annual-investment-table">
				<el-table-column width="60" align="center">
					<template>
						<el-radio v-model="selectedAnnualInvestmentIndex" />
					</template>
				</el-table-column>
				<el-table-column :label="t('planApply.annualInvestmentInfo.table.index')" width="60" align="center">
					<template #default="{ $index }">
						{{ $index + 1 }}
					</template>
				</el-table-column>
				<el-table-column :label="t('planApply.annualInvestmentInfo.table.planYear')" min-width="140">
					<template #default="{ row }">
						<el-date-picker
							v-model="row.plannedInvestmentYear"
							type="year"
							value-format="YYYY"
							:placeholder="t('planApply.placeholder.select')"
							style="width: 100%"
						/>
					</template>
				</el-table-column>
				<el-table-column :label="t('planApply.annualInvestmentInfo.table.plannedImageQuota')+'(万元)'" min-width="160">
					<template #default="{ row }">
						<el-input-number :precision="2" :length="20" :controls="false" min="0" v-model="row.plannedImageAmount" :placeholder="t('planApply.placeholder.input')"/>
					</template>
				</el-table-column>
				<el-table-column :label="t('planApply.annualInvestmentInfo.table.annualPlanPayment')+'(万元)'" min-width="160">
					<template #default="{ row }">
						<el-input-number :precision="2" :length="20" :controls="false" min="0" v-model="row.plannedPaymentAmount" :placeholder="t('planApply.placeholder.input')"/>
					</template>
				</el-table-column>
				<el-table-column :label="t('planApply.annualInvestmentInfo.table.fundingSources')" align="center">
					<el-table-column :label="t('planApply.annualInvestmentInfo.table.capitalFunding')+'(万元)'" min-width="140">
						<template #default="{ row }">
							<el-input-number :precision="2" :length="20" :controls="false" min="0" v-model="row.selfFunding" :placeholder="t('planApply.placeholder.input')"/>
						</template>
					</el-table-column>
					<el-table-column :label="t('planApply.annualInvestmentInfo.table.externalRaisedFunds')+'(万元)'" min-width="150">
						<template #default="{ row }">
							<el-input-number :precision="2" :length="20" :controls="false" min="0" v-model="row.externalFunding" :placeholder="t('planApply.placeholder.input')"/>
						</template>
					</el-table-column>
					<el-table-column :label="t('planApply.annualInvestmentInfo.table.financialFunding')+'(万元)'" min-width="140">
						<template #default="{ row }">
							<el-input-number :precision="2" :length="20" :controls="false" min="0" v-model="row.fiscalFunding" :placeholder="t('planApply.placeholder.input')"/>
						</template>
					</el-table-column>
					<el-table-column :label="t('planApply.annualInvestmentInfo.table.otherFunding')+'(万元)'" min-width="140">
						<template #default="{ row }">
							<el-input-number :precision="2" :length="20" :controls="false" min="0" v-model="row.otherFunding" :placeholder="t('planApply.placeholder.input')"/>
						</template>
					</el-table-column>
					<el-table-column :label="t('planApply.annualInvestmentInfo.table.financialFundingDescription')" min-width="200">
						<template #default="{ row }">
							<el-input v-model="row.fiscalFundingSource" :placeholder="t('planApply.placeholder.input')" />
						</template>
					</el-table-column>
					<el-table-column :label="t('planApply.annualInvestmentInfo.table.otherFundingDescription')" min-width="200">
						<template #default="{ row }">
							<el-input v-model="row.otherFundingSource" :placeholder="t('planApply.placeholder.input')" />
						</template>
					</el-table-column>
				</el-table-column>
			</el-table>
<!--			项目决策信息-->
			<div class="form-section-title">{{ t('planApply.decisionInfo.title') }}</div>
			<el-row :gutter="20" class="form-row">
				<el-col :span="12">
					<el-form-item :label="t('planApply.decisionInfo.decisionType')">
						<el-select v-model="formData.entity.decisionType" :placeholder="t('planApply.placeholder.select')" >
							<el-option v-for="item in decisionTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item :label="t('planApply.decisionInfo.isCompleteEstablishmentProcedures')" required prop="entity.isProjectApprovalCompleted">
						<el-select v-model="formData.entity.isProjectApprovalCompleted" :placeholder="t('planApply.placeholder.select')" >
							<el-option v-for="item in yesOrNo" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20" class="form-row">
				<el-col :span="12">
					<el-form-item :label="t('planApply.decisionInfo.establishmentDocumentNumber')" :prop="formData.entity.isProjectApprovalCompleted === '0' ? 'entity.projectApprovalFileNo':''">
						<el-input v-model="formData.entity.projectApprovalFileNo" :placeholder="t('planApply.placeholder.input')" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item :label="t('planApply.decisionInfo.establishmentDocumentInfo')" :prop="formData.entity.isProjectApprovalCompleted === '0' ? 'entity.projectApprovalFileInfo':''">
						<el-input v-model="formData.entity.projectApprovalFileInfo" :placeholder="t('planApply.placeholder.input')" />
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20" class="form-row">
				<el-col :span="12">
					<el-form-item :label="t('planApply.decisionInfo.isCompleteDecisionProcedures')" required prop="entity.isDecisionProcedureCompleted">
						<el-select v-model="formData.entity.isDecisionProcedureCompleted" :placeholder="t('planApply.placeholder.select')" >
							<el-option v-for="item in yesOrNo" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item :label="t('planApply.decisionInfo.decisionProgramDocumentNumber')" :prop="formData.entity.isDecisionProcedureCompleted === '0' ? 'entity.decisionProcedureFileNo':''">
						<el-input v-model="formData.entity.decisionProcedureFileNo" :placeholder="t('planApply.placeholder.input')" />
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20" class="form-row">
				<el-col :span="24">
					<el-form-item :label="t('planApply.decisionInfo.decisionDocumentInfo')" :prop="formData.entity.isDecisionProcedureCompleted === '0' ? 'entity.decisionFileInfo':''">
						<el-input v-model="formData.entity.decisionFileInfo" :placeholder="t('planApply.placeholder.input')" />
					</el-form-item>
				</el-col>
			</el-row>
<!-- 审核意见-->
			<div class="form-section-title">{{ t('planApply.reviewOpinions.title') }}</div>
			<el-row class="form-row">
				<el-col :span="24">
					<el-form-item :label="t('planApply.reviewOpinions.submitUnitOpinion')">
						<el-input v-model="formData.entity.submitUnitOpinion" readonly />
					</el-form-item>
				</el-col>
			</el-row>

			<el-row class="form-row">
				<el-col :span="24">
					<el-form-item :label="t('planApply.reviewOpinions.groupInvestmentDeptOpinion')">
						<el-input v-model="formData.entity.groupInvestmentDeptOpinion" readonly />
					</el-form-item>
				</el-col>
			</el-row>

			<el-row class="form-row">
				<el-col :span="24">
					<el-form-item :label="t('planApply.reviewOpinions.submitUnitLeadershipOpinion')">
						<el-input v-model="formData.entity.submitUnitLeadershipOpinion" readonly />
					</el-form-item>
				</el-col>
			</el-row>

			<el-row class="form-row">
				<el-col :span="24">
					<el-form-item :label="t('planApply.reviewOpinions.submitUnitMainLeadershipOpinion')">
						<el-input v-model="formData.entity.submitUnitMainLeadershipOpinion" readonly />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<ProjectNameList :visible="visible" @emit:cancel="visible = false" @emit:confirm="projectNameFn" />
		<LibrarySelect v-model="librarySelectVisible" @select="handleLibrarySelect" />
	</div>
</template>

<script lang="ts" setup>
import { ref, watch,nextTick } from 'vue';
import { useI18n } from 'vue-i18n';
import type { InvestmentProjects, ProjectPlanApplyFormData } from '../interface/types';
import ProjectNameList from '/@/components/ProjectNameList/index.vue';
import UploadFile from '/@/components/Upload/index.vue';
import {
	projectNatureOptions,
	investmentAreaOptions,
	investmentCategoryOptions,
	projectSourceOptions,
	constructionNatureOptions,
	projectImportantOptions,
	mainBusinessOptions,
	strategicIndustryOptions,
	cityStrategyOptions, decisionTypeOptions, yesOrNo, projectDirectionOptions,
} from '/@/hooks/enums';
import type { FormInstance, FormRules } from 'element-plus';
import { FolderOpened } from '@element-plus/icons-vue';
import LibrarySelect from '/@/views/invMid/projectLibrary/components/LibrarySelect.vue';
import { selectTreeCompanyTree } from '/@/api/admin/dept';
const { t } = useI18n();
const useForm = ref<FormInstance | undefined>();
const props = withDefaults(
	defineProps<{
		modelValue?: ProjectPlanApplyFormData;
		rules?: FormRules;
		isUpdate?: boolean;
	}>(),
	{
		modelValue: () => ({
			entity: {
				id: null,
				projectName: '',
				projectNature: '',
				groupCompany: '',
				projectOwnerUnit: '',
				projectMainEntity: '',
				projectDepartment: '',
				investmentCategory: '',
				investmentArea: '',
				projectAddress: '',
				projectAddressDetail: '',
				projectInvestmentDirection: '',
				totalInvestment: '',
				investmentDirectionSegmentation: '',
				projectBackground: '',
				constructionNature: '',
				constructionStage: '',
				keyProject: '',
				isMainBusiness: '',
				mainBusinessTypes: '',
				mainBusinessCode: '',
				isManufacturingIndustry: '',
				isStuckIndustry: '',
				urbanStrategy: '',
				projectSource: '',
				majorInvestmentProjects: '',
				isStrategicEmergingIndustries: '',
				projectStartTime: '',
				projectEndTime: '',
				projectConstructionContent: '',
				planInvestmentYear: '',
				annualPlanTotal: '',
				annualPlanInvestment: '',
				planPaymentLimit: '',
				plannedImageAmount: '',
				ownedFunds: '',
				financialFunds: '',
				externalFunding: '',
				externalRaisedCapital: '',
				otherFunds: '',
				governmentFundSourceDesc: '',
				otherFundSourceDesc: '',
				projectTotalAmount: '',
				lastYearCompleted: '',
				ourInvestmentTotalAmount: '',
				ourLastYearCompleted: '',
				projectDesc: '',
				promotionPlan: '',
				projectPreliminaryPlan: '',
				projectPreliminaryPlanAttachment: '',
				attachments: [],
				remark: '',
				decisionType: '',
				isProjectApprovalCompleted: '',
				isDecisionProcedureCompleted: '',
				projectApprovalFileNo: '',
				projectApprovalFileInfo: '',
				decisionProcedureFileNo: '',
				decisionFileInfo: '',
				submitUnitOpinion: '',
				groupInvestmentDeptOpinion: '',
				submitUnitLeadershipOpinion: '',
				submitUnitMainLeadershipOpinion: '',
				planImageQuota: '',
				deptId:0,
				processInstanceId:'',
				status:0
			},
			investmentProjects: [
				{
					plannedInvestmentYear: '',
					plannedImageAmount: '',
					plannedPaymentAmount: '',
					selfFunding: '',
					externalFunding: '',
					fiscalFunding: '',
					otherFunding: '',
					fiscalFundingSource: '',
					otherFundingSource: '',
				},
			],
		}),
		rules: () => ({}),
		isUpdate: false,
	}
);

const emit = defineEmits<{
	(e: 'update:modelValue', value: ProjectPlanApplyFormData): void;
}>();

const defaultForm: ProjectPlanApplyFormData = {
	entity: {
		id: null,
		projectName: '',
		projectNature: '',
		groupCompany: '',
		projectOwnerUnit: '',
		projectMainEntity: '',
		projectDepartment: '',
		investmentCategory: '',
		investmentArea: '',
		projectAddress: '',
		projectAddressDetail: '',
		projectInvestmentDirection: '',
		totalInvestment: '',
		investmentDirectionSegmentation: '',
		projectBackground: '',
		constructionNature: '',
		constructionStage: '',
		keyProject: '',
		isMainBusiness: '',
		mainBusinessTypes: '',
		mainBusinessCode: '',
		isManufacturingIndustry: '',
		isStuckIndustry: '',
		urbanStrategy: '',
		projectSource: '',
		majorInvestmentProjects: '',
		isStrategicEmergingIndustries: '',
		projectStartTime: '',
		projectEndTime: '',
		projectConstructionContent: '',
		planInvestmentYear: '',
		annualPlanTotal: '',
		annualPlanInvestment: '',
		planPaymentLimit: '',
		plannedImageAmount: '',
		ownedFunds: '',
		financialFunds: '',
		externalFunding: '',
		externalRaisedCapital: '',
		otherFunds: '',
		governmentFundSourceDesc: '',
		otherFundSourceDesc: '',
		projectTotalAmount: '',
		lastYearCompleted: '',
		ourInvestmentTotalAmount: '',
		ourLastYearCompleted: '',
		projectDesc: '',
		promotionPlan: '',
		projectPreliminaryPlan: '',
		projectPreliminaryPlanAttachment: '',
		attachments: [],
		remark: '',
		decisionType: '',
		isProjectApprovalCompleted: '',
		isDecisionProcedureCompleted: '',
		projectApprovalFileNo: '',
		projectApprovalFileInfo: '',
		decisionProcedureFileNo: '',
		decisionFileInfo: '',
		submitUnitOpinion: '',
		groupInvestmentDeptOpinion: '',
		submitUnitLeadershipOpinion: '',
		submitUnitMainLeadershipOpinion: '',
		planImageQuota: '',
		deptId:0,
		processInstanceId: '',
		status:0,
	},
	investmentProjects: [
		{
			plannedInvestmentYear: '',
			plannedImageAmount: '',
			plannedPaymentAmount: '',
			selfFunding: '',
			externalFunding: '',
			fiscalFunding: '',
			otherFunding: '',
			fiscalFundingSource: '',
			otherFundingSource: '',
		},
	],
};

const formData = ref<ProjectPlanApplyFormData>({ ...defaultForm });

const selectedAnnualInvestmentIndex = ref<number>(formData.value.investmentProjects.length > 0 ? 0 : -1);

const handleAddAnnualInvestment = () => {
	const newItem: InvestmentProjects = {
		plannedInvestmentYear: '',
		plannedImageAmount: '',
		plannedPaymentAmount: '',
		selfFunding: '',
		externalFunding: '',
		fiscalFunding: '',
		otherFunding: '',
		fiscalFundingSource: '',
		otherFundingSource: '',
	};
	formData.value.investmentProjects.push(newItem);
	selectedAnnualInvestmentIndex.value = formData.value.investmentProjects.length - 1;
};
const year = computed(()=>formData.value.entity.planInvestmentYear)
// 修改计算逻辑，确保正确处理初始值
const safeParseFloat = (value: string | number): number => {
	const parsed = typeof value === 'string' ? parseFloat(value) : value;
	return isNaN(parsed) ? 0 : parsed;
};
// 监听投资计划数据变化
watch(()=>formData.value.investmentProjects,(newValue)=>{
	if (!year.value) return;
	let totalPlanImageQuota = 0;
	let totalPlanPaymentLimit = 0;
	let totalOwnedFunds = 0;
	let totaExternalFunding=0;
	let externalRaisedCapital = 0
	let otherFunding = 0;
	newValue.forEach((item) => {
		if(item.plannedInvestmentYear === year.value) {
			totalPlanImageQuota += safeParseFloat(item.plannedImageAmount);
			totalPlanPaymentLimit += safeParseFloat(item.plannedPaymentAmount);
			totalOwnedFunds += safeParseFloat(item.selfFunding); // 自筹
			totaExternalFunding += safeParseFloat(item.externalFunding); // 外部
			externalRaisedCapital+=safeParseFloat(item.fiscalFunding); // 财政
			otherFunding += safeParseFloat(item.otherFunding); // 其他
		}
	});
	nextTick(()=>{
		formData.value.entity.planImageQuota = totalPlanImageQuota.toString();
		formData.value.entity.planPaymentLimit = totalPlanPaymentLimit.toString();
		formData.value.entity.externalRaisedCapital = totaExternalFunding.toString();
		formData.value.entity.ownedFunds = totalOwnedFunds.toString();
		formData.value.entity.financialFunds = externalRaisedCapital.toString();
		formData.value.entity.otherFunds = otherFunding.toString();
	})
},{deep:true})
const handleCopyAnnualInvestment = () => {
	if (selectedAnnualInvestmentIndex.value >= 0 && selectedAnnualInvestmentIndex.value < formData.value.investmentProjects.length) {
		const selectedItem = formData.value.investmentProjects[selectedAnnualInvestmentIndex.value];
		const copiedItem: InvestmentProjects = { ...selectedItem };
		formData.value.investmentProjects.push(copiedItem);
		selectedAnnualInvestmentIndex.value = formData.value.investmentProjects.length - 1;
	}
};

const handleRemoveAnnualInvestment = () => {
	if (selectedAnnualInvestmentIndex.value >= 0 && selectedAnnualInvestmentIndex.value < formData.value.investmentProjects.length) {
		formData.value.investmentProjects.splice(selectedAnnualInvestmentIndex.value, 1);
		if (selectedAnnualInvestmentIndex.value >= formData.value.investmentProjects.length) {
			selectedAnnualInvestmentIndex.value = formData.value.investmentProjects.length - 1;
		}
	}
};

const handleRemoveAllAnnualInvestment = () => {
	formData.value.investmentProjects = [];
	selectedAnnualInvestmentIndex.value = -1;
};
const visible = ref(false);
const librarySelectVisible = ref(false);
const handleSelectProject = () => {
	if (props.isUpdate) {
		librarySelectVisible.value = true;
	} else {
		visible.value = true;
	}
};
watch(
	() => props.modelValue,
	(newVal) => {
		Object.assign(formData.value, newVal || {});
		formData.value.entity.planInvestmentYear = String(newVal?.entity?.planInvestmentYear);
		// 如果有数据且没有选中，默认选中第一行
		if (formData.value.investmentProjects.length > 0 && selectedAnnualInvestmentIndex.value === -1) {
			selectedAnnualInvestmentIndex.value = 0;
		}
	},
	{ immediate: true, deep: true }
);

watch(
	() => formData.value,
	() => {
		emit('update:modelValue', { ...formData.value });
	},
	{ deep: true }
);
const validateForm = () => {
	return useForm.value?.validate();
};
const projectNameFn = (row: any) => {
	Object.assign(formData.value.entity, row);
	visible.value = false;
};
const handleLibrarySelect = (row: any) => {
	Object.assign(formData.value.entity, {
		...row,
		id: '',
		parentId: row.id,
		projectPreliminaryPlanAttachment: row.projectPreliminaryPlanAttachment ? JSON.parse(row.projectPreliminaryPlanAttachment) : [],
	});
	librarySelectVisible.value = false;
};
defineExpose({
	validateForm: validateForm,
});
const uploadChange = (_: any, data: any[]) => {
	if (!data || Object.prototype.toString.call(data) !== '[object Array]' || data.length === 0) {
		formData.value.entity.projectPreliminaryPlanAttachment = [];
		return;
	}
	formData.value.entity.projectPreliminaryPlanAttachment = data.map((item: any) => {
		return {
			name: item.name,
			url: item.url,
		};
	});
};
const projectMainEntityOptions = ref([]);
const getDeptTree = async () => {
	const res = await selectTreeCompanyTree();
	projectMainEntityOptions.value = res.data || [];
};
getDeptTree();
const newProjectDirectionDetailsOptions:any = {
	'1':[
			{ label: '先进制造业', value: '1' },
		{ label: '现代服务业', value: '2' },
		{ label: '现代农业', value: '3' },
		{ label: '数字经济产业', value: '4' },],
	'2':[
		{ label: '交通基础设施', value: '5' },
		{ label: '城市基础设施', value: '6' },
		{ label: '水利及能源基础', value: '7' },
		{ label: '新型基础设施', value: '8' },
	],
	'3':[
		{ label: '应急安全', value: '9' },
		{ label: '医疗卫生', value: '10' },
		{ label: '教育文体', value: '11' },
		{ label: '城市有机更新', value: '12' },
		{ label: '生态环保', value: '13' },
	]
}
const ProjectDirectionDetailsOptionsEnums = computed(()=>{
	return newProjectDirectionDetailsOptions[formData.value.entity.projectInvestmentDirection]
})
const handleProjectMainUnitChange = ( value:any) =>{
formData.value.entity.deptId = value.id
}
</script>

<style scoped>
.page-title-row {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.page-title {
	font-size: 20px;
	font-weight: 600;
}

.page-unit {
	position: absolute;
	right: 0;
	font-size: 14px;
	color: var(--el-text-color-secondary);
}

.project-plan-apply-form {
	background: #fff;
	border-radius: 4px;
	padding: 20px;
}

.form-section-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--el-text-color-primary);
	margin: 24px 0 16px;
	padding-left: 10px;
	border-left: 4px solid var(--el-color-primary);
}

.plan-form {
	width: 100%;
}

/* 表单 label 左对齐 */
.plan-form :deep(.el-form-item__label) {
	text-align: left;
	justify-content: flex-start;
}

/* 必填字段标签显示为红色 */
/*.plan-form :deep(.el-form-item.is-required .el-form-item__label) {
    color: var(--el-color-danger);
}*/

.form-row {
	margin-bottom: 16px;
	margin-top: 16px;
}

.form-row:last-of-type {
	margin-bottom: 0;
}

.sub-section-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--el-text-color-primary);
	margin: 24px 0 16px;
}

.plan-investment-panel {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.panel-title {
	width: 200px;
	padding-top: 0;
	margin-top: 0;
}

.plan-investment-panel :deep(.el-form-item__label) {
	padding-top: 0;
	line-height: 32px;
}

.plan-investment-panel :deep(.el-form-item) {
	align-items: center;
}

.table-actions {
	margin-bottom: 16px;
	display: flex;
	gap: 12px;
}

.annual-investment-table {
	width: 100%;
}

.annual-investment-table :deep(.el-table__body-wrapper) {
	overflow-x: auto;
}
</style>
