<template>
	<div class="layout-padding ownership-create-page">
		<div class="layout-padding-auto layout-padding-view">
			<el-row class="mb10">
				<div class="form-header-actions">
					<div>
						<el-button type="primary" icon="Check" :loading="submitting" @click="handleSubmit">
							{{ t('ownershipCreate.actions.submit') }}
						</el-button>
						<el-button icon="Document" @click="handleSaveDraft" :loading="saveLoading">
							{{ t('ownershipCreate.actions.saveDraft') }}
						</el-button>
						<el-button icon="Operation" @click="handleLoadTemplate">
							{{ t('ownershipCreate.actions.loadTemplate') }}
						</el-button>
						<el-button icon="FolderAdd" @click="handleSaveTemplate" :loading="saveTemplateLoading">
							{{ t('ownershipCreate.actions.saveTemplate') }}
						</el-button>
					</div>
					<div class="action-right">
						<el-button icon="View" @click="handleViewWorkflow">
							{{ t('ownershipCreate.actions.viewWorkflow') }}
						</el-button>
					</div>
				</div>
			</el-row>


			<el-card shadow="never" class="header-card">
				<el-form :model="headerForm" label-width="80px" :rules="headerRequiredRule" ref="headerFormRef">
					<el-form-item :label="t('ownershipCreate.form.title')" prop="title">
						<el-input maxlength="255" v-model="headerForm.title"
											:placeholder="t('ownershipCreate.form.titlePlaceholder')"/>
					</el-form-item>
					<el-form-item :label="t('ownershipCreate.form.description')">
						<el-input maxlength="255" v-model="headerForm.description"
											:placeholder="t('ownershipCreate.form.descriptionPlaceholder')"/>
					</el-form-item>
					<el-form-item :label="t('ownershipCreate.form.attachments')">
						<UploadFile :modelValue="headerForm.attachments" :fileSize="20" type="simple" :limit="5"
												@change="(url: string, files: any[]) => headerForm.attachments = files?.map((item: any) => ({ name: item.name, url: item.url })) || []"/>
					</el-form-item>
				</el-form>
			</el-card>

			<div class="page-title">{{ isUpdate ? t('ownershipCreate.updateTitle') : t('ownershipCreate.title') }}</div>

			<div class="tab-buttons">
				<el-button v-for="tab in tabs" :key="tab.id" :class="['tab-button', { active: activeTab === tab.id }]"
									 text @click="scrollToSection(tab.id)">
					{{ tab.label }}
				</el-button>
			</div>

			<el-form :model="formData" label-width="180px">
				<el-card shadow="never" class="form-content-card">
					<div ref="sectionRefs.instruction" class="section-block" id="instruction">
						<div class="section-header">
							<span class="bar"></span>
							<h3 class="section-title">{{ t('ownershipCreate.sections.instruction') }}</h3>
						</div>
						<el-row :gutter="24" class="basic-info-grid">
							<el-col :span="12">
								<el-form-item :label="t('ownershipCreate.instructionTable.columns.indexName')">
									<el-input maxlength="255" v-model="formData.indicatorName"
														:placeholder="t('ownershipCreate.placeholder.input')"/>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item :label="t('ownershipCreate.instructionTable.columns.indexCode')">
									<el-input maxlength="255" v-model="formData.indicatorCode"
														:placeholder="t('ownershipCreate.placeholder.input')"/>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="24" class="basic-info-grid">
							<el-col :span="12">
								<el-form-item :label="t('ownershipCreate.instructionTable.columns.indexDesc')">
									<el-input maxlength="255" v-model="formData.indicatorDescription"
														:placeholder="t('ownershipCreate.placeholder.input')"/>
								</el-form-item>
							</el-col>
						</el-row>
					</div>

					<div ref="sectionRefs.basic" class="section-block" id="basic">
						<div class="section-header">
							<span class="bar"></span>
							<h3 class="section-title">{{ t('ownershipCreate.sections.basic') }}</h3>
						</div>
						<el-row :gutter="24" class="basic-info-grid">
							<el-col v-for="field of basicFields" :key="field.key" :span="field.span || 12" class="mb-4">
								<el-form-item :label="field.label">
									<el-date-picker
											v-if="field.type === 'date'"
											v-model="formData[field.key]"
											type="date"
											value-format="YYYY-MM-DD"
											:placeholder="t('ownershipCreate.placeholder.select')"/>
									<el-input-number v-else-if="field.type === 'number'"
									 v-model="formData[field.key]" :length="20"
																	 :controls="false" :min="0"
																	 :precision="field.precision || 0"
									></el-input-number>
									<el-input v-else maxlength="255" v-model="formData[field.key]"
														:placeholder="t('ownershipCreate.placeholder.input')"
									/>
								</el-form-item>
							</el-col>
						</el-row>
					</div>

					<div ref="sectionRefs.compliance" class="section-block" id="compliance">
						<div class="section-header">
							<span class="bar"></span>
							<h3 class="section-title">{{ t('ownershipCreate.sections.compliance') }}</h3>
						</div>
						<el-row :gutter="24">
							<el-col :span="24">
								<el-form-item v-for="field in complianceFields" :key="field.key" :label="field.label">
									<el-input maxlength="255" v-model="formData[field.key]"
											:placeholder="t('ownershipCreate.placeholder.input')"/>
								</el-form-item>
							</el-col>
						</el-row>
					</div>

					<div ref="sectionRefs.equityCash" class="section-block" id="equityCash">
						<div class="section-header">
							<span class="bar"></span>
							<h3 class="section-title">{{ t('ownershipCreate.sections.equityCash') }}</h3>
						</div>
						<div class="equity-table-actions">
							<el-button size="small" type="primary" @click="handleAddContribution">
								{{ t('ownershipCreate.equityTable.actions.add') }}
							</el-button>
							<el-button size="small" @click="handleCopyContribution">
								{{ t('ownershipCreate.equityTable.actions.copy') }}
							</el-button>
							<el-button size="small" @click="handleDeleteContribution">
								{{ t('ownershipCreate.equityTable.actions.delete') }}
							</el-button>
							<el-button size="small" @click="handleDeleteAllContributions">
								{{ t('ownershipCreate.equityTable.actions.deleteAll') }}
							</el-button>
						</div>
						<el-table :data="shareContributions" border class="equity-table">
							<el-table-column width="60" align="center">
								<template #default="scope">
									<el-radio v-model="selectedContributionIndex" :label="scope.$index">&nbsp;</el-radio>
								</template>
							</el-table-column>
							<el-table-column :label="t('ownershipCreate.equityTable.columns.index')" width="70"
															 align="center">
								<template #default="scope">{{ scope.$index + 1 }}</template>
							</el-table-column>
							<el-table-column :label="t('ownershipCreate.equityTable.columns.group')" align="center">
								<el-table-column :label="t('ownershipCreate.equityTable.columns.shareholderName')"
																 min-width="150">
									<template #default="scope">
										<el-input maxlength="255" v-model="scope.row.shareholderName"
															:placeholder="t('ownershipCreate.placeholder.input')"/>
									</template>
								</el-table-column>
								<el-table-column :label="t('ownershipCreate.equityTable.columns.socialCreditCode')"
																 min-width="150">
									<template #default="scope">
										<el-input maxlength="255" v-model="scope.row.creditCode"
															:placeholder="t('ownershipCreate.placeholder.input')"/>
									</template>
								</el-table-column>
								<el-table-column :label="t('ownershipCreate.equityTable.columns.contributionCategory')"
																 min-width="140">
									<template #default="scope">
										<el-input maxlength="255" v-model="scope.row.investorCategory"
															:placeholder="t('ownershipCreate.placeholder.input')"/>
									</template>
								</el-table-column>
								<el-table-column :label="t('ownershipCreate.equityTable.columns.shareholderNature')"
																 min-width="140">
									<template #default="scope">
										<el-input maxlength="255" v-model="scope.row.shareholderNature"
															:placeholder="t('ownershipCreate.placeholder.input')"/>
									</template>
								</el-table-column>
								<el-table-column :label="t('ownershipCreate.equityTable.columns.supervisionRegion')"
																 min-width="140">
									<template #default="scope">
										<el-input maxlength="255" v-model="scope.row.regulatoryRegion"
															:placeholder="t('ownershipCreate.placeholder.input')"/>
									</template>
								</el-table-column>
								<el-table-column :label="t('ownershipCreate.equityTable.columns.nationality')"
																 min-width="140">
									<template #default="scope">
										<el-input maxlength="255" v-model="scope.row.country"
															:placeholder="t('ownershipCreate.placeholder.input')"/>
									</template>
								</el-table-column>
								<el-table-column :label="t('ownershipCreate.equityTable.columns.paidInCapital')"
																 min-width="160">
									<template #default="scope">
										<div class="input-number-append">
											<el-input-number v-model="scope.row.paidCapital"
																			 :controls="false" :min="0" class="flex-1"
																			 :placeholder="t('ownershipCreate.placeholder.input')" :precision="2"/>
											<div>{{ t('ownershipCreate.equityTable.unit') }}</div>
										</div>
									</template>
								</el-table-column>
								<el-table-column :label="t('ownershipCreate.equityTable.columns.subscribedCapital')"
																 min-width="160">
									<template #default="scope">
										<div class="input-number-append">
											<el-input-number v-model="scope.row.subscribedCapital"
																			 :controls="false" :min="0" class="flex-1"
																			 :placeholder="t('ownershipCreate.placeholder.input')" :precision="2"/>
											<div>{{ t('ownershipCreate.equityTable.unit') }}</div>
										</div>
									</template>
								</el-table-column>
								<el-table-column :label="t('ownershipCreate.equityTable.columns.equityRatio')"
																 min-width="140">
									<template #default="scope">
										<div class="input-number-append">
											<el-input-number v-model="scope.row.equityRatio"
																			 :controls="false" :min="0" class="flex-1"
																			 :placeholder="t('ownershipCreate.placeholder.input')" />
											<div>%</div>
										</div>
									</template>
								</el-table-column>
								<el-table-column :label="t('ownershipCreate.equityTable.columns.total')" min-width="160">
									<template #default="scope">
										<el-input maxlength="255" v-model="scope.row.totalAmount"
															:placeholder="t('ownershipCreate.placeholder.input')"/>
									</template>
								</el-table-column>
							</el-table-column>
							<el-table-column :label="t('ownershipCreate.equityTable.columns.subscribedDetail')"
															 align="center">
								<el-table-column :label="t('ownershipCreate.equityTable.columns.currency')" min-width="120">
									<template #default="scope">
										<el-input maxlength="255" v-model="scope.row.subscribeCurrency"
															:placeholder="t('ownershipCreate.placeholder.input')"/>
									</template>
								</el-table-column>
								<el-table-column :label="t('ownershipCreate.equityTable.columns.subscribedAmount')"
																 min-width="180">
									<template #default="scope">
										<div class="input-number-append">
											<el-input-number v-model="scope.row.subscribeAmount"
																			 :controls="false" :min="0" class="flex-1"
																			 :placeholder="t('ownershipCreate.placeholder.input')" :precision="2"/>
											<div>{{ t('ownershipCreate.equityTable.unit') }}</div>
										</div>
									</template>
								</el-table-column>
								<el-table-column :label="t('ownershipCreate.equityTable.columns.subscribedDate')"
																 min-width="160">
									<template #default="scope">
										<el-date-picker
												v-model="scope.row.subscribeDate"
												type="date"
												value-format="YYYY-MM-DD"
												:placeholder="t('ownershipCreate.placeholder.select')"/>
									</template>
								</el-table-column>
							</el-table-column>
							<el-table-column :label="t('ownershipCreate.equityTable.columns.paidDetail')" align="center">
								<el-table-column :label="t('ownershipCreate.equityTable.columns.currency')" min-width="120">
									<template #default="scope">
										<el-input maxlength="255" v-model="scope.row.paidCurrency"
															:placeholder="t('ownershipCreate.placeholder.input')"/>
									</template>
								</el-table-column>
								<el-table-column :label="t('ownershipCreate.equityTable.columns.paidAmount')"
																 min-width="180">
									<template #default="scope">
										<div class="input-number-append">
											<el-input-number v-model="scope.row.paidAmount"
																			 :controls="false" :min="0" class="flex-1"
																			 :placeholder="t('ownershipCreate.placeholder.input')" :precision="2"/>
											<div>{{ t('ownershipCreate.equityTable.unit') }}</div>
										</div>
									</template>
								</el-table-column>
								<el-table-column :label="t('ownershipCreate.equityTable.columns.paidDate')" min-width="160">
									<template #default="scope">
										<el-date-picker
												v-model="scope.row.paidDate"
												type="date"
												value-format="YYYY-MM-DD"
												:placeholder="t('ownershipCreate.placeholder.select')"/>
									</template>
								</el-table-column>
							</el-table-column>
							<el-table-column :label="t('ownershipCreate.equityTable.columns.formFillingDesc')" align="center">
								<el-table-column :label="t('ownershipCreate.equityTable.columns.indicatorName')" min-width="120">
									<template #default="scope">
										<el-input maxlength="255"  v-model="scope.row.indicatorName"
															:placeholder="t('ownershipCreate.placeholder.input')"/>
									</template>
								</el-table-column>
								<el-table-column :label="t('ownershipCreate.equityTable.columns.indicatorCode')"
																 min-width="180">
									<template #default="scope">
										<el-input maxlength="255" v-model="scope.row.indicatorCode"
															:placeholder="t('ownershipCreate.placeholder.input')"/>
									</template>
								</el-table-column>
								<el-table-column :label="t('ownershipCreate.equityTable.columns.indicatorDesc')" min-width="160">
									<template #default="scope">
										<el-input maxlength="255" v-model="scope.row.indicatorDescription"
															:placeholder="t('ownershipCreate.placeholder.input')"/>
									</template>
								</el-table-column>
							</el-table-column>
							<el-table-column :label="t('ownershipCreate.equityTable.columns.actualCapital')" align="center">
								<el-table-column :label="t('ownershipCreate.equityTable.columns.stateInvestment')"
																 min-width="160">
									<template #default="scope">
										<div class="input-number-append">
											<el-input-number v-model="scope.row.stateCapital"
																			 :controls="false" :min="0" class="flex-1"
																			 :placeholder="t('ownershipCreate.placeholder.input')" :precision="2"/>
											<div>{{ t('ownershipCreate.equityTable.unit') }}</div>
										</div>
									</template>
								</el-table-column>
								<el-table-column :label="t('ownershipCreate.equityTable.columns.stateLegalInvestment')"
																 min-width="180">
									<template #default="scope">
										<div class="input-number-append">
											<el-input-number v-model="scope.row.stateLegalCapital"
																			 :controls="false" :min="0" class="flex-1"
																			 :placeholder="t('ownershipCreate.placeholder.input')" :precision="2"/>
											<div>{{ t('ownershipCreate.equityTable.unit') }}</div>
										</div>
									</template>
								</el-table-column>
								<el-table-column
										:label="t('ownershipCreate.equityTable.columns.absoluteControlLegalInvestment')"
										min-width="200">
									<template #default="scope">
										<div class="input-number-append">
											<el-input-number v-model="scope.row.stateAbsoluteControlCapital"
																			 :controls="false" :min="0" class="flex-1"
																			 :placeholder="t('ownershipCreate.placeholder.input')" :precision="2"/>
											<div>{{ t('ownershipCreate.equityTable.unit') }}</div>
										</div>
									</template>
								</el-table-column>
								<el-table-column
										:label="t('ownershipCreate.equityTable.columns.actualControlLegalInvestment')"
										min-width="200">
									<template #default="scope">
										<div class="input-number-append">
											<el-input-number v-model="scope.row.stateActualControlCapital"
																			 :controls="false" :min="0" class="flex-1"
																			 :placeholder="t('ownershipCreate.placeholder.input')" :precision="2"/>
											<div>{{ t('ownershipCreate.equityTable.unit') }}</div>
										</div>
									</template>
								</el-table-column>
								<el-table-column :label="t('ownershipCreate.equityTable.columns.stateShareholdingInvestor')"
																 min-width="200">
									<template #default="scope">
										<div class="input-number-append">
											<el-input-number v-model="scope.row.stateEquityCapital"
																			 :controls="false" :min="0" class="flex-1"
																			 :placeholder="t('ownershipCreate.placeholder.input')" :precision="2"/>
											<div>{{ t('ownershipCreate.equityTable.unit') }}</div>
										</div>
									</template>
								</el-table-column>
								<el-table-column :label="t('ownershipCreate.equityTable.columns.otherInvestment')"
																 min-width="150">
									<template #default="scope">
										<div class="input-number-append">
											<el-input-number v-model="scope.row.otherCapital"
																			 :controls="false" :min="0" class="flex-1"
																			 :placeholder="t('ownershipCreate.placeholder.input')" :precision="2"/>
											<div>{{ t('ownershipCreate.equityTable.unit') }}</div>
										</div>
									</template>
								</el-table-column>
								<el-table-column :label="t('ownershipCreate.equityTable.columns.capitalTotal')"
																 min-width="160">
									<template #default="scope">
										<div class="input-number-append">
											<el-input-number v-model="scope.row.capitalTotal"
																			 :controls="false" :min="0" class="flex-1"
																			 :placeholder="t('ownershipCreate.placeholder.input')" :precision="2"/>
											<div>{{ t('ownershipCreate.equityTable.unit') }}</div>
										</div>
									</template>
								</el-table-column>
							</el-table-column>
						</el-table>
					</div>

					<div ref="sectionRefs.equityNonCash" class="section-block" id="equityNonCash">
						<div class="section-header">
							<span class="bar"></span>
							<h3 class="section-title">{{ t('ownershipCreate.sections.equityNonCash') }}</h3>
						</div>
						<div class="equity-table-actions">
							<el-button size="small" type="primary" @click="handleAddNonCash">
								{{ t('ownershipCreate.equityTable.actions.add') }}
							</el-button>
							<el-button size="small" @click="handleCopyNonCash">
								{{ t('ownershipCreate.equityTable.actions.copy') }}
							</el-button>
							<el-button size="small" @click="handleDeleteNonCash">
								{{ t('ownershipCreate.equityTable.actions.delete') }}
							</el-button>
							<el-button size="small" @click="handleDeleteAllNonCash">
								{{ t('ownershipCreate.equityTable.actions.deleteAll') }}
							</el-button>
						</div>
						<el-table :data="nonCashContributions" border class="equity-table">
							<el-table-column width="60" align="center">
								<template #default="scope">
									<el-radio v-model="selectedNonCashIndex" :label="scope.$index">&nbsp;</el-radio>
								</template>
							</el-table-column>
							<el-table-column :label="t('ownershipCreate.equityNonCashTable.columns.index')" width="70"
															 align="center">
								<template #default="scope">{{ scope.$index + 1 }}</template>
							</el-table-column>
							<el-table-column :label="t('ownershipCreate.equityNonCashTable.columns.assetCategory')"
															 min-width="160">
								<template #default="scope">
									<el-input maxlength="255" v-model="scope.row.nonCashContributions"
														:placeholder="t('ownershipCreate.placeholder.input')"/>
								</template>
							</el-table-column>
							<el-table-column :label="t('ownershipCreate.equityNonCashTable.columns.contributor')"
															 min-width="160">
								<template #default="scope">
									<el-input maxlength="255" v-model="scope.row.investor"
														:placeholder="t('ownershipCreate.placeholder.input')"/>
								</template>
							</el-table-column>
							<el-table-column :label="t('ownershipCreate.equityNonCashTable.columns.pricing')"
															 min-width="160">
								<template #default="scope">
									<div class="input-number-append">
										<el-input-number v-model="scope.row.investmentValuation"
																		 :controls="false" :min="0" class="flex-1"
																		 :placeholder="t('ownershipCreate.placeholder.input')" :precision="2"/>
										<div>{{ t('ownershipCreate.equityTable.unit') }}</div>
									</div>
								</template>
							</el-table-column>
							<el-table-column :label="t('ownershipCreate.equityNonCashTable.columns.assessment')"
															 min-width="160">
								<template #default="scope">
									<div class="input-number-append">
										<el-input-number v-model="scope.row.assessmentValue"
																		 :controls="false" :min="0" class="flex-1"
																		 :placeholder="t('ownershipCreate.placeholder.input')" :precision="2"/>
										<div>{{ t('ownershipCreate.equityTable.unit') }}</div>
									</div>
								</template>
							</el-table-column>
							<el-table-column :label="t('ownershipCreate.equityNonCashTable.columns.remark')"
															 min-width="180">
								<template #default="scope">
									<el-input maxlength="255" v-model="scope.row.remark"
														:placeholder="t('ownershipCreate.placeholder.input')"/>
								</template>
							</el-table-column>
							<el-table-column :label="t('ownershipCreate.equityNonCashTable.columns.total')" min-width="160">
								<template #default="scope">
									<div class="input-number-append">
										<el-input-number v-model="scope.row.totalAmount"
																		 :controls="false" :min="0" class="flex-1"
																		 :placeholder="t('ownershipCreate.placeholder.input')" :precision="2"/>
										<div>{{ t('ownershipCreate.equityTable.unit') }}</div>
									</div>
								</template>
							</el-table-column>
						</el-table>
					</div>

					<div ref="sectionRefs.employee" class="section-block" id="employee">
						<div class="section-header">
							<span class="bar"></span>
							<h3 class="section-title">{{ t('ownershipCreate.sections.employee') }}</h3>
						</div>
						<div class="equity-table-actions">
							<el-button size="small" type="primary" @click="handleAddEmployeeHold">
								{{ t('ownershipCreate.employeeTable.actions.add') }}
							</el-button>
							<el-button size="small" @click="handleCopyEmployeeHold">
								{{ t('ownershipCreate.employeeTable.actions.copy') }}
							</el-button>
							<el-button size="small" @click="handleDeleteEmployeeHold">
								{{ t('ownershipCreate.employeeTable.actions.delete') }}
							</el-button>
							<el-button size="small" @click="handleDeleteAllEmployeeHold">
								{{ t('ownershipCreate.employeeTable.actions.deleteAll') }}
							</el-button>
						</div>
						<el-table :data="employeeHoldings" border class="equity-table">
							<el-table-column width="60" align="center">
								<template #default="scope">
									<el-radio v-model="selectedEmployeeIndex" :label="scope.$index">&nbsp;</el-radio>
								</template>
							</el-table-column>
							<el-table-column :label="t('ownershipCreate.employeeTable.columns.index')" width="70"
															 align="center">
								<template #default="scope">{{ scope.$index + 1 }}</template>
							</el-table-column>
							<el-table-column :label="t('ownershipCreate.employeeTable.columns.name')" min-width="200">
								<template #default="scope">
									<el-input maxlength="255" v-model="scope.row.employeeName"
														:placeholder="t('ownershipCreate.placeholder.input')"/>
								</template>
							</el-table-column>
							<el-table-column :label="t('ownershipCreate.employeeTable.columns.amount')" min-width="200">
								<template #default="scope">
									<div class="input-number-append">
										<el-input-number v-model="scope.row.holdingAmount"
																		 :controls="false" :min="0" class="flex-1"
																		 :placeholder="t('ownershipCreate.placeholder.input')" :precision="2"/>
										<div>{{ t('ownershipCreate.equityTable.unit') }}</div>
									</div>
								</template>
							</el-table-column>
							<el-table-column :label="t('ownershipCreate.employeeTable.columns.ratio')" min-width="180">
								<template #default="scope">
									<div class="input-number-append">
										<el-input-number v-model="scope.row.shareRatio"
																		 :controls="false" :min="0" class="flex-1"
																		 :placeholder="t('ownershipCreate.placeholder.input')"/>
										<div>%</div>
									</div>
								</template>
							</el-table-column>
							<el-table-column :label="t('ownershipCreate.employeeTable.columns.remark')" min-width="220">
								<template #default="scope">
									<el-input maxlength="255" v-model="scope.row.remark"
														:placeholder="t('ownershipCreate.placeholder.input')"/>
								</template>
							</el-table-column>
						</el-table>
					</div>

					<div ref="sectionRefs.external" class="section-block" id="external">
						<div class="section-header">
							<span class="bar"></span>
							<h3 class="section-title">{{ t('ownershipCreate.sections.externalInvestment') }}</h3>
						</div>
						<div class="equity-table-actions">
							<el-button size="small" type="primary" @click="handleAddExternalInvestment">
								{{ t('ownershipCreate.externalTable.actions.add') }}
							</el-button>
							<el-button size="small" @click="handleCopyExternalInvestment">
								{{ t('ownershipCreate.externalTable.actions.copy') }}
							</el-button>
							<el-button size="small" @click="handleDeleteExternalInvestment">
								{{ t('ownershipCreate.externalTable.actions.delete') }}
							</el-button>
							<el-button size="small" @click="handleDeleteAllExternalInvestments">
								{{ t('ownershipCreate.externalTable.actions.deleteAll') }}
							</el-button>
						</div>
						<el-table :data="externalInvestments" border class="equity-table">
							<el-table-column width="60" align="center">
								<template #default="scope">
									<el-radio v-model="selectedExternalIndex" :label="scope.$index">&nbsp;</el-radio>
								</template>
							</el-table-column>
							<el-table-column :label="t('ownershipCreate.externalTable.columns.index')" width="70"
															 align="center">
								<template #default="scope">{{ scope.$index + 1 }}</template>
							</el-table-column>
							<el-table-column :label="t('ownershipCreate.externalTable.columns.targetName')" min-width="200">
								<template #default="scope">
									<el-input maxlength="255" v-model="scope.row.investmentTargetName"
														:placeholder="t('ownershipCreate.placeholder.input')"/>
								</template>
							</el-table-column>
							<el-table-column :label="t('ownershipCreate.externalTable.columns.socialCreditCode')"
															 min-width="200">
								<template #default="scope">
									<el-input maxlength="255" v-model="scope.row.creditCode"
														:placeholder="t('ownershipCreate.placeholder.input')"/>
								</template>
							</el-table-column>
							<el-table-column :label="t('ownershipCreate.externalTable.columns.operationStatus')"
															 min-width="150">
								<template #default="scope">
									<el-input maxlength="255" v-model="scope.row.operationStatus"
														:placeholder="t('ownershipCreate.placeholder.input')"/>
								</template>
							</el-table-column>
							<el-table-column :label="t('ownershipCreate.externalTable.columns.targetType')" min-width="150">
								<template #default="scope">
									<el-input maxlength="255" v-model="scope.row.targetType"
														:placeholder="t('ownershipCreate.placeholder.input')"/>
								</template>
							</el-table-column>
							<el-table-column :label="t('ownershipCreate.externalTable.columns.actualControl')"
															 min-width="150">
								<template #default="scope">
									<el-input maxlength="255" v-model="scope.row.isActualControl"
														:placeholder="t('ownershipCreate.placeholder.input')"/>
								</template>
							</el-table-column>
							<el-table-column :label="t('ownershipCreate.externalTable.columns.industry')" min-width="180">
								<template #default="scope">
									<el-input maxlength="255" v-model="scope.row.industry"
														:placeholder="t('ownershipCreate.placeholder.input')"/>
								</template>
							</el-table-column>
							<el-table-column :label="t('ownershipCreate.externalTable.columns.region')" min-width="180">
								<template #default="scope">
									<el-input maxlength="255" v-model="scope.row.investmentRegion"
														:placeholder="t('ownershipCreate.placeholder.input')"/>
								</template>
							</el-table-column>
							<el-table-column :label="t('ownershipCreate.externalTable.columns.investmentAmount')"
															 min-width="180">
								<template #default="scope">
									<div class="input-number-append">
										<el-input-number v-model="scope.row.investmentAmount"
																		 :controls="false" :min="0" class="flex-1"
																		 :placeholder="t('ownershipCreate.placeholder.input')" :precision="2"/>
										<div>{{ t('ownershipCreate.equityTable.unit') }}</div>
									</div>
								</template>
							</el-table-column>
							<el-table-column :label="t('ownershipCreate.externalTable.columns.investmentRatio')"
															 min-width="180">
								<template #default="scope">
									<div class="input-number-append">
										<el-input-number v-model="scope.row.investmentRatio"
																		 :controls="false" :min="0" class="flex-1"
																		 :placeholder="t('ownershipCreate.placeholder.input')"/>
										<div>%</div>
									</div>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</el-card>
			</el-form>
			<templateTable/>
		</div>
	</div>
