CameraMachine/frontend/src/views/Photography/detail.vue

<template>
  <BlueHeaderBar />
  <svg width="0" height="0" class="aigc-sprite" aria-hidden="true">
    <defs>
      <symbol id="i-check" viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5" fill="none" stroke="#fff" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"/></symbol>
      <symbol id="i-info" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M12 10.6v5" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/><circle cx="12" cy="7.6" r="1.15" fill="currentColor"/></symbol>
      <symbol id="i-scene" viewBox="0 0 24 24"><rect x="3" y="4.5" width="18" height="15" rx="3" fill="none" stroke="currentColor" stroke-width="1.9"/><circle cx="8.6" cy="9.6" r="1.7" fill="currentColor"/><path d="M5 17.5l4.6-4.6 3.2 3.2 3.4-3.9 3.8 4.4" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round"/></symbol>
      <symbol id="i-person" viewBox="0 0 24 24"><circle cx="12" cy="8.4" r="3.6" fill="none" stroke="currentColor" stroke-width="1.9"/><path d="M4.8 19.6c1.3-3.6 4-5.3 7.2-5.3s5.9 1.7 7.2 5.3" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/></symbol>
      <symbol id="i-doc" viewBox="0 0 24 24"><rect x="4.5" y="3" width="15" height="18" rx="3" fill="none" stroke="currentColor" stroke-width="1.9"/><path d="M8.4 8h7.2M8.4 12h7.2M8.4 16h4.6" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/></symbol>
      <symbol id="i-plus" viewBox="0 0 24 24"><rect x="3.5" y="3.5" width="17" height="17" rx="4" fill="none" stroke="currentColor" stroke-width="1.9"/><path d="M12 8.4v7.2M8.4 12h7.2" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/></symbol>
      <symbol id="i-export" viewBox="0 0 24 24"><path d="M9.5 4H6a2.5 2.5 0 0 0-2.5 2.5v11A2.5 2.5 0 0 0 6 20h11a2.5 2.5 0 0 0 2.5-2.5V14" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/><path d="M14 4h6v6M20 4l-8.5 8.5" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></symbol>
      <symbol id="i-book" viewBox="0 0 24 24"><path d="M12 6.2C10.5 4.9 8.3 4.2 5.5 4.2c-.8 0-1.5.06-2 .16V18.6c.5-.1 1.2-.16 2-.16 2.8 0 5 .7 6.5 2 1.5-1.3 3.7-2 6.5-2 .8 0 1.5.06 2 .16V4.36c-.5-.1-1.2-.16-2-.16-2.8 0-5 .7-6.5 2z" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round"/><path d="M12 6.2v14" stroke="currentColor" stroke-width="1.9"/></symbol>
      <symbol id="i-img" viewBox="0 0 24 24"><rect x="3" y="3.5" width="18" height="17" rx="3.5" fill="none" stroke="currentColor" stroke-width="1.9"/><circle cx="9" cy="9.4" r="1.8" fill="currentColor"/><path d="M4.5 18l5-5 3.4 3.4 3-3.4 3.6 4" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round"/></symbol>
      <symbol id="i-sheet" viewBox="0 0 24 24"><rect x="3.5" y="3.5" width="17" height="17" rx="3" fill="none" stroke="currentColor" stroke-width="1.9"/><path d="M3.5 9.2h17M9.2 9.2v11.3M3.5 14.8h17" stroke="currentColor" stroke-width="1.9"/></symbol>
      <symbol id="i-right" viewBox="0 0 24 24"><path d="M9 5.5l7 6.5-7 6.5" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></symbol>
      <symbol id="i-left" viewBox="0 0 24 24"><path d="M15 5.5L8 12l7 6.5" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></symbol>
      <symbol id="i-arrow" viewBox="0 0 24 24"><path d="M4 12h15M13.5 5.5L20 12l-6.5 6.5" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></symbol>
      <symbol id="i-upl" viewBox="0 0 24 24"><path d="M12 15.5V5M7.5 9L12 4.6 16.5 9" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M4.5 15.5v2.4A2.6 2.6 0 0 0 7.1 20.5h9.8a2.6 2.6 0 0 0 2.6-2.6v-2.4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></symbol>
    </defs>
  </svg>
  <div class="bg-F5F6F7 detail-page">
    <div class="aigc-wrap">
      <div class="aigc-board">
        <!-- 场景图 -->
        <section class="fcard" :class="{ off: !isSceneOn }">
          <header class="fhead">
            <div class="fh-row">
              <span class="fico"><svg><use href="#i-scene"/></svg></span>
              <div class="fh-text">
                <div class="fh-t">场景图生成</div>
                <div class="fh-s">自定义场景，文字描述生成</div>
              </div>
              <span class="toggle">
                <span class="swl">{{ isSceneOn ? '生成' : '不生成' }}</span>
                <label class="sw">
                  <input type="checkbox" :checked="isSceneOn" @change="onSwChange('is_product_scene', $event)">
                  <i></i>
                </label>
              </span>
            </div>
          </header>
          <div class="fbody">
            <SceneCard
              v-model="scenePrompt"
              v-model:bgPrompt="sceneBgPrompt"
              v-model:image="sceneImage"
              v-model:mode="sceneMode"
            />
          </div>
          <footer class="ffoot"><svg class="ic"><use href="#i-info"/></svg>未选择则不生成场景图，使用白底图</footer>
        </section>

        <!-- 模特图 -->
        <section class="fcard" :class="{ off: !isModelOn }">
          <header class="fhead">
            <div class="fh-row">
              <span class="fico"><svg><use href="#i-person"/></svg></span>
              <div class="fh-text">
                <div class="fh-t">模特图生成</div>
                <div class="fh-s">多模特可选，支持上传替换</div>
              </div>
              <span class="toggle">
                <span class="swl">{{ isModelOn ? '生成' : '不生成' }}</span>
                <label class="sw">
                  <input type="checkbox" :checked="isModelOn" @change="onSwChange('is_upper_footer', $event)">
                  <i></i>
                </label>
              </span>
            </div>
          </header>
          <div class="fbody">
            <ModelCard v-model="selectedModels" />
          </div>
          <footer class="ffoot"><svg class="ic"><use href="#i-info"/></svg>未选择则不生成模特图</footer>
        </section>

        <!-- 详情页 -->
        <section class="fcard fcard-wide" :class="{ off: !isDetailServiceSelected }">
          <header class="fhead">
            <div class="fh-row">
              <span class="fico"><svg><use href="#i-doc"/></svg></span>
              <div class="fh-text">
                <div class="fh-t">详情页生成</div>
                <div class="fh-s">选择详情模板后开始生成</div>
              </div>
              <span class="toggle">
                <span class="swl">{{ isDetailServiceSelected ? '生成' : '不生成' }}</span>
                <label class="sw">
                  <input type="checkbox" :checked="isDetailServiceSelected" @change="onSwChange('is_detail', $event)">
                  <i></i>
                </label>
              </span>
            </div>
          </header>
          <div class="fbody">
            <div class="tabs-row tabs-row-tools">
              <span class="hbtns">
                <button class="hbtn" type="button" title="向左" @click="scrollTemplates(-1)"><svg><use href="#i-left"/></svg></button>
                <button class="hbtn" type="button" title="向右" @click="scrollTemplates(1)"><svg><use href="#i-right"/></svg></button>
              </span>
            </div>
            <div class="hscroll tpl-hscroll" ref="tplScrollRef">
              <figure
                v-for="(template, index) in templates"
                :key="template.id || index"
                class="tpl"
                :class="{ sel: form.selectTemplate?.id == template.id }"
                @click="handleTemplateItemClick(template)"
                v-log="{ describe: { action: '点击选择详情模板', template_name: template.template_name } }"
              >
                <span class="ck" v-if="form.selectTemplate?.id == template.id">✓</span>
                <div
                  class="template-download-btn"
                  v-if="isDetailServiceSelected && template.template_type == 1"
                  @click.stop="downloadTplExcel(template)"
                >
                  下载EXECL模版
                </div>
                <div class="tpl-head">
                  <b>{{ template.template_name }}</b>
                </div>
                <div class="tpl-img-wrap">
                  <el-image :src="getTemplateThumbImage(template)" class="tpl-img" />
                </div>
                <div class="tpl-mini" v-if="isDetailServiceSelected">
                  <span class="lk" @click.stop="viewTemplate(template)">查看</span>
                  <span class="lk" v-if="template.template_type == 1" @click.stop="editTemplate(template)">编辑</span>
                  <span class="lk danger" v-if="template.template_type == 1" @click.stop="deleteTemplate(template)">删除</span>
                </div>
              </figure>
            </div>
            <div class="template-tips">
              <el-icon><Warning /></el-icon>
              <span v-if="!isDetailServiceSelected">请先打开详情页生成，再选择模板</span>
              <span v-else>该模版需提供{{ form.selectTemplate?.template_image_order?.split(',').length
                || 5}}张标准视角的商品图:{{ form.selectTemplate?.template_image_order ||
                '俯视,侧视,后跟,鞋底,内里'}}。请确保图片清晰度高,背景干净。</span>
            </div>
          </div>
          <footer class="ffoot"><svg class="ic"><use href="#i-info"/></svg>未选择则不生成详情页</footer>
        </section>

        <!-- 右侧栏 -->
        <aside class="side">
          <div class="scard">
            <div class="stitle">工具</div>
            <div
              v-if="useUserInfoStore.isHLM"
              class="trow"
              @click="addCustomTemplate"
              v-log="{ describe: { action: '点击新增自定义详情页模板', service: '新增自定义详情页模板' } }"
            >
              <span class="tic"><svg><use href="#i-plus"/></svg></span>
              <span>新增自定义详情页模板</span>
              <svg class="arr"><use href="#i-right"/></svg>
            </div>
            <div v-else class="trow disabled" title="功能开发中">
              <span class="tic"><svg><use href="#i-plus"/></svg></span>
              <span>详情页模板自定义</span>
              <svg class="arr"><use href="#i-right"/></svg>
            </div>
            <div
              v-if="useUserInfoStore.userInfo.brand_company_id == 44584"
              class="trow"
              @click="handleWhiteBgUploadClick"
              v-log="{ describe: { action: '点击白底图批量上传', service: '白底图批量上传' } }"
            >
              <span class="tic"><svg><use href="#i-export"/></svg></span>
              <span>白底图批量上传</span>
              <svg class="arr"><use href="#i-right"/></svg>
            </div>
            <div
              v-else
              class="trow"
              @click="handleWhiteBgExportClick"
              v-log="{ describe: { action: '点击白底图批量导出', service: '白底图批量导出' } }"
            >
              <span class="tic"><svg><use href="#i-export"/></svg></span>
              <span>白底图批量导出</span>
              <svg class="arr"><use href="#i-right"/></svg>
            </div>
            <div
              class="trow"
              @click="handleProductAlbumClick"
              v-log="{ describe: { action: '点击产品图册生成', service: '产品图册生成' } }"
            >
              <span class="tic"><svg><use href="#i-book"/></svg></span>
              <span>产品图册生成</span>
              <svg class="arr"><use href="#i-right"/></svg>
            </div>
          </div>

          <div class="scard">
            <div class="stitle">主图LOGO</div>
            <div class="logo-upload-area">
              <div v-if="!form.logo_path" class="up" :class="{ 'is-error': logoLoadError }"
                @click="openLogoUpload">
                <span class="uic"><svg><use href="#i-img"/></svg></span>
                <span class="t">点击或拖拽上传</span>
                <span class="s" v-if="logoLoadError">LOGO指向的文件不存在或加载失败，请重新上传</span>
                <span class="s" v-else>支持PNG、JPG格式</span>
              </div>
              <div v-else class="logo-upload-preview">
                <img :src="'file:///' + form.logo_path" alt="LOGO预览" class="logo-preview-image"
                  @error="handleLogoLoadError" />
                <div class="logo-upload-actions">
                  <span class="logo-action-btn" @click.stop="previewLogo">
                    <el-icon><ZoomIn /></el-icon>
                  </span>
                  <span class="logo-action-btn" @click.stop="removeLogo">
                    <el-icon><Delete /></el-icon>
                  </span>
                </div>
                <div class="logo-upload-footer">
                  <el-button type="primary" link @click.stop="openLogoUpload">重新上传</el-button>
                  <el-button type="danger" link @click.stop="removeLogo">删除</el-button>
                </div>
              </div>
            </div>
          </div>

          <div class="scard right-section data-prep-section">
            <div class="stitle">商品资料对接</div>
            <div class="data-prep-content">
              <div class="data-mode">
                <button
                  type="button"
                  class="data-mode-btn"
                  :class="{ on: form.dataType == '1' }"
                  @click="setDataType('1')"
                >Excel导入</button>
                <button
                  type="button"
                  class="data-mode-btn"
                  :class="{ on: form.dataType == '2' }"
                  @click="setDataType('2')"
                >系统对接</button>
              </div>

              <template v-if="form.dataType == '1'">
                <button
                  v-if="!form.excel_path"
                  class="gbtn"
                  type="button"
                  @click="selectExcel"
                  v-log="{ describe: { action: '点击选择Excel文件' } }"
                >
                  <svg><use href="#i-sheet"/></svg>选择 Excel 文件
                </button>
                <div v-else class="excel-selected-info">
                  <div class="excel-icon">
                    <img src="@/assets/images/detail/file-excel.png" class="tab-icon" />
                  </div>
                  <div class="excel-file-text">
                    <div class="excel-file-name" :title="excelFileName">{{ excelFileName }}</div>
                    <div class="excel-file-actions">
                      <el-button type="primary" link class="reupload-btn" @click="selectExcel"
                        v-log="{ describe: { action: '重新上传Excel文件' } }">
                        重新上传
                      </el-button>
                      <el-button type="danger" link class="delete-excel-btn" @click="clearExcel"
                        v-log="{ describe: { action: '删除Excel文件' } }">
                        删除
                      </el-button>
                    </div>
                  </div>
                </div>
                <button class="lk data-prep-link" type="button" @click="downloadExcel"
                  title="用于非自定义详情页的商品基础资料模版"
                  v-log="{ describe: { action: '点击下载Excel模板' } }">
                  下载通用商品基础资料模版
                </button>
              </template>
              <div v-else class="sys-hint">
                将从系统自动读取商品资料，无需上传 Excel
              </div>
            </div>
          </div>

          <div class="scard right-section publish-section" :class="{ 'publish-section--disabled': !canUsePublishSection }"
            v-if="onlineStoreTempList.length || onlineStoreTempListForeign.length">
            <div class="stitle">一键上架平台</div>
            <div class="frow2">
              <div v-if="onlineStoreTempList.length">
                <label>国内电商平台：</label>
                <el-select v-model="domesticPlatforms" multiple collapse-tags placeholder="请选择" class="publish-select"
                  :disabled="!canUsePublishSection">
                  <el-option v-for="store in onlineStoreTempList" :key="store.show_name" :label="store.show_name"
                    :value="store.online_store_name" :disabled="!store.channel_status" />
                </el-select>
              </div>
              <div v-if="onlineStoreTempListForeign.length">
                <label>跨境电商平台：</label>
                <el-select v-model="foreignPlatforms" multiple collapse-tags placeholder="请选择" class="publish-select"
                  :disabled="!canUsePublishSection">
                  <el-option v-for="store in onlineStoreTempListForeign" :key="store.show_name"
                    :label="store.show_name" :value="store.online_store_name" :disabled="!store.channel_status" />
                </el-select>
              </div>
            </div>
          </div>

          <button class="cta" type="button" :disabled="requesting" @click="generate" v-log="{ describe: { action: '点击开始生成详情页' } }">
            <b>开始生成<svg><use href="#i-arrow"/></svg></b>
            <small>将为本次批量选择的所有商品生成</small>
          </button>
        </aside>
      </div>
      <div class="ybar">
        <svg class="ic"><use href="#i-info"/></svg>
        <span>批量生成说明：本次设置将应用于您勾选的<b>所有商品</b>，<b>未打开的模块将不生成相关内容</b></span>
      </div>
    </div>
  <loading-dialog v-if="loadingDialogVisible" v-model="loadingDialogVisible" :requesting="requesting"
    :progress="progress" :message="message" :disabled-button="disabledButton" :use-new-progress="useNewProgress"
    :progress-steps="progressSteps" @button-click="handleComplete" :on-open-folder="openOutputDir">
    <template v-if="partErrList && partErrList.length > 0" #errList>
      <div v-for="(item, idx) in partErrList" :key="idx">
        <span v-if="item.goods_art_no">{{ item.goods_art_no }}：</span><span>{{ item.info }}</span>
      </div>
    </template>
    <template #progressMessages>
      <div class="progress-messages" v-if="progressMessages.length">
        <div class="message-header">
          <span>处理进度</span>
          <div class="flex right" style="gap:8px; align-items:center;">
            <el-button type="text" @click="openOutputDir" v-log="{ describe: { action: '点击打开输出目录' } }">打开目录</el-button>
            <el-button type="text" @click="showMessageHistory = !showMessageHistory"
              v-log="{ describe: { action: '点击查看进度详情' } }">
              {{ showMessageHistory ? '收起' : '查看详情' }}
            </el-button>
          </div>
        </div>
        <div class="message-list" v-if="showMessageHistory" ref="messageListRef">
          <div v-for="(msg, index) in progressMessages" :key="index" class="message-item flex left">
            <div class="message-time">{{ formatTime(msg.timestamp) }}</div>
            <div class="message-content mar-left-10" v-if="msg">
              <span class="goods-no" v-if="msg.goods_art_nos && msg.goods_art_nos.length > 0">货号{{
                msg.goods_art_nos.join(', ') }}：</span>
              <span class="message-text">{{ msg.msg }}</span>
            </div>
          </div>
        </div>
      </div>
    </template>
  </loading-dialog>
  <el-dialog v-model="dialogVisible">
    <img style="width: 100%;" :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>

  <!-- LOGO预览弹窗 -->
  <el-dialog v-model="logoPreviewVisible" title="LOGO预览">
    <img style="width: 100%;" :src="logoPreviewUrl" alt="LOGO Preview" />
  </el-dialog>

  <!-- 货号选择弹窗 -->
  <GoodsSelectDialog
    v-model:visible="goodsSelectDialogVisible"
    @confirm="handleGoodsSelectionConfirm"
    @cancel="handleGoodsSelectionCancel"
  />
  </div>
