<template>
    <div class="edit-add-detail">
        <div v-loading="detailLoading" class="form-content" element-loading-text="加载中...">
            <div class="page-form">
                <!-- 主要内容区域 -->
                <div class="main-content">
                    <!-- 左侧菜单 -->
                    <div class="sidebar-menu">
                        <div class="menu-section">
                            <el-divider content-position="center">
                                <div class="menu-title">企业基本情况</div>
                            </el-divider>
                            <div class="menu-items">
                                <div
                                    v-for="item in menuItems"
                                    :key="item.id"
                                    :class="{ active: activeMenuItem === item.id }"
                                    class="menu-item"
                                    @click="scrollToSection(item.id)"
                                >
                                    <span>{{ item.title }}</span>
                                    <el-icon :class="getSaveStatusClass(item.id)">
                                        <CircleCheck v-if="getSaveStatus(item.id)" />
                                        <CircleCheck v-else />
                                    </el-icon>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 右侧内容区域 -->
                    <div class="content-area">
                        <el-form
                            ref="addEditFormRef"
                            :model="addEditForm"
                            :rules="addEditFormRules"
                            label-position="left"
                            label-suffix="："
                            size="large"
                        >
                            <el-collapse v-model="activeCollapse">
                                <!-- 基本情况 -->
                                <div
                                    v-if="hasMenuItem('basic-info')"
                                    id="basic-info"
                                    class="content-section"
                                >
                                    <div class="content-title">
                                        <div class="content-title-left">基本情况</div>
                                        <div class="content-title-right">
                                            <el-button
                                                :loading="btnLoading"
                                                type="primary"
                                                @click="handleSave(0)"
                                                >保存
                                            </el-button>
                                        </div>
                                    </div>
                                    <el-collapse-item name="basic-info">
                                        <template #title>
                                            <div class="section-title">
                                                <el-icon>
                                                    <Document />
                                                </el-icon>
                                                <span>基本情况</span>
                                            </div>
                                        </template>
                                        <div class="section-content">
                                            <el-descriptions :column="2" border>
                                                <el-descriptions-item>
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>
                                                        企业名称
                                                    </template>
                                                    <el-form-item prop="enterpriseName">
                                                        {{ addEditForm.enterpriseName }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item>
                                                    <template #label> 企业简称 </template>
                                                    <el-form-item prop="enterpriseShortName">
                                                        {{ addEditForm.enterpriseShortName }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item>
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>类型
                                                    </template>
                                                    <el-form-item prop="ownerType">
                                                        <el-select
                                                            v-model="addEditForm.ownerType"
                                                            clearable
                                                            filterable
                                                            placeholder="请选择"
                                                        >
                                                            <el-option
                                                                v-for="item in getDictionaryByCode(
                                                                    'gysgl-gslx'
                                                                )"
                                                                :key="item.value"
                                                                :label="item.name"
                                                                :value="item.value"
                                                            >
                                                            </el-option>
                                                        </el-select>
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item>
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>
                                                        注册资本
                                                    </template>
                                                    <el-form-item prop="registeredCapital">
                                                        <el-input
                                                            v-model="addEditForm.registeredCapital"
                                                            placeholder="请输入"
                                                        >
                                                            <template #append
                                                                ><el-select
                                                                    v-model="
                                                                        addEditForm.registeredCapitalType
                                                                    "
                                                                    class="registered-capital-type-select"
                                                                >
                                                                    <el-option
                                                                        v-for="item in getDictionaryByCode(
                                                                            'zczbdw'
                                                                        )"
                                                                        :key="item.value"
                                                                        :label="item.name"
                                                                        :value="item.value"
                                                                    >
                                                                    </el-option> </el-select
                                                            ></template>
                                                        </el-input>
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item>
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>
                                                        法定代表人
                                                    </template>
                                                    <el-form-item prop="companyEbe">
                                                        <el-input
                                                            v-model="addEditForm.companyEbe"
                                                            clearable
                                                            placeholder="请输入"
                                                        />
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item>
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>
                                                        统一社会信用代码
                                                    </template>
                                                    <el-form-item prop="companyOrgcode">
                                                        <el-input
                                                            v-model="addEditForm.companyOrgcode"
                                                            clearable
                                                            placeholder="请输入"
                                                        />
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item>
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>
                                                        成立日期
                                                    </template>
                                                    <el-form-item prop="companyRegdate">
                                                        <el-date-picker
                                                            v-model="addEditForm.companyRegdate"
                                                            placeholder="请选择"
                                                            type="date"
                                                            value-format="YYYY-MM-DD"
                                                        />
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item>
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>
                                                        有效期至
                                                    </template>
                                                    <el-form-item prop="companyRegdateEnd">
                                                        <el-select
                                                            style="width: 100%"
                                                            clearable
                                                            @change="changeData"
                                                            v-model="addEditForm.companyRegdateEnd"
                                                            placeholder="请选择有效期至"
                                                        >
                                                            <el-option
                                                                v-for="item in options"
                                                                :key="item.value"
                                                                :label="item.name"
                                                                :value="item.value"
                                                            >
                                                            </el-option>
                                                            <el-date-picker
                                                                value-format="YYYY-MM-DD"
                                                                format="YYYY-MM-DD"
                                                                v-model="
                                                                    addEditForm.companyRegdateEnd
                                                                "
                                                                @change="changeDate"
                                                                style="width: 100%"
                                                                clearable
                                                                placeholder="请选择有效期至"
                                                            ></el-date-picker>
                                                        </el-select>
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item>
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>
                                                        开户银行
                                                    </template>
                                                    <el-form-item prop="openingBank">
                                                        <el-input
                                                            v-model="addEditForm.openingBank"
                                                            clearable
                                                            placeholder="请输入"
                                                        />
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item>
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>
                                                        联行号
                                                    </template>
                                                    <el-form-item prop="interbank">
                                                        <el-input
                                                            v-model="addEditForm.interbank"
                                                            clearable
                                                            placeholder="请输入"
                                                        />
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item>
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>
                                                        银行账户
                                                    </template>
                                                    <el-form-item prop="bank">
                                                        <el-input
                                                            v-model="addEditForm.bank"
                                                            clearable
                                                            placeholder="请输入"
                                                        />
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item>
                                                    <template #label> 公司网址</template>
                                                    <el-form-item
                                                        prop="basicInformation.companyWebsite"
                                                    >
                                                        <el-input
                                                            v-model="
                                                                addEditForm.basicInformation
                                                                    .companyWebsite
                                                            "
                                                            clearable
                                                            placeholder="请输入"
                                                        />
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item :span="2">
                                                    <template #label>
                                                        <span class="required-asterisk">*</span
                                                        >注册地址
                                                    </template>
                                                    <el-form-item prop="companyAddr">
                                                        <el-input
                                                            v-model="addEditForm.companyAddr"
                                                            clearable
                                                            placeholder="请输入"
                                                        />
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item :span="2">
                                                    <template #label>
                                                        <span class="required-asterisk">*</span
                                                        >生产地址
                                                    </template>
                                                    <el-form-item
                                                        prop="basicInformation.productionAddress"
                                                    >
                                                        <el-input
                                                            v-model="
                                                                addEditForm.basicInformation
                                                                    .productionAddress
                                                            "
                                                            clearable
                                                            placeholder="请输入"
                                                        />
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item :span="2">
                                                    <template #label>
                                                        <span class="required-asterisk">*</span
                                                        >经营范围
                                                    </template>
                                                    <el-form-item prop="businessScope">
                                                        <el-input
                                                            v-model="addEditForm.businessScope"
                                                            type="textarea"
                                                            clearable
                                                            placeholder="请输入"
                                                        />
                                                    </el-form-item>
                                                </el-descriptions-item>
                                            </el-descriptions>
                                        </div>
                                    </el-collapse-item>
                                </div>

                                <!-- 企业规模 -->
                                <div
                                    v-if="hasMenuItem('other-notes')"
                                    id="other-notes"
                                    class="content-section"
                                >
                                    <div class="content-title">
                                        <div class="content-title-left">企业规模</div>
                                        <div class="content-title-right">
                                            <el-button
                                                :loading="btnLoading"
                                                type="primary"
                                                @click="handleSave(1)"
                                                >保存
                                            </el-button>
                                        </div>
                                    </div>
                                    <el-collapse-item name="other-notes">
                                        <template #title>
                                            <div class="section-title">
                                                <el-icon>
                                                    <Document />
                                                </el-icon>
                                                <span>企业规模</span>
                                            </div>
                                        </template>
                                        <div class="section-content">
                                            <el-descriptions :column="2" border>
                                                <el-descriptions-item>
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>
                                                        固定资产
                                                    </template>
                                                    <el-form-item prop="fixedAssets">
                                                        <el-input
                                                            v-model="
                                                                addEditForm.basicInformation
                                                                    .fixedAssets
                                                            "
                                                            placeholder="请输入"
                                                        >
                                                            <template #append>万元（RMB）</template>
                                                        </el-input>
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item>
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>
                                                        上年销售额
                                                    </template>
                                                    <el-form-item prop="lastYearSales">
                                                        <el-input
                                                            v-model="
                                                                addEditForm.basicInformation
                                                                    .lastYearSales
                                                            "
                                                            placeholder="请输入"
                                                        >
                                                            <template #append>万元（RMB）</template>
                                                        </el-input>
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item>
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>
                                                        主营产品上年度销量
                                                    </template>
                                                    <el-form-item prop="mainProductsLastYearSales">
                                                        <el-input
                                                            v-model="
                                                                addEditForm.basicInformation
                                                                    .mainProductsLastYearSales
                                                            "
                                                            clearable
                                                            placeholder="请输入"
                                                        />
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item>
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>
                                                        主营产品上年度销量额
                                                    </template>
                                                    <el-form-item
                                                        prop="mainProductsLastYearSalesRevenue"
                                                    >
                                                        <el-input
                                                            v-model="
                                                                addEditForm.basicInformation
                                                                    .mainProductsLastYearSalesRevenue
                                                            "
                                                            placeholder="请输入"
                                                        >
                                                            <template #append>万元（RMB）</template>
                                                        </el-input>
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item>
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>
                                                        员工人数
                                                    </template>
                                                    <el-form-item prop="employeesNumber">
                                                        <el-input
                                                            v-model="
                                                                addEditForm.basicInformation
                                                                    .employeesNumber
                                                            "
                                                            placeholder="请输入"
                                                        >
                                                            <template #append>人</template>
                                                        </el-input>
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item>
                                                    <template #label> 生产作业人员</template>
                                                    <el-form-item prop="productionOperators">
                                                        <el-input
                                                            v-model="
                                                                addEditForm.basicInformation
                                                                    .productionOperators
                                                            "
                                                            placeholder="请输入"
                                                        >
                                                            <template #append>人</template>
                                                        </el-input>
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item>
                                                    <template #label> 技术工程师</template>
                                                    <el-form-item prop="technicalEngineer">
                                                        <el-input
                                                            v-model="
                                                                addEditForm.basicInformation
                                                                    .technicalEngineer
                                                            "
                                                            placeholder="请输入"
                                                        >
                                                            <template #append>人</template>
                                                        </el-input>
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item>
                                                    <template #label> 质量管理人员</template>
                                                    <el-form-item prop="qualityManagementPersonnel">
                                                        <el-input
                                                            v-model="
                                                                addEditForm.basicInformation
                                                                    .qualityManagementPersonnel
                                                            "
                                                            placeholder="请输入"
                                                        >
                                                            <template #append>人</template>
                                                        </el-input>
                                                    </el-form-item>
                                                </el-descriptions-item>
                                            </el-descriptions>
                                        </div>
                                    </el-collapse-item>
                                </div>
                                <!-- 主营产品情况 -->
                                <div
                                    v-if="hasMenuItem('products')"
                                    id="products"
                                    class="content-section"
                                >
                                    <div class="content-title">
                                        <div class="content-title-left">主营产品情况</div>
                                        <div class="content-title-right">
                                            <el-button
                                                :loading="btnLoading"
                                                type="primary"
                                                @click="handleSave(11)"
                                                >保存
                                            </el-button>
                                        </div>
                                    </div>
                                    <el-collapse-item name="products">
                                        <template #title>
                                            <div class="section-title">
                                                <el-icon>
                                                    <Document />
                                                </el-icon>
                                                <span>主营产品生产销售情况</span>
                                            </div>
                                        </template>
                                        <div class="section-content">
                                            <el-table :data="addEditForm.salesStatus" border stripe>
                                                <el-table-column
                                                    align="center"
                                                    label="序号"
                                                    width="60"
                                                >
                                                    <template #default="{ $index }">
                                                        {{ $index + 1 }}
                                                    </template>
                                                </el-table-column>

                                                <el-table-column align="center" label="产品种类">
                                                    <template #default="{ row }">
                                                        <el-input
                                                            v-model="row.productCategory"
                                                            clearable
                                                            placeholder="请输入"
                                                        />
                                                    </template>
                                                </el-table-column>

                                                <el-table-column align="center" label="规格">
                                                    <template #default="{ row }">
                                                        <el-input
                                                            v-model="row.specifications"
                                                            clearable
                                                            placeholder="请输入"
                                                        />
                                                    </template>
                                                </el-table-column>

                                                <el-table-column
                                                    align="center"
                                                    label="近三年年产量"
                                                >
                                                    <template #default="{ row }">
                                                        <el-input
                                                            v-model="
                                                                row.pastThreeYearsAnnualProduction
                                                            "
                                                            clearable
                                                            placeholder="请输入"
                                                        />
                                                    </template>
                                                </el-table-column>

                                                <el-table-column align="center" label="交货周期">
                                                    <template #default="{ row }">
                                                        <el-input
                                                            v-model="row.deliveryCycle"
                                                            clearable
                                                            placeholder="请输入"
                                                        />
                                                    </template>
                                                </el-table-column>

                                                <el-table-column
                                                    align="center"
                                                    label="主要客户及市场"
                                                    width="200"
                                                >
                                                    <template #default="{ row }">
                                                        <el-input
                                                            v-model="row.mainCustomersMarkets"
                                                            :autosize="{ minRows: 2, maxRows: 6 }"
                                                            clearable
                                                            placeholder="请输入"
                                                            type="textarea"
                                                        />
                                                    </template>
                                                </el-table-column>

                                                <el-table-column
                                                    align="center"
                                                    label="操作"
                                                    width="120"
                                                >
                                                    <template #default="{ row, $index }">
                                                        <div class="operation-buttons">
                                                            <el-link
                                                                :underline="false"
                                                                type="primary"
                                                                @click="addProductsQuality()"
                                                            >
                                                                添加
                                                            </el-link>
                                                            <el-link
                                                                v-if="
                                                                    addEditForm.salesStatus &&
                                                                    addEditForm.salesStatus.length >
                                                                        1
                                                                "
                                                                :underline="false"
                                                                type="danger"
                                                                @click="
                                                                    deleteProductsQuality($index)
                                                                "
                                                            >
                                                                删除
                                                            </el-link>
                                                        </div>
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                        </div>
                                    </el-collapse-item>
                                </div>
                                <!-- 质量业绩 -->
                                <div
                                    v-if="hasMenuItem('quality')"
                                    id="quality"
                                    class="content-section"
                                >
                                    <div class="content-title">
                                        <div class="content-title-left">质量业绩</div>
                                        <div class="content-title-right">
                                            <el-button
                                                :loading="btnLoading"
                                                type="primary"
                                                @click="handleSave(9)"
                                                >保存
                                            </el-button>
                                        </div>
                                    </div>
                                    <el-collapse-item name="quality">
                                        <template #title>
                                            <div class="section-title">
                                                <el-icon>
                                                    <Document />
                                                </el-icon>
                                                <span>主营产品质量表现</span>
                                            </div>
                                        </template>
                                        <div class="section-content">
                                            <el-table
                                                :data="addEditForm.performance.qualityPerformance"
                                                border
                                                stripe
                                            >
                                                <el-table-column
                                                    align="center"
                                                    label="序号"
                                                    width="60"
                                                >
                                                    <template #default="{ $index }">
                                                        {{ $index + 1 }}
                                                    </template>
                                                </el-table-column>

                                                <el-table-column
                                                    align="center"
                                                    label="产品名称及规格"
                                                >
                                                    <template #default="{ row }">
                                                        <el-input
                                                            v-model="row.productName"
                                                            clearable
                                                            placeholder="请输入"
                                                        />
                                                    </template>
                                                </el-table-column>

                                                <el-table-column
                                                    align="center"
                                                    label="去年质量目标"
                                                >
                                                    <el-table-column align="center" label="指标">
                                                        <template #default="{ row }">
                                                            <el-input
                                                                v-model="
                                                                    row.lastYearQualityTargetIndexValue
                                                                "
                                                                clearable
                                                                placeholder="请输入"
                                                            />
                                                        </template>
                                                    </el-table-column>

                                                    <el-table-column align="center" label="实际值">
                                                        <template #default="{ row }">
                                                            <el-input
                                                                v-model="
                                                                    row.lastYearQualityTargetActualValue
                                                                "
                                                                clearable
                                                                placeholder="请输入"
                                                            />
                                                        </template>
                                                    </el-table-column>
                                                </el-table-column>

                                                <el-table-column
                                                    align="center"
                                                    label="今年质量目标"
                                                >
                                                    <el-table-column align="center" label="指标">
                                                        <template #default="{ row }">
                                                            <el-input
                                                                v-model="
                                                                    row.thisYearQualityTargetIndexValue
                                                                "
                                                                clearable
                                                                placeholder="请输入"
                                                            />
                                                        </template>
                                                    </el-table-column>

                                                    <el-table-column align="center" label="实际值">
                                                        <template #default="{ row }">
                                                            <el-input
                                                                v-model="
                                                                    row.thisYearQualityTargetActualValue
                                                                "
                                                                clearable
                                                                placeholder="请输入"
                                                            />
                                                        </template>
                                                    </el-table-column>
                                                </el-table-column>

                                                <el-table-column
                                                    align="center"
                                                    label="操作"
                                                    width="120"
                                                >
                                                    <template #default="{ row, $index }">
                                                        <div class="operation-buttons">
                                                            <el-link
                                                                :underline="false"
                                                                type="primary"
                                                                @click="addQualityPerformance()"
                                                            >
                                                                添加
                                                            </el-link>
                                                            <el-link
                                                                v-if="
                                                                    addEditForm.performance
                                                                        .qualityPerformance &&
                                                                    addEditForm.performance
                                                                        .qualityPerformance.length >
                                                                        1
                                                                "
                                                                :underline="false"
                                                                type="danger"
                                                                @click="
                                                                    deleteQualityPerformance($index)
                                                                "
                                                            >
                                                                删除
                                                            </el-link>
                                                        </div>
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                            <el-descriptions :column="2" border>
                                                <el-descriptions-item :span="2">
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>
                                                        拟提供我司产品
                                                    </template>
                                                    <el-form-item prop="proposedProductOffering">
                                                        <el-input
                                                            v-model="
                                                                addEditForm.performance
                                                                    .proposedProductOffering
                                                            "
                                                            :rows="4"
                                                            clearable
                                                            placeholder="请输入"
                                                            type="textarea"
                                                        />
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item :span="2">
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>
                                                        企业业绩
                                                    </template>
                                                    <el-form-item prop="businessPerformance">
                                                        <el-input
                                                            v-model="
                                                                addEditForm.performance
                                                                    .businessPerformance
                                                            "
                                                            :rows="4"
                                                            clearable
                                                            placeholder="请输入"
                                                            type="textarea"
                                                        />
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item :span="2">
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>
                                                        附件
                                                    </template>
                                                    <el-form-item prop="b">
                                                        <CustomUploader
                                                            :fileList="
                                                                addEditForm.performance.files || []
                                                            "
                                                            :previewAndDownload="false"
                                                            :typeRegularArr="typeRegularArr"
                                                            type="button"
                                                            @change="handlePerformanceFileChange"
                                                            @startUpload="handleStartUpload"
                                                        >
                                                        </CustomUploader>
                                                    </el-form-item>
                                                </el-descriptions-item>
                                            </el-descriptions>
                                        </div>
                                    </el-collapse-item>
                                    <el-collapse-item name="quality">
                                        <template #title>
                                            <div class="section-title">
                                                <el-icon>
                                                    <Document />
                                                </el-icon>
                                                <span>客户抱怨</span>
                                            </div>
                                        </template>
                                        <div class="section-content">
                                            <el-table
                                                :data="addEditForm.performance.complaints"
                                                border
                                                stripe
                                            >
                                                <el-table-column
                                                    align="center"
                                                    label="序号"
                                                    width="60"
                                                >
                                                    <template #default="{ $index }">
                                                        {{ $index + 1 }}
                                                    </template>
                                                </el-table-column>

                                                <el-table-column
                                                    align="center"
                                                    label="客户抱怨问题"
                                                >
                                                    <template #default="{ row }">
                                                        <el-input
                                                            v-model="row.customerComplaints"
                                                            clearable
                                                            placeholder="请输入"
                                                            type="textarea"
                                                        />
                                                    </template>
                                                </el-table-column>
                                                <el-table-column align="center" label="控制措施">
                                                    <template #default="{ row }">
                                                        <el-input
                                                            v-model="row.controlMeasures"
                                                            clearable
                                                            placeholder="请输入"
                                                            type="textarea"
                                                        />
                                                    </template>
                                                </el-table-column>
                                                <el-table-column align="center" label="提出时间">
                                                    <template #default="{ row }">
                                                        <el-date-picker
                                                            v-model="row.proposedTime"
                                                            placeholder="请选择"
                                                            type="date"
                                                            value-format="YYYY-MM-DD"
                                                        ></el-date-picker>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column
                                                    align="center"
                                                    label="操作"
                                                    width="120"
                                                >
                                                    <template #default="{ row, $index }">
                                                        <div class="operation-buttons">
                                                            <el-link
                                                                :underline="false"
                                                                type="primary"
                                                                @click="addComplaints()"
                                                            >
                                                                添加
                                                            </el-link>
                                                            <el-link
                                                                v-if="
                                                                    addEditForm.performance
                                                                        .complaints &&
                                                                    addEditForm.performance
                                                                        .complaints.length > 1
                                                                "
                                                                :underline="false"
                                                                type="danger"
                                                                @click="deleteComplaints($index)"
                                                            >
                                                                删除
                                                            </el-link>
                                                        </div>
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                        </div>
                                    </el-collapse-item>
                                </div>
                                <!-- 主要原材料及供应商表 -->
                                <div
                                    v-if="hasMenuItem('raw-materials')"
                                    id="raw-materials"
                                    class="content-section"
                                >
                                    <div class="content-title">
                                        <div class="content-title-left">主要原材料及供应商</div>
                                        <div class="content-title-right">
                                            <el-button
                                                :loading="btnLoading"
                                                type="primary"
                                                @click="handleSave(4)"
                                                >保存
                                            </el-button>
                                        </div>
                                    </div>
                                    <el-collapse-item name="raw-materials">
                                        <template #title>
                                            <div class="section-title">
                                                <el-icon>
                                                    <Document />
                                                </el-icon>
                                                <span>主要原材料信息</span>
                                            </div>
                                        </template>
                                        <div class="section-content">
                                            <el-table :data="addEditForm.suppliers" border stripe>
                                                <el-table-column
                                                    align="center"
                                                    label="序号"
                                                    width="60"
                                                >
                                                    <template #default="{ $index }">
                                                        {{ $index + 1 }}
                                                    </template>
                                                </el-table-column>

                                                <el-table-column
                                                    align="center"
                                                    label="主要原料名称"
                                                >
                                                    <template #default="{ row }">
                                                        <el-input
                                                            v-model="row.mainRawMaterialName"
                                                            clearable
                                                            placeholder="请输入"
                                                        />
                                                    </template>
                                                </el-table-column>

                                                <el-table-column align="center" label="供应厂家">
                                                    <template #default="{ row }">
                                                        <el-input
                                                            v-model="row.enterpriseName"
                                                            clearable
                                                            placeholder="请输入"
                                                        />
                                                    </template>
                                                </el-table-column>

                                                <el-table-column
                                                    align="center"
                                                    label="上年度业绩表现"
                                                >
                                                    <template #default="{ row }">
                                                        <el-input
                                                            v-model="row.previousYearPerformance"
                                                            clearable
                                                            placeholder="请输入"
                                                        />
                                                    </template>
                                                </el-table-column>

                                                <el-table-column
                                                    align="center"
                                                    label="操作"
                                                    width="120"
                                                >
                                                    <template #default="{ row, $index }">
                                                        <div class="operation-buttons">
                                                            <el-link
                                                                :underline="false"
                                                                type="primary"
                                                                @click="addMaterialsAndSuppliers()"
                                                            >
                                                                添加
                                                            </el-link>
                                                            <el-link
                                                                v-if="
                                                                    addEditForm.suppliers &&
                                                                    addEditForm.suppliers.length > 1
                                                                "
                                                                :underline="false"
                                                                type="danger"
                                                                @click="
                                                                    deleteMaterialsAndSuppliers(
                                                                        $index
                                                                    )
                                                                "
                                                            >
                                                                删除
                                                            </el-link>
                                                        </div>
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                        </div>
                                    </el-collapse-item>
                                </div>

                                <!-- 生产制造过程绩效 -->
                                <div
                                    v-if="hasMenuItem('manufacturing')"
                                    id="manufacturing"
                                    class="content-section"
                                >
                                    <div class="content-title">
                                        <div class="content-title-left">生产制造过程绩效</div>
                                        <div class="content-title-right">
                                            <el-button
                                                :loading="btnLoading"
                                                type="primary"
                                                @click="handleSave(10)"
                                                >保存
                                            </el-button>
                                        </div>
                                    </div>
                                    <el-collapse-item name="manufacturing">
                                        <template #title>
                                            <div class="section-title">
                                                <el-icon>
                                                    <Document />
                                                </el-icon>
                                                <span>生产制造过程绩效</span>
                                            </div>
                                        </template>
                                        <div class="section-content">
                                            <el-descriptions :column="2" border>
                                                <el-descriptions-item :span="2">
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>
                                                        生产工艺流程(可附页说明)
                                                    </template>
                                                    <el-form-item prop="suproductionProcess">
                                                        <el-input
                                                            v-model="
                                                                addEditForm.processPerformance
                                                                    .suproductionProcess
                                                            "
                                                            :rows="4"
                                                            clearable
                                                            placeholder="请输入"
                                                            type="textarea"
                                                        />
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item :span="2">
                                                    <template #label> 附件</template>
                                                    <el-form-item prop="b">
                                                        <CustomUploader
                                                            :fileList="
                                                                addEditForm.processPerformance
                                                                    .files || []
                                                            "
                                                            :previewAndDownload="false"
                                                            :typeRegularArr="typeRegularArr"
                                                            type="button"
                                                            @change="
                                                                handleProcessPerformanceFileChange
                                                            "
                                                            @startUpload="handleStartUpload"
                                                        >
                                                        </CustomUploader>
                                                    </el-form-item>
                                                </el-descriptions-item>
                                            </el-descriptions>
                                            <el-table
                                                :data="addEditForm.processPerformance.flow"
                                                border
                                                stripe
                                            >
                                                <el-table-column
                                                    align="center"
                                                    label="序号"
                                                    width="60"
                                                >
                                                    <template #default="{ $index }">
                                                        {{ $index + 1 }}
                                                    </template>
                                                </el-table-column>

                                                <el-table-column
                                                    align="center"
                                                    label="关键&重要过程"
                                                >
                                                    <template #default="{ row }">
                                                        <el-input
                                                            v-model="row.keyImportantProcess"
                                                            clearable
                                                            placeholder="请输入"
                                                        />
                                                    </template>
                                                </el-table-column>

                                                <el-table-column
                                                    align="center"
                                                    label="控制参数或特性"
                                                >
                                                    <template #default="{ row }">
                                                        <el-input
                                                            v-model="
                                                                row.controlParametersCharacteristics
                                                            "
                                                            clearable
                                                            placeholder="请输入"
                                                        />
                                                    </template>
                                                </el-table-column>

                                                <el-table-column
                                                    align="center"
                                                    label="过程能力指数"
                                                >
                                                    <template #default="{ row }">
                                                        <el-input
                                                            v-model="row.processCapabilityIndex"
                                                            clearable
                                                            placeholder="请输入"
                                                        />
                                                    </template>
                                                </el-table-column>

                                                <el-table-column
                                                    align="center"
                                                    label="操作"
                                                    width="120"
                                                >
                                                    <template #default="{ row, $index }">
                                                        <div class="operation-buttons">
                                                            <el-link
                                                                :underline="false"
                                                                type="primary"
                                                                @click="
                                                                    addManufacturingPerformance()
                                                                "
                                                            >
                                                                添加
                                                            </el-link>
                                                            <el-link
                                                                v-if="
                                                                    addEditForm.processPerformance
                                                                        .flow &&
                                                                    addEditForm.processPerformance
                                                                        .flow.length > 1
                                                                "
                                                                :underline="false"
                                                                type="danger"
                                                                @click="
                                                                    deleteManufacturingPerformance(
                                                                        $index
                                                                    )
                                                                "
                                                            >
                                                                删除
                                                            </el-link>
                                                        </div>
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                        </div>
                                    </el-collapse-item>
                                </div>

                                <!-- 生产设备 -->
                                <div
                                    v-if="hasMenuItem('ProductionEquipment')"
                                    id="ProductionEquipment"
                                    class="content-section"
                                >
                                    <div class="content-title">
                                        <div class="content-title-left">生产设备</div>
                                        <div class="content-title-right">
                                            <el-button
                                                :loading="btnLoading"
                                                type="primary"
                                                @click="handleSave(7)"
                                                >保存
                                            </el-button>
                                        </div>
                                    </div>
                                    <el-collapse-item name="ProductionEquipment">
                                        <template #title>
                                            <div class="section-title">
                                                <el-icon>
                                                    <Document />
                                                </el-icon>
                                                <span>主要生产设备</span>
                                            </div>
                                        </template>
                                        <div class="section-content">
                                            <el-table
                                                :data="addEditForm.prodEquipment"
                                                border
                                                stripe
                                            >
                                                <el-table-column
                                                    align="center"
                                                    label="序号"
                                                    width="60"
                                                >
                                                    <template #default="{ $index }">
                                                        {{ $index + 1 }}
                                                    </template>
                                                </el-table-column>

                                                <el-table-column
                                                    align="center"
                                                    min-width="130"
                                                    label="生产设备名称/型号"
                                                >
                                                    <template #default="{ row }">
                                                        <el-input
                                                            v-model="row.name"
                                                            clearable
                                                            placeholder="请输入"
                                                        />
                                                    </template>
                                                </el-table-column>

                                                <el-table-column align="center" label="产能">
                                                    <template #default="{ row }">
                                                        <el-input
                                                            v-model="row.capacity"
                                                            clearable
                                                            placeholder="请输入"
                                                        />
                                                    </template>
                                                </el-table-column>

                                                <el-table-column align="center" label="数量">
                                                    <template #default="{ row }">
                                                        <el-input
                                                            v-model="row.num"
                                                            clearable
                                                            placeholder="请输入"
                                                        />
                                                    </template>
                                                </el-table-column>

                                                <el-table-column align="center" label="生产厂家">
                                                    <template #default="{ row }">
                                                        <el-input
                                                            v-model="row.manufacturer"
                                                            clearable
                                                            placeholder="请输入"
                                                        />
                                                    </template>
                                                </el-table-column>
                                                <el-table-column align="center" label="使用年限">
                                                    <template #default="{ row }">
                                                        <el-input
                                                            v-model="row.serviceLife"
                                                            clearable
                                                            placeholder="请输入"
                                                        />
                                                    </template>
                                                </el-table-column>
                                                <el-table-column
                                                    align="center"
                                                    label="附件"
                                                    width="200"
                                                >
                                                    <template #default="{ row, $index }">
                                                        <CustomUploader
                                                            :fileList="row.files || []"
                                                            :previewAndDownload="false"
                                                            :typeRegularArr="typeRegularArr"
                                                            @change="
                                                                (files) =>
                                                                    handleProductionEquipmentRowFileChange(
                                                                        files,
                                                                        $index
                                                                    )
                                                            "
                                                            @startUpload="handleStartUpload"
                                                        >
                                                        </CustomUploader>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column
                                                    align="center"
                                                    label="操作"
                                                    width="120"
                                                >
                                                    <template #default="{ row, $index }">
                                                        <div class="operation-buttons">
                                                            <el-link
                                                                :underline="false"
                                                                type="primary"
                                                                @click="
                                                                    addMainProductionEquipment()
                                                                "
                                                            >
                                                                添加
                                                            </el-link>
                                                            <el-link
                                                                v-if="
                                                                    addEditForm.prodEquipment &&
                                                                    addEditForm.prodEquipment
                                                                        .length > 1
                                                                "
                                                                :underline="false"
                                                                type="danger"
                                                                @click="
                                                                    deleteMainProductionEquipment(
                                                                        $index
                                                                    )
                                                                "
                                                            >
                                                                删除
                                                            </el-link>
                                                        </div>
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                        </div>
                                    </el-collapse-item>
                                </div>
                                <!-- 检验设备 -->
                                <div
                                    v-if="hasMenuItem('inspectionEquipment')"
                                    id="inspectionEquipment"
                                    class="content-section"
                                >
                                    <div class="content-title">
                                        <div class="content-title-left">检验设备</div>
                                        <div class="content-title-right">
                                            <el-button
                                                :loading="btnLoading"
                                                type="primary"
                                                @click="handleSave(12)"
                                                >保存
                                            </el-button>
                                        </div>
                                    </div>
                                    <el-collapse-item name="inspectionEquipment">
                                        <template #title>
                                            <div class="section-title">
                                                <el-icon>
                                                    <Document />
                                                </el-icon>
                                                <span>主要检验设备</span>
                                            </div>
                                        </template>
                                        <div class="section-content">
                                            <el-table
                                                :data="addEditForm.monitEquipment"
                                                border
                                                stripe
                                            >
                                                <el-table-column
                                                    align="center"
                                                    label="序号"
                                                    width="60"
                                                >
                                                    <template #default="{ $index }">
                                                        {{ $index + 1 }}
                                                    </template>
                                                </el-table-column>

                                                <el-table-column
                                                    align="center"
                                                    label="检验设备名称/型号"
                                                    min-width="130"
                                                >
                                                    <template #default="{ row }">
                                                        <el-input
                                                            v-model="row.name"
                                                            clearable
                                                            placeholder="请输入"
                                                        />
                                                    </template>
                                                </el-table-column>

                                                <el-table-column align="center" label="精度">
                                                    <template #default="{ row }">
                                                        <el-input
                                                            v-model="row.capacity"
                                                            clearable
                                                            placeholder="请输入"
                                                        />
                                                    </template>
                                                </el-table-column>

                                                <el-table-column align="center" label="数量">
                                                    <template #default="{ row }">
                                                        <el-input
                                                            v-model="row.num"
                                                            clearable
                                                            placeholder="请输入"
                                                        />
                                                    </template>
                                                </el-table-column>

                                                <el-table-column align="center" label="生产厂家">
                                                    <template #default="{ row }">
                                                        <el-input
                                                            v-model="row.manufacturer"
                                                            clearable
                                                            placeholder="请输入"
                                                        />
                                                    </template>
                                                </el-table-column>
                                                <el-table-column align="center" label="使用年限">
                                                    <template #default="{ row }">
                                                        <el-input
                                                            v-model="row.serviceLife"
                                                            clearable
                                                            placeholder="请输入"
                                                        />
                                                    </template>
                                                </el-table-column>
                                                <el-table-column
                                                    align="center"
                                                    label="附件"
                                                    width="200"
                                                >
                                                    <template #default="{ row, $index }">
                                                        <CustomUploader
                                                            :fileList="row.files || []"
                                                            :previewAndDownload="false"
                                                            :typeRegularArr="typeRegularArr"
                                                            @change="
                                                                (files) =>
                                                                    handleInspectionEquipmentRowFileChange(
                                                                        files,
                                                                        $index
                                                                    )
                                                            "
                                                            @startUpload="handleStartUpload"
                                                        >
                                                        </CustomUploader>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column
                                                    align="center"
                                                    label="操作"
                                                    width="120"
                                                >
                                                    <template #default="{ row, $index }">
                                                        <div class="operation-buttons">
                                                            <el-link
                                                                :underline="false"
                                                                type="primary"
                                                                @click="
                                                                    addMainInspectionEquipmentNew()
                                                                "
                                                            >
                                                                添加
                                                            </el-link>
                                                            <el-link
                                                                v-if="
                                                                    addEditForm.monitEquipment &&
                                                                    addEditForm.monitEquipment
                                                                        .length > 1
                                                                "
                                                                :underline="false"
                                                                type="danger"
                                                                @click="
                                                                    deleteMainInspectionEquipment(
                                                                        $index
                                                                    )
                                                                "
                                                            >
                                                                删除
                                                            </el-link>
                                                        </div>
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                        </div>
                                    </el-collapse-item>
                                </div>
                                <!-- 其他特别说明 -->
                                <div
                                    v-if="hasMenuItem('company-scale')"
                                    id="company-scale"
                                    class="content-section"
                                >
                                    <div class="content-title">
                                        <div class="content-title-left">其他特别说明</div>
                                        <div class="content-title-right">
                                            <el-button
                                                :loading="btnLoading"
                                                type="primary"
                                                @click="handleSave(6)"
                                                >保存
                                            </el-button>
                                        </div>
                                    </div>
                                    <el-collapse-item name="company-scale">
                                        <template #title>
                                            <div class="section-title">
                                                <el-icon>
                                                    <Document />
                                                </el-icon>
                                                <span>附件说明</span>
                                            </div>
                                        </template>
                                        <div class="section-content">
                                            <el-descriptions :column="2" border>
                                                <el-descriptions-item :span="2">
                                                    <template #label> 特别说明</template>
                                                    <el-form-item prop="notes">
                                                        <el-input
                                                            v-model="
                                                                addEditForm.otherSpecialNotes.notes
                                                            "
                                                            :rows="4"
                                                            clearable
                                                            placeholder="请输入"
                                                            type="textarea"
                                                        />
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item :span="2">
                                                    <template #label> 附件</template>
                                                    <el-form-item prop="b">
                                                        <CustomUploader
                                                            :fileList="
                                                                addEditForm.otherSpecialNotes
                                                                    .files || []
                                                            "
                                                            :previewAndDownload="false"
                                                            :typeRegularArr="typeRegularArr"
                                                            type="button"
                                                            @change="
                                                                handleOtherSpecialNotesFileChange
                                                            "
                                                            @startUpload="handleStartUpload"
                                                        >
                                                        </CustomUploader>
                                                    </el-form-item>
                                                </el-descriptions-item>
                                            </el-descriptions>
                                        </div>
                                    </el-collapse-item>
                                </div>
                            </el-collapse>
                        </el-form>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <!-- <el-button type="primary" @click="handleSubmit">提 交</el-button> -->
            <el-button @click="handleCancel">关 闭</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, onUnmounted, reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getDictionaryByCode } from '@/utils/dictionary'