</template>

<script setup lang="ts">
import {reactive, ref, nextTick, type Ref, computed,watch} from 'vue';
import {useI18n} from 'vue-i18n';
import {useMessage} from '/@/hooks/message';
import type {BasicFormT, BasicFormEntityT, ContributionRowT, NonCashContributionRowT, EmployeeHoldingRowT, ExternalInvestmentRowT} from '/@/api/workbench/miOwLibr/ownershipCreate/types'
import {addPropertyRightsAPI,getPropertyRightsByIdAPI} from '/@/api/workbench/miOwLibr/ownershipCreate'
import {flowFn} from "/@/utils/flowFn";
import {flowNameOptions} from '/@/hooks/enums';
import {addFlowForm} from '/@/api/flow/flow';
import {addTemplate, getPropertyRightsUserDeptBelong} from "/@/api/common";
import {FormInstance} from "element-plus";
import templateTable from "/@/components/templetTableComom/index.vue"
import {templateStore} from "/@/stores/template"

const temp = templateStore()
const props = defineProps({
	isUpdate: {
		type: Boolean,
		default: false
	}
})

const {t} = useI18n();
const message = useMessage();

const headerForm = reactive({
	title: '',
	description: '',
	attachments: [] as any[],
});
const headerRequiredRule = ref({
	title: [
		{
			required: true,
			message: '该项必填',
			trigger: 'blur'
		}
	],
})
const headerFormRef = ref<FormInstance>()
const formData = reactive<BasicFormEntityT>({
	// instructions for filling out the form
	indicatorName: '',
	indicatorCode: '',
	indicatorDescription: '',
	// basic fields
	enterpriseName: '',
	registrationDate: '',
	changeSupervisor: '',
	mainInvestorCode: '',
	supervisorUnitCode: '',
	enterpriseCategory: '',
	enterpriseClassification: '',
	relationStateEnterprise: '',
	propertyLevel: '',
	propertyRegistrationCase: '',
	isListedCompany: '',
	isHoldingMainBusiness: '',
	mainBusiness: '',
	mainIndustry: '',
	creditCode: '',
	stateOwnedEnterprise: '',
	mainInvestorName: '',
	supervisorUnit: '',
	belongingDepartment: '',
	registeredCapital: 0,
	regulatoryAgency: '',
	organizationForm: '',
	operationStatus: '',
	marketTransaction: '',
	isConsolidated: '',
	isOverseasToDomestic: '',
	auxiliaryBusiness: '',
	operationScale: '',
	mixedReformSituation: '',
	registrationAddress: '',
	changeReason: '',
	// compliance fields
	decisionDocument: '',
	businessLicense: '',
	enterpriseCharter: '',
	latestAuditReport: '',
	assetAssessmentFiling: '',
	businessApplicationFile: '',
	otherMaterials: '',
	processInstanceId: '',
	status: 0,
	templateId: '',
	temporaryStorage:{}
});

