<template>
   <el-card>
        <el-row :gutter="24">
            <el-col :span="isPreview ? 24 : 18">
                <div class="layout-padding-auto layout-padding-view">
                    <FlowFormView :process-instance-id="processInstanceId"/>
                    <div class="page-title">{{ 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')">
                                            <span>{{ formData.indicatorName || '-' }}</span>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item :label="t('ownershipCreate.instructionTable.columns.indexCode')">
                                            <span>{{ formData.indicatorCode || '-' }}</span>
                                        </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')">
                                            <span>{{ formData.indicatorDescription || '-' }}</span>
                                        </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">
                                            <span v-if="field.type === 'date'">{{ formatDate(formData[field.key]) || '-' }}</span>
                                            <span v-else>{{ formData[field.key] || '-' }}</span>
                                        </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">
                                            <span>{{ formData[field.key] || '-' }}</span>
                                        </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>

                                <el-table :data="shareContributions" border class="equity-table">
                                    <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">
                                                <span>{{ scope.row.shareholderName || '-' }}</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column :label="t('ownershipCreate.equityTable.columns.socialCreditCode')"
                                                                        min-width="150">
                                            <template #default="scope">
                                                <span>{{ scope.row.creditCode || '-' }}</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column :label="t('ownershipCreate.equityTable.columns.contributionCategory')"
                                                                        min-width="140">
                                            <template #default="scope">
                                                <span>{{ scope.row.investorCategory || '-' }}</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column :label="t('ownershipCreate.equityTable.columns.shareholderNature')"
                                                                        min-width="140">
                                            <template #default="scope">
                                                <span>{{ scope.row.shareholderNature || '-' }}</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column :label="t('ownershipCreate.equityTable.columns.supervisionRegion')"
                                                                        min-width="140">
                                            <template #default="scope">
                                                <span>{{ scope.row.regulatoryRegion || '-' }}</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column :label="t('ownershipCreate.equityTable.columns.nationality')"
                                                                        min-width="140">
                                            <template #default="scope">
                                                <span>{{ scope.row.country || '-' }}</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column :label="t('ownershipCreate.equityTable.columns.paidInCapital')"
                                                                        min-width="160">
                                            <template #default="scope">
                                                <div>
                                                    <span>{{ formatNumber(scope.row.paidCapital) }}</span>
                                                    <span class="unit">{{ t('ownershipCreate.equityTable.unit') }}</span>
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column :label="t('ownershipCreate.equityTable.columns.subscribedCapital')"
                                                                        min-width="160">
                                            <template #default="scope">
                                                <div>
                                                    <span>{{ formatNumber(scope.row.subscribedCapital) }}</span>
                                                    <span class="unit">{{ t('ownershipCreate.equityTable.unit') }}</span>
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column :label="t('ownershipCreate.equityTable.columns.equityRatio')"
                                                                        min-width="140">
                                            <template #default="scope">
                                                <div>
                                                    <span>{{ formatNumber(scope.row.equityRatio) }}</span>
                                                    <span class="unit">%</span>
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column :label="t('ownershipCreate.equityTable.columns.total')" min-width="160">
                                            <template #default="scope">
                                                <span>{{ scope.row.totalAmount || '-' }}</span>
                                            </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">
                                                <span>{{ scope.row.subscribeCurrency || '-' }}</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column :label="t('ownershipCreate.equityTable.columns.subscribedAmount')"
                                                                        min-width="180">
                                            <template #default="scope">
                                                <div>
                                                    <span>{{ formatNumber(scope.row.subscribeAmount) }}</span>
                                                    <span class="unit">{{ t('ownershipCreate.equityTable.unit') }}</span>
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column :label="t('ownershipCreate.equityTable.columns.subscribedDate')"
                                                                        min-width="160">
                                            <template #default="scope">
                                                <span>{{ formatDate(scope.row.subscribeDate) || '-' }}</span>
                                            </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">
                                                <span>{{ scope.row.paidCurrency || '-' }}</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column :label="t('ownershipCreate.equityTable.columns.paidAmount')"
                                                                        min-width="180">
                                            <template #default="scope">
                                                <div>
                                                    <span>{{ formatNumber(scope.row.paidAmount) }}</span>
                                                    <span class="unit">{{ t('ownershipCreate.equityTable.unit') }}</span>
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column :label="t('ownershipCreate.equityTable.columns.paidDate')" min-width="160">
                                            <template #default="scope">
                                                <span>{{ formatDate(scope.row.paidDate) || '-' }}</span>
                                            </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">
                                                <span>{{ scope.row.indicatorName || '-' }}</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column :label="t('ownershipCreate.equityTable.columns.indicatorCode')"
                                                                        min-width="180">
                                            <template #default="scope">
                                                <span>{{ scope.row.indicatorCode || '-' }}</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column :label="t('ownershipCreate.equityTable.columns.indicatorDesc')" min-width="160">
                                            <template #default="scope">
                                                <span>{{ scope.row.indicatorDescription || '-' }}</span>
                                            </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>
                                                    <span>{{ formatNumber(scope.row.stateCapital) }}</span>
                                                    <span class="unit">{{ t('ownershipCreate.equityTable.unit') }}</span>
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column :label="t('ownershipCreate.equityTable.columns.stateLegalInvestment')"
                                                                        min-width="180">
                                            <template #default="scope">
                                                <div>
                                                    <span>{{ formatNumber(scope.row.stateLegalCapital) }}</span>
                                                    <span class="unit">{{ t('ownershipCreate.equityTable.unit') }}</span>
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                                :label="t('ownershipCreate.equityTable.columns.absoluteControlLegalInvestment')"
                                                min-width="200">
                                            <template #default="scope">
                                                <div>
                                                    <span>{{ formatNumber(scope.row.stateAbsoluteControlCapital) }}</span>
                                                    <span class="unit">{{ t('ownershipCreate.equityTable.unit') }}</span>
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                                :label="t('ownershipCreate.equityTable.columns.actualControlLegalInvestment')"
                                                min-width="200">
                                            <template #default="scope">
                                                <div>
                                                    <span>{{ formatNumber(scope.row.stateActualControlCapital) }}</span>
                                                    <span class="unit">{{ t('ownershipCreate.equityTable.unit') }}</span>
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column :label="t('ownershipCreate.equityTable.columns.stateShareholdingInvestor')"
                                                                        min-width="200">
                                            <template #default="scope">
                                                <div>
                                                    <span>{{ formatNumber(scope.row.stateEquityCapital) }}</span>
                                                    <span class="unit">{{ t('ownershipCreate.equityTable.unit') }}</span>
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column :label="t('ownershipCreate.equityTable.columns.otherInvestment')"
                                                                        min-width="150">
                                            <template #default="scope">
                                                <div>
                                                    <span>{{ formatNumber(scope.row.otherCapital) }}</span>
                                                    <span class="unit">{{ t('ownershipCreate.equityTable.unit') }}</span>
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column :label="t('ownershipCreate.equityTable.columns.capitalTotal')"
                                                                        min-width="160">
                                            <template #default="scope">
                                                <div>
                                                    <span>{{ formatNumber(scope.row.capitalTotal) }}</span>
                                                    <span class="unit">{{ t('ownershipCreate.equityTable.unit') }}</span>
                                                </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>

                                <el-table :data="nonCashContributions" border class="equity-table">
                                    <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">
                                            <span>{{ scope.row.nonCashContributions || '-' }}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column :label="t('ownershipCreate.equityNonCashTable.columns.contributor')"
                                                                    min-width="160">
                                        <template #default="scope">
                                            <span>{{ scope.row.investor || '-' }}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column :label="t('ownershipCreate.equityNonCashTable.columns.pricing')"
                                                                    min-width="160">
                                        <template #default="scope">
                                            <div>
                                                <span>{{ formatNumber(scope.row.investmentValuation) }}</span>
                                                <span class="unit">{{ t('ownershipCreate.equityTable.unit') }}</span>
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column :label="t('ownershipCreate.equityNonCashTable.columns.assessment')"
                                                                    min-width="160">
                                        <template #default="scope">
                                            <div>
                                                <span>{{ formatNumber(scope.row.assessmentValue) }}</span>
                                                <span class="unit">{{ t('ownershipCreate.equityTable.unit') }}</span>
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column :label="t('ownershipCreate.equityNonCashTable.columns.remark')"
                                                                    min-width="180">
                                        <template #default="scope">
                                            <span>{{ scope.row.remark || '-' }}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column :label="t('ownershipCreate.equityNonCashTable.columns.total')" min-width="160">
                                        <template #default="scope">
                                            <div>
                                                <span>{{ formatNumber(scope.row.totalAmount) }}</span>
                                                <span class="unit">{{ t('ownershipCreate.equityTable.unit') }}</span>
                                            </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>
                                <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 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')" />
                                                <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 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>
                                <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 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 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 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 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 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 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 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')" />
                                                <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>
                </div>
            </el-col>
            <el-col :span="6" v-if="!isPreview">
                <ApprovalAction status="pending" task-id="" :process-instance-id="processInstanceId"/>
            </el-col>
        </el-row>
	 </el-card>
</template>

<script setup lang="ts">
import { reactive, ref, nextTick, type Ref, computed , onMounted} from 'vue';
import { useI18n } from 'vue-i18n';
import type {
    BasicFormT,
    BasicFormEntityT,
    ContributionRowT,
    NonCashContributionRowT,
    EmployeeHoldingRowT,
    ExternalInvestmentRowT
} from '/@/api/workbench/miOwLibr/ownershipCreate/types.ts'
import ApprovalAction from "/@/components/workbench/common/ApprovalAction.vue";
import FlowFormView from '/@/components/workbench/common/FlowFormView.vue'
import {useRoute} from "vue-router";
import {
	getPropertyRightsByProcessInstanceIdAPI,
	getPropertyRightsDetailAPI
} from "/@/api/workbench/miOwLibr/ownershipCreate";
const route = useRoute();
const isPreview = route.query.isPreview === 'true'
const { t } = useI18n();

const headerForm = reactive({
    title: '',
    description: '',
    attachments: [] as any[],
});

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: ''
});

const processInstanceId = ref('');
const taskId = ref('');

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') },
    { 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 shareContributions = ref<ContributionRowT[]>([]);

const nonCashContributions = ref<NonCashContributionRowT[]>([]);

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

const externalInvestments = ref<ExternalInvestmentRowT[]>([]);
const selectedExternalIndex = ref<number>(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 formatDate = (date: string | null | undefined): string => {
    if (!date) return '';
    return date;
};

const formatNumber = (num: number | null | undefined): string => {
    if (num === null || num === undefined) return '-';
    return String(num);
};
const getPropertyRightsByProcessInstanceId = async () =>{
	const res = await getPropertyRightsByProcessInstanceIdAPI(processInstanceId.value)
	Object.assign(formData,res.data)
	shareContributions.value = res.data.shareholderInvestmentEntities
	nonCashContributions.value = res.data.shareholderNonMonetaryEntities
	employeeHoldings.value = res.data.employeeNomineeHoldingEntities
	externalInvestments.value = res.data.outboundInvestmentEntities

}
onMounted(() =>{
	processInstanceId.value = route.query.processInstanceId as string;
	taskId.value = route.query.taskId as string;
	if (processInstanceId.value){
		getPropertyRightsByProcessInstanceId()
	}
})
</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>
