<template>
    <div class="edit-add-detail">
        <div v-loading="detailLoading" class="form-content" element-loading-text="加载中...">
            <div class="page-form">
                <!-- 步骤条 -->
                <div class="step-container">
                    <el-steps
                        :active="currentStep"
                        align-center
                        finish-status="success"
                        process-status="finish"
                    >
                        <el-step title="1 供应商申请"></el-step>
                        <el-step title="2 基本情况审核"></el-step>
                        <el-step title="3 评审分配"></el-step>
                        <el-step title="4 现场评审"></el-step>
                        <el-step title="5 评定报告"></el-step>
                        <el-step title="6 样品试用"></el-step>
                        <el-step title="7 合格供应商/淘汰"></el-step>
                    </el-steps>
                </div>

                <!-- 主要内容区域 -->
                <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>
                                </div>
                            </div>
                        </div>
                        <div class="menu-section">
                            <el-divider content-position="center">
                                <div class="menu-title">评审信息</div>
                            </el-divider>
                            <div class="menu-items">
                                <div
                                    :class="{ active: activeMenuItem === 'audit-info' }"
                                    class="menu-item"
                                    @click="scrollToSection('audit-info')"
                                >
                                    <span>供应商信息审核</span>
                                </div>
                            </div>
                            <div class="menu-items">
                                <div
                                    :class="{ active: activeMenuItem === 'site-inspection' }"
                                    class="menu-item"
                                    @click="scrollToSection('site-inspection')"
                                >
                                    <span>现场评审</span>
                                </div>
                            </div>
                            <div class="menu-items">
                                <div
                                    :class="{ active: activeMenuItem === 'evaluation-report' }"
                                    class="menu-item"
                                    @click="scrollToSection('evaluation-report')"
                                >
                                    <span>评定报告</span>
                                </div>
                            </div>
                            <div class="menu-items">
                                <div
                                    :class="{ active: activeMenuItem === 'trial-report' }"
                                    class="menu-item"
                                    @click="scrollToSection('trial-report')"
                                >
                                    <span>试用报告</span>
                                </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('access-application')"
                                    id="access-application"
                                    class="content-section"
                                >
                                    <div class="content-title">
                                        <div class="content-title-left">准入申请信息</div>
                                    </div>
                                    <el-collapse-item name="access-application">
                                        <template #title>
                                            <div class="section-title">
                                                <el-icon>
                                                    <Document />
                                                </el-icon>
                                                <span>推荐供应商</span>
                                            </div>
                                        </template>
                                        <div
                                            v-if="detailForm.createMethod === '2'"
                                            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="enterpriseName">
                                                        {{ detailForm.enterpriseName || '-' }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item>
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>
                                                        申请人
                                                    </template>
                                                    <el-form-item prop="referrer"
                                                        >{{ detailForm.referrer || '-' }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item>
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>
                                                        申请单位
                                                    </template>
                                                    <el-form-item prop="recommendedDepartment">
                                                        {{
                                                            detailForm.recommendedDepartment || '-'
                                                        }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item :span="2">
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>
                                                        申请时间
                                                    </template>
                                                    <el-form-item prop="submitDate">
                                                        {{ detailForm.submitDate || '-' }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item :span="2">
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>
                                                        拟供应物资类型
                                                    </template>
                                                    <el-form-item prop="gategoryNames">
                                                        {{ detailForm.gategoryNames || '-' }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                            </el-descriptions>
                                        </div>
                                        <div
                                            v-if="detailForm.createMethod === '3'"
                                            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="supplierName">
                                                        {{ detailForm.supplierName || '-' }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item>
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>
                                                        推荐人
                                                    </template>
                                                    <el-form-item prop="referrer"
                                                        >{{ detailForm.referrer || '-' }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item>
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>
                                                        推荐单位
                                                    </template>
                                                    <el-form-item prop="recommendedDepartment">
                                                        {{
                                                            detailForm.recommendedDepartment || '-'
                                                        }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item :span="2">
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>
                                                        推荐时间
                                                    </template>
                                                    <el-form-item prop="applyDate">
                                                        {{ detailForm.applyDate || '-' }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item :span="2">
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>
                                                        拟供应物资类型
                                                    </template>
                                                    <el-form-item prop="gategoryNames">
                                                        {{ detailForm.gategoryNames || '-' }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item :span="2">
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>
                                                        供方基本情况调查表内容
                                                    </template>
                                                    <el-form-item prop="accessConfigurationName">
                                                        {{
                                                            detailForm.accessConfigurationName ||
                                                            '-'
                                                        }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item :span="2">
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>
                                                        推荐理由
                                                    </template>
                                                    <el-form-item prop="drivingReasons">
                                                        {{ detailForm.drivingReasons || '-' }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item :span="2">
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>
                                                        供应商合作意愿
                                                    </template>
                                                    <el-form-item prop="cooperateWillingness">
                                                        {{
                                                            dictionaryEscape(
                                                                'zr-gyshzyy',
                                                                detailForm.cooperateWillingness
                                                            ) || '-'
                                                        }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item :span="2">
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>
                                                        简要说明
                                                    </template>
                                                    <el-form-item prop="briefDescription">
                                                        {{ detailForm.briefDescription || '-' }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                            </el-descriptions>
                                        </div>
                                    </el-collapse-item>
                                </div>

                                <!-- 基本情况 -->
                                <div
                                    v-if="hasMenuItem('basic-info')"
                                    id="basic-info"
                                    class="content-section"
                                >
                                    <div class="content-title">
                                        <div class="content-title-left">基本情况</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">
                                                        {{
                                                            basicInfoDetailForm.enterpriseName ||
                                                            '-'
                                                        }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item>
                                                    <template #label> 供应商简称</template>
                                                    <el-form-item prop="enterpriseShortName">
                                                        {{
                                                            basicInfoDetailForm.enterpriseShortName ||
                                                            '-'
                                                        }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item>
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>类型
                                                    </template>
                                                    <el-form-item prop="enterpriseType">
                                                        {{
                                                            basicInfoDetailForm.enterpriseType ||
                                                            '-'
                                                        }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item>
                                                    <template #label>
                                                        <span class="required-asterisk">*</span
                                                        >注册资本
                                                    </template>
                                                    <el-form-item prop="registeredCapital">
                                                        {{
                                                            (basicInfoDetailForm.registeredAmount ||
                                                                '') +
                                                            (dictionaryEscape(
                                                                'zczbdw',
                                                                String(
                                                                    basicInfoDetailForm.registeredCapitalType
                                                                )
                                                            ) || '万元')
                                                        }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item>
                                                    <template #label>
                                                        <span class="required-asterisk">*</span
                                                        >法定代表人
                                                    </template>
                                                    <el-form-item prop="legalRepresentative">
                                                        {{
                                                            basicInfoDetailForm.legalRepresentative ||
                                                            '-'
                                                        }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item>
                                                    <template #label>
                                                        <span class="required-asterisk">*</span
                                                        >统一社会信用代码
                                                    </template>
                                                    <el-form-item prop="creditCode">
                                                        {{ basicInfoDetailForm.creditCode || '-' }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item>
                                                    <template #label>
                                                        <span class="required-asterisk">*</span
                                                        >成立日期
                                                    </template>
                                                    <el-form-item prop="establishmentTime">
                                                        {{
                                                            basicInfoDetailForm.establishmentTime ||
                                                            '-'
                                                        }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item>
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>
                                                        有效期至
                                                    </template>
                                                    <el-form-item prop="openingBank">
                                                        {{
                                                            basicInfoDetailForm.endBusinessTerm ||
                                                            '-'
                                                        }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item :span="2">
                                                    <template #label>
                                                        <span class="required-asterisk">*</span
                                                        >注册地址
                                                    </template>
                                                    <el-form-item prop="bank">
                                                        {{ basicInfoDetailForm.address || '-' }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item :span="2">
                                                    <template #label> 公司网址</template>
                                                    <el-form-item prop="companyOrgcode">
                                                        {{
                                                            basicInfoDetailForm.companyWebsite ||
                                                            '-'
                                                        }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item :span="2">
                                                    <template #label>
                                                        <span class="required-asterisk">*</span
                                                        >经营范围
                                                    </template>
                                                    <el-form-item prop="businessScope">
                                                        {{
                                                            basicInfoDetailForm.businessScope || '-'
                                                        }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item>
                                                    <template #label>
                                                        <span class="required-asterisk">*</span
                                                        >开户银行
                                                    </template>
                                                    <el-form-item prop="openingBank">
                                                        {{
                                                            detailForm.information.openingBank ||
                                                            '-'
                                                        }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item>
                                                    <template #label>
                                                        <span class="required-asterisk">*</span
                                                        >银行账户
                                                    </template>
                                                    <el-form-item prop="bank">
                                                        {{ detailForm.information.bank || '-' }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item :span="2">
                                                    <template #label>
                                                        <span class="required-asterisk">*</span
                                                        >生产地址
                                                    </template>
                                                    <el-form-item prop="productionAddress">
                                                        {{
                                                            detailForm.information
                                                                .productionAddress || '-'
                                                        }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                            </el-descriptions>
                                        </div>
                                    </el-collapse-item>
                                </div>

                                <!-- 人员信息 -->
                                <div
                                    v-if="hasMenuItem('personnel-info')"
                                    id="personnel-info"
                                    class="content-section"
                                >
                                    <div class="content-title">
                                        <div class="content-title-left">人员信息</div>
                                    </div>
                                    <el-collapse-item name="personnel-info">
                                        <template #title>
                                            <div class="section-title">
                                                <el-icon>
                                                    <Document />
                                                </el-icon>
                                                <span>人员信息</span>
                                            </div>
                                        </template>
                                        <div class="section-content">
                                            <el-table
                                                :data="detailForm.enterprisePersonnelList"
                                                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="姓名"
                                                    prop="fullname"
                                                >
                                                </el-table-column>

                                                <el-table-column
                                                    align="center"
                                                    label="手机号"
                                                    prop="mobile"
                                                >
                                                </el-table-column>

                                                <el-table-column
                                                    align="center"
                                                    label="人员类型"
                                                    prop="duties"
                                                >
                                                    <template #default="{ row }">
                                                        {{
                                                            dictionaryEscape(
                                                                'ryxx-rylx',
                                                                row.duties
                                                            ) || '-'
                                                        }}
                                                    </template>
                                                </el-table-column>

                                                <el-table-column
                                                    align="center"
                                                    label="性别"
                                                    prop="sex"
                                                >
                                                    <template #default="{ row }">
                                                        {{
                                                            dictionaryEscape('ryxx-xb', row.sex) ||
                                                            '-'
                                                        }}
                                                    </template>
                                                </el-table-column>

                                                <el-table-column
                                                    align="center"
                                                    label="邮箱"
                                                    prop="email"
                                                >
                                                </el-table-column>
                                            </el-table>
                                        </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>
                                    <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">
                                                        {{
                                                            detailForm.information.fixedAssets
                                                                ? detailForm.information
                                                                      .fixedAssets + '万元（RMB）'
                                                                : '-'
                                                        }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item>
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>
                                                        上年销售额
                                                    </template>
                                                    <el-form-item prop="lastYearSales">
                                                        {{
                                                            detailForm.information.lastYearSales
                                                                ? detailForm.information
                                                                      .lastYearSales + '万元（RMB）'
                                                                : '-'
                                                        }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item>
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>
                                                        主营产品上年度销量
                                                    </template>
                                                    <el-form-item prop="mainProductsLastYearSales">
                                                        {{
                                                            detailForm.information
                                                                .mainProductsLastYearSales || '-'
                                                        }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item>
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>
                                                        主营产品上年度销量额
                                                    </template>
                                                    <el-form-item
                                                        prop="mainProductsLastYearSalesRevenue"
                                                    >
                                                        {{
                                                            detailForm.information
                                                                .mainProductsLastYearSalesRevenue
                                                                ? detailForm.information
                                                                      .mainProductsLastYearSalesRevenue +
                                                                  '万元（RMB）'
                                                                : '-'
                                                        }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item>
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>
                                                        员工人数
                                                    </template>
                                                    <el-form-item prop="employeesNumber">
                                                        {{
                                                            detailForm.information.employeesNumber
                                                                ? detailForm.information
                                                                      .employeesNumber + '人'
                                                                : '-'
                                                        }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item>
                                                    <template #label> 生产作业人员</template>
                                                    <el-form-item prop="productionOperators">
                                                        {{
                                                            detailForm.information
                                                                .productionOperators
                                                                ? detailForm.information
                                                                      .productionOperators + '人'
                                                                : '-'
                                                        }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item>
                                                    <template #label> 技术工程师</template>
                                                    <el-form-item prop="technicalEngineer">
                                                        {{
                                                            detailForm.information.technicalEngineer
                                                                ? detailForm.information
                                                                      .technicalEngineer + '人'
                                                                : '-'
                                                        }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item>
                                                    <template #label> 质量管理人员</template>
                                                    <el-form-item prop="qualityManagementPersonnel">
                                                        {{
                                                            detailForm.information
                                                                .qualityManagementPersonnel
                                                                ? detailForm.information
                                                                      .qualityManagementPersonnel +
                                                                  '人'
                                                                : '-'
                                                        }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                            </el-descriptions>
                                        </div>
                                    </el-collapse-item>
                                </div>

                                <!-- 企业资质 -->
                                <div
                                    v-if="hasMenuItem('qualification')"
                                    id="qualification"
                                    class="content-section"
                                >
                                    <div class="content-title">
                                        <div class="content-title-left">企业资质</div>
                                    </div>
                                    <el-collapse-item name="qualification">
                                        <template #title>
                                            <div class="section-title">
                                                <el-icon>
                                                    <Document />
                                                </el-icon>
                                                <span>准入资质</span>
                                            </div>
                                        </template>
                                        <div class="section-content">
                                            <el-table
                                                :data="
                                                    detailForm.qualificationMap.accessQualifications
                                                "
                                                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="资质类型"
                                                    width="140"
                                                >
                                                    <template #default="{ row, $index }">
                                                        {{ row.qualificationCategoryName || '-' }}
                                                    </template>
                                                </el-table-column>

                                                <el-table-column
                                                    align="center"
                                                    label="资质名称"
                                                    width="140"
                                                >
                                                    <template #default="{ row }">
                                                        {{ row.name || '-' }}
                                                    </template>
                                                </el-table-column>

                                                <el-table-column
                                                    align="center"
                                                    label="资质编码"
                                                    width="140"
                                                >
                                                    <template #default="{ row }">
                                                        {{ row.code || '-' }}
                                                    </template>
                                                </el-table-column>

                                                <el-table-column
                                                    align="center"
                                                    label="有效开始期"
                                                    width="140"
                                                >
                                                    <template #default="{ row }">
                                                        {{ row.issueDate || '-' }}
                                                    </template>
                                                </el-table-column>

                                                <el-table-column
                                                    align="center"
                                                    label="有效截止期"
                                                    width="140"
                                                >
                                                    <template #default="{ row }">
                                                        {{ row.validUntil || '-' }}
                                                    </template>
                                                </el-table-column>
                                                <el-table-column align="center" label="附件">
                                                    <template #default="{ row, $index }">
                                                        <CustomUploader
                                                            :disabled="true"
                                                            :fileList="row.files"
                                                            :previewAndDownload="false"
                                                            :typeRegularArr="typeRegularArr"
                                                        >
                                                        </CustomUploader>
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                        </div>
                                    </el-collapse-item>
                                    <el-collapse-item name="qualification">
                                        <template #title>
                                            <div class="section-title">
                                                <el-icon>
                                                    <Document />
                                                </el-icon>
                                                <span>代理资质</span>
                                            </div>
                                        </template>
                                        <div class="section-content">
                                            <el-table
                                                :data="
                                                    detailForm.qualificationMap.agencyQualification
                                                "
                                                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="资质类型"
                                                    width="140"
                                                >
                                                    <template #default="{ row }">
                                                        {{ row.qualificationCategoryName || '-' }}
                                                    </template>
                                                </el-table-column>

                                                <el-table-column
                                                    align="center"
                                                    label="资质名称"
                                                    width="140"
                                                >
                                                    <template #default="{ row }">
                                                        {{ row.name || '-' }}
                                                    </template>
                                                </el-table-column>

                                                <el-table-column
                                                    align="center"
                                                    label="资质编码"
                                                    width="140"
                                                >
                                                    <template #default="{ row }">
                                                        {{ row.code || '-' }}
                                                    </template>
                                                </el-table-column>

                                                <el-table-column
                                                    align="center"
                                                    label="有效开始期"
                                                    width="140"
                                                >
                                                    <template #default="{ row }">
                                                        {{ row.issueDate || '-' }}
                                                    </template>
                                                </el-table-column>

                                                <el-table-column
                                                    align="center"
                                                    label="有效截止期"
                                                    width="140"
                                                >
                                                    <template #default="{ row }">
                                                        {{ row.validUntil || '-' }}
                                                    </template>
                                                </el-table-column>
                                                <el-table-column align="center" label="附件">
                                                    <template #default="{ row, $index }">
                                                        <CustomUploader
                                                            :disabled="true"
                                                            :fileList="row.files"
                                                            :previewAndDownload="false"
                                                            :typeRegularArr="typeRegularArr"
                                                        >
                                                        </CustomUploader>
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                        </div>
                                    </el-collapse-item>
                                </div>

                                <!-- 主营产品情况 -->
                                <div
                                    v-if="hasMenuItem('products-quality')"
                                    id="products-quality"
                                    class="content-section"
                                >
                                    <div class="content-title">
                                        <div class="content-title-left">主营产品情况</div>
                                    </div>
                                    <el-collapse-item name="products-quality">
                                        <template #title>
                                            <div class="section-title">
                                                <el-icon>
                                                    <Document />
                                                </el-icon>
                                                <span>主营产品生产销售情况</span>
                                            </div>
                                        </template>
                                        <div class="section-content">
                                            <el-table
                                                :data="detailForm.salesStatus2List"
                                                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 }">
                                                        {{ row.productCategory || '-' }}
                                                    </template>
                                                </el-table-column>

                                                <el-table-column align="center" label="规格">
                                                    <template #default="{ row }">
                                                        {{ row.specifications || '-' }}
                                                    </template>
                                                </el-table-column>

                                                <el-table-column
                                                    align="center"
                                                    label="近三年年产量"
                                                >
                                                    <template #default="{ row }">
                                                        {{
                                                            row.pastThreeYearsAnnualProduction ||
                                                            '-'
                                                        }}
                                                    </template>
                                                </el-table-column>

                                                <el-table-column align="center" label="交货周期">
                                                    <template #default="{ row }">
                                                        {{ row.deliveryCycle || '-' }}
                                                    </template>
                                                </el-table-column>

                                                <el-table-column
                                                    align="center"
                                                    label="主要客户及市场"
                                                >
                                                    <template #default="{ row }">
                                                        {{ row.mainCustomersMarkets || '-' }}
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                        </div>
                                    </el-collapse-item>
                                </div>

                                <!-- 主营产品质量业绩 -->
                                <div
                                    v-if="hasMenuItem('products-quality-performance')"
                                    id="products-quality-performance"
                                    class="content-section"
                                >
                                    <div class="content-title">
                                        <div class="content-title-left">主营产品质量业绩</div>
                                    </div>
                                    <el-collapse-item name="products-quality-performance">
                                        <template #title>
                                            <div class="section-title">
                                                <el-icon>
                                                    <Document />
                                                </el-icon>
                                                <span>主营产品质量表现</span>
                                            </div>
                                        </template>
                                        <div class="section-content">
                                            <el-table
                                                :data="
                                                    detailForm.mainProductsPerformance
                                                        .qualityPerformance2List
                                                "
                                                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 }">
                                                        {{ row.productName || '-' }}
                                                    </template>
                                                </el-table-column>

                                                <el-table-column
                                                    align="center"
                                                    label="去年质量目标"
                                                >
                                                    <el-table-column align="center" label="指标">
                                                        <template #default="{ row }">
                                                            {{
                                                                row.lastYearQualityTargetIndexValue ||
                                                                '-'
                                                            }}
                                                        </template>
                                                    </el-table-column>

                                                    <el-table-column align="center" label="实际值">
                                                        <template #default="{ row }">
                                                            {{
                                                                row.lastYearQualityTargetActualValue ||
                                                                '-'
                                                            }}
                                                        </template>
                                                    </el-table-column>
                                                </el-table-column>

                                                <el-table-column
                                                    align="center"
                                                    label="今年质量目标"
                                                >
                                                    <el-table-column align="center" label="指标">
                                                        <template #default="{ row }">
                                                            {{
                                                                row.thisYearQualityTargetIndexValue ||
                                                                '-'
                                                            }}
                                                        </template>
                                                    </el-table-column>

                                                    <el-table-column align="center" label="实际值">
                                                        <template #default="{ row }">
                                                            {{
                                                                row.thisYearQualityTargetActualValue ||
                                                                '-'
                                                            }}
                                                        </template>
                                                    </el-table-column>
                                                </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">
                                                        {{
                                                            detailForm.mainProductsPerformance
                                                                .proposedProductOffering || '-'
                                                        }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item :span="2">
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>
                                                        企业业绩
                                                    </template>
                                                    <el-form-item prop="businessPerformance">
                                                        {{
                                                            detailForm.mainProductsPerformance
                                                                .businessPerformance || '-'
                                                        }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item :span="2">
                                                    <template #label> 附件</template>
                                                    <el-form-item prop="files">
                                                        <CustomUploader
                                                            :disabled="true"
                                                            :fileList="
                                                                detailForm.mainProductsPerformance
                                                                    .files
                                                            "
                                                            :previewAndDownload="false"
                                                            :typeRegularArr="typeRegularArr"
                                                            type="button"
                                                        >
                                                        </CustomUploader>
                                                    </el-form-item>
                                                </el-descriptions-item>
                                            </el-descriptions>
                                        </div>
                                    </el-collapse-item>
                                    <el-table
                                        :data="
                                            detailForm.mainProductsPerformance
                                                .customerComplaints2List
                                        "
                                        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 }">
                                                {{ row.customerComplaints || '-' }}
                                            </template>
                                        </el-table-column>

                                        <el-table-column align="center" label="控制措施">
                                            <template #default="{ row }">
                                                {{ row.controlMeasures || '-' }}
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>

                                <!-- 主要原材料及供应商表 -->
                                <div
                                    v-if="hasMenuItem('raw-materials')"
                                    id="raw-materials"
                                    class="content-section"
                                >
                                    <div class="content-title">
                                        <div class="content-title-left">主要原材料及供应商表</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="detailForm.rawMaterialsSuppliersList"
                                                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 }">
                                                        {{ row.mainRawMaterialName || '-' }}
                                                    </template>
                                                </el-table-column>

                                                <el-table-column align="center" label="供应厂家">
                                                    <template #default="{ row }">
                                                        {{ row.supplier || '-' }}
                                                    </template>
                                                </el-table-column>

                                                <el-table-column
                                                    align="center"
                                                    label="上年度业绩表现"
                                                >
                                                    <template #default="{ row }">
                                                        {{ row.previousYearPerformance || '-' }}
                                                    </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>
                                    <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">
                                                        {{
                                                            detailForm.processPerformance
                                                                .suproductionProcess || '-'
                                                        }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item :span="2">
                                                    <template #label> 附件</template>
                                                    <el-form-item prop="b">
                                                        <CustomUploader
                                                            :disabled="true"
                                                            :fileList="
                                                                detailForm.processPerformance.files
                                                            "
                                                            :previewAndDownload="false"
                                                            :typeRegularArr="typeRegularArr"
                                                            type="button"
                                                        >
                                                        </CustomUploader>
                                                    </el-form-item>
                                                </el-descriptions-item>
                                            </el-descriptions>
                                            <el-table
                                                :data="
                                                    detailForm.processPerformance.processFlow2List
                                                "
                                                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 }">
                                                        {{ row.keyImportantProcess || '-' }}
                                                    </template>
                                                </el-table-column>

                                                <el-table-column
                                                    align="center"
                                                    label="控制参数或特性"
                                                >
                                                    <template #default="{ row }">
                                                        {{
                                                            row.controlParametersCharacteristics ||
                                                            '-'
                                                        }}
                                                    </template>
                                                </el-table-column>

                                                <el-table-column
                                                    align="center"
                                                    label="过程能力指数"
                                                >
                                                    <template #default="{ row }">
                                                        {{ row.processCapabilityIndex || '-' }}
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                        </div>
                                    </el-collapse-item>
                                </div>

                                <!-- 主要生产设备 -->
                                <div
                                    v-if="hasMenuItem('equipment-production')"
                                    id="equipment-production"
                                    class="content-section"
                                >
                                    <div class="content-title">
                                        <div class="content-title-left">主要生产设备</div>
                                    </div>
                                    <el-collapse-item name="equipment-production">
                                        <template #title>
                                            <div class="section-title">
                                                <el-icon>
                                                    <Document />
                                                </el-icon>
                                                <span>主要生产设备(可附页)</span>
                                            </div>
                                        </template>
                                        <div class="section-content">
                                            <el-table
                                                :data="
                                                    detailForm.productionEquipment
                                                        .productionEquipment2List
                                                "
                                                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 }">
                                                        {{ row.name || '-' }}
                                                    </template>
                                                </el-table-column>

                                                <el-table-column align="center" label="产能">
                                                    <template #default="{ row }">
                                                        {{ row.capacity || '-' }}
                                                    </template>
                                                </el-table-column>

                                                <el-table-column align="center" label="数量">
                                                    <template #default="{ row }">
                                                        {{ row.num || '-' }}
                                                    </template>
                                                </el-table-column>

                                                <el-table-column align="center" label="生产厂家">
                                                    <template #default="{ row }">
                                                        {{ row.manufacturer || '-' }}
                                                    </template>
                                                </el-table-column>

                                                <el-table-column align="center" label="使用年限">
                                                    <template #default="{ row }">
                                                        {{ row.serviceLife || '-' }}
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                            <el-descriptions :column="2" border>
                                                <el-descriptions-item :span="2">
                                                    <template #label> 附件</template>
                                                    <el-form-item prop="b">
                                                        <CustomUploader
                                                            :disabled="true"
                                                            :fileList="
                                                                detailForm.productionEquipment.files
                                                            "
                                                            :previewAndDownload="false"
                                                            :typeRegularArr="typeRegularArr"
                                                            type="button"
                                                        >
                                                        </CustomUploader>
                                                    </el-form-item>
                                                </el-descriptions-item>
                                            </el-descriptions>
                                        </div>
                                    </el-collapse-item>
                                </div>

                                <!-- 主要检验设备 -->
                                <div
                                    v-if="hasMenuItem('equipment-inspection')"
                                    id="equipment-inspection"
                                    class="content-section"
                                >
                                    <div class="content-title">
                                        <div class="content-title-left">主要检验设备</div>
                                    </div>
                                    <el-collapse-item name="equipment-inspection">
                                        <template #title>
                                            <div class="section-title">
                                                <el-icon>
                                                    <Document />
                                                </el-icon>
                                                <span>主要检验设备(可附页)</span>
                                            </div>
                                        </template>
                                        <div class="section-content">
                                            <el-table
                                                :data="
                                                    detailForm.inspectionEquipment
                                                        .inspectionEquipment2List
                                                "
                                                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 }">
                                                        {{ row.name || '-' }}
                                                    </template>
                                                </el-table-column>

                                                <el-table-column align="center" label="精度">
                                                    <template #default="{ row }">
                                                        {{ row.capacity || '-' }}
                                                    </template>
                                                </el-table-column>

                                                <el-table-column align="center" label="数量">
                                                    <template #default="{ row }">
                                                        {{ row.num || '-' }}
                                                    </template>
                                                </el-table-column>

                                                <el-table-column align="center" label="生产厂家">
                                                    <template #default="{ row }">
                                                        {{ row.manufacturer || '-' }}
                                                    </template>
                                                </el-table-column>

                                                <el-table-column align="center" label="使用年限">
                                                    <template #default="{ row }">
                                                        {{ row.serviceLife || '-' }}
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                            <el-descriptions :column="2" border>
                                                <el-descriptions-item :span="2">
                                                    <template #label> 附件</template>
                                                    <el-form-item prop="b">
                                                        <CustomUploader
                                                            :disabled="true"
                                                            :fileList="
                                                                detailForm.inspectionEquipment.files
                                                            "
                                                            :previewAndDownload="false"
                                                            :typeRegularArr="typeRegularArr"
                                                            type="button"
                                                        >
                                                        </CustomUploader>
                                                    </el-form-item>
                                                </el-descriptions-item>
                                            </el-descriptions>
                                        </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>
                                    <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">
                                                        {{
                                                            detailForm.otherSpecialNotes.notes ||
                                                            '-'
                                                        }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item :span="2">
                                                    <template #label> 附件</template>
                                                    <el-form-item prop="b">
                                                        <CustomUploader
                                                            :disabled="true"
                                                            :fileList="
                                                                detailForm.otherSpecialNotes.files
                                                            "
                                                            :previewAndDownload="false"
                                                            :typeRegularArr="typeRegularArr"
                                                            type="button"
                                                        >
                                                        </CustomUploader>
                                                    </el-form-item>
                                                </el-descriptions-item>
                                            </el-descriptions>
                                        </div>
                                    </el-collapse-item>
                                </div>

                                <!-- 关联企业 -->
                                <div
                                    v-if="hasMenuItem('personnel-info')"
                                    id="company-scale"
                                    class="content-section"
                                >
                                    <el-collapse-item name="personnel-info">
                                        <template #title>
                                            <div class="section-title">
                                                <el-icon>
                                                    <Document />
                                                </el-icon>
                                                <span>关联企业</span>
                                            </div>
                                        </template>
                                        <div class="section-content">
                                            <el-table :data="personList" 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="企业名称"
                                                    prop="companyName"
                                                >
                                                </el-table-column>

                                                <el-table-column
                                                    align="center"
                                                    label="统一社会信用代码"
                                                    prop="companyOrgcode"
                                                >
                                                </el-table-column>

                                                <el-table-column
                                                    align="center"
                                                    label="法人"
                                                    prop="companyEbe"
                                                >
                                                </el-table-column>

                                                <el-table-column
                                                    align="center"
                                                    label="成立时间"
                                                    prop="companyRegdate"
                                                >
                                                </el-table-column>

                                                <el-table-column
                                                    align="center"
                                                    label="地址"
                                                    prop="companyAddr"
                                                >
                                                </el-table-column>
                                            </el-table>
                                        </div>
                                    </el-collapse-item>
                                </div>

                                <!-- 供应商信息审核列表 -->
                                <div id="audit-info" class="content-section">
                                    <div class="content-title">
                                        <div class="content-title-left">供应商信息审核</div>
                                    </div>
                                    <el-collapse-item name="audit-info">
                                        <template #title>
                                            <div class="section-title">
                                                <el-icon>
                                                    <Document />
                                                </el-icon>
                                                <span>供应商信息审核</span>
                                            </div>
                                        </template>
                                        <div class="section-content">
                                            <el-table :data="auditHistoryData" border stripe>
                                                <el-table-column
                                                    align="center"
                                                    label="序号"
                                                    width="80"
                                                >
                                                    <template #default="{ $index }">
                                                        {{ $index + 1 }}
                                                    </template>
                                                </el-table-column>
                                                <el-table-column
                                                    align="center"
                                                    label="审核环节"
                                                    prop="step"
                                                >
                                                    <template #default="{ row }">
                                                        <div>
                                                            {{
                                                                dictionaryEscape(
                                                                    'gysgl-zt',
                                                                    row.status
                                                                )
                                                            }}
                                                        </div>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column
                                                    align="center"
                                                    label="审批意见"
                                                    prop="approvalOpinion"
                                                >
                                                    <template #default="{ row }">
                                                        <div>
                                                            {{ row.approvalOpinion || '-' }}
                                                        </div>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column
                                                    align="center"
                                                    label="办理人"
                                                    prop="approvalName"
                                                >
                                                    <template #default="{ row }">
                                                        <div>
                                                            {{ row.approvalName || '-' }}
                                                        </div>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column
                                                    align="center"
                                                    label="时间"
                                                    prop="approvalDate"
                                                >
                                                    <template #default="{ row }">
                                                        <div>
                                                            {{ row.approvalDate || '-' }}
                                                        </div>
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                        </div>
                                    </el-collapse-item>
                                </div>

                                <!-- 现场评审 -->
                                <div id="site-inspection" class="content-section">
                                    <div class="content-title">
                                        <div class="content-title-left">现场评审</div>
                                    </div>
                                    <div class="site-inspection-content">
                                        <!-- 评审要求 -->
                                        <div class="review-requirements">
                                            <div class="review-requirements-title">评审要求:</div>
                                            <ul>
                                                <li>1、没有做到:0分;</li>
                                                <li>2、部分做到,只有部分证据:半满分;</li>
                                                <li>3、完全做到,而且证据充分:满分。</li>
                                                <li>
                                                    【注:如果不涉及或不适用,请用"NA"在"评分栏"中标明,并默认为满分。】
                                                </li>
                                            </ul>
                                        </div>
                                        <el-collapse-item name="site-inspection">
                                            <template #title>
                                                <div class="section-title">
                                                    <el-icon>
                                                        <Document />
                                                    </el-icon>
                                                    <span>评分项</span>
                                                </div>
                                            </template>
                                            <div class="section-content">
                                                <el-table
                                                    :data="onSiteReviewData"
                                                    :default-expand-all="true"
                                                    :tree-props="{
                                                        children: 'children',
                                                        hasChildren: 'hasChildren',
                                                        expandColumnKey: 'classificationName'
                                                    }"
                                                    row-key="id"
                                                    stripe
                                                >
                                                    <el-table-column
                                                        align="center"
                                                        label="序号"
                                                        prop="index"
                                                        width="80"
                                                    >
                                                        <template #default="{ $index }">
                                                            {{ $index + 1 }}
                                                        </template>
                                                    </el-table-column>
                                                    <el-table-column
                                                        align="center"
                                                        label="类别"
                                                        prop="classificationName"
                                                        width="120"
                                                    >
                                                        <template #default="{ row }">
                                                            <div v-if="row.isParent">
                                                                {{ row.classificationName }}
                                                            </div>
                                                            <div v-else></div>
                                                        </template>
                                                    </el-table-column>
                                                    <el-table-column
                                                        align="center"
                                                        label="评审内容"
                                                        prop="name"
                                                    />
                                                    <el-table-column
                                                        align="center"
                                                        label="评分"
                                                        prop="score"
                                                        width="100"
                                                    >
                                                        <template #default="{ row }">
                                                            {{ row.operationScore || '-' }}
                                                        </template>
                                                    </el-table-column>
                                                    <el-table-column
                                                        align="center"
                                                        label="评分人"
                                                        prop="ratingName"
                                                        width="200"
                                                    >
                                                        <template #default="{ row }">
                                                            {{
                                                                panelListChange(row.panelList) ||
                                                                '-'
                                                            }}
                                                        </template>
                                                    </el-table-column>
                                                </el-table>
                                            </div>
                                        </el-collapse-item>
                                    </div>
                                </div>

                                <!-- 评定报告 -->
                                <div id="evaluation-report" class="content-section">
                                    <div class="content-title">
                                        <div class="content-title-left">评定报告</div>
                                    </div>
                                    <el-collapse-item name="evaluation-report">
                                        <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="supplierName">
                                                        {{ detailForm.supplierName || '-' }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item>
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>
                                                        主供产品
                                                    </template>
                                                    <el-form-item prop="gategoryNames">
                                                        {{ detailForm.gategoryNames || '-' }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item :span="2">
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>
                                                        现场评审得分
                                                    </template>
                                                    <el-form-item prop="agree"
                                                        >{{ scores || 0 }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item :span="2">
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>
                                                        现场评审组员
                                                    </template>
                                                    <el-form-item prop="agree">
                                                        {{ panel2ListName || '-' }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item :span="2">
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>
                                                        评审证据
                                                    </template>
                                                    <el-form-item prop="agree"
                                                        >{{
                                                            detailForm.reviewReport
                                                                ?.reviewEvidence || '-'
                                                        }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item :span="2">
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>
                                                        评价描述
                                                    </template>
                                                    <el-form-item prop="comments"
                                                        >{{
                                                            detailForm.reviewReport?.reviewDesc ||
                                                            '-'
                                                        }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item :span="2">
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>
                                                        评审结论
                                                    </template>
                                                    <el-form-item prop="agree">
                                                        {{
                                                            dictionaryEscape(
                                                                'pdbg-psjl',
                                                                detailForm.reviewReport
                                                                    ?.reviewConclusion
                                                            ) || '-'
                                                        }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item :span="2">
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>
                                                        试用要求
                                                    </template>
                                                    <el-form-item prop="comments">
                                                        {{
                                                            detailForm.reviewReport
                                                                ?.trialRequirements || '-'
                                                        }}
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item :span="2">
                                                    <template #label> 附件</template>
                                                    <el-form-item prop="b">
                                                        <CustomUploader
                                                            :disabled="true"
                                                            :fileList="
                                                                detailForm.reviewReport.files
                                                            "
                                                            :previewAndDownload="false"
                                                            :typeRegularArr="typeRegularArr"
                                                            type="button"
                                                        >
                                                        </CustomUploader>
                                                    </el-form-item>
                                                </el-descriptions-item>
                                            </el-descriptions>
                                        </div>
                                    </el-collapse-item>
                                </div>

                                <!-- 试用报告 -->
                                <div id="trial-report" class="content-section">
                                    <div class="content-title">
                                        <div class="content-title-left">试用报告</div>
                                    </div>
                                    <el-collapse-item name="trial-report">
                                        <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="reviewTrialReport.trialProductionProductName"
                                                    >
                                                        <el-input
                                                            v-model="
                                                                addEditForm.reviewTrialReport
                                                                    .trialProductionProductName
                                                            "
                                                            placeholder="请输入"
                                                        />
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <!--                                                <el-descriptions-item>-->
                                                <!--                                                    <template #label>-->
                                                <!--                                                        <span class="required-asterisk">*</span>-->
                                                <!--                                                        试生产验证-->
                                                <!--                                                    </template>-->
                                                <!--                                                    <el-form-item-->
                                                <!--                                                        prop="reviewTrialReport.trialValidation"-->
                                                <!--                                                    >-->
                                                <!--                                                        <el-radio-group-->
                                                <!--                                                            v-model="-->
                                                <!--                                                                addEditForm.reviewTrialReport-->
                                                <!--                                                                    .trialValidation-->
                                                <!--                                                            "-->
                                                <!--                                                        >-->
                                                <!--                                                            <el-radio :label="1">通过</el-radio>-->
                                                <!--                                                            <el-radio :label="2">不通过</el-radio>-->
                                                <!--                                                        </el-radio-group>-->
                                                <!--                                                    </el-form-item>-->
                                                <!--                                                </el-descriptions-item>-->
                                                <el-descriptions-item>
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>
                                                        试生产完成时间
                                                    </template>
                                                    <el-form-item
                                                        prop="reviewTrialReport.reviewConfirmationTime"
                                                    >
                                                        <el-date-picker
                                                            v-model="
                                                                addEditForm.reviewTrialReport
                                                                    .reviewConfirmationTime
                                                            "
                                                            format="YYYY-MM-DD HH:mm:ss"
                                                            placeholder="请选择"
                                                            style="width: 100%"
                                                            type="datetime"
                                                            value-format="YYYY-MM-DD HH:mm:ss"
                                                        ></el-date-picker>
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item :span="2">
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>
                                                        现场评审组员
                                                    </template>
                                                    <el-form-item
                                                        prop="reviewTrialReport.panel2List"
                                                    >
                                                        <el-select
                                                            v-model="
                                                                addEditForm.reviewTrialReport
                                                                    .panel2List
                                                            "
                                                            multiple
                                                            placeholder="请选择"
                                                        >
                                                            <el-option
                                                                v-for="item in reviewerOptions"
                                                                :key="item.operationRatingId"
                                                                :label="item.operationRatingName"
                                                                :value="item.operationRatingId"
                                                            >
                                                            </el-option>
                                                        </el-select>
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item :span="2">
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>
                                                        评审证据
                                                    </template>
                                                    <el-form-item
                                                        prop="reviewTrialReport.reviewEvidence"
                                                    >
                                                        <el-checkbox-group
                                                            v-model="
                                                                addEditForm.reviewTrialReport
                                                                    .reviewEvidence
                                                            "
                                                        >
                                                            <el-checkbox
                                                                v-for="item in getDictionaryByCode(
                                                                    'pszj'
                                                                )"
                                                                :key="item.value"
                                                                :label="item.name"
                                                                :value="item.value"
                                                            ></el-checkbox>
                                                        </el-checkbox-group>
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item :span="2">
                                                    <template #label>
                                                        <span class="required-asterisk">*</span>
                                                        评价描述
                                                    </template>
                                                    <el-form-item
                                                        prop="reviewTrialReport.reviewDesc"
                                                    >
                                                        <el-input
                                                            v-model="
                                                                addEditForm.reviewTrialReport
                                                                    .reviewDesc
                                                            "
                                                            :rows="4"
                                                            maxlength="200"
                                                            placeholder="请输入"
                                                            show-word-limit
                                                            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="reviewTrialReport.reviewConclusion"
                                                    >
                                                        <el-radio-group
                                                            v-model="
                                                                addEditForm.reviewTrialReport
                                                                    .reviewConclusion
                                                            "
                                                        >
                                                            <el-radio
                                                                v-for="value in getDictionaryByCode(
                                                                    'sygl-psjl'
                                                                )"
                                                                :key="value.value"
                                                                :label="value.value"
                                                                >{{ value.name }}
                                                            </el-radio>
                                                        </el-radio-group>
                                                    </el-form-item>
                                                </el-descriptions-item>
                                                <el-descriptions-item :span="2">
                                                    <template #label> 附件</template>
                                                    <el-form-item prop="reviewTrialReport.files">
                                                        <CustomUploader
                                                            :fileList="
                                                                addEditForm.reviewTrialReport.files
                                                            "
                                                            :previewAndDownload="false"
                                                            :typeRegularArr="typeRegularArr"
                                                            type="button"
                                                            @change="handleFileChange"
                                                        >
                                                        </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 :loading="submitLoading" type="primary" @click="handleSubmit"
                >确 定
            </el-button>
            <el-button @click="handleCancel"> 取 消</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import moment from 'moment'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { Document } from '@element-plus/icons-vue'
import CustomUploader from '@/components/CustomUploader/index.vue'
import {
    approvalLog,
    audit,
    auditData,
    getOrgUserList
} from '@/api/supplierMonitor/QualificationAudit/TrialManagement.ts'
import {
    dataDetail,
    getAffiliated,
    getBasicInfoChange,
    getFillingProgress
} from '@/api/supplierMonitor/QualificationAudit/SupplyInfo'
import { dictionaryEscape, getDictionaryByCode } from '@/utils/dictionary.ts'
import { getEnterpriseScore } from '@/api/supplierMonitor/QualificationAudit/EvaluationReport.ts'

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

interface MenuItem {
    id: string
    title: string
    saveStatusKey: string
}

interface ReviewItem {
    id?: number
    index?: number
    category: string
    content: string
    score?: number
    maxScore?: number
    reviewers?: string[]
}

interface ReviewerOption {
    value: string
    label: string
    children?: ReviewerOption[]
}

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

    [key: string]: any
}

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

const currentStep = ref(5) // 步骤条当前步骤
const activeMenuItem = ref('trial-report') // 当前激活的菜单项
const detailLoading = ref(false) // 详情加载状态
const saveStatus = reactive({})

// 折叠面板激活状态 - 包含供应商信息菜单和评审信息菜单
const activeCollapse = computed(() => {
    const supplierMenuIds = menuItems.value.map((item) => item.id)
    const reviewMenuIds = ['audit-info', 'site-inspection', 'evaluation-report', 'trial-report']
    return [...supplierMenuIds, ...reviewMenuIds]
})

// ==================== 表单相关 ====================
const addEditFormRef = ref<FormInstance>()
const addEditFormRules = reactive<FormRules>({
    'reviewTrialReport.trialProductionProductName': [
        { required: true, message: '请输入试生产产品', trigger: 'blur' }
    ],
    'reviewTrialReport.trialValidation': [
        { required: true, message: '请选择试生产验证', trigger: 'change' }
    ],
    'reviewTrialReport.reviewConfirmationTime': [
        { required: true, message: '请选择试生产完成时间', trigger: 'change' }
    ],
    'reviewTrialReport.panel2List': [
        { required: true, message: '请选择现场评审组员', trigger: 'change' }
    ],
    'reviewTrialReport.reviewEvidence': [
        { required: true, message: '请选择评审证据', trigger: 'change' }
    ],
    'reviewTrialReport.reviewDesc': [
        { required: true, message: '请输入评价描述', trigger: 'blur' }
    ],
    'reviewTrialReport.reviewConclusion': [
        { required: true, message: '请选择评审结论', trigger: 'change' }
    ]
})

const addEditForm = reactive<AddEditForm>({
    reviewTrialReport: {
        reviewConfirmationTime: moment().format('YYYY-MM-DD HH:mm:ss'),
        reviewEvidence: ['1', '2', '3'],
        reviewConclusion: '1'
    }
})

const detailForm = reactive<AddEditForm>({
    information: {},
    accessPersonnelMap: {},
    qualificationMap: {
        accessQualifications: [],
        agencyQualification: []
    },
    mainProductsPerformance: {},
    processPerformance: {},
    productionEquipment: {},
    inspectionEquipment: {},
    otherSpecialNotes: {},
    reviewReport: {
        files: []
    }
})

// 现场评审数据
const onSiteReviewData = ref<ReviewItem[]>([])

// ==================== 菜单配置 ====================
const menuItems = ref<MenuItem[]>([])

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

// ==================== 滚动监听相关 ====================
let scrollContainer: HTMLElement | null = null
let isScrolling = 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
    }
}

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

    // 获取所有菜单项（包括供应商信息和评审信息）
    const supplierSections = menuItems.value
        .map((item) => ({
            id: item.id,
            element: document.getElementById(item.id)
        }))
        .filter((section) => section.element)

    const reviewSections = ['audit-info', 'site-inspection', 'evaluation-report', 'trial-report']
        .map((id) => ({
            id,
            element: document.getElementById(id)
        }))
        .filter((section) => section.element)

    const sections = [...supplierSections, ...reviewSections]

    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 panel2ListName = ref('')
const getDetail = async (id: string) => {
    // 获取详情逻辑
    detailLoading.value = true
    const { ...rest } = (await dataDetail(id)) as AddEditForm
    Object.assign(detailForm, {
        ...rest
    })

    let drivingReasonsList = getDictionaryByCode('zr-tjly')
    let values = detailForm.drivingReasons?.split(',')
    if (values && values.length > 0) {
        detailForm.drivingReasons = values
            .map((value) => drivingReasonsList.find((item) => String(item.value) === value)?.name)
            .filter(Boolean)
            .join(',')
    }
    detailForm.gategoryNames = detailForm.materialCategory2List
        .map((item: any) => item.categoryName)
        .join(',')

    //获取基本情况
    await getBasicInfoListChange(detailForm.supplierId)

    //获取关联企业
    await getPersonList(detailForm.supplierId)

    //资质信息
    detailForm.qualificationMap.accessQualifications = detailForm.qualificationMap[0]
    detailForm.qualificationMap.agencyQualification = detailForm.qualificationMap[1]

    //主要生产设备
    detailForm.productionEquipment.productionEquipment2List = detailForm.productionEquipment2List
    detailForm.productionEquipment.files = detailForm.productionEquipmentFiles || []
    //主要检验设备
    detailForm.inspectionEquipment.inspectionEquipment2List = detailForm.inspectionEquipment2List
    detailForm.inspectionEquipment.files = detailForm.inspectionEquipmentFiles || []

    onSiteReviewData.value = Object.entries(detailForm.reviewRatingDetails2Map).map(
        ([key, items]) => {
            const parent = items[0]
            const children = items.slice(1).map((child) => ({
                ...child,
                isParent: false
            }))

            return {
                ...parent,
                isParent: true,
                children: children
            }
        }
    )

    if (detailForm.reviewReport && detailForm.reviewReport.panel2List.length > 0) {
        panel2ListName.value = detailForm.reviewReport.panel2List
            .map((item) => item.operationRatingName)
            .join(',')
    }

    let reviewEvidenceList = getDictionaryByCode('pszj')
    let reviewEvidenceValues = detailForm.reviewReport.reviewEvidence.split(',')
    detailForm.reviewReport.reviewEvidence = reviewEvidenceValues
        .map((value) => reviewEvidenceList.find((item) => String(item.value) === value)?.name)
        .filter(Boolean)
        .join(',')

    detailLoading.value = false
}

//获取基本情况
const basicInfoDetailForm = ref({})
const getBasicInfoListChange = async (id: string) => {
    basicInfoDetailForm.value = await getBasicInfoChange(id)
}

//根据高管人员获取关联企业信息
const personList = ref([])
const getPersonList = async (id: string) => {
    let params = detailForm.enterprisePersonnelList.map((item) => {
        return {
            phone: item.mobile
        }
    })
    personList.value = await getAffiliated(params, id)
}

//获取审核日志
const auditHistoryData = ref([])
const getLog = async (id: string) => {
    auditHistoryData.value = await approvalLog(id)
}

//获取评分人名称
const panelListChange = (panelList: any[]) => {
    if (panelList && panelList.length > 0) {
        return panelList.map((item) => item.ratingName).join(',')
    }
    return '-'
}

//附件上传
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 handleFileChange = (file: [FileItem]) => {
    addEditForm.reviewTrialReport.files = file.map((item) => item as FileItem)
    addEditFormRef.value?.validateField('reviewTrialReport.files')
}

// ==================== 表单操作 ====================
const submitLoading = ref<Boolean>(false)
const handleSubmit = () => {
    addEditFormRef.value?.validate(async (valid, object) => {
        if (!valid) {
            ElMessage.warning(
                `有${Object.keys(object || {}).length}个字段未通过校验，请正确填写表单内容。`
            )
        } else {
            try {
                submitLoading.value = true
                let params = JSON.parse(JSON.stringify({ ...addEditForm }))
                params.reviewTrialReport.panel2List = params.reviewTrialReport.panel2List.map(
                    (item) => {
                        let correspondingObj = reviewerOptions.value.find(
                            (obj) => obj.operationRatingId === item
                        )
                        if (correspondingObj) {
                            return {
                                operationRatingId: item,
                                operationRatingName: correspondingObj.operationRatingName,
                                operationRatingAccount: correspondingObj.operationRatingAccount
                            }
                        }
                        return item
                    }
                )
                params.reviewTrialReport.reviewEvidence =
                    params.reviewTrialReport.reviewEvidence.join(',')
                params.reviewTrialReport.id = detailForm.id
                let queryForm = {
                    moduleCode: 14,
                    ...detailForm,
                    reviewTrialReport: params.reviewTrialReport
                }
                const { state } = await auditData(queryForm)
                if (state) {
                    const subData = await audit({
                        supplierEnterpriseId: detailForm.id,
                        status: 6,
                        approvalResult: 1
                    })
                    if (subData.state) {
                        ElMessage.success('办理成功')
                        handleCancel()
                    }
                }
            } finally {
                submitLoading.value = false
            }
        }
    })
}

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

// 评分人选项
const reviewerOptions = ref([])
// 获取评分人
const getReviewerOptions = async (id: string) => {
    reviewerOptions.value = await getOrgUserList(id)
}

//获取左菜单数据
const fieldMapping = {
    enterpriseAccessFlag: { saveStatusKey: 'accessApplication', title: '准入申请信息' },
    basicInformationFlag1: { saveStatusKey: 'basicInfo', title: '基本情况' },
    accessPersonnelFlag: { saveStatusKey: 'personnelInfo', title: '人员信息' },
    basicInformationFlag2: { saveStatusKey: 'otherNotes', title: '企业规模' },
    qualificationFlag: { saveStatusKey: 'qualification', title: '企业资质表' },
    mainProductsSalesStatusFlag: {
        saveStatusKey: 'productsQuality',
        title: '主营产品情况'
    },
    mainProductsPerformanceFlag: {
        saveStatusKey: 'productsQualityPerformance',
        title: '主营产品质量业绩'
    },
    mainRawMaterialsSuppliersFlag: { saveStatusKey: 'rawMaterials', title: '主要原材料及供应商' },
    productionProcessPerformanceFlag: {
        saveStatusKey: 'manufacturing',
        title: '生产制造过程绩效'
    },
    productionEquipmentFlag: {
        saveStatusKey: 'equipmentProduction',
        title: '主要生产设备'
    },
    inspectionEquipmentFlag: {
        saveStatusKey: 'equipmentInspection',
        title: '主要检验设备'
    },
    otherSpecialNotesFlag: { saveStatusKey: 'companyScale', title: '其他特别说明' }
}
const generateId = (saveStatusKey: string) => {
    const idMap = {
        accessApplication: 'access-application',
        basicInfo: 'basic-info',
        personnelInfo: 'personnel-info',
        otherNotes: 'other-notes',
        qualification: 'qualification',
        productsQuality: 'products-quality',
        productsQualityPerformance: 'products-quality-performance',
        rawMaterials: 'raw-materials',
        manufacturing: 'manufacturing',
        equipmentProduction: 'equipment-production',
        equipmentInspection: 'equipment-inspection',
        companyScale: 'company-scale'
    }
    return idMap[saveStatusKey] || saveStatusKey
}
const processApiResponse = (apiData) => {
    // 清空现有数据
    menuItems.value = []
    Object.keys(saveStatus).forEach((key) => delete saveStatus[key])

    const usedKeys = new Set()
    const itemsWithIndex = []

    // 按照 fieldMapping 的顺序遍历
    Object.keys(fieldMapping).forEach((apiField, index) => {
        const value = apiData[apiField]
        const config = fieldMapping[apiField]

        const shouldDisplay = value !== '' && value !== '-1'
        if (config && shouldDisplay) {
            const { saveStatusKey, title } = config
            const statusValue = value === '1'

            // 设置保存状态
            saveStatus[saveStatusKey] = statusValue

            // 收集需要添加的项，记录其在 fieldMapping 中的索引位置（避免重复）
            if (!usedKeys.has(saveStatusKey)) {
                itemsWithIndex.push({
                    item: {
                        id: generateId(saveStatusKey),
                        title: title,
                        saveStatusKey: saveStatusKey
                    },
                    index: index
                })
                usedKeys.add(saveStatusKey)
            }
        }
    })

    // 按照 fieldMapping 中的索引顺序添加到 menuItems
    itemsWithIndex.sort((a, b) => a.index - b.index)
    menuItems.value = itemsWithIndex.map(({ item }) => item)
}
const getMenuData = async (ids: string) => {
    try {
        detailLoading.value = true
        let param = ids ? ids : ''
        const data = await getFillingProgress(param)
        processApiResponse(data)
    } finally {
        detailLoading.value = false
    }
}

// 获取分数
const scores = ref<string>('')
const getScore = async (id: string) => {
    const { value } = await getEnterpriseScore(id)
    scores.value = value
}
// ==================== 生命周期 ====================
onMounted(() => {
    if (route.query.id && typeof route.query.id === 'string') {
        getDetail(route.query.id)
        getReviewerOptions(route.query.id)
        getLog(route.query.id)
        getMenuData(route.query.id)
        getScore(route.query.id)
    }

    // 设置滚动监听
    setTimeout(() => {
        // 设置滚动标志，防止初始化滚动触发监听
        isScrolling = true

        // 查找滚动容器
        scrollContainer = document.querySelector('.page-form') as HTMLElement

        // 初始化滚动位置（在添加监听器之前）
        const element = document.getElementById(activeMenuItem.value)
        if (element) {
            element.scrollIntoView({
                behavior: 'instant',
                block: 'start'
            })
        }

        // 延迟添加滚动监听器，确保初始滚动完成
        setTimeout(() => {
            // 添加滚动监听器
            if (scrollContainer) {
                scrollContainer.addEventListener('scroll', debouncedHandleScroll)
            } else {
                // 如果没有找到滚动容器，监听window滚动
                window.addEventListener('scroll', debouncedHandleScroll)
            }

            // 重置滚动标志
            isScrolling = false
        }, 200)
    }, 100)
})

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

<style lang="scss" scoped>
// 隐藏树形表格的缩进
:deep(.el-table__indent) {
    display: none !important;
}

.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;
                        }
                    }
                }
            }
        }
    }
}
</style>