import { useRoute, useRouter } from 'vue-router'
import {
    dataDetail,
    dataUpdate,
    getCompanyInfo
} from '@/api/supplierMonitor/PersonalInfoManage/BasicInfoChangeApplication'
import CustomUploader from '@/components/CustomUploader/index.vue'

interface AddEditForm {
    [key: string]: string | number | undefined | null | any
}

interface FileItem {
    id?: string
    fileId?: string
    status: string

    [key: string]: any
}

const route = useRoute()
const router = useRouter()

// 获取路由参数
const userDetail = ref<any>({})
const editId = ref((route.query.id as string) || '')
const isEdit = computed(() => !!editId.value)

// UI状态
// 折叠面板激活状态 - 只包含存在的菜单项
const activeCollapse = computed(() => {
    return menuItems.value.map((item) => item.id)
})
const activeMenuItem = ref('basic-info') // 当前激活的菜单项
const detailLoading = ref(false) // 详情加载状态
const btnLoading = ref<Boolean>(false)
// 表单相关
const options = ref([{ id: 1, name: '长期', value: '1' }])
const addEditFormRef = ref<FormInstance>()
const addEditFormRules = reactive<FormRules>({
    companyEbe: [{ required: true, message: '请输入法定代表人姓名', trigger: 'blur' }],
    companyRegdate: [{ required: true, message: '请选择注册日期', trigger: 'change' }],
    companyAddr: [{ required: true, message: '请输入注册地址', trigger: 'blur' }],
    openingBank: [{ required: true, message: '请输入开户银行', trigger: 'blur' }],
    bank: [{ required: true, message: '请输入开户银行名称', trigger: 'blur' }],
    interbank: [{ required: true, message: '请输入联行号', trigger: 'blur' }],
    companyOrgcode: [{ required: true, message: '请输入统一社会信用代码', trigger: 'blur' }],
    mail: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        {
            pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
            message: '请输入正确的邮箱格式',
            trigger: 'blur'
        }
    ],
    ownerType: [{ required: true, message: '请选择类型', trigger: 'change' }],
    businessScope: [{ required: true, message: '请输入经营范围', trigger: 'blur' }]
})
const addEditForm = reactive<AddEditForm>({
    enterpriseCode: '',
    enterpriseName: '',
    enterpriseId: '',
    registeredCapital: '',
    registeredCapitalType:'1',
    companyEbe: '',
    supplierId: '',
    interbank: '',
    supplierCode: '',
    companyRegdate: '',
    companyRegdateEnd: '',
    companyAddr: '',
    openingBank: '',
    bank: '',
    code: '',
    ownerType: '',
    businessScope: '',
    companyOrgcode: '',
    companyContact: '',
    contactTel: '',
    enterpriseShortName: '',
    mail: '',
    basicInformation: {
        productionAddress: '',
        fixedAssets: '',
        employeesNumber: '',
        lastYearSales: '',
        mainProductsLastYearSales: '',
        mainProductsLastYearSalesRevenue: '',
        productionOperators: '',
        qualityContactPerson: '',
        qualityManagementPersonnel: '',
        qualityContactPersonPhone: '',
        technicalEngineer: '',
        companyWebsite: ''
    },
    qualification: [
        {
            id: 1,
            qualificationCategoryName: '',
            qualificationCategoryCode: '',
            name: '',
            code: '',
            qualificationCode: '',
            qualificationAttribution: '',
            issueDate: '',
            validUntil: '',
            files: []
        }
    ],
    performance: {
        businessPerformance: '',
        proposedProductOffering: '',
        files: [],
        complaints: [
            {
                id: 1,
                controlMeasures: '',
                customerComplaints: '',
                proposedTime: ''
            }
        ],
        qualityPerformance: [
            {
                id: 1,
                productName: '',
                lastYearQualityTargetActualValue: '',
                lastYearQualityTargetIndexValue: '',
                thisYearQualityTargetActualValue: '',
                thisYearQualityTargetIndexValue: ''
            }
        ]
    },
    salesStatus: [
        {
            productCategory: '',
            specifications: '',
            pastThreeYearsAnnualProduction: '',
            deliveryCycle: '',
            mainCustomersMarkets: ''
        }
    ],
    suppliers: [
        {
            id: 1,
            mainRawMaterialName: '',
            enterpriseName: '',
            previousYearPerformance: ''
        }
    ],
    processPerformance: {
        flow: [
            {
                id: 1,
                keyImportantProcess: '',
                controlParametersCharacteristics: '',
                processCapabilityIndex: ''
            }
        ],
        suproductionProcess: '',
        files: []
    },
    prodEquipment: [
        {
            id: 1,
            name: '',
            capacity: '',
            num: '',
            manufacturer: '',
            serviceLife: '',
            deviceType: 1,
            files: []
        }
    ],
    monitEquipment: [
        {
            id: 1,
            name: '',
            capacity: '',
            num: '',
            manufacturer: '',
            serviceLife: '',
            deviceType: 2
        }
    ],
    otherSpecialNotes: {
        notes: '',
        files: []
    }
})

