<template>
	<div class="project-basic-info-form">
		<div v-if="mainTitle" class="form-main-title">{{ mainTitle }}</div>
		<div class="form-section-title">{{ t('reserveRegistration.basicInfo.title') }}</div>
		<el-form :model="formData" :rules="formRules" label-width="220px" class="project-form" ref="formRef">
			<el-row :gutter="20" class="form-row">
				<el-col :span="12">
					<el-form-item :label="t('reserveRegistration.basicInfo.applicant')" prop="applicant">
						<el-input v-model="formData.applicant" disabled :placeholder="t('reserveRegistration.basicInfo.inputPlaceholder')" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item :label="t('reserveRegistration.basicInfo.applicationDate')" prop="applicationDate">
						<el-date-picker
							v-model="formData.applicationDate"
							type="date"
							value-format="YYYY-MM-DD"
							disabled
							:placeholder="t('reserveRegistration.basicInfo.selectPlaceholder')"
							style="width: 100%"
						/>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20" class="form-row">
				<el-col :span="24">
					<el-form-item :label="t('reserveRegistration.basicInfo.applicationUnit')" prop="applicationUnit">
						<el-input v-model="formData.applicationUnit" disabled :placeholder="t('reserveRegistration.basicInfo.inputPlaceholder')" />
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20" class="form-row">
				<el-col :span="24">
					<el-form-item :label="t('reserveRegistration.basicInfo.projectName')" required prop="projectName">
						<div class="partner-name-cell w-full">
							<el-input v-model="formData.projectName" :placeholder="t('reserveRegistration.basicInfo.inputPlaceholder')" :readonly="isUpdate" />
							<el-button v-if="isUpdate" icon="OfficeBuilding" size="small" @click="projectNameListVisible = true" />
						</div>
						<ProjectNameList :visible="projectNameListVisible" @emit:cancel="projectNameListVisible = false" @emit:confirm="handleLibrarySelect" />
					</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.projectMainUnit')" required prop="projectMainUnit">
						<el-tree-select
							v-model="formData.projectMainUnit"
							:data="projectMainEntityOptions"
							check-strictly
							node-key="name"
							:props="{
								value: 'name',
								label: 'name',
								children: 'children',
							}"
							@current-change="handleProjectMainUnitChange"
						/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item :label="t('reserveRegistration.basicInfo.projectOwnerUnit')" prop="projectOwnerUnit">
						<el-tree-select
							v-model="formData.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('reserveRegistration.basicInfo.projectStartDate')" required prop="projectStartDate">
						<el-date-picker
							v-model="formData.projectStartDate"
							type="date"
							value-format="YYYY-MM-DD"
							:placeholder="t('reserveRegistration.basicInfo.selectPlaceholder')"
							style="width: 100%"
						/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item :label="t('reserveRegistration.basicInfo.projectEndDate')" required prop="projectEndDate">
						<el-date-picker
							v-model="formData.projectEndDate"
							type="date"
							value-format="YYYY-MM-DD"
							:placeholder="t('reserveRegistration.basicInfo.selectPlaceholder')"
							style="width: 100%"
						/>
					</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.investmentCategory')" required prop="investmentCategory">
						<el-select
							v-model="formData.investmentCategory"
							:placeholder="t('reserveRegistration.basicInfo.selectPlaceholder')"
							style="width: 100%"
							clearable
						>
							<!-- TODO: 加载项目性质选项 -->
							<el-option v-for="item of 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('reserveRegistration.basicInfo.projectNature')" required prop="projectNature">
						<el-select
							v-model="formData.projectNature"
							:placeholder="t('reserveRegistration.basicInfo.selectPlaceholder')"
							style="width: 100%"
							clearable
						>
							<!-- TODO: 加载项目性质选项 -->
							<el-option v-for="item of projectNatureOptions" :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.projectManagerName')" prop="projectManagerName">
						<div class="partner-name-cell w-full" @click="userSelectVisible = true">
							<el-input maxlength="255" :value="formData.projectManagerName" :placeholder="t('reserveRegistration.basicInfo.selectPlaceholder')" clearable readonly>
							</el-input>
							<el-button icon="OfficeBuilding" size="small" />
						</div>
						<UserSelect v-model:visible="userSelectVisible" multiple @ok="handleUserSelectOk" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item :label="t('reserveRegistration.basicInfo.contactNumber')" prop="contactNumber">
						<el-input maxlength="255" v-model="formData.contactNumber" :placeholder="t('reserveRegistration.basicInfo.inputPlaceholder')" />
					</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="projectSource">
						<el-select
							v-model="formData.projectSource"
							:placeholder="t('reserveRegistration.basicInfo.selectPlaceholder')"
							style="width: 100%"
							clearable
						>
							<!-- TODO: 项目来源 -->
							<el-option v-for="item of 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('reserveRegistration.basicInfo.constructionNature')" required prop="constructionNature">
						<el-select
							v-model="formData.constructionNature"
							:placeholder="t('reserveRegistration.basicInfo.selectPlaceholder')"
							style="width: 100%"
							clearable
						>
							<!-- TODO: 加载建设性质选项 -->
							<el-option v-for="item of 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.keyProject')" required prop="keyProject">
						<el-select
							v-model="formData.keyProject"
							:placeholder="t('reserveRegistration.basicInfo.selectPlaceholder')"
							style="width: 100%"
							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-col :span="12">
					<el-form-item :label="t('reserveRegistration.basicInfo.majorInvestmentProject')" required prop="majorInvestmentProject">
						<el-select v-model="formData.majorInvestmentProject" :placeholder="t('reserveRegistration.basicInfo.selectPlaceholder')" >
							<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="24">
					<el-form-item :label="t('reserveRegistration.basicInfo.withinMainBusiness')" required prop="withinMainBusiness">