type FormFieldKey = keyof typeof formData;

const basicFields = computed<Array<{ key: FormFieldKey; label: string, span?: number, type?: string }>>(() => [
	{key: 'enterpriseName', label: t('ownershipCreate.basicFields.left.companyName')},
	{key: 'creditCode', label: t('ownershipCreate.basicFields.right.unifiedCode')},
	{key: 'registrationDate', label: t('ownershipCreate.basicFields.left.establishDate'), type: 'date'},
	{key: 'stateOwnedEnterprise', label: t('ownershipCreate.basicFields.right.stateFundedEnterprise')},
	{key: 'changeSupervisor', label: t('ownershipCreate.basicFields.left.isStateOwnedSupervisor')},
	{key: 'mainInvestorName', label: t('ownershipCreate.basicFields.right.mainInvestorName')},
	{key: 'mainInvestorCode', label: t('ownershipCreate.basicFields.left.mainShareholderCode')},
	{key: 'supervisorUnit', label: t('ownershipCreate.basicFields.right.supervisingUnit')},
	{key: 'supervisorUnitCode', label: t('ownershipCreate.basicFields.left.mainManagerCode')},
	{key: 'belongingDepartment', label: t('ownershipCreate.basicFields.right.department')},
	{key: 'enterpriseCategory', label: t('ownershipCreate.basicFields.left.companyCategory')},
	{key: 'registeredCapital', label: t('ownershipCreate.basicFields.right.registeredCapital'),type:'number',precision:2},
	{key: 'enterpriseClassification', label: t('ownershipCreate.basicFields.left.companyClassification')},
	{key: 'regulatoryAgency', label: t('ownershipCreate.basicFields.right.regulator')},
	{key: 'relationStateEnterprise', label: t('ownershipCreate.basicFields.left.relationStateEnterprise')},
	{key: 'organizationForm', label: t('ownershipCreate.basicFields.right.organizationType')},
	{key: 'propertyLevel', label: t('ownershipCreate.basicFields.left.propertyLevel')},
	{key: 'operationStatus', label: t('ownershipCreate.basicFields.right.operationStatus')},
	{key: 'propertyRegistrationCase', label: t('ownershipCreate.basicFields.left.propertyRegister')},
	{key: 'marketTransaction', label: t('ownershipCreate.basicFields.right.marketTransaction')},
	{key: 'isListedCompany', label: t('ownershipCreate.basicFields.left.isListed')},
	{key: 'isConsolidated', label: t('ownershipCreate.basicFields.right.isConsolidated')},
	{key: 'isHoldingMainBusiness', label: t('ownershipCreate.basicFields.left.isHoldingBusiness')},
	{key: 'isOverseasToDomestic', label: t('ownershipCreate.basicFields.right.isOverseasToDomestic')},
	{key: 'mainBusiness', label: t('ownershipCreate.basicFields.left.mainBusiness')},
	{key: 'auxiliaryBusiness', label: t('ownershipCreate.basicFields.right.secondaryBusiness')},
	{key: 'mainIndustry', label: t('ownershipCreate.basicFields.left.primaryIndustry')},
	{key: 'operationScale', label: t('ownershipCreate.basicFields.right.businessScale')},
	{key: 'mixedReformSituation', label: t('ownershipCreate.basicFields.extra.mixedReformStatus'), span: 24},
	{key: 'registrationAddress', label: t('ownershipCreate.basicFields.extra.registrationPlace'), span: 24},
	{key: 'changeReason', label: t('ownershipCreate.basicFields.extra.changeReason'), span: 24},
]);