// 检查菜单项是否存在的辅助函数
const hasMenuItem = (menuId: string) => {
    return menuItems.value.some((item) => item.id === menuId)
}

// 菜单配置数据
const menuItems = ref([
    {
        id: 'basic-info',
        title: '基本情况',
        saveStatusKey: 'basicInfo'
    },
    {
        id: 'other-notes',
        title: '企业规模',
        saveStatusKey: 'otherNotes'
    },
    // {
    //     id: 'qualification',
    //     title: '企业资质表',
    //     saveStatusKey: 'qualification'
    // },
    {
        id: 'products',
        title: '主营产品情况',
        saveStatusKey: 'products'
    },
    {
        id: 'quality',
        title: '质量业绩',
        saveStatusKey: 'Quality'
    },
    {
        id: 'raw-materials',
        title: '主要原材料及供应商',
        saveStatusKey: 'rawMaterials'
    },
    {
        id: 'manufacturing',
        title: '生产制造过程绩效',
        saveStatusKey: 'manufacturing'
    },
    {
        id: 'ProductionEquipment',
        title: '生产设备',
        saveStatusKey: 'ProductionEquipment'
    },
    {
        id: 'inspectionEquipment',
        title: '检验设备',
        saveStatusKey: 'inspectionEquipment'
    },
    {
        id: 'company-scale',
        title: '其他特别说明',
        saveStatusKey: 'companyScale'
    }
])

