<template>
  <div class="app-containerjh">
    <!-- 查询表单 -->
    <el-form ref="queryForm" :inline="true" :model="queryParams" class="drillbit-form">
      <el-form-item label="钻头尺寸">
        <el-input v-model="queryParams.ztcc" placeholder="请输入钻头尺寸" clearable style="width: 150px;" />
      </el-form-item>
      <el-form-item label="钻头型号">
        <el-input v-model="queryParams.ztxh" placeholder="请输入钻头型号" clearable style="width: 150px;" />
      </el-form-item>
      <el-form-item label="钻头类别">
        <el-input v-model="queryParams.ztlb" placeholder="请输入钻头类别" clearable style="width: 150px;" />
      </el-form-item>
      <el-form-item label="生产厂家">
        <el-input v-model="queryParams.sccj" placeholder="请输入生产厂家" clearable style="width: 150px;" />
      </el-form-item>
      <!-- <el-form-item label="钻头编号">
        <el-input v-model="queryParams.ztbh" placeholder="请输入钻头编号" clearable style="width: 150px;" />
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" @click="onSearch" size="mini">查询</el-button>
        <el-button @click="onReset" size="mini">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="onAdd"
          v-hasPermi="['system:ztxxJcxx:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="onEdit"
          v-hasPermi="['system:ztxxJcxx:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="onDelete"
          v-hasPermi="['system:ztxxJcxx:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['system:ztxxJcxx:export']">导出</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport"
          v-hasPermi="['system:user:import']">导入</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="onSearch"></right-toolbar>
    </el-row>
    <!-- 数据表格 -->
    <el-table :data="tableData" style="width: 100%;" :height="tableHeight" stripe highlight-current-row border
      v-loading="loading" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <!-- <el-table-column prop="ztbh" label="钻头编号" width="100" align="center" /> -->
      <el-table-column prop="ztcc" label="钻头尺寸mm" align="center" />
      <el-table-column prop="ztxh" label="钻头型号" align="center" />
      <el-table-column prop="ztlb" label="钻头类别" align="center" />
      <el-table-column prop="sccj" label="生产厂家" align="center" />
      <el-table-column prop="t01" label="刀翼总数" width="100" align="center" show-overflow-tooltip
        :formatter="(row) => getOptionLabel(row.t01, bladeCountOptions)" />
      <el-table-column prop="t02" label="布齿密度" width="100" align="center" show-overflow-tooltip
        :formatter="(row) => getOptionLabel(row.t02, bcmdOptions)" />
      <el-table-column prop="t03" label="切削齿尺寸mm" width="150" align="center" show-overflow-tooltip
        :formatter="(row) => getOptionLabel(row.t03, qxccOptions)" />
      <el-table-column prop="t04" label="切削齿后倾角°" width="150" align="center" show-overflow-tooltip
        :formatter="(row) => getOptionLabel(row.t04, qxfnjOptions)" />
      <el-table-column prop="t05" label="冠部轮廓" width="150" align="center" show-overflow-tooltip
        :formatter="(row) => getOptionLabel(row.t05, gbxzOptions)" />
      <!-- <el-table-column prop="t06" label="保径" width="150" align="center" show-overflow-tooltip
        :formatter="(row) => getOptionLabel(row.t06, bjOptions)" /> -->
      <el-table-column label="操作" width="220" align="center">
        <template #default="scope">
          <el-button type="primary" size="mini" @click="onDetail(scope.row)">详情</el-button>
          <el-button type="warning" size="mini" @click="onEdit(scope.row)">编辑</el-button>
          <el-button type="danger" size="mini" @click="onDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="pagination.pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="pagination.pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
      style="margin-top: 10px; text-align: right;" />
    <!-- 新增弹窗 -->
    <el-dialog title="新增钻头" :visible.sync="dialogVisible" width="90%" @close="handleDialogClose">
      <div class="dialog-card">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
          <el-row :gutter="20">
            <!-- <el-col :span="12">
              <el-form-item label="钻头编号" prop="ztbh">
                <el-input v-model="form.ztbh" />
              </el-form-item>
            </el-col> -->
            <el-col :span="12">
              <el-form-item label="钻头尺寸" prop="ztcc">
                <el-input v-model="form.ztcc" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="钻头型号" prop="ztxh">
                <el-input v-model="form.ztxh" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="钻头类别" prop="ztlb">
                <el-input v-model="form.ztlb" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="生产厂家" prop="sccj">
                <el-select v-model="form.sccj" clearable filterable style="width: 660px;">
                  <el-option v-for="item in cjData" :key="item.id" :label="item.mc" :value="item.mc" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="钻头设计型号" prop="ztsjxh">
                <el-input v-model="form.ztsjxh" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider class="divider-strong">设计详细参数</el-divider>
          <el-row :gutter="20" class="geometry-row">
            <el-col :span="8">
              <el-form-item label="冠部轮廓" prop="gblk">
                <el-select v-model="form.gblk" placeholder="请选择冠部轮廓" clearable @change="handleGblkChange"
                  style="width: 100%;">
                  <el-option v-for="item in crownProfileOptions" :key="item.value" :label="item.label"
                    :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col v-if="['双圆弧', '单圆弧'].includes(form.gblk)" :span="8">
              <el-form-item label="R1(mm)" prop="r1">
                <el-input v-model="form.r1" placeholder="请输入 R1" />
              </el-form-item>
            </el-col>
            <el-col v-if="form.gblk === '双圆弧'" :span="8">
              <el-form-item label="R2(mm)" prop="r2">
                <el-input v-model="form.r2" placeholder="请输入 R2" />
              </el-form-item>
            </el-col>
            <el-col v-if="form.gblk === '其他'" :span="8">
              <el-form-item label="其他" prop="qt">
                <el-input v-model="form.qt" placeholder="请输入说明" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="内锥角(°)" prop="nzj">
                <el-input v-model="form.nzj" placeholder="请输入内锥角" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="冠部高度(mm)" prop="gbgd">
                <el-input v-model="form.gbgd" placeholder="请输入冠部高度" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="冠顶直径(mm)" prop="gdzj">
                <el-input v-model="form.gdzj" placeholder="请输入冠顶直径" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="内锥高度(mm)" prop="nzgd">
                <el-input v-model="form.nzgd" placeholder="请输入内锥高度" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="后倾角心部(°)" prop="hqjxb">
                <el-input v-model="form.hqjxb" placeholder="请输入后倾角心部" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="后倾角冠部(°)" prop="hqjgb">
                <el-input v-model="form.hqjgb" placeholder="请输入后倾角冠部" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="后倾角保径(°)" prop="hqjbj">
                <el-input v-model="form.hqjbj" placeholder="请输入后倾角保径" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="后倾角其他(°)" prop="hqjqt">
                <el-input v-model="form.hqjqt" placeholder="请输入后倾角其他" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="后排齿后倾角(°)" prop="hpchqj">
                <el-input v-model="form.hpchqj" placeholder="请输入后排齿后倾角" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider class="divider-strong">特征参数</el-divider>
          <el-collapse v-model="activeCollapse" class="collapse-area">
            <el-collapse-item title="刀翼总数" name="dyzs">
              <el-form-item prop="tzdm01">
                <el-radio-group v-model="form.tzdm01" style="width:100%" @change="onTzdm01Change">
                  <el-radio-button v-for="item in bladeCountOptions" :key="item.value" :label="item.value"
                    style="margin-right:24px;display:inline-block;min-width:100px;">
                    <div style="display:flex;flex-direction:column;align-items:center;">
                      <img :src="item.img" style="width:80px;height:80px;margin-bottom:4px;" v-if="item.img"
                        @click.stop="handlePreview(item.img)" />
                      <span>{{ item.label }}</span>
                    </div>
                  </el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-collapse-item>
            <el-collapse-item title="布齿密度" name="bcmd">
              <el-form-item prop="tzdm02">
                <el-radio-group v-model="form.tzdm02" style="width:100%">
                  <el-radio-button v-for="item in bcmdOptions" :key="item.value" :label="item.value"
                    style="margin-right:24px;display:inline-block;min-width:100px;">
                    <div style="display:flex;flex-direction:column;align-items:center;">
                      <img :src="item.img" style="width:80px;height:80px;margin-bottom:4px;" v-if="item.img"
                        @click.stop="handlePreview(item.img)" />
                      <span>{{ item.label }}</span>
                    </div>
                  </el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-collapse-item>
            <el-collapse-item title="切削齿尺寸mm" name="qxcc">
              <el-form-item prop="tzdm03">
                <el-radio-group v-model="form.tzdm03" style="width:100%">
                  <el-radio-button v-for="item in qxccOptions" :key="item.value" :label="item.value"
                    style="margin-right:24px;display:inline-block;min-width:100px;">
                    <div style="display:flex;flex-direction:column;align-items:center;">
                      <img :src="item.img" style="width:80px;height:80px;margin-bottom:4px;" v-if="item.img"
                        @click.stop="handlePreview(item.img)" />
                      <span>{{ item.label }}</span>
                    </div>
                  </el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-collapse-item>
            <el-collapse-item title="切削齿后倾角°" name="qxfnj">
              <el-form-item prop="tzdm04">
                <el-radio-group v-model="form.tzdm04" style="width:100%">
                  <el-radio-button v-for="item in qxfnjOptions" :key="item.value" :label="item.value"
                    style="margin-right:24px;display:inline-block;min-width:100px;">
                    <div style="display:flex;flex-direction:column;align-items:center;">
                      <img :src="item.img" style="width:80px;height:80px;margin-bottom:4px;" v-if="item.img"
                        @click.stop="handlePreview(item.img)" />
                      <span>{{ item.label }}</span>
                    </div>
                  </el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-collapse-item>
            <el-collapse-item title="冠部轮廓" name="gbxz">
              <el-form-item prop="tzdm05">
                <el-radio-group v-model="form.tzdm05" style="width:100%">
                  <el-radio-button v-for="item in gbxzOptions" :key="item.value" :label="item.value"
                    style="margin-right:24px;display:inline-block;min-width:100px;">
                    <div style="display:flex;flex-direction:column;align-items:center;">
                      <img :src="item.img" style="width:80px;height:80px;margin-bottom:4px;" v-if="item.img"
                        @click.stop="handlePreview(item.img)" />
                      <span>{{ item.label }}</span>
                    </div>
                  </el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-collapse-item>
            <!-- <el-collapse-item title="保径" name="bj">
              <el-form-item prop="tzdm06">
                <el-radio-group v-model="form.tzdm06" style="width:100%">
                  <el-radio-button v-for="item in bjOptions" :key="item.value" :label="item.value"
                    style="margin-right:24px;display:inline-block;min-width:100px;">
                    <div style="display:flex;flex-direction:column;align-items:center;">
                      <img :src="item.img" style="width:80px;height:80px;margin-bottom:4px;" v-if="item.img"
                        @click.stop="handlePreview(item.img)" />
                      <span>{{ item.label }}</span>
                    </div>
                  </el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-collapse-item> -->
          </el-collapse>
          <!-- 图片上传区域 -->
          <div class="image-upload-section">
            <el-divider class="divider-strong">图片上传</el-divider>
            <el-upload ref="formImageUpload" :action="imageUploadUrl" :headers="imageUploadHeaders"
              :on-success="handleFormImageUploadSuccess" :on-error="handleImageUploadError"
              :before-upload="handleBeforeImageUpload" :file-list="formImageFileList" :on-remove="handleFormImageRemove"
              list-type="picture-card" :limit="10" :multiple="true" accept="image/*">
              <i class="el-icon-plus"></i>
            </el-upload>
            <div class="upload-tip">支持上传多张图片文件，最多10张，单个文件不超过5MB</div>
          </div>
        </el-form>
        <span slot="footer" class="dialog-footer dialog-footer-strong">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="onSave">保 存</el-button>
        </span>
      </div>
    </el-dialog>
    <!-- 详情弹窗 -->
    <el-dialog title="查看" :visible.sync="detailVisible" width="95%" @close="handleDetailDialogClose">
      <div class="detail-container">
        <!-- 基本信息 -->
        <div class="basic-info">
          <div class="info-row">
            <span class="info-label">钻头型号:</span>
            <span class="info-value">{{ detailData.ztxh }}</span>
            <span class="info-label">尺寸mm:</span>
            <span class="info-value">{{ detailData.ztcc }}mm</span>
            <span class="info-label">类别:</span>
            <span class="info-value">{{ detailData.ztlb }}</span>
            <span class="info-label">编号:</span>
            <span class="info-value">{{ detailData.ztbh }}</span>
          </div>
        </div>
        <!-- 现代化特征代码卡片区 -->
        <div class="feature-code-cards">
          <div class="code-card" v-for="(item, i) in featureMap" :key="i">
            <div class="code-title">{{ item.tzdl }}</div>
            <div class="code-value">{{ detailData[item.codeField + '_tzdm'] || '--' }}</div>
            <!-- <div class="code-value">{{ detailData[item.codeField + '_value'] || (detailData[item.codeField] || '--') }}</div> -->
          </div>
        </div>

        <!-- 设计详细参数 -->
        <div class="design-detail-params">
          <el-divider class="divider-strong">设计详细参数</el-divider>
          <el-form :model="detailData" label-width="120px">
            <el-row :gutter="20" class="geometry-row">
              <el-col :span="8">
                <el-form-item label="冠部轮廓">
                  <el-input :value="detailData.gblk || '--'" readonly />
                </el-form-item>
              </el-col>
              <el-col v-if="['双圆弧', '单圆弧'].includes(detailData.gblk)" :span="8">
                <el-form-item label="R1(mm)">
                  <el-input :value="detailData.r1 || '--'" readonly />
                </el-form-item>
              </el-col>
              <el-col v-if="detailData.gblk === '双圆弧'" :span="8">
                <el-form-item label="R2(mm)">
                  <el-input :value="detailData.r2 || '--'" readonly />
                </el-form-item>
              </el-col>
              <el-col v-if="detailData.gblk === '其他'" :span="8">
                <el-form-item label="其他">
                  <el-input :value="detailData.qt || '--'" readonly />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="内锥角(°)">
                  <el-input :value="detailData.nzj || '--'" readonly />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="冠部高度(mm)">
                  <el-input :value="detailData.gbgd || '--'" readonly />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="冠顶直径(mm)">
                  <el-input :value="detailData.gdzj || '--'" readonly />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="内锥高度(mm)">
                  <el-input :value="detailData.nzgd || '--'" readonly />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="后倾角心部(°)">
                  <el-input :value="detailData.hqjxb || '--'" readonly />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="后倾角冠部(°)">
                  <el-input :value="detailData.hqjgb || '--'" readonly />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="后倾角保径(°)">
                  <el-input :value="detailData.hqjbj || '--'" readonly />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="后倾角其他(°)">
                  <el-input :value="detailData.hqjqt || '--'" readonly />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="后排齿后倾角(°)">
                  <el-input :value="detailData.hpchqj || '--'" readonly />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>

        <!-- 特征参数 -->
        <div class="feature-params">
          <div class="params-header">
            <div class="params-grid">
              <div class="param-item" v-for="(item, i) in detailParams" :key="i">
                <div class="param-content">
                  <div class="param-text">{{ item.label }}: {{ item.value }}</div>
                  <div class="param-image">
                    <img :src="item.img" v-if="item.img" alt="参数图片" />
                    <div class="placeholder-img" v-else></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 图片展示区域（只读） -->
        <div class="image-display-section" v-if="imageFileList && imageFileList.length > 0">
          <el-divider class="divider-strong">图片</el-divider>
          <div class="image-list">
            <div class="image-item" v-for="(item, index) in imageFileList" :key="index">
              <el-image :src="item.url" :preview-src-list="imageFileList.map(img => img.url)" fit="cover"
                class="display-image">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
              <div class="image-name">{{ item.fileName || item.name }}</div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="detailVisible = false">关闭</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="imgPreviewVisible" width="80%" append-to-body class="img-preview-dialog"
      :show-close="true" center>
      <img :src="imgPreviewUrl" style="max-width:80vw;max-height:80vh;border-radius:18px;" />
    </el-dialog>
    <!-- 用户导入对话框 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <!-- <div class="el-upload__tip" slot="tip">
            <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
          </div> -->
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
            @click="importTemplate">下载模板</el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listTzsj } from "@/api/system/jsha";