</template>

<script lang="ts" setup>

import { getCompanyTemplatesApi } from '@/apis/other'
import tokenInfo from '@/stores/modules/token';
import { useRoute, useRouter } from 'vue-router'
import { clickLog, setLogInfo } from '@/utils/log'


import { ElMessage, ElMessageBox } from 'element-plus'

import BlueHeaderBar from '@/components/header-bar/blue-header.vue'
import { ref, computed, reactive, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
import { Select, EditPen, ZoomIn, Delete, Picture, Document } from '@element-plus/icons-vue'
// import upload from '@/components/upload' // 不再需要，改为单LOGO上传
import client from "@/stores/modules/client";
import icpList from '@/utils/ipc'
import useUserInfo from "@/stores/modules/user";
const clientStore = client();
import { getRouterUrl } from '@/utils/appfun'
import { useUuidStore } from '@/stores/modules/uuid'
import socket from "@/stores/modules/socket";
const socketStore = socket();

const useUserInfoStore = useUserInfo();
import GoodsSelectDialog from './components/GoodsSelectDialog.vue'
import SceneCard from './components/SceneCard.vue'
import ModelCard from './components/ModelCard.vue'

import { Close, Warning } from '@element-plus/icons-vue'
import LoadingDialog from '@/views/Photography/components/LoadingDialog.vue'

import configInfo from "@/stores/modules/config";
import { deleteCustomerTemplate  , downlaodCustomerTemplate} from '@/apis/other'
import { ossResize } from '@/utils/oss'

const useConfigInfoStore = configInfo();

const EXTERNAL_TOOL_EXECUTABLE = '智慧映拍照机辅助工具箱.exe'

import usePhotography from './mixin/usePhotography'

// 从 mixin 中导入必要的函数和状态（已不再使用，保留以防其他地方需要）
const { } = usePhotography()


const launchExternalTool = async (pagePath: string, successMessage: string) => {
  if (!clientStore?.ipc || !clientStore.isClient) {
    ElMessage.error('当前环境暂不支持外部工具');
    return;
  }
  if (!pagePath) return;

  const tokenStore = tokenInfo();
  const token = tokenStore?.getToken || '';
  const env = (useConfigInfoStore?.appConfig as any)?.env || 'prod';
  const argString = `token=${token}&page=${pagePath}&env=${env}`;

  try {
    const result = await clientStore.ipc.invoke(icpList.utils.runExternalTool, {
      exeName: EXTERNAL_TOOL_EXECUTABLE,
      args: [argString]
    });
    if (result?.code === 0) {
      ElMessage.success(successMessage);
    } else {
      throw new Error(result?.msg || '启动外部工具失败');
    }
  } catch (error: any) {
    console.error('launchExternalTool error:', error);
    ElMessage.error(error?.message || '打开外部工具失败');
  }
}

const handleWhiteBgExportClick = () => launchExternalTool('/copy_800_tool', '白底图批量导出工具已启动')
const handleWhiteBgUploadClick = () => launchExternalTool('/upload_800_tool', '白底图批量上传工具已启动')
const handleProductAlbumClick = () => launchExternalTool('/product_list', '产品图册生成工具已启动')

// 货号选择弹窗相关状态
const goodsSelectDialogVisible = ref(false)

const addCustomTemplate = () => {
  goodsSelectDialogVisible.value = true
}

// 处理货号选择确认
const handleGoodsSelectionConfirm = (selectedGoodsArtNo: string) => {
  console.log('选中的货号:', selectedGoodsArtNo)
  // 跳转到新增模板页（组件内部已经处理了数据存储到 sessionStorage）
  router.push({
    name: 'addTpl'
  })
}

// 处理货号选择取消
const handleGoodsSelectionCancel = () => {
  // 取消选择，不做任何操作
}




import { useCheckInfo } from '@/composables/userCheck';
useCheckInfo();

const showTips = ref(true)

const folderPath = ref('') //货号文件夹
// const reportMode = ref('normal') // 抠图模式
const imageOrder = ref('俯视、侧视、后跟、鞋底、内里、组合、组合2、组合3') // 图片顺序
const checkSimilar = ref(false) // 同款检验
const specificPage = ref('')  // 可指定页面独修改

// 路由和状态管理初始化
const route = useRoute();
const router = useRouter();
const uuidStore = useUuidStore();

// 完成目录
const completeDirectory = ref('')


const loadingDialogVisible = ref(false)
const progress = ref(0)
const message = ref('正在为您处理，请稍后')
const disabledButton = ref(true)

// 新的进度条相关数据
const useNewProgress = ref(false)
const progressSteps = ref<Array<{
  msg_type: string
  goods_art_no: string
  name: string
  status: '等待处理' | '正在处理' | '处理完成' | '处理失败'
  current: number
  total: number
  error: number
}>>([])

// 删除自定义模板
const deleteTemplate = async (template: any) => {
  if (!template?.id) return

  try {
    await ElMessageBox.confirm(
      `确定要删除自定义模板「${template.template_name || ''}」吗？`,
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      },
    )

    const res = await deleteCustomerTemplate({ id: template.id })
    const data = res

    if (data?.code === 0) {
      ElMessage.success('删除成功')
      // 从当前模板列表中移除
      const idx = templates.value.findIndex((item: any) => item.id === template.id)
      if (idx !== -1) {
        templates.value.splice(idx, 1)
      }
    } else {
      ElMessage.error(data?.msg || '删除失败')
    }
  } catch (e: any) {
    if (e !== 'cancel' && e !== 'close') {
      console.error('删除模板失败:', e)
      ElMessage.error(e?.message || '删除失败')
    }
  }

}
const downloadTplExcel = async (template: any) => {
 await downlaodCustomerTemplate({ id: template.id  , filename: template.template_name})
  // console.log('downlaodCustomerTemplate', data)
}