// 保存状态数据
const saveStatus = reactive({
    basicInfo: false,
    otherNotes: false,
    qualification: false,
    productsQuality: false,
    rawMaterials: false,
    manufacturing: false,
    equipment: false,
    companyScale: false
})

// 导航相关
const scrollToSection = (sectionId: string) => {
    // 设置滚动标志，防止滚动监听干扰
    isScrolling = true

    // 更新激活的菜单项
    activeMenuItem.value = sectionId

    const element = document.getElementById(sectionId)
    if (element) {
        element.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
        })

        // 滚动完成后重置标志
        setTimeout(() => {
            isScrolling = false
        }, 1000)
    } else {
        isScrolling = false
    }
}

// 滚动监听相关
let scrollContainer: HTMLElement | null = null
let isScrolling = false

// 监听滚动事件，更新激活的菜单项
const handleScroll = () => {
    if (isScrolling) return

    const sections = menuItems.value
        .map((item) => ({
            id: item.id,
            element: document.getElementById(item.id)
        }))
        .filter((section) => section.element)

    if (sections.length === 0) return

    // 获取滚动容器的滚动位置
    const scrollTop = scrollContainer?.scrollTop || window.pageYOffset
    const containerHeight = scrollContainer?.clientHeight || window.innerHeight
    const scrollHeight = scrollContainer?.scrollHeight || document.documentElement.scrollHeight

    // 检查是否滚动到底部（距离底部100px以内）
    const isNearBottom = scrollTop + containerHeight >= scrollHeight - 100

    // 如果接近底部，直接选中最后一个section
    if (isNearBottom) {
        const lastSection = sections[sections.length - 1]
        if (lastSection && activeMenuItem.value !== lastSection.id) {
            activeMenuItem.value = lastSection.id
        }
        return
    }

    // 找到当前可见的section
    let currentSection = sections[0]

    for (const section of sections) {
        if (!section.element) continue

        const rect = section.element.getBoundingClientRect()
        const elementTop = rect.top + scrollTop
        const elementBottom = elementTop + rect.height

        // 如果section的顶部在视口范围内
        if (elementTop <= scrollTop + containerHeight / 2 && elementBottom > scrollTop) {
            currentSection = section
        }
    }

    // 更新激活的菜单项
    if (currentSection && activeMenuItem.value !== currentSection.id) {
        activeMenuItem.value = currentSection.id
    }
}