import { listZtxxJcxx, addZtxxJcxx, updateZtxxJcxx, delZtxxJcxx, getZtxxJcxx } from '@/api/ztxx';
import { getToken } from "@/utils/auth";
import { selctListZtxxCj } from "@/api/system/ztxxCj";
export default {
  data() {
    const vm = this;
    const validateR1 = (rule, value, callback) => {
      if (['双圆弧', '单圆弧'].includes(vm.form.gblk) && !value) {
        callback(new Error('请输入 R1(mm)'));
      } else {
        callback();
      }
    };
    const validateR2 = (rule, value, callback) => {
      if (vm.form.gblk === '双圆弧' && !value) {
        callback(new Error('请输入 R2(mm)'));
      } else {
        callback();
      }
    };
    const validateQt = (rule, value, callback) => {
      if (vm.form.gblk === '其他' && !value) {
        callback(new Error('请输入说明'));
      } else {
        callback();
      }
    };
    return {
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/system/ztxxJcxx/importData"
      },
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 分页参数
      pagination: {
        pageNum: 1,
        pageSize: 20,
        total: 0
      },
      // 查询参数
      queryParams: {
        ztcc: '',
        ztxh: '',
        ztlb: '',
        sccj: '',
        ztbh: '',
      },
      imgPreviewVisible: false,
      imgPreviewUrl: '',
      form: {
        ztcc: '',
        ztxh: '',
        ztlb: '',
        sccj: '',
        ztbh: '',
        gblk: '',
        r1: '',
        r2: '',
        qt: '',
        nzj: '',
        gbgd: '',
        gdzj: '',
        nzgd: '',
        hqjxb: '',
        hqjgb: '',
        hqjbj: '',
        hqjqt: '',
        hpchqj: '',
        // 刀翼总数
        tzdm01: '',
        tzxl01: '',
        slt01: '',
        t01: '', // 刀翼总数选项ID
        // 布齿密度
        tzdm02: '',
        tzxl02: '',
        slt02: '',
        t02: '', // 布齿密度选项ID
        // 切削齿尺寸mm
        tzdm03: '',
        tzxl03: '',
        slt03: '',
        t03: '', // 切削齿尺寸选项ID
        // 切削齿后倾角
        tzdm04: '',
        tzxl04: '',
        slt04: '',
        t04: '', // 切削齿后倾角选项ID
        // 冠部轮廓
        tzdm05: '',
        tzxl05: '',
        slt05: '',
        t05: '', // 冠部轮廓选项ID
        // 保径
        tzdm06: '',
        tzxl06: '',
        slt06: '',
        t06: '', // 保径选项ID
      },
      // 模拟接口数据
      tableData: [],
      dialogVisible: false,
      detailVisible: false, // 详情弹窗显示状态
      detailData: {}, // 详情数据
      bcmdOptions: [],       // 布齿密度选项
      qxccOptions: [],      // 切削齿尺寸mm选项
      qxfnjOptions: [],     // 切削齿后倾角°选项
      gbxzOptions: [],      // 冠部轮廓选项
      bjOptions: [],        // 保径选项
      bladeCountOptions: [], // 刀翼总数选项
      crownProfileOptions: [
        { label: '双圆弧', value: '双圆弧' },
        { label: '单圆弧', value: '单圆弧' },
        { label: '其他', value: '其他' }
      ],
      activeCollapse: ['dyzs'], // 默认展开第一个
      editType: '',
      // 表单校验规则
      rules: {
        ztbh: [
          { required: true, message: '请输入钻头编号', trigger: 'blur' }
        ],
        ztcc: [
          { required: true, message: '请输入钻头尺寸', trigger: 'blur' }
        ],
        ztxh: [
          { required: true, message: '请输入钻头型号', trigger: 'blur' }
        ],
        ztlb: [
          { required: true, message: '请输入钻头类别', trigger: 'blur' }
        ],
        sccj: [
          { required: true, message: '请输入生产厂家', trigger: 'blur' }
        ],
        nzgd: [
          { required: true, message: '请输入内锥高度', trigger: 'blur' }
        ],
        gbgd: [
          { required: true, message: '请输入冠部高度', trigger: 'blur' }
        ],
        // gblk: [
        //   { required: true, message: '请选择冠部轮廓', trigger: 'change' }
        // ],
        // r1: [
        //   { validator: validateR1, trigger: 'blur' }
        // ],
        // r2: [
        //   { validator: validateR2, trigger: 'blur' }
        // ],
        // qt: [
        //   { validator: validateQt, trigger: 'blur' }
        // ],
        tzdm01: [
          { required: true, message: '请选择刀翼总数', trigger: 'change' },
          {
            validator: (rule, value, callback) => {
              //console\.log('刀翼总数校验:', value);
              if (!value || value === '') {
                callback(new Error('请选择刀翼总数'));
              } else {
                callback();
              }
            },
            trigger: 'change'
          }
        ],
        tzdm02: [
          { required: true, message: '请选择布齿密度', trigger: 'change' }
        ],
        tzdm03: [
          { required: true, message: '请选择切削齿尺寸', trigger: 'change' }
        ],
        tzdm04: [
          { required: true, message: '请选择切削齿后倾角', trigger: 'change' }
        ],
        tzdm05: [
          { required: true, message: '请选择冠部轮廓', trigger: 'change' }
        ],
        tzdm06: [
          { required: true, message: '请选择保径', trigger: 'change' }
        ]
      },
      // 详情页特征参数列表
      featureMap: [
        { tzdl: '刀翼总数', field: 'bladeCountOptions', codeField: 't01' },
        { tzdl: '布齿密度', field: 'bcmdOptions', codeField: 't02' },
        { tzdl: '切削齿尺寸mm', field: 'qxccOptions', codeField: 't03' },
        { tzdl: '切削齿后倾角°', field: 'qxfnjOptions', codeField: 't04' },
        { tzdl: '冠部轮廓', field: 'gbxzOptions', codeField: 't05' },
        // { tzdl: '保径', field: 'bjOptions', codeField: 't06' }
      ],
      detailParams: [
        // { label: '刀翼总数', value: '3刀翼', img: 'xxx.png' }
      ],
      // 表格高度，保证超出后出现滚动条
      tableHeight: 400,
      cjData: [],
      // 图片上传相关
      imageUploadUrl: process.env.VUE_APP_BASE_API + "/common/upload",
      imageUploadHeaders: {
        Authorization: "Bearer " + getToken()
      },
      imageFileList: [], // 详情弹窗的图片列表（只读）
      formImageFileList: [] // 新增/编辑弹窗的图片列表
    }
  },
  async mounted() {
    //console\.log('mounted 执行了');
    await Promise.all([
      this.getFeatureOptions('刀翼总数', 'bladeCountOptions'),
      this.getFeatureOptions('布齿密度', 'bcmdOptions'),
      this.getFeatureOptions('切削齿尺寸mm', 'qxccOptions'),
      this.getFeatureOptions('切削齿后倾角°', 'qxfnjOptions'),
      this.getFeatureOptions('冠部轮廓', 'gbxzOptions'),
      // this.getFeatureOptions('保径', 'bjOptions')
    ]);
    this.onSearch();
    // 初始化和监听窗口尺寸，动态设置表格高度
    this.updateTableHeight();
    this.getCjList();
    window.addEventListener('resize', this.updateTableHeight);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.updateTableHeight);
  },
  methods: {
    updateTableHeight() {
      // 270 与原先 style 中的 calc(100vh - 270px) 一致
      const headerAndControlsHeight = 250;
      const minHeight = 260; // 保底高度，避免过小
      const height = window.innerHeight - headerAndControlsHeight;
      this.tableHeight = height > minHeight ? height : minHeight;
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "用户导入";
      this.upload.open = true;
    },
    /** 下载模板操作 */
    importTemplate() {
      this.download('system/ztxxJcxx/downdrmb', {
      }, `钻头基本信息_${new Date().getTime()}.xlsx`)
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
      this.pagination.pageNum = 1;
      this.onSearch();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    onSearch() {
      // 查询接口
      const params = {
        ...this.queryParams,
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize
      };
      listZtxxJcxx(params).then(res => {
        this.tableData = res.rows || [];
        this.total = res.total || 0;
        this.pagination.total = res.total || 0;
        this.loading = false
      });
    },
    onAdd() {
      // 新增逻辑
      this.editType = 'add';
      // 设置所有特征参数都展开
      this.activeCollapse = ['dyzs', 'bcmd', 'qxcc', 'qxfnj', 'gbxz', 'bj'];
      this.openDialog();
      // 清空表单
      this.form = {
        ztcc: '', ztxh: '', ztlb: '', sccj: '', ztbh: '',
        gblk: '', r1: '', r2: '', qt: '',
        nzj: '', gbgd: '', gdzj: '', nzgd: '',
        hqjxb: '', hqjgb: '', hqjbj: '', hqjqt: '', hpchqj: '',
        tzdm01: '', tzdm02: '', tzdm03: '', tzdm04: '', tzdm05: '', tzdm06: '',
        tzxl01: '', tzxl02: '', tzxl03: '', tzxl04: '', tzxl05: '', tzxl06: '',
        slt01: '', slt02: '', slt03: '', slt04: '', slt05: '', slt06: '',
        t01: '', t02: '', t03: '', t04: '', t05: '', t06: '',
        fileList: []
      };
      // 清空图片列表
      this.formImageFileList = [];
    },
    onReset() {
      this.queryParams = {
        ztcc: '',
        ztxh: '',
        ztlb: '',
        sccj: '',
        ztbh: '',
      };
      this.pagination.pageNum = 1;
      this.resetForm("queryForm");
      this.onSearch();
    },
    // 分页大小改变
    handleSizeChange(size) {
      this.pagination.pageSize = size;
      this.pagination.pageNum = 1;
      this.onSearch();
    },
    // 当前页改变
    handleCurrentChange(page) {
      this.pagination.pageNum = page;
      this.onSearch();
    },
    async onDetail(row) {
      const res = await getZtxxJcxx(row.id);
      this.detailData = res.data;
      // 等待所有options加载完
      await Promise.all([
        this.getFeatureOptions('刀翼总数', 'bladeCountOptions'),
        this.getFeatureOptions('布齿密度', 'bcmdOptions'),
        this.getFeatureOptions('切削齿尺寸mm', 'qxccOptions'),
        this.getFeatureOptions('切削齿后倾角°', 'qxfnjOptions'),
        this.getFeatureOptions('冠部轮廓', 'gbxzOptions'),
        // this.getFeatureOptions('保径', 'bjOptions')
      ]);
      // 查找每个参数
      this.detailParams = this.getDetailFeatureList();
      // 初始化图片列表
      this.initImageFileList();
      this.detailVisible = true;
    },
    /** 初始化图片文件列表 */
    initImageFileList() {
      if (this.detailData.fileList && Array.isArray(this.detailData.fileList) && this.detailData.fileList.length > 0) {
        this.imageFileList = this.detailData.fileList.map((item, index) => {
          // 处理filePath，确保以/开头
          const filePath = item.filePath || '';
          const url = filePath.startsWith('http') ? filePath : (process.env.VUE_APP_BASE_API + (filePath.startsWith('/') ? filePath : '/' + filePath));
          return {
            fileName: item.fileName || '',
            filePath: item.filePath || '',
            url: url,
            uid: Date.now() + index,
            name: item.fileName || ''
          };
        });
      } else {
        this.imageFileList = [];
      }
    },
    findOptionById(id, options, label) {
      const item = options.find(opt => opt.id === id);
      return {
        label,
        value: item ? item.label : '未设置',
        img: item ? item.img : ''
      }
    },
    onDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除钻头基础信息编号为"' + ids + '"的数据项？').then(function () {
        return delZtxxJcxx(ids);
      }).then(() => {
        this.onSearch();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });

    },
    // 打开弹窗时初始化
    openDialog() {
      this.dialogVisible = true;

      // 加载所有特征选项数据
      const optionPromises = [
        this.getFeatureOptions('刀翼总数', 'bladeCountOptions'),
        this.getFeatureOptions('布齿密度', 'bcmdOptions'),
        this.getFeatureOptions('切削齿尺寸mm', 'qxccOptions'),
        this.getFeatureOptions('切削齿后倾角°', 'qxfnjOptions'),
        this.getFeatureOptions('冠部轮廓', 'gbxzOptions'),
        // this.getFeatureOptions('保径', 'bjOptions')
      ];

      // 等待所有选项数据加载完成
      Promise.all(optionPromises).then(() => {
        // 如果是编辑模式，设置选中值
        if (this.editType === 'edit') {
          this.setSelectedValues();
        }
      });
    },

    // 刀翼数量切换时
    onBladeChange(val) {
      this.currentBladeImg = this.bladeImgs[val] || '';
      // 可在此处联动其他特征数据
      this.getFeatureOptions();
    },
    // 获取特征数据选项
    getFeatureOptions(tzdl, targetOptionsKey) {

      //console\.log('getFeatureOptions 调用', tzdl, targetOptionsKey);
      return listTzsj({ tzdl }).then(res => {
        //console\.log('listTzsj返回', tzdl, res.rows);
        this[targetOptionsKey] = res.rows.map(item => ({
          label: item.tzxl,
          value: item.tzdm,
          img: item.slt,
          id: item.id
        }));
        //console\.log('赋值后', targetOptionsKey, this[targetOptionsKey]);
      });
    },
    // 编辑
    onEdit(row) {
      this.editType = 'edit';
      this.onReset();
      const id = row.id || this.ids
      getZtxxJcxx(id).then(response => {
        this.form = response.data;
        console.log(this.form, 'this.form');
        // 初始化图片列表
        this.initFormImageFileList();
        this.openDialog();
        this.title = "修改钻头基础信息";
      });
    },

    // 根据ID设置选中值
    setSelectedValues() {
      const idMapping = [
        { idField: 't01', valueField: 'tzdm01', options: 'bladeCountOptions' },
        { idField: 't02', valueField: 'tzdm02', options: 'bcmdOptions' },
        { idField: 't03', valueField: 'tzdm03', options: 'qxccOptions' },
        { idField: 't04', valueField: 'tzdm04', options: 'qxfnjOptions' },
        { idField: 't05', valueField: 'tzdm05', options: 'gbxzOptions' },
        { idField: 't06', valueField: 'tzdm06', options: 'bjOptions' }
      ];

      idMapping.forEach(mapping => {
        const idValue = this.form[mapping.idField];
        if (idValue && this[mapping.options]) {
          const selectedOption = this[mapping.options].find(opt => opt.id === idValue);
          if (selectedOption) {
            this.form[mapping.valueField] = selectedOption.value;
            console.log(this.form[mapping.valueField], 'this.form[mapping.valueField]');
          }
        }
      });
    },

    handlePreview(url) {
      // this.imgPreviewUrl = url;
      // this.imgPreviewVisible = true;
    },
    onSave() {
      // 表单校验
      //console\.log('保存前表单数据:', this.form);
      //console\.log('刀翼总数值:', this.form.tzdm01);

      // 强制校验所有字段
      this.$refs.formRef.validate((valid) => {
        //console\.log('校验结果:', valid);
        if (valid) {
          // 1. 组装特征参数
          const featureMap = [
            { code: 'tzdm01', name: 'tzxl01', img: 'slt01', idField: 't01', options: this.bladeCountOptions },
            { code: 'tzdm02', name: 'tzxl02', img: 'slt02', idField: 't02', options: this.bcmdOptions },
            { code: 'tzdm03', name: 'tzxl03', img: 'slt03', idField: 't03', options: this.qxccOptions },
            { code: 'tzdm04', name: 'tzxl04', img: 'slt04', idField: 't04', options: this.qxfnjOptions },
            { code: 'tzdm05', name: 'tzxl05', img: 'slt05', idField: 't05', options: this.gbxzOptions },
            { code: 'tzdm06', name: 'tzxl06', img: 'slt06', idField: 't06', options: this.bjOptions }
          ];
          featureMap.forEach(item => {
            const selected = item.options.find(opt => opt.value === this.form[item.code]);
            if (selected) {
              this.form[item.name] = selected.label;
              this.form[item.img] = selected.img;
              this.form[item.idField] = selected.id; // 保存选中选项的ID
            } else {
              this.form[item.name] = '';
              this.form[item.img] = '';
              this.form[item.idField] = '';
            }
          });

          // 打印form
          //console\.log('保存的表单数据:', this.form);

          // 2. 处理图片列表，转换为fileList格式
          const fileListData = this.formImageFileList
            .filter(item => item.fileName && item.filePath)
            .map(item => ({
              fileName: item.fileName,
              filePath: item.filePath
            }));
          this.form.fileList = fileListData;

          // 3. 保存 - 确保编辑模式下传递ID
          const saveApi = this.editType === 'edit' ? updateZtxxJcxx : addZtxxJcxx;
          const saveData = { ...this.form };

          // 如果是编辑模式，确保ID字段存在
          if (this.editType === 'edit' && this.form.id) {
            saveData.id = this.form.id;
          }

          saveApi(saveData).then(() => {
            this.$message.success('保存成功');
            this.dialogVisible = false;

            this.onSearch();
          });
        } else {
          this.$message.error('请完善必填信息');
          return false;
        }
      });
    },
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/ztxxJcxx/export', {
        ...this.queryParams
      }, `ztxxJcxx_${new Date().getTime()}.xlsx`)
    },
    /** 弹窗关闭处理 */
    handleDialogClose() {
      this.dialogVisible = false;
      // 重置表单校验状态
      if (this.$refs.formRef) {
        this.$refs.formRef.resetFields();
      }
      // 清空图片列表
      this.formImageFileList = [];
    },
    handleGblkChange(value) {
      if (value === '双圆弧') {
        this.form.qt = '';
      } else if (value === '单圆弧') {
        this.form.qt = '';
        this.form.r2 = '';
      } else if (value === '其他') {
        this.form.r1 = '';
        this.form.r2 = '';
      } else {
        this.form.r1 = '';
        this.form.r2 = '';
        this.form.qt = '';
      }
      this.$nextTick(() => {
        if (this.$refs.formRef) {
          this.$refs.formRef.clearValidate(['r1', 'r2', 'qt']);
        }
      });
    },
    /** 刀翼总数变化处理 */
    onTzdm01Change(val) {
      //console\.log('刀翼总数变化:', val);
      this.$refs.formRef.validateField('tzdm01');
    },
    // 获取参数标签
    getParamLabel(index) {
      switch (index) {
        case 1: return '刀翼总数';
        case 2: return '布齿密度';
        case 3: return '切削齿尺寸mm';
        case 4: return '切削齿后倾角';
        case 5: return '冠部轮廓';
        // case 6: return '保径';
        default: return '';
      }
    },
    // 获取参数值
    getParamValue(index) {
      switch (index) {
        case 1: return this.detailData.tzxl01 || '未设置';
        case 2: return this.detailData.tzxl02 || '未设置';
        case 3: return this.detailData.tzxl03 || '未设置';
        case 4: return this.detailData.tzxl04 || '未设置';
        case 5: return this.detailData.tzxl05 || '未设置';
        case 6: return this.detailData.tzxl06 || '未设置';
        default: return '';
      }
    },
    // 获取参数图片
    getParamImage(index) {
      switch (index) {
        case 1: return this.detailData.slt01;
        case 2: return this.detailData.slt02;
        case 3: return this.detailData.slt03;
        case 4: return this.detailData.slt04;
        case 5: return this.detailData.slt05;
        case 6: return this.detailData.slt06;
        default: return '';
      }
    },
    // 获取选项标签
    getOptionLabel(id, options) {

      const item = options.find(opt => String(opt.id) === String(id));
      //console\.log(options, item, 111);
      return item ? item.label : '未设置';
    },
    // 详情页特征参数列表
    getDetailFeatureList() {
      // 在显示详情时，更新detailData，将t01-t06从tzdm转为tzxl
      this.featureMap.forEach(item => {
        const id = this.detailData[item.codeField]; // 这是id
        const options = this[item.field] || [];
        const option = options.find(opt => String(opt.id) === String(id));
        if (option) {
          // 存 tzdm
          this.detailData[`${item.codeField}_tzdm`] = option.value; // value 就是 tzdm
        } else {
          this.detailData[`${item.codeField}_tzdm`] = '--';
        }
      });

      return this.featureMap.map((item, idx) => {
        // 取出当前特征的id
        const code = this.detailData[item.codeField];
        // 取出当前特征的options
        const options = this[item.field] || [];
        // 查找对应的option（用id比对！）
        const option = options.find(opt => String(opt.id) === String(code));
        return {
          label: item.tzdl,
          code: code || '--',
          value: option ? option.label : '未设置',
          img: option ? option.img : ''
        }
      });
    },
    /** 查询厂家信息列表 */
    getCjList() {
      this.loading = true;
      selctListZtxxCj({}).then(response => {
        this.cjData = response.rows;
      });
    },
    /** 图片上传前校验 */
    handleBeforeImageUpload(file) {
      const isImage = file.type.indexOf('image/') === 0;
      const isLt5M = file.size / 1024 / 1024 < 5;

      if (!isImage) {
        this.$message.error('只能上传图片文件!');
        return false;
      }
      if (!isLt5M) {
        this.$message.error('上传图片大小不能超过 5MB!');
        return false;
      }
      return true;
    },
    /** 新增/编辑弹窗图片上传成功 */
    handleFormImageUploadSuccess(response, file, fileList) {
      if (response.code === 200) {
        // 处理filePath，确保格式正确
        const filePath = response.fileName || '';
        const url = response.url || (filePath.startsWith('http') ? filePath : (process.env.VUE_APP_BASE_API + (filePath.startsWith('/') ? filePath : '/' + filePath)));

        // 格式化上传成功的数据
        const fileItem = {
          fileName: response.originalFilename, // fileName使用originalFilename
          filePath: response.fileName, // filePath使用fileName
          url: url,
          uid: file.uid,
          name: response.originalFilename,
          status: 'success'
        };

        // 更新formImageFileList，将新上传的文件信息合并进去
        // fileList 已经包含了所有文件（包括刚上传的），我们需要更新对应的项
        this.formImageFileList = fileList.map(item => {
          // 如果是刚上传的文件，使用格式化后的数据
          if (item.uid === file.uid) {
            return fileItem;
          }
          // 如果是已存在的文件，检查是否已经有完整数据，如果没有则保持原有结构
          if (item.fileName && item.filePath) {
            // 已有完整数据，直接返回
            return item;
          }
          // 需要从现有数据中恢复
          return {
            fileName: item.fileName || item.name || '',
            filePath: item.filePath || (item.url ? item.url.replace(process.env.VUE_APP_BASE_API, '') : ''),
            url: item.url || '',
            uid: item.uid,
            name: item.name || '',
            status: item.status || 'success'
          };
        });

        this.$message.success(`图片"${response.originalFilename}"上传成功`);
      } else {
        this.$message.error(response.msg || '图片上传失败');
        // 上传失败时，从fileList中移除该文件
        this.$nextTick(() => {
          this.formImageFileList = fileList.filter(item => item.uid !== file.uid);
        });
      }
    },
    /** 图片上传失败 */
    handleImageUploadError(err, file, fileList) {
      this.$message.error('图片上传失败，请重试');
    },
    /** 新增/编辑弹窗删除图片 */
    handleFormImageRemove(file, fileList) {
      // 更新图片列表
      this.formImageFileList = fileList.map(item => {
        // 保持完整的数据结构
        if (item.fileName && item.filePath) {
          return item;
        }
        return {
          fileName: item.fileName || item.name || '',
          filePath: item.filePath || (item.url ? item.url.replace(process.env.VUE_APP_BASE_API, '') : ''),
          url: item.url || '',
          uid: item.uid,
          name: item.name || '',
          status: item.status || 'success'
        };
      });
      this.$message.success('图片已删除');
    },
    /** 初始化新增/编辑弹窗图片列表 */
    initFormImageFileList() {
      if (this.form.fileList && Array.isArray(this.form.fileList) && this.form.fileList.length > 0) {
        this.formImageFileList = this.form.fileList.map((item, index) => {
          // 处理filePath，确保以/开头
          const filePath = item.filePath || '';
          const url = filePath.startsWith('http') ? filePath : (process.env.VUE_APP_BASE_API + (filePath.startsWith('/') ? filePath : '/' + filePath));
          return {
            fileName: item.fileName || '',
            filePath: item.filePath || '',
            url: url,
            uid: Date.now() + index,
            name: item.fileName || ''
          };
        });
      } else {
        this.formImageFileList = [];
      }
    },
    /** 详情弹窗关闭处理 */
    handleDetailDialogClose() {
      this.detailVisible = false;
      // 重置图片列表
      this.imageFileList = [];
      this.detailData = {};
    },
  }
}
</script>