<!--						TODO是否属于主业范围-->
						<el-select v-model="formData.withinMainBusiness" :placeholder="t('reserveRegistration.basicInfo.inputPlaceholder')" >
							<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('reserveRegistration.basicInfo.mainBusinessType')" required prop="mainBusinessType">
						<el-select v-model="formData.mainBusinessType" :placeholder="t('reserveRegistration.basicInfo.selectPlaceholder')" >
<!--						TODO	主业种类-->
							<el-option v-for="item in mainBusinessOptions" :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.mainBusinessCode')" required prop="mainBusinessCode">
						<el-input maxlength="255" v-model="formData.mainBusinessCode" :placeholder="t('reserveRegistration.basicInfo.inputPlaceholder')" />
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20" class="form-row">
				<el-col :span="12">
<!--					TODO 项目投向-->
					<el-form-item :label="t('reserveRegistration.basicInfo.projectDirection')" required prop="projectDirection">
						<el-select v-model="formData.projectDirection" :placeholder="t('reserveRegistration.basicInfo.selectPlaceholder')" >
							<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="directionSubdivision">
<!--						TODO 投向细分-->
						<el-select v-model="formData.directionSubdivision" :placeholder="t('reserveRegistration.basicInfo.selectPlaceholder')" >
							<el-option v-for="item in projectDirectionDetailsOptions" :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.strategicEmergingIndustry')" required prop="strategicEmergingIndustry">
						<el-select v-model="formData.strategicEmergingIndustry" :placeholder="t('reserveRegistration.basicInfo.selectPlaceholder')" >
							<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('reserveRegistration.basicInfo.urbanStrategy')" required prop="urbanStrategy">
						<el-select v-model="formData.urbanStrategy" :placeholder="t('reserveRegistration.basicInfo.selectPlaceholder')" >
							<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('reserveRegistration.basicInfo.isManufacturing')" required prop="isManufacturing">