// 更新进度步骤
const updateProgressStep = (msgType: string, stepData: any) => {
  console.log('updateProgressStep called:', msgType, stepData)
  const stepIndex = progressSteps.value.findIndex(step => step.msg_type === msgType)
  if (stepIndex !== -1) {
    // 更新现有步骤 - 使用新数组来确保响应式更新
    const newSteps = [...progressSteps.value]
    newSteps[stepIndex] = {
      ...newSteps[stepIndex],
      name: stepData.name, // 保持原有名称或使用新名称
      goods_art_no: stepData.goods_art_no,
      status: stepData.status,
      current: stepData.current || 0,
      total: stepData.total || 0,
      error: stepData.error || 0,
      folder: newSteps[stepIndex].folder || stepData.folder  // 保持已有的folder或使用新的
    }
    progressSteps.value = newSteps
    console.log('Updated step:', newSteps[stepIndex])
  } else {
    // 添加新步骤
    progressSteps.value = [...progressSteps.value, {
      msg_type: msgType,
      name: stepData.name,
      goods_art_no: stepData.goods_art_no,
      status: stepData.status,
      current: stepData.current || 0,
      total: stepData.total || 0,
      error: stepData.error || 0,
      folder: stepData.folder // 添加folder字段
    }]
    console.log('Added new step:', progressSteps.value[progressSteps.value.length - 1])
  }
}

// 获取步骤名称
// 初始化进度步骤 - 从后端数据动态获取
const initProgressSteps = (backendSteps?: any[]) => {
  if (backendSteps && backendSteps.length > 0) {
    // 使用后端返回的步骤数据
    progressSteps.value = backendSteps.map(step => ({
      msg_type: step.msg_type,
      goods_art_no: step.goods_art_no,
      name: step.name,
      status: '等待处理',
      current: 0,
      total: step.total || 0,
      error: 0
    }))
  } else {
    // 默认步骤（当后端没有返回步骤数据时使用）
    progressSteps.value = []
  }
}
// 进度消息队列
const progressMessages = ref<Array<{
  goods_no: string
  temp_name: string
  status: string
  goods_art_nos: string[]
  msg: string
  timestamp: number
}>>([])
const showMessageHistory = ref(true)
const messageListRef = ref<HTMLElement | null>(null)

// 新消息时自动滚动到底部
const scrollMessageListToBottom = () => {
  nextTick(() => {
    const el = messageListRef.value
    if (el) {
      el.scrollTop = el.scrollHeight
    }
  })
}

let templates = ref([])
// let goods_art_nos = ref([])
let partErrList = ref([])
const excel_template_url = ref('')
// 是否正在请求接口
const requesting = ref(false)


const goods_art_nos = computed(() => {
  const goods_art_data = route.query.goods_art_nos
  return Array.isArray(goods_art_data) ? goods_art_data : [goods_art_data]
})



// 定义一个定时器变量
const INTERVAL = ref<number | NodeJS.Timeout | null>(null);




// 状态变量
const totalPage = ref(0);
const itemsPerPage = 3; // 每页显示的模板数量
const dialogVisible = ref(false);
const dialogImageUrl = ref('');
const queryParams = reactive({ // 分页查询参数
  size: 1,
  current: 1,
})
const form = reactive({
  selectTemplate: {}, //选中的模板
  dataType: '1', // 1: 选择excel文件 2: 系统对接
  logo_path: '', // 主图LOGO
  excel_path: '', // 商品基础资料EXCEL文件选择
  services: ['is_detail'], // 勾选服务内容（多选）默认包含详情页生成
})

const excelFileName = computed(() => {
  if (!form.excel_path) return ''
  const segments = form.excel_path.split(/[/\\]/)
  return segments[segments.length - 1] || ''
})

const templatesLoaded = ref(false)
const lastSelectedTemplateId = ref<string | number | null>(null)
const isDetailServiceSelected = computed(() => form.services.includes('is_detail'))
const isSceneOn = computed(() => form.services.includes('is_product_scene'))
const isModelOn = computed(() => form.services.includes('is_upper_footer'))
const tplScrollRef = ref<HTMLElement | null>(null)

function setService(key: string, on: boolean) {
  const idx = form.services.indexOf(key)
  if (on && idx === -1) form.services.push(key)
  if (!on && idx > -1) form.services.splice(idx, 1)
  saveServicesToCache(form.services)
}

function onSwChange(key: string, e: Event) {
  const target = e.target as HTMLInputElement
  setService(key, !!target?.checked)
}

function setDataType(type: string) {
  form.dataType = type
  saveDataTypeToCache(type)
}

function scrollTemplates(dir: number) {
  const el = tplScrollRef.value
  if (!el) return
  el.scrollBy({ left: el.clientWidth * 0.9 * dir, behavior: 'smooth' })
}
const hasTemplates = computed(() => templates.value.length > 0)
const canUsePublishSection = computed(() => isDetailServiceSelected.value && hasTemplates.value)
onMounted(() => {
  // 页面访问埋点
  const goods_art_data = route.query.goods_art_nos
  goods_art_nos.value = Array.isArray(goods_art_data) ? goods_art_data : [goods_art_data]
  getCompanyTemplates()
  getLogolist()
  loadDetailCache()

  // 初始化目录打开状态标记
  window.segmentFolderOpened = false;
  window.modelOrSceneFolderOpened = false;

  // 监听子组件发出的打开目录事件
  window.addEventListener('openFolder', handleOpenFolder);
})

// 页面卸载时清理监听器
onBeforeUnmount(() => {
  clientStore.ipc.removeAllListeners(icpList.socket.message + '_detail_progress');
  clientStore.ipc.removeAllListeners(icpList.socket.message + '_segment_progress');
  clientStore.ipc.removeAllListeners(icpList.socket.message + '_upper_footer_progress');
  clientStore.ipc.removeAllListeners(icpList.socket.message + '_scene_progress');
  clientStore.ipc.removeAllListeners(icpList.socket.message + '_upload_goods_progress');
  clientStore.ipc.removeAllListeners(icpList.socket.message + '_detail_result_progress');
  clearInterval(INTERVAL.value);

  // 移除事件监听器
  window.removeEventListener('openFolder', handleOpenFolder);
})

// 计算属性，获取当前页可见的模板
const visibleTemplates = computed(() => {
  const startIndex = (queryParams.current - 1) * itemsPerPage;
  const data = templates.value.slice(startIndex, startIndex + itemsPerPage);
  return data
});

const selectTemplate = (template: any, options: { saveCache?: boolean; ensureVisible?: boolean } = {}) => {
  if (!isDetailServiceSelected.value) return
  if (!template || !template.id) return
  form.selectTemplate = template
  lastSelectedTemplateId.value = template.id
  if (options.ensureVisible) {
    jumpToTemplatePageById(template.id)
  }
  const shouldSaveCache = options.saveCache !== undefined ? options.saveCache : true
  if (shouldSaveCache) {
    try {
      localStorage.setItem(DETAIL_TEMPLATE_CACHE_KEY, JSON.stringify(template))
      console.log('selectTemplate - saved to cache:', template);
    } catch { }
  }
};

const handleTemplateItemClick = (template: any) => {
  if (!isDetailServiceSelected.value) return
  selectTemplate(template)
};

const clearTemplateSelection = () => {
  form.selectTemplate = {}
};

const findTemplateById = (templateId: string | number | null) => {
  if (templateId === null || templateId === undefined) return null
  return templates.value.find(template => String(template.id) === String(templateId)) || null
};

const jumpToTemplatePageById = (templateId: string | number | null) => {
  if (templateId === null || templateId === undefined) return
  const index = templates.value.findIndex(template => String(template.id) === String(templateId))
  if (index === -1) return
  const targetPage = Math.floor(index / itemsPerPage) + 1
  if (queryParams.current !== targetPage) {
    queryParams.current = targetPage
  }
};

const ensureDefaultTemplateSelection = (options: { ensureVisible?: boolean } = {}) => {
  if (!templatesLoaded.value || !isDetailServiceSelected.value || !templates.value.length) {
    return
  }

  if (form.selectTemplate && (form.selectTemplate as any).id) {
    if (options.ensureVisible) {
      jumpToTemplatePageById((form.selectTemplate as any).id)
    }
    return
  }

  const cachedTemplate = findTemplateById(lastSelectedTemplateId.value)
  const templateToSelect = cachedTemplate || templates.value[0]
  if (templateToSelect) {
    selectTemplate(templateToSelect, {
      ensureVisible: options.ensureVisible,
      saveCache: !cachedTemplate
    })
  }
};

watch(isDetailServiceSelected, (selected) => {
  if (selected) {
    ensureDefaultTemplateSelection({ ensureVisible: true })
  } else {
    clearTemplateSelection()
  }
});
// 获取模板展示图（优先 template_preview_image，其次 template_cover_image）
const getTemplateDisplayImage = (template: any) => {
  if (!template) return ''
  return template.template_preview_image || template.template_cover_image || ''
}

const getTemplateThumbImage = (template: any) => {
  const url = getTemplateDisplayImage(template)
  if (!url || /^(data:|blob:|file:)/i.test(url)) return url
  return ossResize(url, { m: 'lfit', w: 400 })
}

// 查看模板详情
const viewTemplate = (template) => {
  // 展示大图，优先 template_preview_image，其次 template_cover_image
  dialogVisible.value = true
  dialogImageUrl.value = getTemplateDisplayImage(template)
};
// 编辑自定义模版
const editTemplate = async (template: any) => {
  if (!template) return

  // 将画布 JSON、名称、商品图片等信息通过 sessionStorage 传给编辑页
  // const customerTemplateJson = template.template_local_classes|| []
  const resp = await fetch(template.template_local_classes)
  const json = await resp.json()
  const customerTemplateJson = json
  const customerTemplateImages = template.customer_template_images || []
  const templateImageOrder = template.template_image_order || ''
  const templateName = template.template_name || ''

  // 将商品文字的 keys 转换为完整的对象结构
  const templateExcelHeaders = template.customer_template_excel_headers || []
  const defaultGoodsTextFallback = []
  const fullTemplateExcelHeaders = template.template_excel_headers || ''

  // 使用sessionStorage传递数据，避免URL长度限制
  const templateData = {
    customer_template_json: customerTemplateJson,
    template_name: templateName,
    customer_template_images: customerTemplateImages,
    template_image_order: templateImageOrder,
    template_excel_headers: fullTemplateExcelHeaders, // 传递完整的商品文字数据
    timestamp: Date.now() // 添加时间戳用于标识数据
  }
  sessionStorage.setItem('editTpl_template_data', JSON.stringify(templateData))

  router.push({
    name: 'editTpl',
    params: { id: template.id }
  })
};

// 获取模版列表
const getCompanyTemplates = async () => {
  const { data } = await getCompanyTemplatesApi()
  console.log('getCompanyTemplatesApi', data);
  templates.value = data.list || []
  // 获取电商平台列表 - 支持新的数据结构
  if (data.online_store_temp_list) {
    onlineStoreTempList.value = data.online_store_temp_list
  }

  if (data.online_store_temp_list_foreign) {
    onlineStoreTempListForeign.value = data.online_store_temp_list_foreign
  }

  templatesLoaded.value = true

  // 获取模板列表后，尝试从缓存恢复模板选择
  loadTemplateFromCache()

  excel_template_url.value = data.excel_template_url
  // 计算总页数
  totalPage.value = Math.ceil(templates.value.length / itemsPerPage);
}