// 防抖处理滚动事件
const debouncedHandleScroll = () => {
    if (isScrolling) return
    requestAnimationFrame(() => {
        handleScroll()
    })
}

// 文件操作
const previewFile = (row: any) => {
    ElMessage.info(`预览文件: ${row.attachment}`)
}

const downloadFile = (row: any) => {
    ElMessage.success(`下载文件: ${row.attachment}`)
}
// 新增获取基本信息
const addGetBasicInfo = async () => {
    detailLoading.value = true
    const { ...rest } = (await getCompanyInfo()) as AddEditForm
    if (rest.state) {
        detailLoading.value = false
        if (rest.value.timeLimit == 1) {
            addEditForm.companyRegdateEnd = '1'
        }
        if (rest.value.timeLimit == 0) {
            addEditForm.companyRegdateEnd = rest.value.endBusinessTerm
        }
        addEditForm.enterpriseName = rest.value.enterpriseName
        addEditForm.enterpriseCode = rest.value.enterpriseCode
        addEditForm.enterpriseId = rest.value.enterpriseId
        addEditForm.registeredCapital = rest.value.registeredAmount
        addEditForm.companyEbe = rest.value.legalRepresentative
        addEditForm.companyRegdate = rest.value.establishmentTime
        addEditForm.companyAddr = rest.value.address
        addEditForm.ownerType = rest.value.enterpriseType
        addEditForm.companyOrgcode = rest.value.creditCode
        addEditForm.basicInformation.companyWebsite = rest.value.enterpriseWebsite
        addEditForm.enterpriseShortName = rest.value.enterpriseShortName
        addEditForm.businessScope = rest.value.businessScope
    } else {
        detailLoading.value = false
    }
}

