<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 min-width="140">
					<template #header>
						<span class="required-field">{{ t('planApply.annualInvestmentInfo.table.planYear') }}</span>
					</template>
					<template #default="{ row }">
						<el-date-picker v-model="row.plannedInvestmentYear" type="year" value-format="YYYY"
							:placeholder="t('planApply.placeholder.select')" style="width: 100%"
							:class="{ 'is-error': !row.plannedInvestmentYear }" />
					</template>
				</el-table-column>
				<el-table-column min-width="160">
					<template #header>
						<span class="required-field">{{ t('planApply.annualInvestmentInfo.table.plannedImageQuota') +
							'(万元)' }}</span>
					</template>
					<template #default="{ row }">
						<el-input-number :precision="2" :controls="false" :min="0" :value-on-clear="null"
							v-model="row.plannedImageAmount" :placeholder="t('planApply.placeholder.input')"
							:class="{ 'is-error': row.plannedImageAmount === null }" />
					</template>
				</el-table-column>
				<el-table-column min-width="160">
					<template #header>
						<span class="required-field">{{ t('planApply.annualInvestmentInfo.table.annualPlanPayment') +
							'(万元)' }}</span>
					</template>
					<template #default="{ row }">
						<el-input-number :precision="2" :controls="false" :min="0" :value-on-clear="null"
							v-model="row.plannedPaymentAmount" :placeholder="t('planApply.placeholder.input')"
							:class="{ 'is-error': row.plannedPaymentAmount === null }" />
					</template>
				</el-table-column>
				<el-table-column :label="t('planApply.annualInvestmentInfo.table.fundingSources')" align="center">
					<el-table-column min-width="140">
						<template #header>
							<span class="required-field">{{ t('planApply.annualInvestmentInfo.table.capitalFunding') +
								'(万元)' }}</span>
						</template>
						<template #default="{ row }">
							<el-input-number :precision="2" :controls="false" :min="0" :value-on-clear="null"
								v-model="row.selfFunding" :placeholder="t('planApply.placeholder.input')"
								:class="{ 'is-error': row.selfFunding === null }" />
						</template>
					</el-table-column>
					<el-table-column min-width="150">
						<template #header>
							<span class="required-field">{{
								t('planApply.annualInvestmentInfo.table.externalRaisedFunds') + '(万元)' }}</span>
						</template>
						<template #default="{ row }">
							<el-input-number :precision="2" :controls="false" :min="0" :value-on-clear="null"
								v-model="row.externalFunding" :placeholder="t('planApply.placeholder.input')"
								:class="{ 'is-error': row.externalFunding === null }" />
						</template>
					</el-table-column>
					<el-table-column min-width="140">
						<template #header>
							<span class="required-field">{{ t('planApply.annualInvestmentInfo.table.financialFunding') +
								'(万元)' }}</span>
						</template>
						<template #default="{ row }">
							<el-input-number :precision="2" :controls="false" :min="0" :value-on-clear="null"
								v-model="row.fiscalFunding" :placeholder="t('planApply.placeholder.input')"
								:class="{ 'is-error': row.fiscalFunding === null }" />
						</template>
					</el-table-column>
					<el-table-column min-width="140">
						<template #header>
							<span class="required-field">{{ t('planApply.annualInvestmentInfo.table.otherFunding') +
								'(万元)' }}</span>
						</template>
						<template #default="{ row }">
							<el-input-number :precision="2" :controls="false" :min="0" :value-on-clear="null"
								v-model="row.otherFunding" :placeholder="t('planApply.placeholder.input')"
								:class="{ 'is-error': row.otherFunding === null }" />
						</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="mode === 'view'" />
					</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="mode === 'view'" />
					</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="mode === 'view'" />
					</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="mode === 'view'" />
					</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, computed } 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 { ElMessage } 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;
		mode?: 'edit' | 'view';
	}>(),
	{
		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,
		mode: 'edit',
	}
);

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

const mode = computed(() => props.mode);

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: null,
		plannedPaymentAmount: null,
		selfFunding: null,
		externalFunding: null,
		fiscalFunding: null,
		otherFunding: null,
		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 | null): number => {
	if (value === null) return 0;
	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 = async () => {
	// 先验证表单
	const formValid = await useForm.value?.validate().catch(() => false);

	// 帮助函数：检查值是否为空
	const isEmptyValue = (value: any): boolean => {
		if (value === null || value === undefined) return true;
		if (typeof value === 'string' && value.trim() === '') return true;
		if (typeof value === 'number' && isNaN(value)) return true;
		return false;
	};

	// 验证年度项目投资信息表格
	let tableValid = true;
	const tableErrors: string[] = [];

	if (formData.value.investmentProjects.length === 0) {
		tableErrors.push('请至少添加一条年度项目投资信息');
		tableValid = false;
	} else {
		formData.value.investmentProjects.forEach((item, index) => {
			const rowNum = index + 1;
			if (isEmptyValue(item.plannedInvestmentYear)) {
				tableErrors.push(`第${rowNum}行：计划投资年度必填`);
				tableValid = false;
			}
			if (isEmptyValue(item.plannedImageAmount)) {
				tableErrors.push(`第${rowNum}行：计划形象额度必填`);
				tableValid = false;
			}
			if (isEmptyValue(item.plannedPaymentAmount)) {
				tableErrors.push(`第${rowNum}行：计划支付额度必填`);
				tableValid = false;
			}
			if (isEmptyValue(item.selfFunding)) {
				tableErrors.push(`第${rowNum}行：自有资金必填`);
				tableValid = false;
			}
			if (isEmptyValue(item.externalFunding)) {
				tableErrors.push(`第${rowNum}行：对外募集资金必填`);
				tableValid = false;
			}
			if (isEmptyValue(item.fiscalFunding)) {
				tableErrors.push(`第${rowNum}行：财政资金必填`);
				tableValid = false;
			}
			if (isEmptyValue(item.otherFunding)) {
				tableErrors.push(`第${rowNum}行：其他资金必填`);
				tableValid = false;
			}
		});
	}

	if (!tableValid) {
		// 显示第一个表格错误
		ElMessage.error(tableErrors[0]);
		return Promise.reject(new Error(tableErrors[0]));
	}

	if (!formValid) {
		return Promise.reject(new Error('表单验证失败'));
	}

	return Promise.resolve(true);
};
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;
}

/* 必填字段标记 - 在标题前添加红色星号 */
.required-field::before {
	content: '*';
	color: var(--el-color-danger);
	margin-right: 4px;
}

/* 错误状态样式 - 输入框红色边框 */
.annual-investment-table :deep(.is-error .el-input__wrapper) {
	border-color: var(--el-color-danger) !important;
	box-shadow: 0 0 0 1px var(--el-color-danger) inset !important;
}
</style>