const downloadExcel = () => {
  const a = document.createElement('a')
  a.href = excel_template_url.value,
    a.download = '商品基础资料模版'
  document.body.appendChild(a)
  a.click()
  setTimeout(() => {
    document.body.removeChild(a);
  }, 1000);
}
// 服务内容切换
const toggleService = (key: string) => {
  const idx = form.services.indexOf(key)
  if (idx > -1) form.services.splice(idx, 1)
  else form.services.push(key)

  // 保存服务选择状态到缓存
  saveServicesToCache(form.services)
}

// 电商平台多选与一键上架
const domesticPlatforms = ref<string[]>([])
const foreignPlatforms = ref<string[]>([])
const onlineStoreTempList = ref<any[]>([]) // 国内电商平台列表
const onlineStoreTempListForeign = ref<any[]>([]) // 国外电商平台列表
// 模特与场景弹窗
const modelDialogVisible = ref(false)
const modelDialogDefaultTab = ref<'female' | 'male'>('female')
const scenePromptDialogVisible = ref(false)
const selectedModels = ref<{ female: any; male: any; child?: any } | null>({ female: null, male: null, child: null })
const scenePrompt = ref('')
const sceneBgPrompt = ref('')
const sceneImage = ref('')
const sceneMode = ref<'text' | 'upload'>('text')
const DEFAULT_BG_SCENE_PROMPT = '把鞋子融合到背景图中'

// 本地缓存键（与弹窗组件保持一致）
const DETAIL_MODEL_CACHE_KEY = 'model_selection_cache'
const DETAIL_SCENE_PROMPT_CACHE_KEY = 'scene_prompt_cache'
const DETAIL_SCENE_BG_PROMPT_CACHE_KEY = 'scene_bg_prompt_cache'
const DETAIL_SCENE_IMAGE_CACHE_KEY = 'scene_image_cache'
const detail_logo_cache_1_KEY = 'detail_logo_cache_1'
const DETAIL_DATA_TYPE_CACHE_KEY = 'detail_data_type_cache'
const DETAIL_SERVICES_CACHE_KEY = 'detail_services_cache'
const DETAIL_TEMPLATE_CACHE_KEY = 'detail_template_cache'

// 读取本地缓存
const loadDetailCache = () => {
  console.log('loadDetailCache');
  try {
    const m = localStorage.getItem(DETAIL_MODEL_CACHE_KEY)
    if (m) {
      const parsed = JSON.parse(m)
      if (parsed && (parsed.female || parsed.male || parsed.child)) {
        selectedModels.value = parsed
        console.log('loadDetailCache');
        console.log(selectedModels.value);
      }
    }
  } catch { }
  try {
    const p = localStorage.getItem(DETAIL_SCENE_PROMPT_CACHE_KEY)
    if (p) {
      console.log('scenePrompt');
      scenePrompt.value = p
      console.log(scenePrompt.value);
    }
  } catch { }
  try {
    const img = localStorage.getItem(DETAIL_SCENE_IMAGE_CACHE_KEY)
    if (img) sceneImage.value = img
  } catch { }
  try {
    const bg = localStorage.getItem(DETAIL_SCENE_BG_PROMPT_CACHE_KEY)
    if (bg) sceneBgPrompt.value = bg
  } catch { }

  // 加载LOGO缓存
  try {
    const logo = localStorage.getItem(detail_logo_cache_1_KEY)
    if (logo) {
      form.logo_path = logo || ''
      console.log(form.logo_path);
      console.log('loadDetailCache - logo:', logo);
    }
  } catch { }

  // 加载数据类型缓存
  try {
    const dataType = localStorage.getItem(DETAIL_DATA_TYPE_CACHE_KEY)
    if (dataType) {
      form.dataType = dataType
      console.log('loadDetailCache - dataType:', dataType);
    }
  } catch { }

  // 模板缓存加载将在获取模板列表后执行

  // 加载服务选择状态缓存
  try {
    const services = localStorage.getItem(DETAIL_SERVICES_CACHE_KEY)
    if (services) {
      const parsed = JSON.parse(services)
      if (Array.isArray(parsed)) {
        form.services = parsed
        console.log('loadDetailCache - services:', parsed);
      }
    }
  } catch { }
}

// 保存到本地缓存（仅保存必要字段）
const saveModelsToCache = (models: { female: any; male: any }) => {
  try {
    const payload = {
      female: models?.female ? {
        id: models.female.id,
        name: models.female.name,
        image_url: models.female.image_url,
        gender: models.female.gender,
        keywords: models.female.keywords,
        status: models.female.status
      } : null,
      male: models?.male ? {
        id: models.male.id,
        name: models.male.name,
        image_url: models.male.image_url,
        gender: models.male.gender,
        keywords: models.male.keywords,
        status: models.male.status
      } : null,
      child: models?.child ? {
        id: models.child.id,
        name: models.child.name,
        image_url: models.child.image_url,
        gender: models.child.gender,
        keywords: models.child.keywords,
        status: models.child.status
      } : null
    }
    localStorage.setItem(DETAIL_MODEL_CACHE_KEY, JSON.stringify(payload))
  } catch { }
}
const saveScenePromptToCache = (prompt: string) => {
  try {
    const v = (prompt || '').trim()
    if (v) localStorage.setItem(DETAIL_SCENE_PROMPT_CACHE_KEY, v)
  } catch { }
}
const saveSceneImageToCache = (url: string) => {
  try {
    if (url) localStorage.setItem(DETAIL_SCENE_IMAGE_CACHE_KEY, url)
    else localStorage.removeItem(DETAIL_SCENE_IMAGE_CACHE_KEY)
  } catch { }
}
const saveSceneBgPromptToCache = (prompt: string) => {
  try {
    localStorage.setItem(DETAIL_SCENE_BG_PROMPT_CACHE_KEY, prompt || '')
  } catch { }
}

// 保存LOGO到缓存
const saveLogoToCache = (logoPath: string) => {
  try {
    localStorage.setItem(detail_logo_cache_1_KEY, logoPath)
  } catch { }
}

// 保存数据类型到缓存
const saveDataTypeToCache = (dataType: string) => {
  try {
    if (dataType) {
      localStorage.setItem(DETAIL_DATA_TYPE_CACHE_KEY, dataType)
      console.log('saveDataTypeToCache:', dataType);
    }
  } catch { }
}

const saveServicesToCache = (services: string[]) => {
  try {
    localStorage.setItem(DETAIL_SERVICES_CACHE_KEY, JSON.stringify(services))
    console.log('saveServicesToCache:', services);
  } catch { }
}

watch(scenePrompt, (v) => {
  saveScenePromptToCache(v)
})
watch(sceneImage, (v) => {
  saveSceneImageToCache(v)
})
watch(sceneBgPrompt, (v) => {
  saveSceneBgPromptToCache(v)
})
watch(selectedModels, (v) => {
  if (v) saveModelsToCache(v)
}, { deep: true })

// 从缓存加载模板选择
const loadTemplateFromCache = () => {
  lastSelectedTemplateId.value = null
  try {
    const template = localStorage.getItem(DETAIL_TEMPLATE_CACHE_KEY)
    if (template) {
      const parsed = JSON.parse(template)
      if (parsed && parsed.id) {
        lastSelectedTemplateId.value = parsed.id
        console.log('loadTemplateFromCache - template id:', parsed.id);
      }
    }
  } catch (error) {
    console.error('加载模板缓存失败:', error);
  }
  ensureDefaultTemplateSelection({ ensureVisible: true })
}


// HLM用户判断
const isHLM = computed(() => useUserInfoStore.isHLM)


const openModelDialog = (eventOrDefaultTab?: MouseEvent | 'female' | 'male') => {
  modelDialogVisible.value = true
  let defaultTab: 'female' | 'male' | undefined

  if (typeof eventOrDefaultTab === 'string') {
    defaultTab = eventOrDefaultTab
  }

  if (defaultTab) {
    // 传递给子组件的默认标签页
    modelDialogDefaultTab.value = defaultTab
  } else {
    // 重置为默认值
    modelDialogDefaultTab.value = 'female'
  }
}
const openScenePromptDialog = () => {
  scenePromptDialogVisible.value = true
}

// 选择LOGO
// selectLogo 函数已移除，现在只支持单个LOGO上传
const handleModelSelection = (models: { female: any; male: any }) => {
  selectedModels.value = models
  saveModelsToCache(models)
  modelDialogVisible.value = false
  // ElMessage.success('模特选择完成！')
}
const handleScenePromptConfirm = (prompt: string) => {
  scenePrompt.value = prompt
  saveScenePromptToCache(prompt)
}




const onCurrentChange = (page) => {
  queryParams.current = page;
};
const onSizeChange = (data) => {
};