const complianceFields = computed<Array<{ key: FormFieldKey; label: string }>>(() => [
	{key: 'decisionDocument', label: t('ownershipCreate.complianceFields.decisionFile')},
	{key: 'businessLicense', label: t('ownershipCreate.complianceFields.businessLicense')},
	{key: 'enterpriseCharter', label: t('ownershipCreate.complianceFields.companyCharter')},
	{key: 'latestAuditReport', label: t('ownershipCreate.complianceFields.latestAuditReport')},
	{key: 'assetAssessmentFiling', label: t('ownershipCreate.complianceFields.nonCashAssessmentFile')},
	{key: 'businessApplicationFile', label: t('ownershipCreate.complianceFields.applicationFile')},
	{key: 'otherMaterials', label: t('ownershipCreate.complianceFields.otherMaterials')},
]);

const createContributionRow = (): ContributionRowT => ({
	id: '',
	propertyRightsId: '',
	shareholderName: '',
	creditCode: '',
	investorCategory: '',
	shareholderNature: '',
	regulatoryRegion: '',
	country: '',
	paidCapital: 0,
	subscribedCapital: 0,
	equityRatio: 0,
	totalAmount: 0,
	subscribeCurrency: '',
	subscribeAmount: 0,
	subscribeDate: '',
	paidCurrency: '',
	paidAmount: 0,
	paidDate: '',
	indicatorName: '',
	indicatorCode: '',
	indicatorDescription: '',
	stateCapital: 0,
	stateLegalCapital: 0,
	stateAbsoluteControlCapital: 0,
	stateActualControlCapital: 0,
	stateEquityCapital: 0,
	otherCapital: 0,
	capitalTotal: 0,
});

