<template>
    <div class="project-plan-apply-form border-r border-[#e5e7eb]">
        <FlowFormView :process-instance-id="processInstanceId"/>
        <div style="display: flex;justify-content: space-between;align-items: center">
					<div class="form-section-title">
						{{ t('planApply.applySection.title') }}
					</div>
					<div class="page-title">{{ title ? title : '' }}</div>
				<div class="page-unit">
					{{ t('planApply.detail.unitLabel') }}
				</div>
				</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>
                       <span>{{formData.entity.projectName}}</span>
                    </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>
                        <span>{{formData.entity.groupCompany}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item :label="t('planApply.applySection.projectNature')">
                        <span>{{projectNatureOptions.find((item:Enums) => item.value === formData.entity.projectNature)?.label}}</span>
                    </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">
                        <span>{{formData.entity.projectMainEntity}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item :label="t('reserveRegistration.basicInfo.projectOwnerUnit')">
                        <span>{{formData.entity.projectOwnerUnit}}</span>
                    </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>
											<span>{{investmentCategoryOptions.find((item:Enums) => item.value === formData.entity.investmentCategory)?.label}}</span>
                    </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>
											<span>{{investmentAreaOptions.find((item:Enums) => item.value ===formData.entity.investmentArea)?.label}}</span>
                    </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>
                        <span>{{formData.entity.projectAddress}}</span>

                    </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>
                        <span>{{formData.entity.projectAddressDetail}}</span>
                    </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">
                        <span>{{formData.entity.projectInvestmentDirection}}</span>
                    </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>
											<span>{{projectDirectionDetailsOptions.find((item:Enums) => item.value ===formData.entity.investmentDirectionSegmentation)?.label}}</span>
                    </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>
											<span>{{projectSourceOptions.find((item:Enums) => item.value === formData.entity.projectSource)?.label}}</span>
                    </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>
											<span>{{constructionNatureOptions.find((item:Enums) => item.value === formData.entity.constructionNature)?.label}}</span>
                    </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">
                        <span>{{formData.entity.majorInvestmentProjects}}</span>
                    </el-form-item>

                </el-col>
                <el-col :span="12">
                    <el-form-item :label="t('planApply.applySection.keyProject')" required prop="entity.keyProject">
											<span>{{projectImportantOptions.find((item:Enums) => item.value === formData.entity.keyProject)?.label}}</span>
                    </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">
											<span>{{formData.entity.isMainBusiness == t('planApply.common.yes') ? t('planApply.common.yes') : t('planApply.common.no')}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item :label="t('planApply.applySection.mainBusinessType')" :required="formData.entity.isMainBusiness === t('planApply.common.yes')" prop="entity.mainBusinessTypes">
											<span>{{mainBusinessOptions.find((item:Enums) => item.value === formData.entity.mainBusinessTypes)?.label}}</span>
                    </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">
                        <span>{{formData.entity.mainBusinessTypes}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item :label="t('planApply.applySection.isManufacturing')" required prop="entity.isManufacturingIndustry">
											<span>{{formData.entity.isManufacturingIndustry == t('planApply.common.yes') ? t('planApply.common.yes') : t('planApply.common.no')}}</span>
                    </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">
											<span>{{strategicIndustryOptions.find((item:Enums) => item.value === formData.entity.isStrategicEmergingIndustries)?.label}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item :label="t('planApply.applySection.cityStrategy')" required prop="entity.urbanStrategy">
											<span>{{cityStrategyOptions.find((item:Enums) => item.value === formData.entity.urbanStrategy)?.label}}</span>
                    </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">
                        <span>{{formData.entity.projectStartTime}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item :label="t('planApply.applySection.projectImplementationEnd')" required prop="entity.projectEndTime">
                       <span>{{formData.entity.projectEndTime}}</span>
                    </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')">
                                <span>{{formData.entity.planInvestmentYear}}</span>
                            </el-form-item>
                            <el-form-item style="height: 82px;" :label="t('planApply.planInvestment.plannedImageQuota')"
                                required prop="entity.planImageQuota">
															<span>{{formData.entity.planImageQuota}}{{ t('planApply.investmentEstimate.unitSuffix') }}</span>
                            </el-form-item>
                            <el-form-item style="height: 82px;" :label="t('planApply.planInvestment.annualPlanPayment')"
                                required prop="entity.planPaymentLimit">
															<span>{{formData.entity.planPaymentLimit}}{{ t('planApply.investmentEstimate.unitSuffix') }}</span>
                            </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">
															<span>{{formData.entity.ownedFunds}}{{ t('planApply.investmentEstimate.unitSuffix') }}</span>
                            </el-form-item>
                            <el-form-item :label="t('planApply.investmentEstimate.financialFunding')" required prop="entity.financialFunds">
															<span>{{formData.entity.financialFunds}}{{ t('planApply.investmentEstimate.unitSuffix') }}</span>
                            </el-form-item>
                            <el-form-item :label="t('planApply.investmentEstimate.externalRaisedFunds')" required prop="entity.externalRaisedCapital">

															<span>{{formData.entity.externalRaisedCapital}}{{ t('planApply.investmentEstimate.unitSuffix') }}</span>
                            </el-form-item>
                            <el-form-item :label="t('planApply.investmentEstimate.otherFunding')" required prop="entity.otherFunds">
															<span>{{formData.entity.otherFunds}}{{ t('planApply.investmentEstimate.unitSuffix') }}</span>
                            </el-form-item>
                            <el-form-item :label="t('planApply.investmentEstimate.financialFundingDescription')">
                                <span>{{formData.entity.governmentFundSourceDesc}}</span>
                            </el-form-item>
                            <el-form-item :label="t('planApply.investmentEstimate.otherFundingDescription')">
															<span>{{formData.entity.otherFundSourceDesc}}</span>
                            </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">
											<span>{{formData.entity.projectDesc}}</span>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row class="form-row">
                <el-col :span="24">
                    <el-form-item :label="t('planApply.applySection.projectInitialPlan')">
											<span>{{formData.entity.projectPreliminaryPlan}}</span>
                    </el-form-item>
									<el-form-item :label="t('planApply.headerForm.attachments')">
										<UploadFile :modelValue="formData.entity.projectPreliminaryPlanAttachment" :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')">
                       <span>{{formData.entity.remark}}</span>
                    </el-form-item>
                </el-col>
            </el-row>


            <div class="form-section-title">{{ t('planApply.investmentStatus.title') }}</div>
            <el-row :gutter="20" class="form-row">
                <el-col :span="12">
                    <el-form-item :label="t('planApply.investmentStatus.totalInvestmentAmount')" required prop="entity.projectTotalAmount">
											<span>{{formData.entity.projectTotalAmount}}{{t('planApply.investmentEstimate.unitSuffix')}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item :label="t('planApply.investmentStatus.cumulativeInvestmentLastYear')" required prop="entity.lastYearCompleted">
											<span>{{formData.entity.lastYearCompleted}}{{ t('planApply.investmentEstimate.unitSuffix') }}</span>
                    </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">

											<span>{{formData.entity.ourInvestmentTotalAmount}}{{ t('planApply.investmentEstimate.unitSuffix') }}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item :label="t('planApply.investmentStatus.ourCumulativeInvestmentLastYear')" required prop="entity.ourLastYearCompleted">

											<span>{{formData.entity.ourLastYearCompleted}}{{ t('planApply.investmentEstimate.unitSuffix') }}</span>
                    </el-form-item>
                </el-col>
            </el-row>

            <div class="form-section-title">{{ t('planApply.annualInvestmentInfo.title') }}</div>
            <div class="table-actions" v-if="isEdit">
                <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 }">
                       <span>{{row.plannedInvestmentYear}}</span>
                    </template>
                </el-table-column>
                <el-table-column :label="t('planApply.annualInvestmentInfo.table.plannedImageQuota')" min-width="160">
                    <template #default="{ row }">
											<span>{{row.plannedImageAmount}}{{ t('planApply.investmentEstimate.unitSuffix') }}</span>
                    </template>
                </el-table-column>
                <el-table-column :label="t('planApply.annualInvestmentInfo.table.annualPlanPayment')" min-width="160">
                    <template #default="{ row }">
											<span>{{row.plannedPaymentAmount}}{{ t('planApply.investmentEstimate.unitSuffix') }}</span>
                    </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 }">
													<span>{{row.selfFunding}}{{ t('planApply.investmentEstimate.unitSuffix') }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :label="t('planApply.annualInvestmentInfo.table.externalRaisedFunds')"
                        min-width="150">
                        <template #default="{ row }">
													<span>{{row.fiscalFunding}}{{ t('planApply.investmentEstimate.unitSuffix') }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :label="t('planApply.annualInvestmentInfo.table.financialFunding')"
                        min-width="140">
                        <template #default="{ row }">
													<span>{{row.fiscalFunding}}{{ t('planApply.investmentEstimate.unitSuffix') }}	</span>
                        </template>
                    </el-table-column>
                    <el-table-column :label="t('planApply.annualInvestmentInfo.table.otherFunding')" min-width="140">
                        <template #default="{ row }">
													<span>{{row.otherFunding}}{{ t('planApply.investmentEstimate.unitSuffix') }}	</span>
                        </template>
                    </el-table-column>
                    <el-table-column :label="t('planApply.annualInvestmentInfo.table.financialFundingDescription')"
                        min-width="200">
                        <template #default="{ row }">
													<span>{{row.fiscalFundingSource}}{{ t('planApply.investmentEstimate.unitSuffix') }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :label="t('planApply.annualInvestmentInfo.table.otherFundingDescription')"
                        min-width="200">
                        <template #default="{ row }">
													<span>{{row.otherFundingSource}}{{ t('planApply.investmentEstimate.unitSuffix') }}</span>
												</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')">
											<span>{{formData.entity.decisionType}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item :label="t('planApply.decisionInfo.isCompleteEstablishmentProcedures')" required prop="entity.isProjectApprovalCompleted">

											<span>{{formData.entity.isProjectApprovalCompleted}}</span>
                    </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')">
											<span>{{formData.entity.projectApprovalFileNo}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item :label="t('planApply.decisionInfo.establishmentDocumentInfo')">
											<span>{{formData.entity.projectApprovalFileInfo}}</span>
                    </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">
											<span>{{formData.entity.isDecisionProcedureCompleted}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item :label="t('planApply.decisionInfo.decisionProgramDocumentNumber')">
											<span>{{formData.entity.decisionProcedureFileNo}}</span>
                    </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')">
											<span>{{formData.entity.decisionFileInfo}}</span>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import type { InvestmentProjects,ProjectPlanApplyFormData } from "../interface/types";
import {projectNatureOptions,
	investmentAreaOptions,
	investmentCategoryOptions,
	projectDirectionDetailsOptions,
	projectSourceOptions,
	constructionNatureOptions,
	projectImportantOptions,
	mainBusinessOptions,
	strategicIndustryOptions,
	cityStrategyOptions, Enums
} from "/@/hooks/enums"
import type { FormInstance, FormRules } from 'element-plus';
import FlowFormView from '/@/components/workbench/common/FlowFormView.vue';
const { t } = useI18n();
const useForm = ref<FormInstance | undefined>();
const props = withDefaults(defineProps<{
	modelValue?: ProjectPlanApplyFormData;
	rules?: FormRules;
	isEdit: boolean;
	title:string;
	processInstanceId: string;
}>(), {
	isEdit: true,
	title:'',
	processInstanceId:''
});

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:'',
        status:0,
        deptId:0,
        processInstanceId:'',
	},
	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 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;
};
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();
}
defineExpose({
	validateForm: validateForm
})
</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 {
    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>
