<template>
    <super-dialog
        v-model="dialogVisible"
        :close-on-click-modal="false"
        :title="title"
        custom-class="notification-dialog"
        top="7%"
        width="70%"
        @closed="closePage"
    >
        <div
            v-loading="detailLoading"
            class="table-container"
            element-loading-background="rgba(10 ,38 ,61, 0.9)"
        >
            <el-collapse v-model="activeCollapse" style="padding-bottom: 20px">
                <!-- 基本情况 -->
                <div v-if="hasMenuItem('1')" id="basic-info" class="content-section">
                    <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"></el-form-item>
                                </el-descriptions-item>
                                <el-descriptions-item>
                                    <template #label> 供应商简称</template>
                                    <el-form-item prop="enterpriseShortName"></el-form-item>
                                </el-descriptions-item>
                                <el-descriptions-item>
                                    <template #label>
                                        <span class="required-asterisk">*</span>类型</template
                                    >
                                    <el-form-item prop="enterpriseType"></el-form-item>
                                </el-descriptions-item>
                                <el-descriptions-item>
                                    <template #label>
                                        <span class="required-asterisk">*</span>注册资本</template
                                    >
                                    <el-form-item prop="registeredCapital"></el-form-item>
                                </el-descriptions-item>
                                <el-descriptions-item>
                                    <template #label>
                                        <span class="required-asterisk">*</span>法定代表人</template
                                    >
                                    <el-form-item prop="creditCode"></el-form-item>
                                </el-descriptions-item>
                                <el-descriptions-item>
                                    <template #label>
                                        <span class="required-asterisk">*</span
                                        >统一社会信用代码</template
                                    >
                                    <el-form-item prop="companyRegdate"></el-form-item>
                                </el-descriptions-item>
                                <el-descriptions-item>
                                    <template #label>
                                        <span class="required-asterisk">*</span>成立日期</template
                                    >
                                    <el-form-item prop="establishmentTime"></el-form-item>
                                </el-descriptions-item>
                                <el-descriptions-item>
                                    <template #label>
                                        <span class="required-asterisk">*</span>有效期至</template
                                    >
                                    <el-form-item prop="endBusinessTerm"></el-form-item>
                                </el-descriptions-item>
                                <el-descriptions-item :span="2">
                                    <template #label>
                                        <span class="required-asterisk">*</span>注册地址</template
                                    >
                                    <el-form-item prop="address"></el-form-item>
                                </el-descriptions-item>
                                <el-descriptions-item :span="2">
                                    <template #label> 公司网址</template>
                                    <el-form-item prop="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"></el-form-item>
                                </el-descriptions-item>
                                <el-descriptions-item>
                                    <template #label>
                                        <span class="required-asterisk">*</span>开户银行</template
                                    >
                                    <el-form-item prop="openingBank"></el-form-item>
                                </el-descriptions-item>
                                <el-descriptions-item>
                                    <template #label>
                                        <span class="required-asterisk">*</span>银行账户</template
                                    >
                                    <el-form-item prop="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"></el-form-item>
                                </el-descriptions-item>
                            </el-descriptions>
                        </div>
                    </el-collapse-item>
                </div>

                <!-- 人员信息 -->
                <div v-if="hasMenuItem('2')" id="personnel-info" 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="[]" 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">
                                </el-table-column>

                                <el-table-column align="center" label="性别" prop="sex">
                                </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('3')" id="other-notes" class="content-section">
                    <el-collapse-item name="other-notes">
                        <template #title>
                            <div class="section-title">
                                <el-icon>
                                    <Document />
                                </el-icon>
                                <span>企业规模表</span>
                            </div>
                        </template>
                        <div class="section-content">
                            <el-descriptions :column="2" border>
                                <el-descriptions-item>
                                    <template #label>
                                        <span class="required-asterisk">*</span>
                                        固定资产
                                    </template>
                                    <el-form-item prop="fixedAssets"></el-form-item>
                                </el-descriptions-item>
                                <el-descriptions-item>
                                    <template #label>
                                        <span class="required-asterisk">*</span>
                                        上年销售额
                                    </template>
                                    <el-form-item prop="lastYearSales"></el-form-item>
                                </el-descriptions-item>
                                <el-descriptions-item>
                                    <template #label>
                                        <span class="required-asterisk">*</span>
                                        主营产品上年度销量
                                    </template>
                                    <el-form-item prop="mainProductsLastYearSales"></el-form-item>
                                </el-descriptions-item>
                                <el-descriptions-item>
                                    <template #label>
                                        <span class="required-asterisk">*</span>
                                        主营产品上年度销量额
                                    </template>
                                    <el-form-item prop="mainProductsLastYearSalesRevenue">
                                    </el-form-item>
                                </el-descriptions-item>
                                <el-descriptions-item>
                                    <template #label>
                                        <span class="required-asterisk">*</span>
                                        员工人数
                                    </template>
                                    <el-form-item prop="employeesNumber"></el-form-item>
                                </el-descriptions-item>
                                <el-descriptions-item>
                                    <template #label> 生产作业人员</template>
                                    <el-form-item prop="productionOperators"></el-form-item>
                                </el-descriptions-item>
                                <el-descriptions-item>
                                    <template #label> 技术工程师</template>
                                    <el-form-item prop="technicalEngineer"></el-form-item>
                                </el-descriptions-item>
                                <el-descriptions-item>
                                    <template #label> 质量管理人员</template>
                                    <el-form-item prop="qualityManagementPersonnel"></el-form-item>
                                </el-descriptions-item>
                            </el-descriptions>
                        </div>
                    </el-collapse-item>
                </div>

                <!-- 企业资质 -->
                <div v-if="hasMenuItem('4')" id="qualification" class="content-section">
                    <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="[]" 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.qualificationCategoryName || '-' }}
                                    </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.code || '-' }}
                                    </template>
                                </el-table-column>

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

                                <el-table-column align="center" label="有效截止期">
                                    <template #default="{ row }">
                                        {{ row.validUntil || '-' }}
                                    </template>
                                </el-table-column>
                                <el-table-column align="center" label="附件" prop="files">
                                </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="[]" 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.qualificationCategoryName || '-' }}
                                    </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.code || '-' }}
                                    </template>
                                </el-table-column>

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

                                <el-table-column align="center" label="有效截止期">
                                    <template #default="{ row }">
                                        {{ row.validUntil || '-' }}
                                    </template>
                                </el-table-column>
                                <el-table-column align="center" label="附件" prop="files">
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-collapse-item>
                </div>

                <!-- 主营产品情况 -->
                <div v-if="hasMenuItem('5')" id="products-quality" class="content-section">
                    <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="[]" 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('6')"
                    id="products-quality-performance"
                    class="content-section"
                >
                    <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="[]" 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"></el-form-item>
                                </el-descriptions-item>
                                <el-descriptions-item :span="2">
                                    <template #label>
                                        <span class="required-asterisk">*</span>
                                        企业业绩
                                    </template>
                                    <el-form-item prop="businessPerformance"></el-form-item>
                                </el-descriptions-item>
                                <el-descriptions-item :span="2">
                                    <template #label>
                                        <span class="required-asterisk">*</span>
                                        附件
                                    </template>
                                    <el-form-item prop="files"></el-form-item>
                                </el-descriptions-item>
                            </el-descriptions>
                        </div>
                    </el-collapse-item>
                    <el-table :data="[]" 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('7')" id="raw-materials" class="content-section">
                    <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="[]" 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('8')" id="manufacturing" class="content-section">
                    <el-collapse-item name="manufacturing">
                        <template #title>
                            <div class="section-title">
                                <el-icon>
                                    <Document />
                                </el-icon>
                                <span>生产制造过程绩效</span>
                            </div>
                        </template>
                        <div class="section-content">
                            <el-descriptions :column="2" border>
                                <el-descriptions-item :span="2">
                                    <template #label>
                                        <span class="required-asterisk">*</span>
                                        生产工艺流程(可附页说明)
                                    </template>
                                    <el-form-item prop="suproductionProcess"></el-form-item>
                                </el-descriptions-item>
                                <el-descriptions-item :span="2">
                                    <template #label> 附件</template>
                                    <el-form-item prop="b"></el-form-item>
                                </el-descriptions-item>
                            </el-descriptions>
                            <el-table :data="[]" 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('9')" id="equipment" class="content-section">
                    <el-collapse-item name="equipment">
                        <template #title>
                            <div class="section-title">
                                <el-icon>
                                    <Document />
                                </el-icon>
                                <span>主要生产设备(可附页)</span>
                            </div>
                        </template>
                        <div class="section-content">
                            <el-table :data="[]" 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"></el-form-item>
                                </el-descriptions-item>
                            </el-descriptions>
                        </div>
                    </el-collapse-item>
                </div>

                <!-- 主要检验设备 -->
                <div v-if="hasMenuItem('10')" id="equipment-inspection" class="content-section">
                    <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="[]" 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"></el-form-item>
                                </el-descriptions-item>
                            </el-descriptions>
                        </div>
                    </el-collapse-item>
                </div>

                <!-- 其他特别说明 -->
                <div v-if="hasMenuItem('11')" id="company-scale" class="content-section">
                    <el-collapse-item name="company-scale">
                        <template #title>
                            <div class="section-title">
                                <el-icon>
                                    <Document />
                                </el-icon>
                                <span>附件说明</span>
                            </div>
                        </template>
                        <div class="section-content">
                            <el-descriptions :column="2" border>
                                <el-descriptions-item :span="2">
                                    <template #label> 特别说明</template>
                                    <el-form-item prop="notes"></el-form-item>
                                </el-descriptions-item>
                                <el-descriptions-item :span="2">
                                    <template #label> 附件</template>
                                    <el-form-item prop="b"></el-form-item>
                                </el-descriptions-item>
                            </el-descriptions>
                        </div>
                    </el-collapse-item>
                </div>
            </el-collapse>
        </div>
    </super-dialog>