const shareContributions = ref<ContributionRowT[]>([createContributionRow()]);
const selectedContributionIndex = ref<number>(0);

const ensureContributionSelected = () => {
	if (!shareContributions.value.length) {
		shareContributions.value.push(createContributionRow());
		selectedContributionIndex.value = 0;
		return true;
	}

	if (
			selectedContributionIndex.value < 0 ||
			selectedContributionIndex.value >= shareContributions.value.length
	) {
		message.warning(t('ownershipCreate.messages.selectContribution'));
		return false;
	}
	return true;
};

const handleAddContribution = () => {
	shareContributions.value.push(createContributionRow());
	selectedContributionIndex.value = shareContributions.value.length - 1;
};

const handleCopyContribution = () => {
	if (!ensureContributionSelected()) return;
	const clone = {...shareContributions.value[selectedContributionIndex.value]};
	shareContributions.value.splice(selectedContributionIndex.value + 1, 0, clone);
	selectedContributionIndex.value += 1;
};

const handleDeleteContribution = () => {
	if (!ensureContributionSelected()) return;
	shareContributions.value.splice(selectedContributionIndex.value, 1);
	if (!shareContributions.value.length) {
		shareContributions.value.push(createContributionRow());
		selectedContributionIndex.value = 0;
	} else if (selectedContributionIndex.value >= shareContributions.value.length) {
		selectedContributionIndex.value = shareContributions.value.length - 1;
	}
};