<style lang="scss" scoped>
.app-containerjh {
  padding: 10px;
}

::v-deep .el-table--medium .el-table__cell {
  padding: 5px 0 !important;
}

.form-card {
  margin-bottom: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.drillbit-form {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: center;
  padding: 8px 0 10px 0;
}

.drillbit-form .el-form-item {
  margin-bottom: 0;
}

.table-card {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.el-table th {
  font-weight: bold;
  background: #f0f2f5;
}

.el-table .el-button {
  margin: 0 4px;
  border-radius: 16px;
}

.detail-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.basic-info {
  background: linear-gradient(135deg, #409eff 0%, #3f9cfb 50%);
  padding: 20px;
  border-radius: 12px;
  color: white;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

  .info-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 20px;

    .info-label {
      font-weight: bold;
      color: rgba(255, 255, 255, 0.9);
    }

    .info-value {
      color: #fff;
      font-weight: 500;
    }
  }
}

.feature-params {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

  .params-header {
    margin-bottom: 20px;

    .params-title {
      font-size: 18px;
      font-weight: bold;
      color: #303133;
      margin-bottom: 15px;
    }
  }

  .params-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
  }

  .param-item {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.08);
    border: 1.5px solid #e3eafc;
    transition: box-shadow 0.3s, border-color 0.3s;

    &:hover {
      box-shadow: 0 6px 24px rgba(64, 158, 255, 0.18);
      border-color: #409eff;
    }
  }

  .param-label {
    font-size: 16px;
    font-weight: bold;
    color: #409eff;
    margin-bottom: 10px;
    background: linear-gradient(135deg, #409eff, #67c23a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

  }

  .param-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 20px 0;
  }

  .param-text {
    font-size: 14px;
    color: #606266;
    margin-bottom: 15px;
    font-weight: 500;

  }

  .param-image {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #eaf3fc 0%, #e3eafc 100%);
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.08);
    margin: 0 auto 10px auto;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
      background: #fff;
      transition: transform 0.3s;
    }

    .placeholder-img {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #eaf3fc;
      border-radius: 50%;
      font-size: 32px;
      color: #b3c6e0;
    }
  }
}