// 数据获取
const getDetail = async (id: string) => {
    detailLoading.value = true
    // 获取详情逻辑
    const { ...rest } = (await dataDetail(id)) as AddEditForm
    if (rest.state) {
        detailLoading.value = false
        Object.assign(addEditForm, {
            ...rest.value,
            registeredCapitalType: String(rest.value.registeredCapitalType || '1')
        })
        // 正确合并 basicInformation 对象，确保所有字段都能正确回显
        if (rest.value.basicInformation) {
            Object.assign(addEditForm.basicInformation, rest.value.basicInformation)
        }
        if (addEditForm.qualification && addEditForm.qualification.length === 0) {
            addEditForm.qualification.push({
                id: 1,
                qualificationCategoryName: '',
                qualificationCategoryCode: '',
                name: '',
                code: '',
                qualificationCode: '',
                qualificationAttribution: '',
                issueDate: '',
                validUntil: '',
                files: []
            })
        }
        if (addEditForm.prodEquipment && addEditForm.prodEquipment.length === 0) {
            addEditForm.prodEquipment.push({
                name: '',
                capacity: '',
                num: '',
                manufacturer: '',
                serviceLife: '',
                deviceType: 1,
                files: []
            })
        }
        if (addEditForm.monitEquipment && addEditForm.monitEquipment.length === 0) {
            addEditForm.monitEquipment.push({
                name: '',
                capacity: '',
                num: '',
                manufacturer: '',
                serviceLife: '',
                deviceType: 2,
                files: []
            })
        }
        if (addEditForm.suppliers && addEditForm.suppliers.length === 0) {
            addEditForm.suppliers.push({
                mainRawMaterialName: '',
                enterpriseName: '',
                previousYearPerformance: ''
            })
        }
        if (addEditForm.salesStatus && addEditForm.salesStatus.length === 0) {
            addEditForm.salesStatus.push({
                id: 1,
                productCategory: '',
                specifications: '',
                pastThreeYearsAnnualProduction: '',
                deliveryCycle: '',
                mainCustomersMarkets: ''
            })
        }
        addGetBasicInfo()
    } else {
        detailLoading.value = false
    }
    console.log(addEditForm, 'addEditForm')
    console.log('获取详情:', id)
}