const handleDeleteAllContributions = () => {
	shareContributions.value = [createContributionRow()];
	selectedContributionIndex.value = 0;
};

const createNonCashRow = (): NonCashContributionRowT => ({
	id: '',
	propertyRightsId: '',
	nonMonetaryAssetCategory: '',
	investor: '',
	investmentValuation: 0,
	assessmentValue: 0,
	remark: '',
	totalAmount: 0
});

const nonCashContributions = ref<NonCashContributionRowT[]>([createNonCashRow()]);
const selectedNonCashIndex = ref<number>(0);

const ensureNonCashSelected = () => {
	if (!nonCashContributions.value.length) {
		nonCashContributions.value.push(createNonCashRow());
		selectedNonCashIndex.value = 0;
		return true;
	}
	if (
			selectedNonCashIndex.value < 0 ||
			selectedNonCashIndex.value >= nonCashContributions.value.length
	) {
		message.warning(t('ownershipCreate.messages.selectContribution'));
		return false;
	}
	return true;
};

const handleAddNonCash = () => {
	nonCashContributions.value.push(createNonCashRow());
	selectedNonCashIndex.value = nonCashContributions.value.length - 1;
};

const handleCopyNonCash = () => {
	if (!ensureNonCashSelected()) return;
	const clone = {...nonCashContributions.value[selectedNonCashIndex.value]};
	nonCashContributions.value.splice(selectedNonCashIndex.value + 1, 0, clone);
	selectedNonCashIndex.value += 1;
};