</template>

<script lang="ts" setup>
import SuperDialog from '@/components/Dialog/index.vue'
import { computed, onMounted, ref } from 'vue'
import { Document } from '@element-plus/icons-vue'
// 1. 定义 props
const props = defineProps({
    isShowAdd: {
        type: Boolean,
        default: false
    },
    title: {
        type: String,
        default: ''
    },
    selectedContent: {
        type: Array,
        default: () => []
    }
})

const detailLoading = ref<Boolean>(false)
const activeCollapse = ref([
    'personnel-info',
    'basic-info',
    'other-notes',
    'qualification',
    'products-quality',
    'products-quality-performance',
    'raw-materials',
    'manufacturing',
    'equipment',
    'equipment-inspection',
    'company-scale'
])

onMounted(() => {})

// 2. 定义 emit
const emit = defineEmits(['update:isShowAdd', 'refresh', 'cancel'])

const openPage = () => {}

const closePage = () => {
    // 触发取消事件，通知父组件这是取消操作
    emit('cancel')
    emit('update:isShowAdd', false)
}

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

defineExpose({
    openPage
})

// 3. 使用 computed 定义双向绑定
const dialogVisible = computed({
    get() {
        return props.isShowAdd
    },
    set(val) {
        emit('update:isShowAdd', false)
    }
})
</script>

<style lang="scss" scoped>
.table-container {
    height: 60vh;
}
</style>