.feature-code-cards {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 18px;
  margin: 18px 0 32px 0;
  padding: 0 8px;
}

.code-card {
  flex: 1 1 0;
  min-width: 120px;
  background: linear-gradient(135deg, #f6faff 0%, #eaf3fc 100%);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 0 10px 0;
  transition: box-shadow 0.2s;
  border: 1.5px solid #e3eafc;

  &:hover {
    box-shadow: 0 6px 24px rgba(64, 158, 255, 0.13);
    border-color: #409eff;
  }

  .code-title {
    font-size: 13px;
    color: #8a99b3;
    margin-bottom: 6px;
    letter-spacing: 1px;
    font-weight: 500;
  }

  .code-value {
    font-size: 18px;
    color: #409eff;
    font-weight: bold;
    word-break: break-all;
    text-align: center;
    letter-spacing: 1px;
  }
}

@media (max-width: 900px) {
  .feature-code-cards {
    flex-wrap: wrap;
  }

  .code-card {
    min-width: 45%;
    margin-bottom: 10px;
  }
}

@media (max-width: 600px) {
  .feature-code-cards {
    flex-direction: column;
  }

  .code-card {
    min-width: 100%;
  }
}

::v-deep .el-dialog .el-radio-button__inner {
  border-radius: 16px !important;
  transition:
    box-shadow 0.25s cubic-bezier(0.4, 0.2, 0.2, 1),
    border-color 0.2s,
    background 0.2s,
    transform 0.18s;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.10) !important;
  background: #fff !important;
  border: 1.5px solid #e3eafc !important;
  padding: 16px 10px 10px 10px !important;
  height: auto !important;
  line-height: 1.4 !important;
  min-width: 110px !important;
  min-height: 110px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

::v-deep .el-dialog .el-radio-button__inner:hover {
  box-shadow: 0 8px 32px rgba(64, 158, 255, 0.18) !important;
  border-color: #409eff !important;
  background: #f0f7ff !important;
  // transform: translateY(-2px) scale(1.04) !important;
  z-index: 2 !important;
}

::v-deep .el-dialog .el-radio-button.is-active .el-radio-button__inner {
  box-shadow: 0 12px 40px rgba(64, 158, 255, 0.22) !important;
  border-color: #409eff !important;
  background: linear-gradient(135deg, #eaf3fc 0%, #f6faff 100%) !important;
  color: #409eff !important;
  // transform: scale(1.06) !important;
  z-index: 3 !important;
}

::v-deep .el-dialog .el-radio-button__inner img {
  box-shadow: 0 2px 12px rgba(64, 158, 255, 0.13) !important;
  border-radius: 12px !important;
  background: #fff !important;
  transition: box-shadow 0.2s, transform 0.2s !important;
}

::v-deep .el-dialog .el-radio-button__inner:hover img,
::v-deep .el-dialog .el-radio-button.is-active .el-radio-button__inner img {
  box-shadow: 0 8px 32px rgba(64, 158, 255, 0.18) !important;
  // transform: scale(1.08) !important;
}

.dialog-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(64, 158, 255, 0.13);
  padding: 32px 32px 0 32px;
  margin: 0 8px;
  transition: box-shadow 0.3s, transform 0.3s;
  min-width: 100%;
  max-width: 100%;
  position: relative;
}

.dialog-card:hover {
  box-shadow: 0 16px 48px rgba(64, 158, 255, 0.18);
  // transform: translateY(-2px);
}

.dialog-card .el-form {
  background: #f8faff;
  border-radius: 12px;
  padding: 24px 18px 10px 18px;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.06);
}