<!--					TODO 是否属于制造业	-->
						<el-select v-model="formData.isManufacturing" :placeholder="t('reserveRegistration.basicInfo.selectPlaceholder')" >
							<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('reserveRegistration.basicInfo.investmentRegion')" required prop="investmentRegion">
						<el-select
							v-model="formData.investmentRegion"
							:placeholder="t('reserveRegistration.basicInfo.selectPlaceholder')"
							style="width: 100%"
							clearable
						>
							<!-- TODO: 加载投资区域选项 -->
							<el-option v-for="item of 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('reserveRegistration.basicInfo.projectAddress')" required prop="projectAddress">
						<el-input maxlength="255" v-model="formData.projectAddress" :placeholder="t('reserveRegistration.basicInfo.inputPlaceholder')" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item :label="t('reserveRegistration.basicInfo.projectDetailedAddress')" required prop="projectDetailedAddress">
						<el-input maxlength="255" v-model="formData.projectDetailedAddress" :placeholder="t('reserveRegistration.basicInfo.inputPlaceholder')" />
					</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.isControllingShareholder')" required prop="isControllingShareholder">
						<el-select v-model="formData.isControllingShareholder" :placeholder="t('reserveRegistration.basicInfo.selectPlaceholder')" >
							<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('reserveRegistration.basicInfo.ourShareholdingRatio')" required prop="ourShareholdingRatio">
						<el-input-number
							v-model="formData.ourShareholdingRatio"
							:controls="false"
							:min="0"
							:max="100"
							:length="20"
							:placeholder="t('reserveRegistration.basicInfo.inputPlaceholder')"
						/>
					</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.totalInvestmentAmount')" required prop="totalInvestmentAmount">
						<el-input-number
							v-model="formData.totalInvestmentAmount"
							:controls="false"
							:min="0"
							:placeholder="t('reserveRegistration.basicInfo.inputPlaceholder')"
							:precision="2"
							:length="20"
						/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item :label="t('reserveRegistration.basicInfo.cumulativeInvestmentLastYear')" required prop="cumulativeInvestmentLastYear">
						<el-input-number
							v-model="formData.cumulativeInvestmentLastYear"
							:controls="false"
							:min="0"
							:placeholder="t('reserveRegistration.basicInfo.inputPlaceholder')"
							:precision="2"
							:length="20"
						/>
					</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.ourTotalInvestmentAmount')" required prop="ourTotalInvestmentAmount">
						<el-input-number
							v-model="formData.ourTotalInvestmentAmount"
							:controls="false"
							:min="0"
							:placeholder="t('reserveRegistration.basicInfo.inputPlaceholder')"
							:precision="2"
							:length="20"/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item :label="t('reserveRegistration.basicInfo.ourCumulativeInvestmentLastYear')" required prop="ourCumulativeInvestmentLastYear">
						<el-input-number
							v-model="formData.ourCumulativeInvestmentLastYear"
							:controls="false"
							:min="0"
							:placeholder="t('reserveRegistration.basicInfo.inputPlaceholder')"
							:precision="2"
							:length="20"/>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20" class="form-row">
				<el-col :span="24">
					<el-form-item :label="t('reserveRegistration.basicInfo.projectOverview')" required prop="projectDesc">
						<el-input
								maxlength="255"
							v-model="formData.projectDesc"
							type="textarea"
							:rows="3"
							:placeholder="t('reserveRegistration.basicInfo.inputPlaceholder')"
							resize="vertical"
						/>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20" class="form-row">
				<el-col :span="24">
					<el-form-item :label="t('reserveRegistration.basicInfo.progressDescription')" prop="progressDescription">
						<el-input
								maxlength="255"
							v-model="formData.progressDesc"
							type="textarea"
							:rows="3"
							:placeholder="t('reserveRegistration.basicInfo.inputPlaceholder')"
							resize="vertical"
						/>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20" class="form-row">
				<el-col :span="24">
					<el-form-item :label="t('reserveRegistration.basicInfo.projectProposal')" prop="projectProposal">
						<UploadFile
							:modelValue="formData.projectProposal"
							:fileSize="20"
							type="simple"
							:limit="10"
							@change="(url: string, files: any[]) => (formData.projectProposal = files?.map((item: any) => ({ name: item.name, url: item.url })) || [])"
						/>
					</el-form-item>
				</el-col>
			</el-row>

			<div class="sub-section-title">{{ t('reserveRegistration.investmentEstimate.title') }}</div>
			<el-row :gutter="20" class="form-row">
				<el-col :span="12">
					<el-form-item :label="t('reserveRegistration.investmentEstimate.enterpriseSelfFund')" required prop="enterpriseSelfFund">
						<div class="input-number-append">
							<el-input-number
								v-model="formData.enterpriseSelfFund"
								:controls="false"
								:min="0"
								class="flex-1"
								:placeholder="t('reserveRegistration.investmentEstimate.inputPlaceholder')"
								:precision="2"
								:length="20"
							/>
							<div>{{ t('reserveRegistration.investmentEstimate.unitWanYuan') }}</div>
						</div>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item :label="t('reserveRegistration.investmentEstimate.governmentInvestmentFund')" required prop="governmentInvestmentFund">
						<div class="input-number-append">
							<el-input-number
								v-model="formData.governmentInvestmentFund"
								:controls="false"
								:min="0"
								class="flex-1"
								:placeholder="t('reserveRegistration.investmentEstimate.inputPlaceholder')"
								:precision="2"
								:length="20"
							/>
							<div>{{ t('reserveRegistration.investmentEstimate.unitWanYuan') }}</div>
						</div>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20" class="form-row">
				<el-col :span="12">
					<el-form-item :label="t('reserveRegistration.investmentEstimate.externalRaisedFund')" required prop="externalRaisedFund">
						<div class="input-number-append">
							<el-input-number
								v-model="formData.externalRaisedFund"
								:controls="false"
								:min="0"
								class="flex-1"
								:placeholder="t('reserveRegistration.investmentEstimate.inputPlaceholder')"
								:precision="2"
								:length="20"
							/>
							<div>{{ t('reserveRegistration.investmentEstimate.unitWanYuan') }}</div>
						</div>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item :label="t('reserveRegistration.investmentEstimate.otherFunds')" required prop="otherFunds">
						<div class="input-number-append">
							<el-input-number
								v-model="formData.otherFunds"
								:controls="false"
								:min="0"
								class="flex-1"
								:placeholder="t('reserveRegistration.investmentEstimate.inputPlaceholder')"
								:precision="2"
								:length="20"
							/>
							<div>{{ t('reserveRegistration.investmentEstimate.unitWanYuan') }}</div>
						</div>
					</el-form-item>
				</el-col>
			</el-row>

			<div class="sub-section-title">{{ t('reserveRegistration.partnerInfo.title') }}</div>
			<div class="partner-toolbar">
				<el-button type="primary" icon="Plus" @click="handleAddPartner">{{ t('reserveRegistration.partnerInfo.add') }}</el-button>
				<el-button icon="DocumentCopy" :disabled="currentPartnerRow === -1" @click="handleCopyPartner">
					{{ t('reserveRegistration.partnerInfo.copy') }}
				</el-button>
				<el-button type="danger" icon="Delete" :disabled="currentPartnerRow === -1" @click="handleRemovePartner">
					{{ t('reserveRegistration.partnerInfo.remove') }}
				</el-button>
				<el-button type="danger" icon="Delete" :disabled="partnerList.length === 0" @click="handleClearPartners">
					{{ t('reserveRegistration.partnerInfo.removeAll') }}
				</el-button>
			</div>
			<el-form-item prop="partnerInfos" label-width="0">
				<el-table :data="partnerList" border style="width: 100%" highlight-current-row @current-change="handlePartnerCurrentChange">
					<el-table-column width="60">
						<template #default="scope">
							<el-radio v-model="currentPartnerRow" :label="scope.$index">&nbsp;</el-radio>
						</template>
					</el-table-column>
					<el-table-column type="index" :label="t('reserveRegistration.partnerInfo.table.index')" width="60" />
					<el-table-column prop="name" :label="t('reserveRegistration.partnerInfo.table.name')" min-width="220">
						<template #default="scope">
							<div class="partner-name-cell">
								<el-input maxlength="255" readonly v-model="scope.row.name" :placeholder="t('reserveRegistration.partnerInfo.table.selectPlaceholder')" />
								<el-button icon="OfficeBuilding" size="small" @click="openPartnerCompanyDialog(scope.$index)" />
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="nature" :label="t('reserveRegistration.partnerInfo.table.nature')" min-width="200">
						<template #default="scope">
							<el-select v-model="scope.row.nature">
								<el-option v-for="item in cooperationPartnerNatureOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
							</el-select>
						</template>
					</el-table-column>
					<el-table-column prop="cooperationController" :label="t('reserveRegistration.partnerInfo.table.controller')" min-width="200">
						<template #default="scope">
							<el-input readonly v-model="scope.row.cooperationController" />
						</template>
					</el-table-column>
					<el-table-column readonly prop="share" :label="t('reserveRegistration.partnerInfo.table.share')" min-width="180">
						<template #default="scope">
							<el-input readonly v-model="scope.row.share">
								<template #append>%</template>
							</el-input>
						</template>
					</el-table-column>
				</el-table>
			</el-form-item>

			<SelectCompanyDialog v-model:visible="partnerCompanyDialogVisible" @confirm="handlePartnerCompanySelected" />

			<div class="sub-section-title">{{ t('reserveRegistration.decisionInfo.title') }}</div>
			<el-row :gutter="20" class="form-row">
				<el-col :span="12">
					<el-form-item :label="t('reserveRegistration.decisionInfo.decisionType')" prop="decisionType">
						<el-select v-model="formData.decisionType" :placeholder="t('reserveRegistration.decisionInfo.selectPlaceholder')" clearable>
							<el-option v-for="item in decisionTypeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item
						:label="t('reserveRegistration.decisionInfo.isCompleteEstablishmentProcedures')"
						required
						prop="isCompleteEstablishmentProcedures"
					>
						<el-select
							v-model="formData.isCompleteEstablishmentProcedures"
							:placeholder="t('reserveRegistration.decisionInfo.selectPlaceholder')"
							style="width: 100%"
							clearable
						>
						<el-option v-for="item in yesOrNo" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</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.decisionInfo.establishmentDocumentNumber')" :prop="formData.isCompleteEstablishmentProcedures === '0' ? 'establishmentDocumentNumber':''">
						<el-input maxlength="255" v-model="formData.establishmentDocumentNumber" :placeholder="t('reserveRegistration.decisionInfo.inputPlaceholder')" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item :label="t('reserveRegistration.decisionInfo.establishmentDocumentInfo')" :prop="formData.isCompleteEstablishmentProcedures === '0'?'establishmentDocumentInfo':''">
						<el-input maxlength="255" v-model="formData.establishmentDocumentInfo" :placeholder="t('reserveRegistration.decisionInfo.inputPlaceholder')" />
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20" class="form-row">
				<el-col :span="12">
					<el-form-item :label="t('reserveRegistration.decisionInfo.isCompleteDecisionProcedures')" required prop="isCompleteDecisionProcedures">
						<el-select
							v-model="formData.isCompleteDecisionProcedures"
							:placeholder="t('reserveRegistration.decisionInfo.selectPlaceholder')"
							style="width: 100%"
							clearable
						>
							<el-option v-for="item in yesOrNo" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item :label="t('reserveRegistration.decisionInfo.decisionProgramDocumentNumber')" :prop="formData.isCompleteDecisionProcedures === '0'?'decisionProgramDocumentNumber' : ''">
						<el-input maxlength="255" v-model="formData.decisionProgramDocumentNumber" :placeholder="t('reserveRegistration.decisionInfo.inputPlaceholder')" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20" class="form-row">
				<el-col :span="24">
					<el-form-item :label="t('reserveRegistration.decisionInfo.decisionDocumentInfo')" :prop="formData.isCompleteDecisionProcedures === '0'?'decisionDocumentInfo':''">
						<el-input maxlength="255" v-model="formData.decisionDocumentInfo" :placeholder="t('reserveRegistration.decisionInfo.inputPlaceholder')" />
					</el-form-item>
				</el-col>
			</el-row>

			<!-- <div class="sub-section-title">{{ t('reserveRegistration.reviewOpinions.title') }}</div>
            <el-form-item :label="t('reserveRegistration.reviewOpinions.submitUnitOpinion')" :prop="['reviewOpinions', 'submitUnitOpinion']">
                <el-input v-model="formData.reviewOpinions.submitUnitOpinion"
                    :placeholder="t('reserveRegistration.reviewOpinions.inputPlaceholder')" type="textarea" :rows="2"
                    resize="vertical" />
            </el-form-item>
            <el-form-item :label="t('reserveRegistration.reviewOpinions.groupInvestmentDeptOpinion')" :prop="['reviewOpinions', 'groupInvestmentDeptOpinion']">
                <el-input v-model="formData.reviewOpinions.groupInvestmentDeptOpinion"
                    :placeholder="t('reserveRegistration.reviewOpinions.inputPlaceholder')" type="textarea" :rows="2"
                    resize="vertical" />
            </el-form-item>
            <el-form-item :label="t('reserveRegistration.reviewOpinions.submitUnitLeadershipOpinion')" :prop="['reviewOpinions', 'submitUnitLeadershipOpinion']">
                <el-input v-model="formData.reviewOpinions.submitUnitLeadershipOpinion"
                    :placeholder="t('reserveRegistration.reviewOpinions.inputPlaceholder')" type="textarea" :rows="2"
                    resize="vertical" />
            </el-form-item>
            <el-form-item :label="t('reserveRegistration.reviewOpinions.submitUnitMainLeadershipOpinion')" :prop="['reviewOpinions', 'submitUnitMainLeadershipOpinion']">
                <el-input v-model="formData.reviewOpinions.submitUnitMainLeadershipOpinion"
                    :placeholder="t('reserveRegistration.reviewOpinions.inputPlaceholder')" type="textarea" :rows="2"
                    resize="vertical" />
            </el-form-item> -->
		</el-form>
	</div>