// 格式化时间
const formatTime = (timestamp: number) => {
  const date = new Date(timestamp)
  return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`
}

// 处理进度消息
const handleProgressMessage = (data: any) => {
  console.log("detail_progress", data);

  if (data.code === 0 && data.msg_type === 'detail_progress') {
    const messageData = {
      goods_no: data.data.goods_no,
      temp_name: data.data.temp_name,
      status: data.data.status,
      goods_art_nos: data.data.goods_art_nos,
      msg: data.msg,
      timestamp: Date.now()
    }
    progressMessages.value.push(messageData)
    // 更新当前显示的消息
    message.value = data.data.goods_art_nos ? `货号${data.data.goods_art_nos.join(', ')}：${data.msg}` : `${data.msg}`
    scrollMessageListToBottom()

    // 更新新的进度条

    if (data.progress) {
      updateProgressStep('detail_progress', data.progress)
    }
  }
}

// 处理抠图进度消息
const handleSegmentProgressMessage = (data: any) => {
  console.log("segment_progress", data);

  if (data.code === 0 && data.msg_type === 'segment_progress') {
    const messageData = {
      goods_no: '',
      temp_name: '',
      status: data.data?.status || '',
      goods_art_nos: data.data?.goods_art_nos || [],
      msg: data.msg,
      timestamp: Date.now()
    }
    progressMessages.value.push(messageData)
    // 更新当前显示的消息
    message.value = data.data.goods_art_nos ? `货号${data.data.goods_art_nos.join(', ')}：${data.msg}` : `${data.msg}`
    scrollMessageListToBottom()

    // 更新新的进度条
    if (data.progress) {
      if (['处理完成', '处理失败'].includes(progressSteps.value[0]?.status)) {
        return;
      }
      updateProgressStep('segment_progress', data.progress)
      if (data.progress?.folder && !window.segmentFolderOpened) {
        window.segmentFolderOpened = true;
        openOutputDir(data.progress?.folder)
      }
    }
  }
}

// 处理上脚图进度
const handleUpperFooterProgressMessage = (data: any) => {
  console.log("upper_footer_progress", data);
  if (data.code === 0 && data.msg_type === 'upper_footer_progress') {
    const messageData = {
      goods_no: '',
      temp_name: '',
      status: data.data?.status || '',
      goods_art_nos: data.data?.goods_art_nos || [],
      msg: data.msg,
      timestamp: Date.now()
    }
    progressMessages.value.push(messageData)
    message.value = data.data.goods_art_nos ? `货号${data.data.goods_art_nos.join(', ')}：${data.msg}` : `${data.msg}`
    scrollMessageListToBottom()

    // 更新新的进度条
    if (data.progress) {
      updateProgressStep('upper_footer_progress', data.progress)
      // 如果是处理完成状态且目录还未打开，则打开目录
      if (data.progress?.folder && !window.modelOrSceneFolderOpened) {
        window.modelOrSceneFolderOpened = true;
        openOutputDir(data.progress?.folder)
      }
    }
  }
}

// 处理场景图进度
const handleSceneProgressMessage = (data: any) => {
  console.log("scene_progress", data);
  if (data.code === 0 && data.msg_type === 'scene_progress') {
    const messageData = {
      goods_no: '',
      temp_name: '',
      status: data.data?.status || '',
      goods_art_nos: data.data?.goods_art_nos || [],
      msg: data.msg,
      timestamp: Date.now()
    }
    progressMessages.value.push(messageData)
    message.value = data.data.goods_art_nos ? `货号${data.data.goods_art_nos.join(', ')}：${data.msg}` : `${data.msg}`
    scrollMessageListToBottom()

    // 更新新的进度条
    if (data.progress) {
      updateProgressStep('scene_progress', data.progress)
      // 如果是处理完成状态且目录还未打开，则打开目录
      if (data.progress?.folder && !window.modelOrSceneFolderOpened) {
        window.modelOrSceneFolderOpened = true;
        openOutputDir(data.progress?.folder)
      }
    }
  }
}

// 处理商品上传进度
const handleUploadGoodsProgressMessage = (data: any) => {
  console.log("upload_goods_progress", data);
  if (data.code === 0 && data.msg_type === 'upload_goods_progress') {
    const messageData = {
      goods_no: '',
      temp_name: '',
      status: data.data?.status || '',
      goods_art_nos: data.data?.goods_art_nos || [],
      msg: data.msg,
      timestamp: Date.now()
    }
    progressMessages.value.push(messageData)
    message.value = data.data.goods_art_nos ? `货号${data.data.goods_art_nos.join(', ')}：${data.msg}` : `${data.msg}`
    scrollMessageListToBottom()
    // 更新新的进度条
    if (data.progress) {
      updateProgressStep('upload_goods_progress', data.progress)
    }
  }
}

// 打开输出目录：appConfig.appPath + '/build/extraResources/py/output'
const openOutputDir = (path) => {
  try {
    let fullPath = ''
    if (path) {
      fullPath = path
    } else {

      const appPath = useConfigInfoStore?.appConfig?.appPath || ''
      if (!appPath) {
        ElMessage.error('未获取到应用目录 appPath')
        return
      }
      fullPath = `${pyPath}\\output`
    }
    clientStore.ipc.removeAllListeners(icpList.utils.shellFun);
    clientStore.ipc.send(icpList.utils.shellFun, {
      action: 'openPath',
      params: fullPath.replace(/\//g, '\\')
    });
  } catch (e) {
    console.error(e)
    ElMessage.error('打开目录失败')
  }
}

function buildSceneSubmitParams() {
  if (sceneMode.value === 'upload') {
    return {
      product_scene_image: sceneImage.value || '',
      product_scene_prompt: (sceneBgPrompt.value || '').trim() || DEFAULT_BG_SCENE_PROMPT,
    }
  }
  return {
    product_scene_prompt: scenePrompt.value || '',
  }
}

// 检测参数是否有效
const checkParams = async function () {
  const useConfigInfoStore = configInfo();
  const tokenInfoStore = tokenInfo();
  const token = tokenInfoStore.getToken;
  let temp_list = []
  templates.value.map(item => {
    temp_list.push({
      template_id: item.template_id,
      template_local_classes: item.template_local_classes,
      template_type: item.template_type,
    })
  })
  // 根据选择的服务内容设置参数
  const isDetail = form.services.includes('is_detail') ? 1 : 0
  const isProductScene = form.services.includes('is_product_scene') ? 1 : 0
  const isUpperFooter = form.services.includes('is_upper_footer') ? 1 : 0

  const params = {
    goods_art_no: JSON.parse(JSON.stringify(goods_art_nos.value)),
    logo_path: form.logo_path || '',
    temp_name: form.selectTemplate?.template_id || '',
    excel_path: (isDetail && form.dataType == '1') ? (form.excel_path || '') : '',
    template_image_order: form.selectTemplate?.template_image_order,
    temp_list,
    token,
    uuid: uuidStore.getUuid || '',
    // 新增服务参数 - 合并国内和国外平台
    online_stores: [...(domesticPlatforms.value || []), ...(foreignPlatforms.value || [])],
    is_detail: isDetail,
    is_product_scene: isProductScene,
    is_upper_footer: isUpperFooter,
    upper_footer_params: selectedModels.value ? {
      man_id: selectedModels.value.male?.id || "",
      women_id: selectedModels.value.female?.id || "",
      child_id: selectedModels.value.child?.id || ""
    } : {},
    ...buildSceneSubmitParams(),
    is_check: 1 // 仅检测，不生成
  }

  try {
    // 直接调用API进行检测，因为检测模式会直接返回结果
    const response = await clientStore.ipc.invoke(icpList.generate.generatePhotoDetail, params);
    console.log('=======checkParamscheckParamscheckParamscheckParams===========');
    console.log(params);
    console.log(response);
    if (response.code === 0) {
      return response;
    } else {
      throw new Error(response.msg || '检测失败');
    }
  } catch (error) {
    throw new Error(error.message || '检测失败');
  }
}

// 开始生成操作
const generate = async function () {
  if (requesting.value) {
    return
  }

  // 重置目录打开状态
  window.segmentFolderOpened = false;
  window.modelOrSceneFolderOpened = false;

  if (form.services.length == 0) {
    ElMessage.error('请选择服务内容')
    return
  }

  // 必填验证
  if (form.services.includes('is_upper_footer')) {
    const hasMale = selectedModels.value?.male?.id
    const hasFemale = selectedModels.value?.female?.id

    if (!hasMale && !hasFemale) {
      ElMessage.error('请选择男模特和女模特')
      return
    } else if (!hasMale) {
      ElMessage.error('请选择男模特')
      return
    } else if (!hasFemale) {
      ElMessage.error('请选择女模特')
      return
    }
  }

  if (form.services.includes('is_product_scene')) {
    if (sceneMode.value === 'upload') {
      if (!sceneImage.value) {
        ElMessage.error('请上传或选择背景图')
        return
      }
    } else if (!(scenePrompt.value || '').trim()) {
      ElMessage.error('请填写场景描述')
      return
    }
  }

  if (form.services.includes('is_detail') && form.dataType == '1' && !form.excel_path) {
    ElMessage.error('请上传商品基础资料')
    return
  }

  // 埋点：开始生成详情页
  clickLog({
    describe: {
      action: '点击开始生成详情页',
      services: form.services,
      dataType: form.dataType,
      template_name: form.selectTemplate?.template_name,
      goods_count: goods_art_nos.value.length,
      goods_art_nos: goods_art_nos.value
    }
  }, route);
  // 先进行检测
  let checkResult;
  try {
    requesting.value = true
    // ElMessage.info('正在检测参数，请稍候...');
    checkResult = await checkParams();
    // ElMessage.success('检测通过，开始生成...');
  } catch (error) {
    ElMessage.error(error.message || '检测失败，请检查参数');
    requesting.value = false
    return;
  }

  const useConfigInfoStore = configInfo();
  console.log(useConfigInfoStore.appConfig);

  const tokenInfoStore = tokenInfo();
  const token = tokenInfoStore.getToken; // 使用 getToken() 获取 token
  let temp_list = []
  templates.value.map(item => {
    temp_list.push({
      template_id: item.template_id,
      template_local_classes: item.template_local_classes,
      template_type: item.template_type,
    })
  })
  // 根据选择的服务内容设置参数
  const isDetail = form.services.includes('is_detail') ? 1 : 0
  const isProductScene = form.services.includes('is_product_scene') ? 1 : 0
  const isUpperFooter = form.services.includes('is_upper_footer') ? 1 : 0

  const params = {
    goods_art_no: JSON.parse(JSON.stringify(goods_art_nos.value)),
    logo_path: form.logo_path || '',
    temp_name: form.selectTemplate?.template_id || '',
    excel_path: (isDetail && form.dataType == '1') ? (form.excel_path || '') : '',
    template_image_order: form.selectTemplate?.template_image_order,
    temp_list,
    token,
    uuid: uuidStore.getUuid || '',
    // 新增服务参数 - 合并国内和国外平台
    online_stores: [...(domesticPlatforms.value || []), ...(foreignPlatforms.value || [])],
    is_detail: isDetail,
    is_product_scene: isProductScene,
    is_upper_footer: isUpperFooter,
    upper_footer_params: selectedModels.value ? {
      man_id: selectedModels.value.male?.id || "",
      women_id: selectedModels.value.female?.id || "",
      child_id: selectedModels.value.child?.id || ""
    } : {},
    ...buildSceneSubmitParams(),
    is_check: 0 // 正式生成
  }
  // 开启进度弹窗
  requesting.value = true
  partErrList.value = []
  message.value = '正在为您处理，请稍后'
  progress.value = 0
  // 清空之前的进度消息
  progressMessages.value = []
  showMessageHistory.value = true

  // 启用新的进度条并初始化步骤
  useNewProgress.value = true
  // 清空之前的进度步骤
  progressSteps.value = []
  // 从检测结果中获取步骤信息
  const backendSteps = checkResult?.data?.progress || []
  initProgressSteps(backendSteps)

  openLoadingDialog(goods_art_nos.value.length * 10)
  clientStore.ipc.removeAllListeners(icpList.socket.message + '_detail_result_progress');
  clientStore.ipc.send(icpList.generate.generatePhotoDetail, params);

  /*
  * detail_result_progress
  *
  * */
  // 监听进度消息
  clientStore.ipc.removeAllListeners(icpList.socket.message + '_detail_progress');
  clientStore.ipc.on(icpList.socket.message + '_detail_progress', (event, data) => {
    console.log('_detail_progress', data);
    handleProgressMessage(data)
  });

  // 监听抠图进度消息
  clientStore.ipc.removeAllListeners(icpList.socket.message + '_segment_progress');
  clientStore.ipc.on(icpList.socket.message + '_segment_progress', (event, data) => {
    console.log('_segment_progress', data);
    handleSegmentProgressMessage(data)
  });
  // 监听上脚图进度消息
  clientStore.ipc.removeAllListeners(icpList.socket.message + '_upper_footer_progress');
  clientStore.ipc.on(icpList.socket.message + '_upper_footer_progress', (event, data) => {
    console.log('_upper_footer_progress', data);
    handleUpperFooterProgressMessage(data)
  });
  // 监听场景图进度消息
  clientStore.ipc.removeAllListeners(icpList.socket.message + '_scene_progress');
  clientStore.ipc.on(icpList.socket.message + '_scene_progress', (event, data) => {
    console.log('_scene_progress', data);
    handleSceneProgressMessage(data)
  });
  // 监听商品上传进度消息
  clientStore.ipc.removeAllListeners(icpList.socket.message + '_upload_goods_progress');
  clientStore.ipc.on(icpList.socket.message + '_upload_goods_progress', (event, data) => {
    console.log('_upload_goods_progress', data);
    handleUploadGoodsProgressMessage(data)
  });

  clientStore.ipc.on(icpList.socket.message + '_detail_result_progress', (event, result) => {
    if (result.code !== 0) {
      if (result.msg) {
        handleFail(result.msg)
        message.value = 'result.msg'
      }
      progress.value = 0
      loadingDialogVisible.value = false
      requesting.value = false
      return;
    }

    console.log('result', result)
    requesting.value = true
    setTimeout(() => {
      clientStore.ipc.removeAllListeners(icpList.socket.message + '_detail_result_progress');
      clientStore.ipc.removeAllListeners(icpList.socket.message + '_detail_progress');
      clientStore.ipc.removeAllListeners(icpList.socket.message + '_segment_progress');
      clientStore.ipc.removeAllListeners(icpList.socket.message + '_upper_footer_progress');
      clientStore.ipc.removeAllListeners(icpList.socket.message + '_scene_progress');
      clientStore.ipc.removeAllListeners(icpList.socket.message + '_upload_goods_progress');
    }, 100)
    clearInterval(INTERVAL.value)
    if (result.code === 0) {
      const { output_folder, list } = result.data
      const allSuccess = list.every(item => item.success);
      const allFailure = list.every(item => !item.success);
      if (allSuccess) {
        console.log("全部成功")
        handleSuccess(output_folder, '全部生成成功')
      } else if (allFailure) {
        console.log("全部失败");
        handleFailure(list)
      } else {
        console.log("部分成功，部分失败");
        handlePartSuccess(output_folder, list)
      }
    } else {
      console.log('code全部生成失败')
      handleFail(result.msg)
    }
    //生成失败 (接口请求失败)
    function handleFail(errorMsg: string) {
      // loadingDialogVisible.value = false
      //  disabledButton.value = false
      if (errorMsg) {
        ElMessage.error(errorMsg)
      }
      requesting.value = false  // 重置请求状态，允许再次生成

      // 处理完成后停止监听进度消息
      // clientStore.ipc.removeAllListeners(icpList.socket.message + '_detail_progress');
      //  clientStore.ipc.removeAllListeners(icpList.socket.message + '_segment_progress');
    }

    // 全部生成成功
    function handleSuccess(href, loadingMsg) {
      // 埋点：生成完成
      setLogInfo(route, { action: '生成完成', output_folder: href, message: loadingMsg });

      completeDirectory.value = href
      progress.value = 100
      disabledButton.value = false
      message.value = loadingMsg
      requesting.value = false  // 重置请求状态，允许再次生成

      // handleComplete()
    }
    // 部分成功
    function handlePartSuccess(output_folder: string, partSuccessList) {
      let errorList = []
      partSuccessList.map(item => {
        if (!item.success) {
          errorList.push(item)
        }
      })
      partErrList.value = errorList
      handleSuccess(output_folder, '部分货号生成失败')
    }
    // 全部生成失败
    function handleFailure(partSuccessList) {
      // 埋点：生成失败（携带货号）
      const failedGoods = (partSuccessList || []).map(item => item.goods_art_no).filter(Boolean)
      setLogInfo(route, { action: '生成失败', error_count: partSuccessList.length, goods_art_nos: goods_art_nos.value, failed_goods_art_nos: failedGoods });

      let errorList = []
      partSuccessList.map(item => {
        if (!item.success) {
          errorList.push(item)
        }
      })
      partErrList.value = errorList
      completeDirectory.value = ''
      progress.value = 100
      disabledButton.value = true
      message.value = '全部货号生成失败'
      requesting.value = false  // 重置请求状态，允许再次生成

    }
    requesting.value = false
  });
}
const openLoadingDialog = (timer: number) => {
  loadingDialogVisible.value = true

  disabledButton.value = true
  // 根据传入的秒数计算每次增加的进度值
  const step = 100 / timer
  INTERVAL.value = setInterval(() => {

    if (progress.value < 50) {
      progress.value = Math.min(progress.value + step, 100)
    } else if (progress.value < 70) {
      progress.value = Math.min(progress.value + step / 2, 100)
    } if (progress.value < 85) {
      progress.value = Math.min(progress.value + step / 5, 100)
    } else if (progress.value < 90) {
      progress.value = Math.min(progress.value + step / 10, 100)
    } else if (progress.value < 95) {
      progress.value = Math.min(progress.value + step / 50, 100)// 新增中间阶段
    } else {
      progress.value = Math.min(progress.value + step / 100, 100)
    }
  }, 1000)
}


//logo
const logoList = ref([])
const logoLoadError = ref(false)
const logoPreviewVisible = ref(false)
const logoPreviewUrl = ref('')

// 打开LOGO上传
const handleLogoSelected = (path?: string) => {
  if (!path) return
  form.logo_path = path
  logoLoadError.value = false
  saveLogoToCache(form.logo_path)
}

const openLogoUpload = () => {
  clientStore.ipc.removeAllListeners(icpList.utils.openImage);
  clientStore.ipc.send(icpList.utils.openImage);
  clientStore.ipc.on(icpList.utils.openImage, async (event, result) => {
    if (result && result.filePath) {
      handleLogoSelected(result.filePath)
    }
    clientStore.ipc.removeAllListeners(icpList.utils.openImage);
  })
}

// 预览LOGO
const previewLogo = () => {
  if (form.logo_path) {
    logoPreviewUrl.value = 'file:///' + form.logo_path
    logoPreviewVisible.value = true
  }
}

// 删除LOGO
const removeLogo = () => {
  if (form.logo_path) {
    saveLogoToCache('')
    form.logo_path = ''
    /*  const currentLogoPath = form.logo_path
      clientStore.ipc.send(icpList.generate.deleteLogo, {
        path: currentLogoPath
      });
      clientStore.ipc.on(icpList.generate.deleteLogo, async (event, result) => {
        console.log('deleteLogo', result);
        form.logo_path = ''
        saveLogoToCache('')
        logoLoadError.value = false
        // 从列表中移除
        const index = logoList.value.indexOf(currentLogoPath)
        if (index > -1) {
          logoList.value.splice(index, 1)
        }
        clientStore.ipc.removeAllListeners(icpList.generate.deleteLogo);
      })*/
  }
}

const handleLogoLoadError = () => {
  if (!form.logo_path) return
  if (!logoLoadError.value) {
    logoLoadError.value = true
    form.logo_path = ''
    saveLogoToCache('')
    ElMessage.warning('LOGO加载出错或文件已被删除，请重新上传')
  }
}

const getLogolist = async () => {
  clientStore.ipc.send(icpList.generate.getLogoList);
  clientStore.ipc.on(icpList.generate.getLogoList, async (event, result) => {
    // 保持数组格式，兼容老的格式
    logoList.value = result.data || []
    console.log('getLogoList', result.data)
    // 只使用第一个LOGO（如果存在且当前没有选择）
    if (logoList.value.length && !form.logo_path) {
      form.logo_path = logoList.value[0]
      logoLoadError.value = false
      // 保存默认LOGO到缓存
      saveLogoToCache(form.logo_path)
    }
    clientStore.ipc.removeAllListeners(icpList.generate.getLogoList);
  })
}

function clearExcel() {
  form.excel_path = ''
}

function selectExcel() {
  clientStore.ipc.removeAllListeners(icpList.utils.openFile);
  clientStore.ipc.send(icpList.utils.openFile, {
    filters: [
      { name: '支持xls,xlsx', extensions: ['xlsx', 'xls'] }
    ],
    title: "选择基础文件资料"
  });
  clientStore.ipc.on(icpList.utils.openFile, async (event, result) => {
    form.excel_path = result
    clientStore.ipc.removeAllListeners(icpList.utils.openFile);
  })
}


const Router = useRouter()
//打开主图详情
function openPhotographySeniorDetail() {

  const { href } = Router.resolve({
    name: 'PhotographySeniorDetail'
  })

  clientStore.ipc.removeAllListeners(icpList.utils.openMain);
  let params = {
    title: '详情高级配置',
    width: 1000,
    height: 630,
    frame: true,
    id: "PhotographySeniorDetail",
    url: getRouterUrl(href)
  }
  clientStore.ipc.send(icpList.utils.openMain, params);
}

// 处理打开目录事件
const handleOpenFolder = (event) => {
  const { folder } = event.detail;
  if (folder) {
    openOutputDir(folder);
  }
}

const handleComplete = () => {
  // loadingDialogVisible.value = false
  // 这里可以添加打开目录的逻辑
  if (!completeDirectory.value) {
    openOutputDir()
    return
  }
  clientStore.ipc.removeAllListeners(icpList.utils.shellFun);
  let params = {
    action: 'openPath',
    params: completeDirectory.value?.replace(/\//g, '\\')
  }
  clientStore.ipc.send(icpList.utils.shellFun, params);
}

const selectFolder = () => {
  clientStore.ipc.removeAllListeners(icpList.utils.openDirectory);
  clientStore.ipc.send(icpList.utils.openDirectory);
  clientStore.ipc.on(icpList.utils.openDirectory, async (event, result) => {
    folderPath.value = result
    clientStore.ipc.removeAllListeners(icpList.utils.openDirectory);
  })
}


</script>

<style lang="scss" scoped>
// 服务标签页样式
.aigc-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.detail-page {
  height: calc(100vh - 50px);
  overflow: auto;
  background: #F2F5FA;
  display: flex;
  flex-direction: column;
}

.aigc-wrap {
  max-width: 1780px;
  width: 100%;
  min-width: 1420px;
  margin: 0 auto;
  padding: 16px 20px 22px;
  box-sizing: border-box;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.aigc-board {
  display: grid;
  grid-template-columns: minmax(320px, 0.85fr) minmax(320px, 0.85fr) minmax(400px, 1.5fr) 330px;
  grid-template-rows: minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  flex: 1;
  min-height: 0;
  min-width: 1420px;
}

.fcard {
  grid-row: 1;
  background: #fff;
  border: 1px solid #e7ebf4;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(23, 43, 99, 0.04), 0 10px 30px rgba(23, 43, 99, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 320px;
  min-height: 0;
  height: 100%;
  max-height: 100%;
}

.fcard-wide { min-width: 400px; }

.fhead {
  display: block;
  padding: 11px 16px 9px;
  border-bottom: 1px solid #e7ebf4;
  text-align: left;
}

.fh-row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: nowrap;
  text-align: left;
}

.fh-text {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.fico {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #eef2ff, #e3e9ff);
  color: #3d63f2;
  svg { width: 20px; height: 20px; display: block; }
}

.fh-t {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.3px;
  line-height: 1.25;
  color: #1a2233;
  white-space: nowrap;
  text-align: left;
  align-self: flex-start;
}

.fh-s {
  font-size: 12.5px;
  color: #8b95ab;
  margin-top: 4px;
  text-align: left;
  align-self: flex-start;
  white-space: normal;
  overflow: visible;
  line-height: 1.4;
  max-width: 100%;
}

.toggle {
  margin-left: auto;
  align-self: flex-start;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  .swl {
    font-size: 12px;
    font-weight: 600;
    color: #8b95ab;
    min-width: 0;
    text-align: right;
    line-height: 1;
  }
}

.sw {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 25px;
  flex: none;
  input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
    z-index: 2;
  }
  i {
    position: absolute;
    inset: 0;
    border-radius: 13px;
    background: #cbd3e3;
    transition: background 0.18s;
    &::after {
      content: "";
      position: absolute;
      top: 3px;
      left: 3px;
      width: 19px;
      height: 19px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 1px 3px rgba(10, 25, 70, 0.3);
      transition: transform 0.18s;
    }
  }
  input:checked + i {
    background: linear-gradient(100deg, #3e7bfa, #7a5af8);
  }
  input:checked + i::after {
    transform: translateX(21px);
  }
}

.fbody {
  position: relative;
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  > :deep(.model-card),
  > :deep(.scene-card) {
    flex: 1 1 0;
    min-height: 0;
  }
}

.ffoot {
  margin-top: auto;
  padding: 9px 16px;
  border-top: 1px dashed #d9dfec;
  color: #8b95ab;
  font-size: 13px;
  display: flex;
  gap: 7px;
  align-items: flex-start;
  line-height: 1.5;
  .ic {
    flex: none;
    width: 14px;
    height: 14px;
    transform: translateY(1px);
    display: block;
  }
}

.off .ffoot {
  opacity: 0.38;
  pointer-events: none;
  filter: saturate(0.5);
}
.off .fbody {
  pointer-events: none;
}
.off .fbody::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.62);
  z-index: 5;
}
.off .fbody :deep(.hbtns) {
  position: relative;
  z-index: 6;
  pointer-events: auto;
}

.tabs-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  border-bottom: 1.5px solid #e7ebf4;
}
.tabs-row-tools {
  justify-content: flex-end;
  border-bottom: 0;
  padding-bottom: 0;
  .hbtns { padding-bottom: 0; }
}
.tabs {
  display: flex;
  gap: 16px;
  flex: 1;
  min-width: 0;
}
.tab {
  background: none;
  border: 0;
  padding: 2px 1px 10px;
  font-size: 14px;
  font-weight: 700;
  color: #46516a;
  position: relative;
  white-space: nowrap;
  &.on {
    color: #3d63f2;
    &::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1.5px;
      height: 3px;
      border-radius: 3px;
      background: linear-gradient(100deg, #3e7bfa, #7a5af8);
    }
  }
}

.hbtns { display: flex; gap: 6px; flex: none; padding-bottom: 7px; }
.hbtn {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  border: 1.5px solid #d9dfec;
  background: #fff;
  color: #46516a;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  svg { width: 13px; height: 13px; display: block; }
  &:hover {
    border-color: #3d63f2;
    color: #3d63f2;
    background: #f5f8ff;
  }
}

.tpl-hscroll {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: minmax(0, 1fr);
  grid-auto-columns: calc(50% - 20px);
  gap: 11px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding-bottom: 2px;
  scrollbar-width: none;
  flex: 1;
  min-height: 0;
  &::-webkit-scrollbar { display: none; }
  > * { scroll-snap-align: start; min-width: 0; }
}

.tpl {
  position: relative;
  border: 1.5px solid #d9dfec;
  border-radius: 13px;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  margin: 0;
  transition: all 0.15s;
  &:hover {
    box-shadow: 0 10px 22px rgba(23, 43, 99, 0.14);
  }
  &.sel {
    border: 2px solid #3d63f2;
    box-shadow: 0 8px 22px rgba(61, 99, 242, 0.2);
  }
  .ck {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: #3d63f2;
    color: #fff;
    font-size: 12px;
    display: grid;
    place-items: center;
    box-shadow: 0 2px 6px rgba(23, 43, 99, 0.35);
    z-index: 2;
  }
  .template-download-btn {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    color: #3d63f2;
    height: 26px;
    line-height: 26px;
    padding: 0 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.92);
    font-size: 12px;
    font-weight: 700;
  }
  .tpl-head {
    padding: 11px 14px 8px;
    background: #eef2ff;
    b {
      display: block;
      font-size: 16px;
      font-weight: 800;
      line-height: 1.3;
      color: #1a2233;
    }
  }
  .tpl-img-wrap {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: #f5f7fb;
    position: relative;
  }
  .tpl-img {
    width: 100%;
    height: auto;
    display: block;
    :deep(.el-image__inner) {
      width: 100% !important;
      height: auto !important;
      object-fit: cover;
      object-position: top center;
      display: block;
    }
  }
  .tpl-mini {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 9px;
    background: #eef2ff;
    font-size: 12px;
    .lk {
      color: #3d63f2;
      font-weight: 700;
      cursor: pointer;
      &.danger { color: #ff4c00; }
    }
  }
}

.template-tips {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  height: auto;
  min-height: 36px;
  line-height: 1.55;
  padding: 8px 10px;
  background: #fff6dc;
  border-radius: 10px;
  border: 1px solid #f1e2ac;
  color: #7a5e17;
  font-size: 13px;
  text-align: left;
  .el-icon {
    flex: none;
    margin-top: 2px;
  }
  span {
    flex: 1;
    min-width: 0;
    white-space: normal;
    word-break: break-word;
    text-align: left;
  }
}

.side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 330px;
  min-height: 0;
  overflow: auto;
}

.scard {
  background: #fff;
  border: 1px solid #e7ebf4;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(23, 43, 99, 0.04), 0 10px 30px rgba(23, 43, 99, 0.06);
  padding: 11px 15px;
  text-align: left;
  .stitle {
    font-size: 15.5px;
    font-weight: 800;
    margin-bottom: 9px;
    color: #1a2233;
    text-align: left;
  }
}

.trow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: #1a2233;
  & + .trow { border-top: 1px solid #e7ebf4; }
  &:hover { background: #f5f7fe; }
  .tic {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: linear-gradient(135deg, #eef2ff, #e3e9ff);
    color: #3d63f2;
    display: grid;
    place-items: center;
    svg { width: 16px; height: 16px; display: block; }
  }
  .arr {
    margin-left: auto;
    color: #8b95ab;
    width: 15px;
    height: 15px;
    flex: none;
  }
  &.disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }
}

.gbtn {
  width: 100%;
  height: 42px;
  border-radius: 11px;
  border: 1.5px solid #3d63f2;
  color: #3d63f2;
  background: #fff;
  font-size: 14.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  svg { width: 17px; height: 17px; display: block; }
  &:hover { background: #f3f6ff; }
}

.data-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 4px;
  background: #f3f5f6;
  border-radius: 10px;
}
.data-mode-btn {
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #46516a;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  &.on {
    background: #fff;
    color: #3d63f2;
    box-shadow: 0 1px 3px rgba(23, 43, 99, 0.08);
  }
}
.data-prep-link {
  background: none;
  border: 0;
  color: #3d63f2;
  font-size: 13px;
  font-weight: 700;
  padding: 0;
  text-align: left;
  cursor: pointer;
  &:hover { text-decoration: underline; }
}
.sys-hint {
  font-size: 13px;
  color: #8b95ab;
  line-height: 1.5;
  text-align: left;
  padding: 8px 2px 0;
}

.up {
  border: 1.8px dashed #d9dfec;
  border-radius: 13px;
  background: #fafbfe;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 14px 12px;
  text-align: center;
  cursor: pointer;
  &:hover {
    border-color: #3d63f2;
    background: #f5f8ff;
  }
  .uic {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: linear-gradient(135deg, #eef2ff, #e3e9ff);
    display: grid;
    place-items: center;
    color: #3d63f2;
    svg { width: 21px; height: 21px; display: block; }
  }
  .t { font-size: 14px; font-weight: 700; color: #46516a; }
  .s { font-size: 12px; color: #8b95ab; }
  &.is-error {
    border-color: #ff4d4f;
    .t, .s { color: #ff4d4f; }
  }
}

.frow2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #46516a;
    margin-bottom: 5px;
    white-space: nowrap;
  }
  .publish-select {
    width: 100%;
    :deep(.el-select__tags) {
      max-width: calc(100% - 32px);
      padding-right: 4px;
      box-sizing: border-box;
    }
    :deep(.el-input__inner) {
      padding-right: 28px;
    }
    :deep(.el-input__suffix) {
      z-index: 2;
    }
    :deep(.el-select__caret) {
      position: relative;
      z-index: 3;
    }
  }
}

.cta {
  margin-top: auto;
  flex: none;
  position: sticky;
  bottom: 0;
  z-index: 2;
  border: 0;
  border-radius: 15px;
  padding: 13px;
  background: linear-gradient(100deg, #3e7bfa, #7a5af8);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  box-shadow: 0 12px 28px rgba(84, 98, 246, 0.35);
  cursor: pointer;
  transition: all 0.15s;
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(84, 98, 246, 0.42);
  }
  &:disabled { opacity: 0.65; cursor: not-allowed; transform: none; }
  b {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
    svg { width: 19px; height: 19px; display: block; }
  }
  small { font-size: 12px; opacity: 0.88; letter-spacing: 0.4px; }
}

.ybar {
  flex: none;
  margin-top: 14px;
  background: #fff6dc;
  border: 1px solid #f1e2ac;
  border-radius: 12px;
  padding: 10px 16px;
  color: #7a5e17;
  font-size: 13.5px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  line-height: 1.55;
  b { color: #6b4a08; }
  .ic {
    flex: none;
    width: 15px;
    height: 15px;
    transform: translateY(2px);
    display: block;
  }
}

.side .logo-upload-preview {
  height: 110px;
}

.side .data-prep-section {
  height: auto;
}

@media (max-width: 1220px) {
  .detail-page { overflow: auto; }
}

.service-tabs {
  display: flex;
  gap: 10px;
  padding: 20px;

  .service-tab {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 20px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    background: #fff;
    height: 140px;

    .tab-checkbox {
      margin-right: 0;
      position: absolute;
      left: 10px;
      top: 10px;

      ::v-deep {
        .is-checked .el-checkbox__inner {
          background: #2957FF;
          border-color: #2957FF;
        }

        .el-checkbox__inner {
          border-radius: 18px;
          transform: scale(1.2);
        }
      }
    }

    .tab-img {
      width: 48px;
      height: 48px;
      background: #EFF6FF;
      border-radius: 10px;
      margin: 0 auto 5px;

    }

    .tab-icon {
      width: 24px;
      height: 24px;
    }

    .tab-name {
      font-size: 14px;
      color: #333;
      font-weight: 500;
    }

    &.external-tool {
      cursor: pointer;
      opacity: 1;
      background: #fff;
    }

    .tab-edit-btn {
      position: absolute;
      right: 10px;
      top: 10px;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(41, 87, 255, 0.1);
      border-radius: 4px;
      opacity: 0;
      transition: opacity 0.3s;
      cursor: pointer;

      .el-icon {
        color: #2957FF;
        font-size: 16px;
      }
    }

    &:hover {
      border-color: #2957FF;

      .tab-edit-btn {
        opacity: 1;
      }
    }

    &.active {
      border-color: #2957FF;
      border-bottom: 4px solid #2957FF;

      .tab-img {
        background: #2957FF;
      }
    }

    &.disabled {
      opacity: 0.8;
      cursor: not-allowed;
      background: #f5f5f5;
    }
  }
}

.detail-container {
  background: #F5F6F7;
  padding: 0 20px 20px 20px; // 底部留出空间给固定按钮

  .detail-content {
    max-width: 100%;
  }

  width: 100%;
  min-width: 600px;
  overflow: hidden;

}

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

  .service-cards {
    display: flex;
    gap: 60px;
    margin-top: 16px;
  }

  .service-card {
    width: 240px;
    height: 140px;

    border-radius: 8px;
    background: #fff;
    border: 1px solid #e0e0e0;
    display: flex;
    align-items: flex-start;
    padding: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;

    &:hover {
      border-color: #2957FF;
      box-shadow: 0 2px 8px rgba(41, 87, 255, 0.1);
    }

    &.active {
      border: 3px solid #2957FF;
      background: #f8f9ff;
      box-shadow: 0 4px 12px rgba(41, 87, 255, 0.25);
    }

    .service-checkbox {
      position: absolute;
      left: -40px;
      top: 10px;
      width: 30px;
      transform: scale(1.5);
      z-index: 10;

      ::v-deep {
        .el-checkbox {
          display: block;
          margin-right: 0;
        }

        .el-checkbox__input {
          cursor: pointer;
        }
      }
    }

    .service-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      ;
    }

    .service-image {
      position: absolute;
      width: 100%;
      height: 100%;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 4px;
      }

      .service-icon {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 30px;
        height: 30px;
        background: #2957FF;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 18px;
      }
    }

    .service-name {
      font-size: 14px;
      font-weight: 500;
      text-align: center;
      position: absolute;
      background: rgba(0, 0, 0, .5);
      height: 30px;
      line-height: 30px;
      color: #fff;
      left: 0;
      right: 0;
      bottom: 0px
    }
  }
}

.logo-section,
.template-section,
.data-prep-section {}

.template-section {
  background: #fff;
  padding: 10px 20px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .template-tips {
    height: auto;
    min-height: 36px;
    line-height: 1.55;
    padding: 8px 10px;
    background: #FFFBEA;
    border-radius: 10px;
    border: 1px solid #FEEEB0;
    color: #9B4D26;
  }
}

.template-section--disabled {
  opacity: 0.8;

  .template-list,
  .template-pagination {
    pointer-events: none;
  }

}

.publish-section--disabled {
  opacity: 0.6;
}

// 主布局：左右分栏
.main-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;

  .left-panel {
    flex: 1;
    min-width: 0;
  }

  .right-panel {
    width: 400px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
}

.right-section {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

  &.data-prep-section {
    height: 225px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }

  .section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 16px;
    color: #333333;
    margin-bottom: 16px;

    .section-title-line {
      width: 3px;
      height: 16px;
      background: linear-gradient(135deg, #7C3AED 0%, #2957FF 100%);
      border-radius: 2px;
    }

    .section-title-hint {
      font-weight: normal;
      font-size: 14px;
      color: #999;
    }
  }

  .data-prep-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;

    .data-type-radio {
      padding: 5px;
      background: #F3F5F6;
      border-radius: 10px;

      ::v-deep {
        .el-radio {
          margin-right: 20px;
        }

        .el-radio-button {
          flex: 1;
          box-shadow: none !important;

          .el-radio-button__inner {
            width: 100%;
            background: none !important;
            border: none !important;
            display: flex;
            align-items: center;
            border-radius: 10px !important;
            justify-content: center;

            img {
              height: 14px;
              margin: 0 5px;
              position: relative;
              top: -1px;
            }
          }

          &.is-active {
            background: #F8F9FF;

            .el-radio-button__inner {
              background: #fff !important;
              color: #2957FF !important;
              border-radius: 10px !important;
              box-shadow: none !important;
            }
          }
        }
      }
    }

    .excel-upload-section {
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex: 1;

      .excel-upload-area {
        width: 100%;
        height: 64px;
        border: 1px dashed #D9D9D9;
        border-radius: 8px;
        display: flex;
        align-items: center;
        padding: 0 16px;
        cursor: pointer;
        transition: all 0.3s;
        background: #fff;

        &:hover {
          border-color: #2957FF;
          background: #F8F9FF;
        }

        .excel-icon {
          width: 32px;
          height: 32px;
          margin-right: 10px;

          img {
            width: 32px;
            height: 32px;
            display: block;
          }
        }

        .excel-upload-text {
          font-size: 14px;
          color: #333;
          font-weight: 500;
        }
      }

      .excel-selected-info {
        width: 100%;
        min-height: 64px;
        border: 1px solid #E5E6EB;
        border-radius: 8px;
        padding: 10px 12px;
        background: #fff;
        display: flex;
        align-items: center;
        gap: 10px;
        box-sizing: border-box;
        text-align: left;

        .excel-icon {
          width: 36px;
          height: 36px;
          flex: none;

          img {
            width: 36px;
            height: 36px;
            display: block;
          }
        }

        .excel-file-text {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 2px;
          min-width: 0;
          flex: 1;
        }

        .excel-file-name {
          font-size: 14px;
          color: #1D2129;
          font-weight: 500;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 100%;
          text-align: left;
        }

        .excel-file-actions {
          display: flex;
          align-items: center;
          gap: 8px;
        }

        .reupload-btn,
        .delete-excel-btn {
          flex-shrink: 0;
          padding: 0;
          height: auto;
        }
      }

      .download-link {
        color: #2957FF;
        text-decoration: underline;
        padding: 0;
        font-size: 14px;
        margin-top: 0;
        justify-content: flex-start;
      }
    }
  }

  .publish-content {
    display: flex;
    flex-direction: column;
    gap: 15px;

    .publish-form-item {
      display: flex;
      align-items: center;
      gap: 8px;

      .publish-label {
        font-size: 14px;
        color: #333;
        margin-bottom: 4px;
        text-align: left;
      }

      .publish-select {
        flex-grow: 1;
        ::v-deep {
          .el-input.is-disabled .el-input__inner {
            background-color: #F5F6F7;
            border-color: #E8E8E8;
            color: #999;
          }
        }
      }
    }
  }
}

.logo-template-row {
  display: flex;
  gap: 24px;
  align-items: flex-start;

  .logo-col {
    flex: 2;
    min-width: 300px;
  }

  .template-col {
    flex: 3;
  }
}

.logo-section {
  .upload-item {
    border: 2px solid rgba(0, 0, 0, 0);

  }

  .active {
    border: 2px solid #2957FF;
    border-radius: 6px;
    overflow: hidden;
    ;
  }

  &.multi-line {
    flex-direction: row; // 默认横向排列
    flex-wrap: wrap; // 允许换行
    align-items: flex-start; // 对齐方式调整为顶部对齐

    .upload-item {
      margin-bottom: 10px; // 每行之间增加间距
      width: 90px; // 每行显示 4 个元素，减去外边距
      box-sizing: border-box; // 确保宽度计算包含 padding 和 border
    }
  }
}

// LOGO上传区域样式
.logo-upload-area {
  width: 100%;
}

.logo-upload-placeholder {
  width: 100%;
  height: 160px;
  border: 1px dashed #D9D9D9;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  background: #fff;

  &:hover {
    border-color: #2957FF;
    background: #F8F9FF;
  }

  .logo-upload-icon {
    width: 42px;
    height: 42px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #EFF6FF 0%, #F3E8FF 100%);
    border-radius: 8px;
    color: #2957FF;

    img {
      width: 42px;
      height: 42px;
    }
  }

  .logo-upload-text {
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
    font-weight: 500;
  }

  .logo-upload-hint {
    font-size: 12px;
    color: #999;
  }

  &.is-error {
    border-color: #FF4D4F;
    background: #FFF2F0;

    .logo-upload-text,
    .logo-upload-hint {
      color: #FF4D4F;
    }
  }
}

.logo-upload-preview {
  width: 100%;
  height: 160px;
  border: 1px solid #E8E8E8;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  background: #F5F5F5;
  cursor: pointer;

  .logo-preview-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .logo-upload-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    opacity: 0;
    transition: opacity 0.3s;

    .logo-action-btn {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 4px;
      cursor: pointer;
      color: #fff;
      transition: background 0.3s;

      &:hover {
        background: rgba(255, 255, 255, 0.3);
      }

      .el-icon {
        font-size: 18px;
      }
    }
  }

  &:hover .logo-upload-actions {
    opacity: 1;
  }

  .logo-upload-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 8px 4px 0;
  }
}

.logo-upload {
  border: 1px dashed #ccc;
  border-radius: 5px;
  padding: 50px 0;
  text-align: center;
  cursor: pointer;
}

.template-pagination {
  background: #EFF3F6;
  padding: 2px 0;
  border-radius: 5px;

  ::v-deep {
    .is-active {
      background: #fff !important;
      color: #2957FF !important;
      font-size: 14px !important;
      font-weight: normal !important;
      border-radius: 2px !important;
    }

    .number {
      margin: 0px !important;
    }

    .btn-prev {
      display: none;
    }

    .btn-next {
      display: none;
    }
  }
}

.template-pagination button {
  margin-right: 5px;
}

.template-pagination span {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-right: 5px;
  cursor: pointer;
}


.template-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 10px;


  .template-item {
    flex: 1;
    max-width: 33%;
    border: 1px solid #ccc;
    border-radius: 10px;
    cursor: pointer;
    background: #f0f0f0;
    position: relative;
    height: 594px;
    overflow: hidden;

    &.active {

      border-color: #1677FF;
    }

    .template-download-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 10;
      color: #3366FF;
      height: 30px;
      line-height: 30px;
      padding: 0 10px;
      border-radius: 4px;
      background: rgba(255, 255, 255, 0.9);
      font-size: 14px;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      transition: all 0.3s;

      &:hover {
        background: rgba(255, 255, 255, 1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      }
    }

    .template-info {
      position: absolute;
      bottom: 0;
      left: 0;
      background: #fff;
      width: 100%;
      height: 40px;
      line-height: 40px;
      color: #333;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .template-view {
        color: #3366FF;
        height: 30px;
        line-height: 30px;
        padding: 0 5px;
        border-radius: 4px;
        font-size: 14px;
      }
    }
  }
}

.publish-section {
  .label {
    min-width: 120px;
    margin-right: 12px;
  }
}



.excel-upload {
  width: 100%;
  background: #F7F7F7;
  padding: 20px 0;
}

.generate-button {
  padding: 10px 20px;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.select-button {
  background: #DFE2E3 !important;
  color: #3366FF !important;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  border-radius: 4px;
  margin-right: 10px;
  font-size: 14px;
  font-weight: 550;

}

.select-warp {
  width: 18px;
  height: 18px;
  border-radius: 18px;
  background-color: #fff;
  position: absolute;
  font-size: 12px;
  line-height: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 10px;
  left: 10px;
  border: 1px solid #efefef;

  &.active {
    background-color: #1677FF;
  }
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: bold;
  color: #474747;
}



.section {
  margin-bottom: 24px;

  .section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    margin-bottom: 16px;
    color: #474747;
  }

  .section-content {
    padding-left: 16px;
  }
}

.instruction-out {
  background: #EAF3FF;
  border-radius: 4px;
  border: 1px solid #CBE1FF;
  padding: 10px 20px;
  width: 80%;
  position: relative;

  .instruction-list {
    margin: 0px 0 0 10px;
    padding-left: 20px;
    padding-right: 40px;
    width: 100%;

    li {
      margin-bottom: 4px;
      text-align: left;
      font-size: 14px;
    }
  }

  .close-icon {
    position: absolute;
    top: 12px;
    right: 19px;
  }
}



.form-item {
  margin: 16px 0;
  display: flex;


  .label {
    min-width: 120px;
    margin-right: 12px;
  }

  .folder-warp {
    width: 100%;
    display: flex;
    flex-direction: column;

    .folder-input {
      flex: 1;
      display: flex;
      align-items: center;

      .check-button {
        background: #DFE2E3;
        border-radius: 6px;
        padding: 6px 12px;
        color: #2957FF;
        margin-left: 20px;
      }

    }
  }

  .hint {
    text-align: left;
    color: #999;
    margin-top: 6px;
    font-size: 14px;
    color: #FF4C00;
    font-style: normal;
  }

  .specific-page-input {
    flex: 1;
  }
}

.image-order {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer {
  display: flex;
  z-index: 100;

  .footer-button {
    padding: 12px 40px;
    font-size: 16px;
    border-radius: 8px;
    display: block;
    width: 100%;
    height: 50px;

    img {
      height: 16px;
      ;
      margin: 0 10px;
    }

    .go {
      opacity: .5;
    }
  }
}

.explain-btn {
  padding-left: 20px;
  padding-right: 20px;
  color: #2957FF !important;
}

.progress-messages {
  margin-top: 20px;
  border-top: 1px solid #e4e7ed;
  padding-top: 20px;
  width: 100%;
  display: none;

  .message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    font-weight: 500;
    color: #606266;
  }

  .message-list {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    padding: 10px;
    background: #fafafa;

    .message-item {
      margin-bottom: 12px;
      padding-bottom: 12px;
      border-bottom: 1px solid #f0f0f0;

      &:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
      }

      .message-time {
        font-size: 12px;
        color: #909399;
        margin-bottom: 4px;
      }

      .message-content {
        font-size: 14px;
        line-height: 1.4;

        .goods-no {
          color: #2957FF;
          font-weight: 500;
        }

        .message-text {
          color: #606266;
        }
      }
    }
  }
}

.side .right-section.data-prep-section {
  height: auto;
}
.side .right-section {
  padding: 11px 15px;
}
.side .excel-selected-info {
  width: 100%;
  min-height: 72px;
  border: 1px solid #E5E6EB;
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  text-align: left;
  .excel-icon {
    width: 53px;
    height: 53px;
    flex: none;
    img {
      width: 53px;
      height: 53px;
      display: block;
      object-fit: contain;
    }
  }
  .excel-file-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
  }
  .excel-file-name {
    font-size: 14px;
    color: #1D2129;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-align: left;
    line-height: 1.3;
  }
  .excel-file-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
  .reupload-btn,
  .delete-excel-btn {
    padding: 5px !important;
    height: auto;
    font-size: 13px;
    font-weight: 600;
    :deep(span) {
      font-size: 13px;
      font-weight: 600;
    }
  }
}
</style>