const handleDeleteNonCash = () => {
	if (!ensureNonCashSelected()) return;
	nonCashContributions.value.splice(selectedNonCashIndex.value, 1);
	if (!nonCashContributions.value.length) {
		nonCashContributions.value.push(createNonCashRow());
		selectedNonCashIndex.value = 0;
	} else if (selectedNonCashIndex.value >= nonCashContributions.value.length) {
		selectedNonCashIndex.value = nonCashContributions.value.length - 1;
	}
};

const handleDeleteAllNonCash = () => {
	nonCashContributions.value = [createNonCashRow()];
	selectedNonCashIndex.value = 0;
};

const createEmployeeHoldingRow = (): EmployeeHoldingRowT => ({
	id: '',
	propertyRightsId: '',
	employeeName: '',
	holdingAmount: 0,
	shareRatio: 0,
	remark: ''
});

const employeeHoldings = ref<EmployeeHoldingRowT[]>([createEmployeeHoldingRow()]);
const selectedEmployeeIndex = ref<number>(0);

const ensureEmployeeSelected = () => {
	if (!employeeHoldings.value.length) {
		employeeHoldings.value.push(createEmployeeHoldingRow());
		selectedEmployeeIndex.value = 0;
		return true;
	}
	if (
			selectedEmployeeIndex.value < 0 ||
			selectedEmployeeIndex.value >= employeeHoldings.value.length
	) {
		message.warning(t('ownershipCreate.messages.selectContribution'));
		return false;
	}
	return true;
};

const handleAddEmployeeHold = () => {
	employeeHoldings.value.push(createEmployeeHoldingRow());
	selectedEmployeeIndex.value = employeeHoldings.value.length - 1;
};

const handleCopyEmployeeHold = () => {
	if (!ensureEmployeeSelected()) return;
	const clone = {...employeeHoldings.value[selectedEmployeeIndex.value]};
	employeeHoldings.value.splice(selectedEmployeeIndex.value + 1, 0, clone);
	selectedEmployeeIndex.value += 1;
};

const handleDeleteEmployeeHold = () => {
	if (!ensureEmployeeSelected()) return;
	employeeHoldings.value.splice(selectedEmployeeIndex.value, 1);
	if (!employeeHoldings.value.length) {
		employeeHoldings.value.push(createEmployeeHoldingRow());
		selectedEmployeeIndex.value = 0;
	} else if (selectedEmployeeIndex.value >= employeeHoldings.value.length) {
		selectedEmployeeIndex.value = employeeHoldings.value.length - 1;
	}
};

const handleDeleteAllEmployeeHold = () => {
	employeeHoldings.value = [createEmployeeHoldingRow()];
	selectedEmployeeIndex.value = 0;
};

const createExternalInvestmentRow = (): ExternalInvestmentRowT => ({
	id: '',
	propertyRightsId: '',
	investmentTargetName: '',
	creditCode: '',
	operationStatus: '',
	targetType: '',
	isActualControl: '',
	industry: '',
	investmentRegion: '',
	investmentAmount: 0,
	investmentRatio: 0
});

const externalInvestments = ref<ExternalInvestmentRowT[]>([createExternalInvestmentRow()]);
const selectedExternalIndex = ref<number>(0);

const ensureExternalSelected = () => {
	if (!externalInvestments.value.length) {
		externalInvestments.value.push(createExternalInvestmentRow());
		selectedExternalIndex.value = 0;
		return true;
	}
	if (
			selectedExternalIndex.value < 0 ||
			selectedExternalIndex.value >= externalInvestments.value.length
	) {
		message.warning(t('ownershipCreate.messages.selectContribution'));
		return false;
	}
	return true;
};

const handleAddExternalInvestment = () => {
	externalInvestments.value.push(createExternalInvestmentRow());
	selectedExternalIndex.value = externalInvestments.value.length - 1;
};

const handleCopyExternalInvestment = () => {
	if (!ensureExternalSelected()) return;
	const clone = {...externalInvestments.value[selectedExternalIndex.value]};
	externalInvestments.value.splice(selectedExternalIndex.value + 1, 0, clone);
	selectedExternalIndex.value += 1;
};

const handleDeleteExternalInvestment = () => {
	if (!ensureExternalSelected()) return;
	externalInvestments.value.splice(selectedExternalIndex.value, 1);
	if (!externalInvestments.value.length) {
		externalInvestments.value.push(createExternalInvestmentRow());
		selectedExternalIndex.value = 0;
	} else if (selectedExternalIndex.value >= externalInvestments.value.length) {
		selectedExternalIndex.value = externalInvestments.value.length - 1;
	}
};

const handleDeleteAllExternalInvestments = () => {
	externalInvestments.value = [createExternalInvestmentRow()];
	selectedExternalIndex.value = 0;
};

const tabs = [
	{id: 'instruction', label: t('ownershipCreate.sections.instruction')},
	{id: 'basic', label: t('ownershipCreate.sections.basic')},
	{id: 'compliance', label: t('ownershipCreate.sections.compliance')},
	{id: 'equityCash', label: t('ownershipCreate.sections.equityCash')},
	{id: 'equityNonCash', label: t('ownershipCreate.sections.equityNonCash')},
	{id: 'employee', label: t('ownershipCreate.sections.employee')},
	{id: 'external', label: t('ownershipCreate.sections.externalInvestment')},
];

type TabId = (typeof tabs)[number]['id'];

const sectionRefs: Record<TabId, Ref<HTMLElement | null>> = {
	instruction: ref<HTMLElement | null>(null),
	basic: ref<HTMLElement | null>(null),
	compliance: ref<HTMLElement | null>(null),
	equityCash: ref<HTMLElement | null>(null),
	equityNonCash: ref<HTMLElement | null>(null),
	employee: ref<HTMLElement | null>(null),
	external: ref<HTMLElement | null>(null),
};

const activeTab = ref<TabId>('instruction');

const scrollToSection = (id: TabId) => {
	activeTab.value = id;
	nextTick(() => {
		const doc = sectionRefs[id]?.value || document.getElementById(id);
		if (!doc) return;
		doc.scrollIntoView({behavior: 'smooth', block: 'start'});
	});
};