.divider-strong {
  margin: 32px 0 24px 0;
  border-top: 2px solid #e3eafc !important;
  font-weight: bold;
  font-size: 18px;
  color: #409eff;
  letter-spacing: 2px;
}

.design-detail-params {
  background: #f8faff;
  border-radius: 12px;
  padding: 24px 18px;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.06);
}

.design-detail-params .geometry-row {
  margin-top: 20px;
}

.collapse-area {
  background: #fafdff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.06);
  margin-bottom: 18px;
  padding: 10px 0 10px 0;
}

.dialog-footer-strong {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  background: #f8faff;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 -2px 8px rgba(64, 158, 255, 0.05);
  padding: 18px 32px 18px 0;
  margin-top: 0;
}

.dialog-footer-strong .el-button {
  min-width: 80px;
  font-size: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.08);
  transition: box-shadow 0.2s, background 0.2s;
}

.dialog-footer-strong .el-button:hover {
  box-shadow: 0 6px 24px rgba(64, 158, 255, 0.13);
  background: #eaf3fc;
}

::v-deep .el-collapse-item {
  margin: 0 15px !important;
}


::v-deep .el-form-item {
  margin-bottom: 10px !important;
}

.image-upload-section {
  background: #f8faff;
  border-radius: 12px;
  padding: 24px 18px;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.06);
  margin-top: 20px;
}

.upload-tip {
  margin-top: 12px;
  font-size: 12px;
  color: #909399;
  text-align: center;
}

::v-deep .image-upload-section .el-upload--picture-card {
  width: 100px;
  height: 100px;
  line-height: 100px;
  border: 1px dashed #d9d9d9;
  border-radius: 8px;
  background-color: #fafafa;
  transition: all 0.3s;
}

::v-deep .image-upload-section .el-upload--picture-card:hover {
  border-color: #409eff;
}

::v-deep .image-upload-section .el-upload-list--picture-card .el-upload-list__item {
  width: 100px;
  height: 100px;
  border-radius: 8px;
}

.image-display-section {
  background: #f8faff;
  border-radius: 12px;
  padding: 24px 18px;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.06);
  margin-top: 20px;
}

.image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.image-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 150px;
}

.display-image {
  width: 150px;
  height: 150px;
  border-radius: 8px;
  border: 1px solid #e3eafc;
  cursor: pointer;
  transition: all 0.3s;
}

.display-image:hover {
  border-color: #409eff;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
}

.image-name {
  margin-top: 8px;
  font-size: 12px;
  color: #606266;
  text-align: center;
  word-break: break-all;
  max-width: 150px;
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
  font-size: 30px;
}
</style>