//主营产品生产销售情况
const addProductsQuality = () => {
    addEditForm.salesStatus.push({
        id: 1,
        productCategory: '',
        specifications: '',
        pastThreeYearsAnnualProduction: '',
        deliveryCycle: '',
        mainCustomersMarkets: ''
    })
}

const deleteProductsQuality = (index: number) => {
    ElMessageBox.confirm('确定要删除这条主营产品生产销售情况吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(() => {
            addEditForm.salesStatus.splice(index, 1)
            ElMessage.success('删除成功')
        })
        .catch(() => {
            ElMessage.info('已取消删除')
        })
}
const deleteComplaints = (index: number) => {
    ElMessageBox.confirm('确定要删除这条客户抱怨吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(() => {
            addEditForm.performance.complaints.splice(index, 1)
            ElMessage.success('删除成功')
        })
        .catch(() => {
            ElMessage.info('已取消删除')
        })
}
const deleteQualityPerformance = (index: number) => {
    ElMessageBox.confirm('确定要删除这条主营产品质量表现吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(() => {
            addEditForm.performance.qualityPerformance.splice(index, 1)
            ElMessage.success('删除成功')
        })
        .catch(() => {
            ElMessage.info('已取消删除')
        })
}
//主营产品质量表现
const addQualityPerformance = () => {
    addEditForm.performance.qualityPerformance.push({
        id: 1,
        productName: '',
        lastYearQualityTargetActualValue: '',
        lastYearQualityTargetIndexValue: '',
        thisYearQualityTargetActualValue: '',
        thisYearQualityTargetIndexValue: ''
    })
}
const addComplaints = () => {
    addEditForm.performance.complaints.push({
        id: 1,
        controlMeasures: '',
        customerComplaints: '',
        proposedTime: ''
    })
}

//主要原材料信息
const addMaterialsAndSuppliers = () => {
    addEditForm.suppliers.push({
        id: 1,
        mainRawMaterialName: '',
        enterpriseName: '',
        previousYearPerformance: ''
    })
}

const deleteMaterialsAndSuppliers = (index: number) => {
    ElMessageBox.confirm('确定要删除这条主要原材料信息吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(() => {
            addEditForm.suppliers.splice(index, 1)
            ElMessage.success('删除成功')
        })
        .catch(() => {
            ElMessage.info('已取消删除')
        })
}

//生产制造过程绩效
const addManufacturingPerformance = () => {
    addEditForm.processPerformance.flow.push({
        id: 1,
        keyImportantProcess: '',
        controlParametersCharacteristics: '',
        processCapabilityIndex: ''
    })
}
const deleteManufacturingPerformance = (index: number) => {
    ElMessageBox.confirm('确定要删除这条生产制造过程绩效吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(() => {
            addEditForm.processPerformance.flow.splice(index, 1)
            ElMessage.success('删除成功')
        })
        .catch(() => {
            ElMessage.info('已取消删除')
        })
}

//主要生产设备
const addMainProductionEquipment = () => {
    addEditForm.prodEquipment.push({
        id: 1,
        name: '',
        capacity: '',
        num: '',
        manufacturer: '',
        serviceLife: '',
        deviceType: 1,
        files: []
    })
}

//主要检验设备
const addMainInspectionEquipmentNew = () => {
    addEditForm.monitEquipment.push({
        id: 1,
        name: '',
        capacity: '',
        num: '',
        manufacturer: '',
        serviceLife: '',
        deviceType: 2,
        files: []
    })
}
const deleteMainProductionEquipment = (index: number) => {
    ElMessageBox.confirm('确定要删除这条主要生产设备吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(() => {
            addEditForm.prodEquipment.splice(index, 1)
            ElMessage.success('删除成功')
        })
        .catch(() => {
            ElMessage.info('已取消删除')
        })
}

const deleteMainInspectionEquipment = (index: number) => {
    ElMessageBox.confirm('确定要删除这条主要检验设备吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(() => {
            addEditForm.monitEquipment.splice(index, 1)
            ElMessage.success('删除成功')
        })
        .catch(() => {
            ElMessage.info('已取消删除')
        })
}

//附件上传

const fileLoading = ref<Boolean>(false)
const readyToUpload = ref<Boolean>(false)
const fileList = ref<FileItem[]>([])
const typeRegularArr = [
    'mp4',
    'mov',
    'avi',
    'mkv',
    'wmv',
    'flv',
    'mpeg',
    'mpg',
    '3gp',
    'webm', // 视频格式
    'doc',
    'docx',
    'xls',
    'xlsx',
    'ppt',
    'pptx',
    'txt',
    'rtf',
    'pdf', // 文档格式
    'jpg',
    'png',
    'bmp',
    'gif' // 图像文件
]
const handleStartUpload = () => {
    fileLoading.value = true
}

const handlePerformanceFileChange = (files: [FileItem]) => {
    addEditForm.performance.files = files.map((item) => item as FileItem)
}

const handleProcessPerformanceFileChange = (files: [FileItem]) => {
    if (addEditForm.processPerformance) {
        addEditForm.processPerformance.files = files.map((item) => item as FileItem)
    }
}

const handleInspectionEquipmentRowFileChange = (files: [FileItem], index: number) => {
    if (addEditForm.monitEquipment[index]) {
        addEditForm.monitEquipment[index].files = files.map((item) => item as FileItem)
    }
}

const handleOtherSpecialNotesFileChange = (files: [FileItem]) => {
    addEditForm.otherSpecialNotes.files = files.map((item) => item as FileItem)
}

const handleProductionEquipmentRowFileChange = (files: [FileItem], index: number) => {
    if (addEditForm.prodEquipment[index]) {
        addEditForm.prodEquipment[index].files = files.map((item) => item as FileItem)
    }
}

// 检查附件上传状态
const checkFileUploadStatus = () => {
    const uploadingFiles = []

    // 检查质量业绩附件
    if (addEditForm.performance.files?.some((file) => file.status === 'uploading')) {
        uploadingFiles.push('质量业绩附件')
    }

    // 检查生产制造过程绩效附件
    if (addEditForm.processPerformance.files?.some((file) => file.status === 'uploading')) {
        uploadingFiles.push('生产制造过程绩效附件')
    }

    // 检查其他特别说明附件
    if (addEditForm.otherSpecialNotes.files?.some((file) => file.status === 'uploading')) {
        uploadingFiles.push('其他特别说明附件')
    }

    // 检查生产设备附件
    addEditForm.prodEquipment?.forEach((equipment, index) => {
        if (equipment.files?.some((file) => file.status === 'uploading')) {
            uploadingFiles.push(`生产设备${index + 1}附件`)
        }
    })

    // 检查检验设备附件
    addEditForm.monitEquipment?.forEach((equipment, index) => {
        if (equipment.files?.some((file) => file.status === 'uploading')) {
            uploadingFiles.push(`检验设备${index + 1}附件`)
        }
    })

    return uploadingFiles
}