const submitting = ref(false)
const handleSubmit = async () => {
	const re = await headerFormRef.value?.validate()
	if (!re) return
	if (submitting.value) return
	submitting.value = true
	try {
		const resProperty:any = await getPropertyRightsUserDeptBelong()
		let flowIdKey = ''
		if (resProperty.data === 1) {
			flowIdKey = props.isUpdate ? 'VITE_FLOWID_21' : 'VITE_FLOWID_19'
		} else if (resProperty.data === 2) {
			flowIdKey = props.isUpdate ? 'VITE_FLOWID_22' : 'VITE_FLOWID_20'
		}

		const {processInstanceId} = await flowFn(flowIdKey, {
			paramMap: {}
		})
		const flowName = props.isUpdate ? 'propertyRightsUpdate' : 'propertyRightsRegistration'
		const flowNameObj = flowNameOptions.filter(item => item.label === flowName)[0]
		await addFlowForm({
			title: headerForm.title,
			description: headerForm.description,
			attachments: JSON.stringify(headerForm.attachments),
			processInstanceId,
			flowType: flowNameObj.value
		})
		Object.assign(formData, {processInstanceId,status:1})
		const params: BasicFormT = {
			entity: formData,
			investments: shareContributions.value,
			nonMonetary: nonCashContributions.value,
			employees: employeeHoldings.value,
			outboundInvestments: externalInvestments.value,
		}
		const res = await addPropertyRightsAPI(params)
		if (res.ok) {
			message.success(t('common.success'));
		} else {
			message.error(res.msg)
		}
	} finally {
		submitting.value = false
	}
};
const saveLoading = ref(false);
const handleSaveDraft = async () => {
	const re = await headerFormRef.value?.validate()
	if (!re) return
	const flowName = props.isUpdate ? 'propertyRightsUpdate' : 'propertyRightsRegistration'
	const flowNameObj = flowNameOptions.filter(item => item.label === flowName)[0];
	saveLoading.value = true;
	try {
		await addFlowForm({
			title: headerForm.title,
			description: headerForm.description,
			attachments: JSON.stringify(headerForm.attachments),
			processInstanceId:'',
			flowType: flowNameObj.value
		})
		Object.assign(formData, {processInstanceId:'',status:0,temporaryStorage:{
				businessType:flowNameObj.value,
				title: headerForm.title,
			}})
		const params: BasicFormT = {
			entity: formData,
			investments: shareContributions.value,
			nonMonetary: nonCashContributions.value,
			employees: employeeHoldings.value,
			outboundInvestments: externalInvestments.value,
		}
		try {
			await addPropertyRightsAPI(params);
			message.success('保存代发成功');
		}catch (error:any){
			message.error(error.msg || '保存失败')
		}finally {
			saveLoading.value = false;
		}
	}catch (error:any) {
		message.error(error.msg || '保存失败')
	}finally {
		saveLoading.value = false;
	}
};
const tempId = computed(()=>temp.temp_id)
const handleLoadTemplate = () => {
	const flowName = props.isUpdate ? 'propertyRightsUpdate' : 'propertyRightsRegistration'
	const flowNameObj = flowNameOptions.filter(item => item.label === flowName)[0];
	temp.changeTempShow(true,flowNameObj.value)
	message.info(t('ownershipCreate.messages.loadTemplate'));
};

watch(()=>tempId.value,()=>{
	getPropertyRightsByIdAPI(tempId.value).then(data => {
		Object.assign(formData, data.data);
		externalInvestments.value = data.data.outboundInvestmentEntities;
		nonCashContributions.value = data.data.shareholderNonMonetaryEntities;
		employeeHoldings.value = data.data.employeeNomineeHoldingEntities;
		shareContributions.value = data.data.shareholderInvestmentEntities;

	})
})
const saveTemplateLoading = ref<boolean>(false);
const handleSaveTemplate = async () => {
	// addTemplate()
	const re = await headerFormRef.value?.validate()
	if (!re) return
	const flowName = props.isUpdate ? 'propertyRightsUpdate' : 'propertyRightsRegistration'
	const flowNameObj = flowNameOptions.filter(item => item.label === flowName)[0];
	saveTemplateLoading.value = true;
	try {
		const {data: templateId} = await addTemplate({
			templateName:headerForm.title,
			templateType:flowNameObj.value,
		})
		Object.assign(formData, {processInstanceId:'',status:0,templateId})
		const params: BasicFormT = {
			entity: formData,
			investments: shareContributions.value,
			nonMonetary: nonCashContributions.value,
			employees: employeeHoldings.value,
			outboundInvestments: externalInvestments.value,
		}
		await addPropertyRightsAPI(params);
		message.success('保存模板成功');
	}catch (error:any){
		message.error(error.msg || '保存失败')
	}finally {
		saveTemplateLoading.value = false;
	}
};

const handleViewWorkflow = () => {
	message.info(t('ownershipCreate.messages.viewWorkflow'));
};
</script>

<style scoped>
.layout-container .layout-padding {
	height: auto;
	overflow: auto;
}

.page-title {
	font-size: 18px;
	font-weight: 600;
	text-align: center;
	margin-bottom: 12px;
}

.tab-buttons {
	display: flex;
	gap: 24px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--el-border-color-lighter);
	padding-bottom: 8px;
}

.tab-button {
	border: none;
	background: transparent;
	padding: 0;
	font-size: 15px;
	color: var(--el-text-color-regular);
}

.tab-button.active {
	color: var(--el-color-primary);
	border-bottom: 2px solid var(--el-color-primary);
	border-radius: 0;
}

.form-content-card {
	padding-bottom: 24px;
}

.form-content-card :deep(.el-form-item__label) {
	line-height: 1.2;
	align-items: center;
}

.instruction-form.two-column {
	width: 100%;
}

.instruction-table-wrapper :deep(.el-table__header-wrapper th) {
	text-align: center;
	background-color: #f8fafc;
	font-weight: 500;
}

.instruction-table-wrapper :deep(.el-input-group__append) {
	background-color: #f5f7fa;
	color: var(--el-text-color-secondary);
}

.instruction-table-actions {
	margin-top: 12px;
	display: flex;
	gap: 12px;
}

.two-column :deep(.el-row) {
	margin-bottom: 0;
}

.section-block {
	margin-top: 24px;
}

.section-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}

.section-header .bar {
	width: 3px;
	height: 18px;
	background-color: var(--el-color-primary);
	border-radius: 2px;
}

.section-title {
	font-size: 16px;
	font-weight: 600;
	margin: 0;
}

.basic-info-grid {
	margin-bottom: 12px;
}

.basic-extra-grid {
	margin-top: 8px;
}

.basic-extra-grid :deep(.el-form-item) {
	margin-bottom: 16px;
}

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

.equity-table :deep(.el-input-group__append) {
	background-color: #f5f7fa;
	color: var(--el-text-color-secondary);
}

.equity-table :deep(.el-table__header-wrapper th) {
	background-color: #f8fafc;
	font-weight: 500;
	text-align: center;
}

.section-placeholder {
	color: var(--el-text-color-secondary);
	font-size: 14px;
	margin-bottom: 12px;
}

.form-header-actions {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.form-header-actions .action-right :deep(.el-button) {
	margin-left: 12px;
}

.header-card {
	margin-bottom: 16px;
}
</style>