</template>

<script lang="ts" setup>
import { reactive, watch, ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import SelectCompanyDialog from '/@/components/investment/SelectCompanyDialog.vue';
import type { FormInstance, FormRules } from 'element-plus';
import {
	projectNatureOptions,
	investmentCategoryOptions,
	projectSourceOptions,
	constructionNatureOptions,
	investmentAreaOptions, yesOrNo, decisionTypeOptions, projectImportantOptions, cooperationPartnerNatureOptions,
	cityStrategyOptions, mainBusinessOptions, projectDirectionDetailsOptions, projectDirectionOptions,
	strategicIndustryOptions
} from '/@/hooks/enums';
import UserSelect from '/@/components/UserSelect/index.vue';
import ProjectNameList from '/@/components/ProjectNameList/index.vue';
import { convertTemplateDataToFormData } from '/@/api/investment/reserveRegistration';
import { selectTreeCompanyTree } from '/@/api/admin/dept';

const { t } = useI18n();
const formRef = ref<FormInstance | null>(null);

export interface ProjectBasicInfoFormData {
	parentId?: string;
	applicant: string;
	applicationUnit: string;
	projectName: string;
	projectMainUnit: string;
	projectStartDate: string;
	investmentCategory: string;
	projectManagerName: string;
	projectSource: string;
	keyProject: string;
	withinMainBusiness: string;
	mainBusinessType: string;
	projectDirection: string;
	strategicEmergingIndustry: string;
	isManufacturing: string;
	projectAddress: string;
	isControllingShareholder: string;
	totalInvestmentAmount: string;
	ourTotalInvestmentAmount: string;
	projectDesc: string;
	progressDesc: string;
	projectProposal: any[];
	applicationDate: string;
	projectOwnerUnit: string;
	projectEndDate: string;
	projectNature: string;
	contactNumber: string;
	constructionNature: string;
	majorInvestmentProject: string;
	mainBusinessCode: string;
	directionSubdivision: string;
	urbanStrategy: string;
	investmentRegion: string;
	projectDetailedAddress: string;
	ourShareholdingRatio: string;
	cumulativeInvestmentLastYear: string;
	ourCumulativeInvestmentLastYear: string;
	enterpriseSelfFund: string;
	externalRaisedFund: string;
	governmentInvestmentFund: string;
	otherFunds: string;
	partnerInfos: PartnerInfo[];
	decisionType: string;
	isCompleteEstablishmentProcedures: string;
	establishmentDocumentNumber: string;
	establishmentDocumentInfo: string;
	decisionProgramDocumentNumber: string;
	decisionDocumentInfo: string;
	isCompleteDecisionProcedures: string;
	reviewOpinions: ReviewOpinions;
	processInstanceId: string;
	status: number;
	deptId:string
}

export interface PartnerInfo {
	id?: string | number | null;
	name: string;
	nature: string;
	controller: string;
	share: string;
	cooperationController:string
}

export interface ReviewOpinions {
	submitUnitOpinion: string;
	groupInvestmentDeptOpinion: string;
	submitUnitLeadershipOpinion: string;
	submitUnitMainLeadershipOpinion: string;
}

const props = defineProps<{
	modelValue?: ProjectBasicInfoFormData;
	mainTitle?: string;
	readonly?: boolean;
	isUpdate?: boolean;
}>();
const mainTitle = computed(() => props.mainTitle || '');
watch(mainTitle, () => undefined);

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

const defaultPartnerRow: PartnerInfo = {
	id: '',
	name: '',
	nature: '',
	controller: '',
	share: '',
};

const defaultFormData: ProjectBasicInfoFormData = {
	applicant: '',
	applicationUnit: '',
	projectName: '',
	projectMainUnit: '',
	projectStartDate: '',
	investmentCategory: '',
	projectManagerName: '',
	projectSource: '',
	keyProject: '',
	withinMainBusiness: '',
	mainBusinessType: '',
	projectDirection: '',
	strategicEmergingIndustry: '',
	isManufacturing: '',
	projectAddress: '',
	isControllingShareholder: '',
	totalInvestmentAmount: '',
	ourTotalInvestmentAmount: '',
	projectDesc: '',
	progressDesc: '',
	projectProposal: [],
	applicationDate: '',
	projectOwnerUnit: '',
	projectEndDate: '',
	projectNature: '',
	contactNumber: '',
	constructionNature: '',
	majorInvestmentProject: '',
	mainBusinessCode: '',
	directionSubdivision: '',
	urbanStrategy: '',
	investmentRegion: '',
	projectDetailedAddress: '',
	ourShareholdingRatio: '',
	cumulativeInvestmentLastYear: '',
	ourCumulativeInvestmentLastYear: '',
	enterpriseSelfFund: '',
	externalRaisedFund: '',
	governmentInvestmentFund: '',
	otherFunds: '',
	partnerInfos: [],
	decisionType: '',
	isCompleteEstablishmentProcedures: '',
	establishmentDocumentNumber: '',
	establishmentDocumentInfo: '',
	decisionProgramDocumentNumber: '',
	decisionDocumentInfo: '',
	isCompleteDecisionProcedures: '',
	processInstanceId: '',
	reviewOpinions: {
		submitUnitOpinion: '',
		groupInvestmentDeptOpinion: '',
		submitUnitLeadershipOpinion: '',
		submitUnitMainLeadershipOpinion: '',
	},
	status: 1,
	deptId:''
};

const requiredRule = [{ required: true, message: `${t('该字段必填')}` }];
const requiredFn = [{validator: (rule: any, value: string,callback: (e?: Error) => void) => {
		if (formData.isCompleteEstablishmentProcedures === '1' && !value){
			callback(new Error(`${t('该字段必填')}`));
		}else {
			callback();
		}
	},trigger: ['blur', 'change'], required: true}];
const requiredFn1 = [{validator: (rule: any, value: string,callback: (e?: Error) => void) => {
		if (formData.isCompleteDecisionProcedures === '1' && !value){
			callback(new Error(`${t('该字段必填')}`));
		}else {
			callback();
		}
	},trigger: ['blur', 'change'], required: true}];
const formRules: FormRules = {
    projectName: requiredRule,
    projectMainUnit: requiredRule,
    projectStartDate: requiredRule,
    projectEndDate: requiredRule,
    investmentCategory: requiredRule,
    projectNature: requiredRule,
    projectSource: requiredRule,
    constructionNature: requiredRule,
    keyProject: requiredRule,
    majorInvestmentProject: requiredRule,
    withinMainBusiness: requiredRule,
    mainBusinessType: requiredRule,
    mainBusinessCode: requiredRule,
    projectDirection: requiredRule,
    directionSubdivision: requiredRule,
    strategicEmergingIndustry: requiredRule,
    urbanStrategy: requiredRule,
    isManufacturing: requiredRule,
    investmentRegion: requiredRule,
    projectAddress: requiredRule,
    projectDetailedAddress: requiredRule,
    isControllingShareholder: requiredRule,
    ourShareholdingRatio: requiredRule,
    totalInvestmentAmount: requiredRule,
    cumulativeInvestmentLastYear: requiredRule,
    ourTotalInvestmentAmount: requiredRule,
    ourCumulativeInvestmentLastYear: requiredRule,
    projectDesc: requiredRule,
    enterpriseSelfFund: requiredRule,
    governmentInvestmentFund: requiredRule,
    externalRaisedFund: requiredRule,
    otherFunds: requiredRule,
    isCompleteEstablishmentProcedures: requiredRule,
    isCompleteDecisionProcedures: requiredRule,
    // partnerInfos: [{ validator: (rule: any, value: PartnerInfo[], callback: (e?: Error) => void) => {
    //     if (partnerList.value.length && !partnerList.value.some(item => !item.name)) {
    //         callback()
    //     } else {
    //         callback(new Error(t('该字段必填')))
    //     }
    // }, message: t('该字段必填') }]
	establishmentDocumentNumber:requiredFn,
	establishmentDocumentInfo:requiredFn,
	decisionProgramDocumentNumber:requiredFn1,
	decisionDocumentInfo:requiredFn1,
}

const formData = reactive<ProjectBasicInfoFormData>({ ...defaultFormData });
const partnerList = ref<PartnerInfo[]>([{ ...defaultPartnerRow }]);
const currentPartnerRow = ref(partnerList.value.length > 0 ? 0 : -1);
const partnerCompanyDialogVisible = ref(false);
const partnerEditingIndex = ref(-1);
const handleProjectMainUnitChange = (e:any) =>{
	formData.deptId = e.id;
}
const applyPartnerListFromValue = (value?: ProjectBasicInfoFormData) => {
	const list =
		value?.partnerInfos && value.partnerInfos.length
			? value.partnerInfos.map((item) => ({ ...defaultPartnerRow, ...item }))
			: [{ ...defaultPartnerRow }];
	partnerList.value = list;
	currentPartnerRow.value = partnerList.value.length > 0 ? 0 : -1;
};

watch(
	() => props.modelValue,
	(newVal) => {
		Object.assign(
			formData,
			defaultFormData,
			newVal
				? {
						...newVal,
						partnerInfos: [...(defaultFormData.partnerInfos || [])],
						reviewOpinions: { ...(defaultFormData.reviewOpinions || {}) },
				  }
				: {}
		);
		applyPartnerListFromValue(newVal);
		nextTick(() => {
			formRef.value?.clearValidate();
		});
	},
	{ immediate: true, deep: true }
);

// watch(formData, (val) => {
//     console.log(val)
// })

// const emitModelValue = () => {
//     console.log(formData)
//     emit('update:modelValue', {
//         ...formData,
//         partnerInfos: partnerList.value.map(item => ({ ...item })),
//         reviewOpinions: { ...formData.reviewOpinions },
//     });
// };

// watch(formData, emitModelValue, { deep: true });
// watch(partnerList, emitModelValue, { deep: true });

const handleAddPartner = () => {
	partnerList.value.push({ ...defaultPartnerRow });
	currentPartnerRow.value = partnerList.value.length - 1;
};

const handleCopyPartner = () => {
	if (currentPartnerRow.value === -1) return;
	const target = partnerList.value[currentPartnerRow.value];
	partnerList.value.push({ ...target });
	currentPartnerRow.value = partnerList.value.length - 1;
};

const handleRemovePartner = () => {
	if (currentPartnerRow.value === -1) return;
	partnerList.value.splice(currentPartnerRow.value, 1);
	if (partnerList.value.length === 0) {
		partnerList.value.push({ ...defaultPartnerRow });
	}
	currentPartnerRow.value = partnerList.value.length > 0 ? Math.min(currentPartnerRow.value, partnerList.value.length - 1) : -1;
};

const handleClearPartners = () => {
	partnerList.value = [{ ...defaultPartnerRow }];
	currentPartnerRow.value = partnerList.value.length > 0 ? 0 : -1;
};

const handlePartnerCurrentChange = (row: PartnerInfo | undefined) => {
	if (!row) {
		currentPartnerRow.value = -1;
		return;
	}
	const index = partnerList.value.indexOf(row);
	currentPartnerRow.value = index;
};

const openPartnerCompanyDialog = (index: number) => {
	partnerEditingIndex.value = index;
	partnerCompanyDialogVisible.value = true;
};

const handlePartnerCompanySelected = (row: any) => {
	if (partnerEditingIndex.value === -1) return;
	const target = partnerList.value[partnerEditingIndex.value];
	if (!target) return;
	target.id = row?.id ?? target.id;
	target.name = row?.cooperationName ?? target.name;
	target.nature = row?.cooperationNature ?? target.nature;
	target.cooperationController = row?.cooperationController ?? target.cooperationController;
	target.share = row?.shareholdingRatio ?? target.share;
	currentPartnerRow.value = partnerEditingIndex.value;
	partnerEditingIndex.value = -1;
	partnerCompanyDialogVisible.value = false;
};

// 选择用户
const userSelectVisible = ref<boolean>(false);
const handleUserSelectOk = (users: any) => {
	formData.projectManagerName = users?.map((item: any) => item.name).join('、');
};

// 选择项目
const projectNameListVisible = ref(false);

const handleLibrarySelect = (row: any) => {
	const data = convertTemplateDataToFormData(row);
	Object.assign(formData, {
		...data,
		id: '',
		parentId: row.id,
	});
	projectNameListVisible.value = false;
};

// 校验表单
const validate = async () => {
	const isValid = await formRef.value?.validate();
	if (isValid) {
		return {
			...formData,
			// projectProposal: JSON.stringify(formData.projectProposal),
			reviewOpinions: {
				...formData.reviewOpinions,
			},
			partnerInfos: [...partnerList.value],
		};
	}
	throw new Error('表单校验不通过');
};
defineExpose({ validate });

const projectMainEntityOptions = ref([]);
const getDeptTree = async () => {
	const res = await selectTreeCompanyTree();
	projectMainEntityOptions.value = res.data || [];
};
getDeptTree();
</script>

<style scoped>
.project-basic-info-form {
	background: #fff;
	border-radius: 4px;
	padding: 20px;
}

.form-main-title {
	font-size: 18px;
	font-weight: 600;
	text-align: center;
	margin-bottom: 20px;
	color: var(--el-text-color-primary);
}

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

.project-form {
	width: 100%;
}

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

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

:deep(.el-form-item__label) {
	font-weight: 500;
}

:deep(.is-required .el-form-item__label) {
	font-weight: 500;
	/* color: var(--el-color-danger); */
}

:deep(.is-required .el-form-item__label)::before {
	content: '*';
	/* color: var(--el-color-danger); */
	margin-right: 4px;
}

.sub-section-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--el-text-color-primary);
	margin: 24px 0 12px;
	padding-left: 10px;
	border-left: 4px solid #409eff;
}

.partner-toolbar {
	display: flex;
	gap: 12px;
	margin-bottom: 12px;
}

.partner-name-cell {
	display: flex;
	align-items: center;
	gap: 8px;
}

.partner-name-cell :deep(.el-input) {
	flex: 1;
}

:deep(.el-table th .cell) {
	font-weight: 500;
}
</style>