// 表单操作
const handleSave = (code: string) => {
    addEditFormRef.value?.validate(async (valid, object) => {
        if (!valid) {
            ElMessage.warning(
                `有${Object.keys(object || {}).length}个字段未通过校验，请正确填写表单内容。`
            )
            return
        }

        // 检查附件上传状态
        const uploadingFiles = checkFileUploadStatus()
        if (uploadingFiles.length > 0) {
            ElMessage.warning(`请等待以下附件上传完成后再保存：${uploadingFiles.join('、')}`)
            return
        }

        // 更新当前激活菜单项的保存状态
        try {
            if (code != 0) {
                addEditForm.code = code
            } else {
                addEditForm.code = 0
            }
            if (addEditForm.qualification && addEditForm.qualification.length > 0) {
                addEditForm.qualification.forEach((item) => {
                    if (item.id) {
                        delete item.id
                    }
                })
            }
            btnLoading.value = true
            const value = await dataUpdate(addEditForm)
            if (value.state) {
                ElMessage.success('保存成功')
                updateSaveStatus(activeMenuItem.value)
                addEditForm.id = value.value.id
                // handleCancel()
            }
        } finally {
            btnLoading.value = false // 无论成功或失败，都关闭加载状态
        }
    })
}

const handleSubmit = () => {
    addEditFormRef.value?.validate(async (valid, object) => {
        if (!valid) {
            ElMessage.warning(
                `有${Object.keys(object || {}).length}个字段未通过校验，请正确填写表单内容。`
            )
            return
        }

        // 检查附件上传状态
        const uploadingFiles = checkFileUploadStatus()
        if (uploadingFiles.length > 0) {
            ElMessage.warning(`请等待以下附件上传完成后再提交：${uploadingFiles.join('、')}`)
            return
        }

        // 更新当前激活菜单项的保存状态
        updateSaveStatus(activeMenuItem.value)
        ElMessage.success('保存成功')
        handleCancel()
    })
}

// 更新保存状态
const updateSaveStatus = (sectionId: string) => {
    const menuItem = menuItems.value.find((item) => item.id === sectionId)
    if (menuItem) {
        saveStatus[menuItem.saveStatusKey as keyof typeof saveStatus] = true
    }
}

const handleCancel = () => {
    router.push({ name: 'BasicInfoChangeApplication' })
}

// 获取保存状态样式类
const getSaveStatusClass = (sectionId: string) => {
    const menuItem = menuItems.value.find((item) => item.id === sectionId)
    if (!menuItem) return 'save-icon not-saved'

    const isSaved = saveStatus[menuItem.saveStatusKey as keyof typeof saveStatus]
    return isSaved ? 'save-icon saved' : 'save-icon not-saved'
}

// 获取保存状态
const getSaveStatus = (sectionId: string) => {
    const menuItem = menuItems.value.find((item) => item.id === sectionId)
    if (!menuItem) return false

    return saveStatus[menuItem.saveStatusKey as keyof typeof saveStatus]
}

onMounted(() => {
    const storedData = localStorage.getItem('user')
    if (storedData) {
        userDetail.value = JSON.parse(storedData)
    }
    addEditForm.supplierCode = userDetail.value.userDetail.org[0].orgCode
    addEditForm.supplierId = userDetail.value.userDetail.org[0].orgId
    addEditForm.enterpriseCode = userDetail.value.userDetail.org[0].orgCode
    addEditForm.enterpriseId = userDetail.value.userDetail.org[0].orgId
    addEditForm.enterpriseName = userDetail.value.userDetail.org[0].orgName
    if (route.query.id) {
        getDetail(route.query.id)
    } else {
        addGetBasicInfo()
    }

    readyToUpload.value = true

    // 确保activeMenuItem指向一个存在的菜单项
    if (!hasMenuItem(activeMenuItem.value) && menuItems.value.length > 0) {
        activeMenuItem.value = menuItems.value[0].id
    }
    // 设置滚动监听
    setTimeout(() => {
        // 查找滚动容器
        scrollContainer = document.querySelector('.page-form') as HTMLElement

        // 添加滚动监听器
        if (scrollContainer) {
            scrollContainer.addEventListener('scroll', debouncedHandleScroll)
        } else {
            // 如果没有找到滚动容器，监听window滚动
            window.addEventListener('scroll', debouncedHandleScroll)
        }

        // 初始化滚动位置
        const element = document.getElementById(activeMenuItem.value)
        if (element) {
            element.scrollIntoView({
                behavior: 'instant',
                block: 'start'
            })
        }
    }, 100)
})

onUnmounted(() => {
    // 清理滚动监听器
    if (scrollContainer) {
        scrollContainer.removeEventListener('scroll', debouncedHandleScroll)
    } else {
        window.removeEventListener('scroll', debouncedHandleScroll)
    }
})
</script>

<style lang="scss" scoped>
.edit-add-detail {
    .form-content {
        display: flex;
        flex-direction: column;
        align-items: center;

        .page-form {
            width: 80%;
            overflow-x: hidden;
            overflow-y: auto;
            max-height: 100%;
            padding: 0 20px;

            /* 隐藏滚动条样式 */
            &::-webkit-scrollbar {
                width: 0;
                height: 0;
            }

            &::-webkit-scrollbar-track {
                background: transparent;
            }

            &::-webkit-scrollbar-thumb {
                background: transparent;
            }

            /* Firefox 隐藏滚动条 */
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .step-container {
            width: 100%;
            margin-bottom: 20px;
            padding: 20px;
            border-radius: 8px;
        }

        .main-content {
            display: flex;
            gap: 20px;
            width: 100%;
            padding-bottom: 20px;

            .sidebar-menu {
                width: 180px;
                background-color: var(--theme-search-wrapper-bg);
                box-shadow: 0px 0px 20px 0px rgba(0, 36, 65, 0.2);
                border-radius: 16px;
                padding: 10px 20px 20px 20px;
                height: fit-content;
                position: sticky;
                top: 10px;

                .menu-section {
                    margin-bottom: 30px;

                    .menu-title {
                        font-size: 16px;
                        font-weight: bold;
                        color: var(--theme-text-primary);
                        white-space: pre;
                    }

                    .menu-items {
                        .menu-item {
                            font-size: 14px;
                            padding: 10px 15px;
                            margin-bottom: 5px;
                            cursor: pointer;
                            border-radius: 4px;
                            transition: all 0.3s ease;
                            color: var(--theme-text-primary);
                            display: flex;
                            justify-content: space-between;
                            align-items: center;

                            &:hover {
                                background-color: var(--theme-system-module-1);
                                color: var(--theme-primary);
                            }

                            &.active {
                                background-color: var(--theme-primary);
                                color: white;
                            }

                            .save-icon {
                                font-size: 20px;

                                &.saved {
                                    color: #67c23a; /* 绿色 */
                                }

                                &.not-saved {
                                    color: #c0c4cc; /* 灰色 */
                                }
                            }
                        }
                    }
                }
            }

            .content-area {
                width: calc(100% - 180px - 80px);
                background-color: var(--theme-form-content-bg);
                border-radius: 8px;
                padding: 20px 20px 0 20px;

                .content-section {
                    margin-bottom: 20px;

                    .content-title {
                        margin-bottom: 5px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .content-title-left {
                            font-size: 14px;
                            font-weight: bold;
                            color: var(--theme-text-primary);
                            display: flex;
                            align-items: center;
                        }

                        .content-title-left::before {
                            content: '';
                            display: inline-block;
                            width: 4px;
                            height: 18px;
                            background-color: #1a8cff;
                            border-radius: 2px;
                            margin-right: 8px;
                        }
                    }

                    .site-inspection-content {
                        background-color: #f5f8fa;
                        padding: 16px;
                        box-sizing: border-box;

                        .review-requirements {
                            margin-bottom: 10px;

                            .review-requirements-title {
                                color: var(--theme-text-primary);
                                margin-bottom: 5px;
                                font-size: 14px;
                                font-weight: bold;
                            }

                            ul {
                                list-style: none;

                                li {
                                    color: var(--theme-text-primary);
                                    line-height: 25px;
                                    font-size: 14px;
                                }
                            }
                        }
                    }

                    .section-content {
                        color: var(--theme-text-inverse);

                        .review-actions {
                            display: flex;
                            padding: 10px 0 10px 10px;
                        }
                    }
                }
            }
        }
    }
}

// 表格相关样式
.operation-buttons {
    display: flex;
    justify-content: center;
}

.table-header {
    margin: 10px 0 10px 10px;
    display: flex;
    justify-content: flex-start;
}

.attachment-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;

    .attachment-name {
        font-size: 12px;
        color: var(--theme-text-color);
    }
}
:deep(.registered-capital-type-select) {
    width: 120px !important;
    
    .el-select__wrapper {
        width: 120px !important;
    }
    
    .el-select__selection {
        width: 100px !important;
    }
}
</style>
