<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>
