yoe-pms-web/src/views/product/pptScheme/index.vue

<template>
  <div class="scheme-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <div class="header-left">
            <span class="title-text">PPT方案管理</span>
            <div class="header-filters">
              <el-tabs v-model="activeTab" class="premium-status-tabs">
                <el-tab-pane label="全部" name="all" />
                <el-tab-pane label="我创建的" name="mine" />
                <el-tab-pane label="分享给我的" name="sharedToMe" />
              </el-tabs>
              <el-input v-model="topSearchText" placeholder="搜索方案名称..." :prefix-icon="Search" clearable class="top-search-input" />
            </div>
          </div>
          <div class="header-actions">
            <el-button type="danger" plain :disabled="!selectedRows.length" @click="handleBatchDelete">批量删除</el-button>
            <el-button type="success" plain :disabled="!selectedRows.length" @click="handleBatchDownload">批量下载</el-button>
            <el-button type="primary" @click="openAddScheme">
              <el-icon class="mr-5"><Plus /></el-icon>新增PPT方案
            </el-button>
          </div>
        </div>
      </template>

      <el-table :data="paginatedSchemes" style="width: 100%" @selection-change="handleSelectionChange" v-loading="loading">
        <el-table-column type="selection" width="55" />
        <el-table-column label="方案基本信息" min-width="260">
          <template #default="scope">
            <div class="scheme-name-box">
              <div class="s-title-row">
                <span class="s-name" @click="handleEditScheme(scope.row)">{{ scope.row.name }}</span>
                <div class="s-share-line" v-if="scope.row.sharer">
                  <el-icon><Share /></el-icon>
                  <span>来自 {{ scope.row.sharer }} 的分享 ({{ scope.row.shareTime }})</span>
                </div>
              </div>
              <div class="s-meta-line">
                <span class="label">创建于:</span> {{ scope.row.createTime }}
                <span class="divider">|</span>
                <span class="label">创建人:</span> {{ scope.row.creator || '管理员' }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="模板封面" width="120">
          <template #default="scope">
            <el-image :src="scope.row.template.cover" class="table-thumb" fit="cover" />
          </template>
        </el-table-column>
        <el-table-column label="模板名称" min-width="150" show-overflow-tooltip>
          <template #default="scope">
            <span>{{ scope.row.template.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="规格布局" width="160">
          <template #default="scope">
            <el-tag size="small" :type="getLayoutTagType(scope.row.template.itemsPerPage)">
              {{ getLayoutName(scope.row.template.itemsPerPage) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="商品数量" width="100" align="center">
          <template #default="scope">
            {{ scope.row.products.length }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="440" fixed="right">
          <template #default="scope">
            <el-button link type="primary" @click="handleDownload(scope.row)">下载</el-button>
            <el-button link type="primary" @click="handleExportProducts(scope.row)">导出商品</el-button>
            <el-button link type="primary" @click="handlePreview(scope.row)">预览</el-button>
            <el-button link type="success" @click="openShareDrawer(scope.row)">分享</el-button>
            <el-divider direction="vertical" />
            <el-button link type="warning" @click="handleEditAtStep(scope.row, 1)">重选商品</el-button>
            <el-button link type="warning" @click="handleEditAtStep(scope.row, 0)">编辑模板</el-button>
            <el-button link type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-box">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="filteredSchemes.length"
        />
      </div>
    </el-card>

    <!-- 主抽屉：新增/编辑方案 wizard -->
    <el-drawer
      v-model="schemeDrawerVisible"
      :title="isEdit ? '修改PPT方案内容' : '创建全新PPT方案'"
      direction="rtl"
      size="50%"
      custom-class="fancy-scheme-drawer"
    >
      <div class="wizard-container">
        <el-steps :active="activeStep" finish-status="success" align-center class="step-bar">
          <el-step title="配置模板" />
          <el-step title="选取商品" />
          <el-step title="预览生成" />
        </el-steps>

        <div class="step-content">
          <!-- Step 1: 模板配置 -->
          <div v-if="activeStep === 0" class="step-pane fade-in">
            <div class="scheme-base-form">
              <el-form label-position="top">
                <el-form-item label="本次方案名称" required>
                  <el-input v-model="currentScheme.name" placeholder="请输入方案名称，如：2024春季选礼方案" />
                </el-form-item>
              </el-form>
            </div>

            <div class="tpl-selector-area">
              <div class="area-header">
                <h4 class="sub-title">1. 选择并配置PPT视觉模板</h4>
                <el-button type="primary" size="default" @click="openTplSelector">从模板库更换底版</el-button>
              </div>
              <!-- 选中的模板快照与实时配置 -->
              <div class="tpl-config-layout">
                <div class="tpl-preview-side">
                  <div class="tpl-snap">
                    <el-image v-if="currentScheme.template.cover" :src="currentScheme.template.cover" fit="cover" class="tpl-snap-img" />
                    <div class="tpl-snap-badge">{{ getLayoutName(currentScheme.template.itemsPerPage) }}</div>
                  </div>
                  <div class="tpl-base-info">
                    <div class="name">{{ currentScheme.template.name }}</div>
                    <div class="desc">
                      主题色：
                      <span class="color-dot" :style="{ backgroundColor: currentScheme.template.themeColor }"></span>
                      <span class="color-val-text">{{ currentScheme.template.themeColor }}</span>
                    </div>
                  </div>
                </div>

                <div class="tpl-form-side">
                  <el-form :model="currentScheme.template" label-position="top" size="default">
                    <div class="form-group-title">首页文字 (Cover Page)</div>
                    <el-row :gutter="15">
                      <el-col :span="12">
                        <el-form-item label="封面主标题">
                          <el-input v-model="currentScheme.template.title" placeholder="PPT首页醒目大标题" />
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="封面副标题">
                          <el-input v-model="currentScheme.template.subTitle" placeholder="辅助说明文案" />
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-form-item label="PPT封面底图">
                      <el-upload action="#" :auto-upload="false" :show-file-list="false" :on-change="(file) => handleStaticFileChange(file, 'cover')">
                        <div class="banner-upload-box" v-if="currentScheme.template.cover">
                          <img :src="currentScheme.template.cover" />
                          <div class="mask">重选背景</div>
                        </div>
                        <el-button v-else size="small" type="primary" plain :loading="uploadingProp === 'cover'">
                          {{ uploadingProp === 'cover' ? '上传中...' : '上传封面底图' }}
                        </el-button>
                      </el-upload>
                    </el-form-item>

                    <el-form-item label="方案截止日期">
                      <el-date-picker
                        v-model="currentScheme.template.validity"
                        type="date"
                        format="YYYY年MM月DD日"
                        value-format="方案有效期：YYYY年MM月DD日"
                        style="width: 100%"
                      />
                    </el-form-item>

                    <div class="form-group-title">品牌与联系信息 (Footer Bar)</div>
                    <el-row :gutter="15">
                      <el-col :span="8">
                        <el-form-item label="底部品牌LOGO">
                          <el-upload
                            action="#"
                            :auto-upload="false"
                            :show-file-list="false"
                            :on-change="(file) => handleStaticFileChange(file, 'coverLogo')"
                          >
                            <div class="mini-upload-box" v-if="currentScheme.template.coverLogo">
                              <img :src="currentScheme.template.coverLogo" />
                            </div>
                            <el-button v-else size="small" :loading="uploadingProp === 'coverLogo'">
                              {{ uploadingProp === 'coverLogo' ? '上传中...' : '上传Logo' }}
                            </el-button>
                          </el-upload>
                        </el-form-item>
                      </el-col>
                      <el-col :span="16">
                        <el-form-item label="品牌名称">
                          <el-input v-model="currentScheme.template.brandName" />
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-form-item label="品牌口号 (Slogan)">
                      <el-input v-model="currentScheme.template.brandSlogan" size="small" />
                    </el-form-item>
                    <el-row :gutter="15">
                      <el-col :span="12">
                        <el-form-item label="网址">
                          <el-input v-model="currentScheme.template.website" size="small" />
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="电话">
                          <el-input v-model="currentScheme.template.phone" size="small" />
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <div class="form-group-title">内容页及辅助 (Content & Layout)</div>
                    <el-row :gutter="15">
                      <el-col :span="16">
                        <el-form-item label="内页分类标题">
                          <el-input v-model="currentScheme.template.contentTitle" />
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="内页LOGO">
                          <el-upload
                            action="#"
                            :auto-upload="false"
                            :show-file-list="false"
                            :on-change="(file) => handleStaticFileChange(file, 'contentLogo')"
                          >
                            <div class="mini-upload-box small" v-if="currentScheme.template.contentLogo">
                              <img :src="currentScheme.template.contentLogo" />
                            </div>
                            <el-button v-else size="small" :loading="uploadingProp === 'contentLogo'">
                              {{ uploadingProp === 'contentLogo' ? '上传中...' : '上传内页Logo' }}
                            </el-button>
                          </el-upload>
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-row :gutter="15" align="middle">
                      <el-col :span="10">
                        <el-form-item label="整篇主题色">
                          <div class="color-picker-group">
                            <el-color-picker v-model="currentScheme.template.themeColor" />
                            <span class="color-text">{{ currentScheme.template.themeColor }}</span>
                          </div>
                        </el-form-item>
                      </el-col>
                      <el-col :span="14">
                        <el-form-item label="商品排版模式">
                          <el-radio-group v-model="currentScheme.template.itemsPerPage" size="small">
                            <el-radio-button :label="1">简约</el-radio-button>
                            <el-radio-button :label="3">明细</el-radio-button>
                            <el-radio-button :label="2">交错</el-radio-button>
                          </el-radio-group>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form>
                  <div class="tpl-tip">* 此处的修改仅对本次方案生效，不会影响模板库中的原始模板。</div>
                </div>
              </div>
            </div>
          </div>

          <!-- Step 2: 商品管理 -->
          <div v-if="activeStep === 1" class="step-pane fade-in flex-col-container">
            <div class="prod-selector-area">
              <div class="area-header">
                <div class="header-left-group">
                  <h4 class="sub-title">2. 已添加的商品 ({{ currentScheme.products.length }})</h4>
                  <div class="selected-batch-actions">
                    <el-input v-model="selectedSearchKeyword" placeholder="在已选中快速定位..." clearable class="premium-search">
                      <template #prefix>
                        <el-icon><Search /></el-icon>
                      </template>
                    </el-input>
                    <el-button
                      type="danger"
                      plain
                      :disabled="!selectedRowsInSelectedList.length"
                      @click="handleSelectedBatchRemove"
                      class="batch-remove-btn"
                    >
                      批量移除 (已选 {{ selectedRowsInSelectedList.length }})
                    </el-button>
                  </div>
                </div>
                <el-button type="primary" @click="openProductBatchPicker">
                  <el-icon class="mr-5"><Plus /></el-icon>批量添加商品
                </el-button>
              </div>

              <div class="selected-prods-list" v-if="currentScheme.products.length > 0">
                <el-table
                  :data="paginatedSelectedProds"
                  height="calc(100vh - 420px)"
                  class="selected-table-stretch"
                  @selection-change="handleSelectedRowsChange"
                >
                  <el-table-column type="selection" width="55" />
                  <el-table-column prop="productNo" label="产品编号" width="120" />
                  <el-table-column label="商品图" width="90">
                    <template #default="scope">
                      <el-image :src="scope.row.productImage" class="picker-prod-thumb" fit="cover" />
                    </template>
                  </el-table-column>
                  <el-table-column prop="itemName" label="商品名称" min-width="180" show-overflow-tooltip />
                  <el-table-column prop="brandName" label="品牌" width="100" />
                  <el-table-column label="所属分类" width="150" show-overflow-tooltip>
                    <template #default="scope">
                      <el-tag size="small" type="info" plain>{{ scope.row.topCategoryName+'-'+scope.row.mediumCategoryName+'-'+ scope.row.bottomCategoryName}}</el-tag>
                    </template>
                  </el-table-column>
                  
                  <el-table-column prop="specificationsCode" label="型号/规格" width="120" show-overflow-tooltip />
                  <el-table-column label="价格对比" width="140">
                    <template #default="scope">
                      <div class="price-compare">
                        <div class="m-price">市场价: ¥{{ scope.row.marketPrice }}</div>
                        <div class="p-price">官网价: ¥{{ scope.row.memberPrice }}</div>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="80" align="center" fixed="right">
                    <template #default="scope">
                      <el-button link type="danger" @click="removeProductFromScheme(currentScheme.products.indexOf(scope.row))">移除</el-button>
                    </template>
                  </el-table-column>
                </el-table>

                <div class="selected-pagination-box">
                  <el-pagination
                    v-model:current-page="selectedProdPage"
                    v-model:page-size="selectedProdPageSize"
                    :total="selectedFilteredTotal"
                    :page-sizes="[5, 10, 20, 50]"
                    layout="total, sizes, prev, pager, next, jumper"
                    class="premium-pagination"
                  />
                </div>
              </div>
              <el-empty v-else description="尚未添加商品，请点击上方按钮选取" />
            </div>
          </div>

          <!-- Step 3: 预览与生成 -->
          <div v-if="activeStep === 2" class="step-pane fade-in">
            <div class="final-summary">
              <div class="summary-card">
                <div class="sum-icon">✅</div>
                <div class="sum-text">
                  <h3>准备就绪！</h3>
                  <p>
                    方案名称：<strong>{{ currentScheme.name }}</strong>
                  </p>
                  <p>
                    包含商品：<strong>{{ currentScheme.products.length }} 款</strong>
                  </p>
                  <p>
                    当前模板：<strong>{{ currentScheme.template.name }}</strong>
                  </p>
                </div>
              </div>
              <div class="preview-banner-hint">温馨提示：您可以点击下方“预览PPT效果”进行最后的排版确认，如果不满意可以返回上一步。</div>
              <div class="action-buttons-group">
                <el-button type="info" size="large" @click="previewInWizard">
                  <el-icon class="mr-5"><Monitor /></el-icon>预览PPT效果
                </el-button>
                <el-button type="success" size="large" @click="saveAndGenerate(true)">
                  <el-icon class="mr-5"><Document /></el-icon>生成并下载PPT方案
                </el-button>
                <el-button type="primary" size="large" @click="saveAndGenerate(false)">
                  <el-icon class="mr-5"><Flag /></el-icon>完成并仅存为方案
                </el-button>
              </div>
            </div>
          </div>
        </div>

        <div class="wizard-footer">
          <div class="footer-center">
            <el-button v-if="activeStep > 0" size="large" @click="activeStep--">上一步：返回</el-button>
            <el-button v-if="activeStep === 0" type="primary" size="large" @click="activeStep = 1" :disabled="!currentScheme.name"
              >下一步：选择商品</el-button
            >
            <el-button v-if="activeStep === 1" type="primary" size="large" @click="activeStep = 2" :disabled="!currentScheme.products.length"
              >下一步：预览生成</el-button
            >
            <el-button v-if="activeStep === 2" type="primary" plain size="large" @click="activeStep = 0">返回第一步重新配置</el-button>
          </div>
        </div>
      </div>
    </el-drawer>

    <!-- 子抽屉1：模板库选择器 -->
    <el-drawer v-model="tplPickerVisible" title="从模板库中选取" direction="rtl" size="45%" append-to-body>
      <div v-loading="tplLoading" class="tpl-grid">
        <el-empty v-if="!tplLoading && allTemplates.length === 0" description="暂无可用模板" />
        <div
          v-for="tpl in allTemplates"
          :key="tpl.id"
          class="tpl-grid-item"
          :class="{ active: currentScheme.template.id === tpl.id }"
          @click="selectTemplate(tpl)"
        >
          <el-image :src="tpl.cover" fit="cover" class="grid-img" />
          <div class="grid-name">{{ tpl.name }}</div>
          <div class="grid-layout">{{ getLayoutName(tpl.itemsPerPage) }}</div>
        </div>
      </div>
    </el-drawer>

    <!-- 【重构】高级商品库批量选取对话框 -->
    <el-dialog
      v-model="prodPickerVisible"
      title="从商品库批量加入 (支持高阶多重筛选)"
      width="1100px"
      class="premium-picker-dialog"
      append-to-body
      align-center
    >
      <div class="prod-picker-box fixed-height">
        <!-- 头部搜索/筛选栏 -->
        <div class="picker-filter-bar">
          <el-input
            v-model="searchProd"
            placeholder="搜索商品名称"
            clearable
            class="filter-item search-input"
            @keyup.enter="handlePickerSearch"
          />
          <el-input
            v-model="searchProductNo"
            placeholder="搜索商品编号"
            clearable
            class="filter-item search-input"
            @keyup.enter="handlePickerSearch"
          >
            <template #append>
              <el-button @click="handlePickerSearch">
                <el-icon><Search /></el-icon>
              </el-button>
            </template>
          </el-input>
        </div>

        <!-- 数据表格 -->
        <el-table
          ref="pickerTableRef"
          :data="pickerProducts"
          v-loading="prodLoading"
          @selection-change="handleProdSelection"
          height="380px"
          row-key="id"
          class="picker-table"
        >
          <el-table-column type="selection" width="55" :reserve-selection="true" />
          <el-table-column label="商品图" width="90">
            <template #default="scope">
              <el-image :src="scope.row.productImage" fit="cover" class="picker-prod-thumb" />
            </template>
          </el-table-column>
          <el-table-column prop="productNo" label="产品编号" width="120" />
          <el-table-column prop="itemName" label="商品名称" min-width="180" show-overflow-tooltip />
          <el-table-column prop="brandName" label="品牌" width="100" />
          <el-table-column label="所属分类" width="150" show-overflow-tooltip>
            <template #default="scope">
              <el-tag size="small" type="info" plain>{{ scope.row.topCategoryName+'-'+scope.row.mediumCategoryName+'-'+ scope.row.bottomCategoryName}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="specificationsCode" label="型号/规格" width="120" show-overflow-tooltip />
          <el-table-column label="价格对比" width="140">
            <template #default="scope">
              <div class="price-compare">
                <div class="m-price">市场价: ¥{{ scope.row.marketPrice }}</div>
                <div class="p-price">官网价: ¥{{ scope.row.memberPrice }}</div>
              </div>
            </template>
          </el-table-column>
        </el-table>

      </div>

      <template #footer>
        <!-- 游标分页 -->
        <pagination
          v-show="pickerProducts.length > 0"
          v-model:page="pickerPage"
          v-model:limit="pickerPageSize"
          v-model:way="pickerWay"
          :cursor-mode="true"
          :has-more="pickerHasMore"
          :auto-scroll="false"
          @pagination="fetchPickerProducts"
        />
        <div class="picker-footer-actions">
          <el-button @click="prodPickerVisible = false" size="default">取 消</el-button>
          <el-button type="primary" size="default" @click="confirmProducts"> 确认加入方案 (已选 {{ tempSelectedProds.length }} 项) </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 分享抽屉 (右侧弹出) -->
    <el-drawer v-model="shareDrawerVisible" title="分享PPT方案给同事" direction="rtl" size="600px" custom-class="share-panel-drawer">
      <div class="share-drawer-body">
        <div class="share-search-section">
          <el-input
            v-model="shareSearchText"
            placeholder="搜索同事姓名"
            :prefix-icon="Search"
            clearable
            class="premium-search-input"
          />
        </div>

        <div class="share-main-content">
          <div class="selection-container">
            <h4 class="section-title">选择人员 ({{ selectedEmployees.length }})</h4>

            <div class="employee-list-scroll">
              <div
                v-for="emp in filteredEmployees"
                :key="emp.id"
                class="emp-item"
                :class="{ 'is-selected': selectedEmployees.some((s) => s.id === emp.id) }"
                @click="toggleEmployeeSelection(emp)"
              >
                <el-avatar :size="32" class="emp-avatar">
                  <el-icon><UserFilled /></el-icon>
                </el-avatar>
                <div class="emp-info">
                  <div class="e-name">{{ emp.name }}</div>
                  <div class="e-dept">{{ emp.dept }}</div>
                </div>
                <el-icon class="check-icon" v-if="selectedEmployees.some((s) => s.id === emp.id)"><Check /></el-icon>
              </div>
            </div>
          </div>

          <div class="selected-summary" v-if="selectedEmployees.length > 0">
            <div class="summary-header">已选择:</div>
            <div class="summary-tags">
              <el-tag v-for="emp in selectedEmployees" :key="emp.id" closable @close="removeEmployee(emp)" class="m-2">
                {{ emp.name }}
              </el-tag>
            </div>
          </div>
        </div>
      </div>

      <template #footer>
        <div class="share-footer">
          <el-button @click="shareDrawerVisible = false">取消</el-button>
          <el-button type="primary" :disabled="selectedEmployees.length === 0" @click="confirmShare">
            确认分享 ({{ selectedEmployees.length }}人)
          </el-button>
        </div>
      </template>
    </el-drawer>

    <!-- 超仿真全幻灯片式滑动实时预览控制屏 -->
    <el-dialog v-model="previewVisible" title="PPT演示板实时缩略渲染屏" width="900px" top="3vh" append-to-body class="premium-preview-dialog">
      <div
        v-if="previewData && previewData.template"
        class="preview-scroll-wrapper"
        :style="{ '--theme-color': previewData.template.themeColor || '#C00000' }"
      >
        <!-- 封面页 -->
        <div class="preview-slide cover-slide">
          <div class="cover-top-img-area">
            <img v-if="previewData.template.cover" :src="previewData.template.cover" class="preview-full-bg" />
            <div class="preview-bg-mask"></div>
            <div class="cover-text-group">
              <h2 class="c-main-title">{{ previewData.template.title || 'VIP客户生日礼方案' }}</h2>
              <p class="c-sub-title">{{ previewData.template.subTitle || '诞生珍礼，非你莫属' }}</p>
              <p class="c-validity">{{ previewData.template.validity || '方案有效期：2026年12月31日' }}</p>
            </div>
          </div>
          <div class="cover-bottom-white-bar">
            <div class="bar-left">
              <img v-if="previewData.template.coverLogo" :src="previewData.template.coverLogo" class="bar-logo" />
              <div class="bar-v-line" v-if="previewData.template.coverLogo"></div>
              <div class="bar-brand-info">
                <div class="b-name">{{ previewData.template.brandName || '优易365' }}</div>
                <div class="b-slogan">{{ previewData.template.brandSlogan || '领先的企业级数字化采购及服务品牌' }}</div>
              </div>
            </div>
            <div class="bar-right">
              <div class="b-contact">{{ previewData.template.website || 'www.yoe.com' }}</div>
              <div class="b-contact">{{ previewData.template.phone || '400-111-0027' }}</div>
            </div>
          </div>
        </div>

        <!-- 内容页：根据 itemsPerPage 动态排版 -->
        <div class="preview-slide content-slide" v-for="(pageProds, pageIndex) in chunkedPreviewProducts" :key="'page_' + pageIndex">
          <div v-if="previewData.template.itemsPerPage === 3" class="detail-top-bar">
            <div class="d-left-title"><span class="red-stick"></span>{{ previewData.template.contentTitle || '精品展示专场' }}</div>
            <img v-if="previewData.template.contentLogo" :src="previewData.template.contentLogo" class="d-right-logo" />
          </div>
          <div class="top-bar" v-else>
            <img v-if="previewData.template.contentLogo" :src="previewData.template.contentLogo" style="height: 20px; margin-right: 10px" />
            <span>{{ previewData.template.contentTitle || '商品展示方案' }}</span>
          </div>

          <!-- 布局 1 (1P1) -->
          <div v-if="previewData.template.itemsPerPage === 1" class="layout-1p1">
            <div class="img-box"><img :src="pageProds[0].productImage" /></div>
            <div class="info-box">
              <h3 class="prod-name">{{ pageProds[0].itemName }}</h3>
              <p>产品编号：{{ pageProds[0].productNo || pageProds[0].barCoding }}</p>
              <p>规格型号：{{ pageProds[0].specificationsCode }}</p>
              <div class="price-tag">供应价: ¥{{ pageProds[0].marketPrice }}</div>
            </div>
          </div>

          <!-- 布局 2 (1P2) -->
          <div v-if="previewData.template.itemsPerPage === 2" class="layout-1p2">
            <div class="half upper">
              <div class="img-box"><img :src="pageProds[0].productImage" /></div>
              <div class="info-box txt-left">
                <h3 class="prod-name">{{ pageProds[0].itemName }}</h3>
                <p>编号: {{ pageProds[0].productNo || pageProds[0].barCoding }} | 规格: {{ pageProds[0].specificationsCode }}</p>
                <span class="price-text">¥ {{ pageProds[0].marketPrice }}</span>
              </div>
            </div>
            <div class="divider"></div>
            <div class="half lower" v-if="pageProds.length > 1">
              <div class="info-box txt-right">
                <h3 class="prod-name">{{ pageProds[1].itemName }}</h3>
                <p>编号: {{ pageProds[1].productNo || pageProds[1].barCoding }} | 规格: {{ pageProds[1].specificationsCode }}</p>
                <span class="price-text">¥ {{ pageProds[1].marketPrice }}</span>
              </div>
              <div class="img-box"><img :src="pageProds[1].productImage" /></div>
            </div>
          </div>

          <!-- 布局 3 (1P1-详细版) -->
          <div v-if="previewData.template.itemsPerPage === 3" class="layout-1p1-detail">
            <div class="d-img-box"><img :src="pageProds[0].productImage" /></div>
            <div class="d-info-box">
              <h3 class="d-prod-name">{{ pageProds[0].itemName }}</h3>
              <div class="d-red-line"></div>
              <div class="d-base-props">
                <p>规格型号：{{ pageProds[0].specificationsCode }}</p>
                <p>
                  <strong>产品编号：{{ pageProds[0].productNo || pageProds[0].barCoding }}</strong>
                </p>
                <p>
                  <strong>品牌名称：{{ pageProds[0].brandName || '未知' }}</strong>
                </p>
                <p>
                  <strong>最低起订量：{{ pageProds[0].minOrderQuantity || '1' }}</strong>
                </p>
                <p class="mt-2">
                  <strong
                    >市场价：<span class="strikethrough">{{ pageProds[0].marketPrice || pageProds[0].marketPrice }} 元</span></strong
                  >
                </p>
                <p class="strong-red">
                  <strong>供应价：{{ pageProds[0].marketPrice }}元</strong>
                </p>
              </div>
              <div class="d-grid-props">
                <div class="d-grid-col">
                  <h4>产品属性</h4>
                  <ul class="d-list">
                    <li v-for="att in (parseAttributesList(pageProds[0].attributesList).length ? parseAttributesList(pageProds[0].attributesList) : ['正品授权', '闪电发货', '优享服务'])" :key="att">{{ att }}</li>
                  </ul>
                </div>
                <div class="d-grid-col">
                  <h4>产品简介</h4>
                  <ul class="d-list">
                    <li v-for="feat in pageProds[0].mainLibraryIntro || ['高端大气', '送礼首选', '品质保障']" :key="feat">{{ feat }}</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>

          <div class="bottom-deco"></div>
          <div class="corner-deco"></div>
        </div>

        <!-- 结尾页 (极简设计) -->
        <div class="preview-slide end-slide">
          <div class="end-content-right">
            <h1 class="thanks-title" :style="{ color: previewData.template.themeColor || '#C00000' }">THANKS</h1>
            <div class="end-brand-line">
              <span class="end-b-name">{{ previewData.template.brandName || '优易365' }}</span>
              <span class="end-divider">-</span>
              <span class="end-b-slogan" :style="{ color: previewData.template.themeColor || '#C00000' }">{{
                previewData.template.brandSlogan || '领先的企业级数字化采购及服务品牌'
              }}</span>
            </div>
            <div class="end-website" :style="{ color: previewData.template.themeColor || '#C00000' }">
              {{ previewData.template.website || 'www.yoe365.com' }}
            </div>
          </div>
        </div>
      </div>

      <div style="text-align: center; margin-top: 15px">
        <el-button
          type="success"
          size="large"
          @click="handleDownload(previewData)"
          style="width: 240px; font-weight: bold; box-shadow: 0 4px 12px rgba(103, 194, 58, 0.3)"
        >
          立即下载导出PPT文件
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, nextTick, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Plus, Edit, Monitor, Flag, Picture, Collection, Operation, Search, Document, Share, UserFilled, Check } from '@element-plus/icons-vue';
import { generatePPT } from '@/utils/pptPlugin';
import { listPptScheme, addPptScheme, updatePptScheme, delPptScheme, sharePptScheme } from '@/api/product/pptScheme';
import { listPptTemplate } from '@/api/product/pptTemplate';
import { listBase } from '@/api/product/base';
import { listUser } from '@/api/system/user';
import { useUserStore } from '@/store/modules/user';
import request, { globalHeaders, download } from '@/utils/request';

// ==================== 数据转换工具函数 ====================

/**
 * 后端 PptSchemeVO（扁平 tpl* 字段）→ 前端 scheme 格式（嵌套 template 对象）
 * @param {object} vo - 后端返回的VO
 * @param {{ name: string, userId: string|number }} currentUser - 当前登录用户信息
 */
const voToScheme = (vo, currentUser = {}) => {
  const { userId: currentUserId = '' } = currentUser;
  // 分享给我的：ownerId 等于当前用户 且 isShared 为 '1'
  const isSharedToMe = vo.isShared === '1' && String(vo.ownerId) === String(currentUserId);
  // 我创建的：createBy 等于当前用户 userId
  const isMine = String(vo.createBy) === String(currentUserId);

  return {
    id: vo.id,
    name: vo.name,
    template: {
      id: vo.templateId,
      name: vo.tplName,
      cover: vo.tplCover,
      coverLogo: vo.tplCoverLogo,
      contentLogo: vo.tplContentLogo,
      themeColor: vo.tplThemeColor,
      itemsPerPage: vo.tplItemsPerPage,
      title: vo.tplCoverTitle,
      subTitle: vo.tplCoverSubTitle,
      validity: vo.tplValidity,
      brandName: vo.tplBrandName,
      brandSlogan: vo.tplBrandSlogan,
      website: vo.tplWebsite,
      phone: vo.tplPhone,
      contentTitle: vo.tplContentTitle
    },
    products: (() => {
      try {
        return vo.productData ? JSON.parse(vo.productData) : [];
      } catch {
        return [];
      }
    })(),
    productNum: vo.productNum ?? 0,
    createTime: vo.createTime,
    creator: vo.createBy,
    sharer: vo.sharerName || null,
    shareTime: vo.shareTime || null,
    type: isSharedToMe ? 'sharedToMe' : isMine ? 'mine' : 'others'
  };
};

/**
 * 前端 scheme 格式 → 后端 PptSchemeForm（扁平 tpl* 字段）
 */
const schemeToForm = (scheme) => ({
  id: scheme.id,
  name: scheme.name,
  templateId: scheme.template?.id,
  tplName: scheme.template?.name,
  tplCover: scheme.template?.cover,
  tplCoverLogo: scheme.template?.coverLogo,
  tplContentLogo: scheme.template?.contentLogo,
  tplThemeColor: scheme.template?.themeColor,
  tplItemsPerPage: scheme.template?.itemsPerPage,
  tplCoverTitle: scheme.template?.title,
  tplCoverSubTitle: scheme.template?.subTitle,
  tplValidity: scheme.template?.validity,
  tplBrandName: scheme.template?.brandName,
  tplBrandSlogan: scheme.template?.brandSlogan,
  tplWebsite: scheme.template?.website,
  tplPhone: scheme.template?.phone,
  tplContentTitle: scheme.template?.contentTitle,
  productIds: (scheme.products ?? []).map((p) => p.id),
  productNum: (scheme.products ?? []).length
});

/**
 * 模板库 PptTemplateVO → 前端 template 格式
 * （模板VO用 coverTitle/coverSubTitle，前端统一用 title/subTitle）
 */
const tplVoToTemplate = (tpl) => ({
  id: tpl.id,
  name: tpl.name,
  cover: tpl.cover,
  themeColor: tpl.themeColor,
  itemsPerPage: tpl.itemsPerPage,
  title: tpl.coverTitle,
  subTitle: tpl.coverSubTitle,
  brandName: tpl.brandName,
  brandSlogan: tpl.brandSlogan,
  website: tpl.website,
  phone: tpl.phone,
  coverLogo: tpl.coverLogo,
  contentLogo: tpl.contentLogo,
  contentTitle: tpl.contentTitle,
  validity: ''
});

// 当前登录用户
const userStore = useUserStore();

// 分享功能相关状态
const allUsers = ref([]);
const usersLoading = ref(false);

const shareDrawerVisible = ref(false);
const sharingScheme = ref(null);
const shareSearchText = ref('');
const selectedEmployees = ref([]);

// 搜索过滤后的用户
const filteredEmployees = computed(() => {
  if (!shareSearchText.value) return allUsers.value;
  const key = shareSearchText.value.toLowerCase();
  return allUsers.value.filter((emp) => emp.name.includes(key) || emp.dept.includes(key));
});

// 数据列表
const schemeList = ref([]);
const allTemplates = ref([]);
const loading = ref(false);
const selectedRows = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);

// 状态控制
const schemeDrawerVisible = ref(false);
const activeStep = ref(0);
const isEdit = ref(false);
const tplPickerVisible = ref(false);
const tplLoading = ref(false);
const prodPickerVisible = ref(false);
const previewVisible = ref(false);
const previewData = ref(null);

// 当前正在新增/编辑的方案对象
const currentScheme = ref({
  id: '',
  name: '',
  template: {},
  products: [],
  createTime: ''
});

// 分页列表
// 方案主列表过滤逻辑（Tab 过滤已交给后端，此处仅做前端名称搜索）
const filteredSchemes = computed(() => {
  let list = schemeList.value;

  // 方案名称搜索过滤
  if (topSearchText.value) {
    const key = topSearchText.value.toLowerCase();
    list = list.filter((s) => s.name.toLowerCase().includes(key));
  }

  return list;
});

const paginatedSchemes = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = currentPage.value * pageSize.value;
  return filteredSchemes.value.slice(start, end);
});

// 已选商品分页逻辑
const selectedProdPage = ref(1);
const selectedProdPageSize = ref(10);
const selectedSearchKeyword = ref('');
const selectedRowsInSelectedList = ref([]);

const displayedSelectedList = computed(() => {
  let list = currentScheme.value.products;
  if (selectedSearchKeyword.value) {
    const key = selectedSearchKeyword.value.toLowerCase();
    list = list.filter((p) => p.itemName.toLowerCase().includes(key) || (p.productNo && p.productNo.toLowerCase().includes(key)));
  }
  return list;
});

const selectedFilteredTotal = computed(() => displayedSelectedList.value.length);

const paginatedSelectedProds = computed(() => {
  const start = (selectedProdPage.value - 1) * selectedProdPageSize.value;
  const end = selectedProdPage.value * selectedProdPageSize.value;
  return displayedSelectedList.value.slice(start, end);
});

// 解析 attributesList JSON 字符串，格式：{"1":["3kg","4kg"]}，输出 ["1：3kg、4kg"]
const parseAttributesList = (str) => {
  if (!str) return [];
  try {
    const obj = typeof str === 'string' ? JSON.parse(str) : str;
    if (typeof obj !== 'object' || Array.isArray(obj)) return [];
    return Object.entries(obj).map(([key, vals]) => `${key}：${Array.isArray(vals) ? vals.join('、') : vals}`);
  } catch {
    return [];
  }
};

const chunkedPreviewProducts = computed(() => {
  if (!previewData.value || !previewData.value.products) return [];
  const result = [];
  const chunk = previewData.value.template.itemsPerPage === 3 ? 1 : previewData.value.template.itemsPerPage || 1;
  for (let i = 0; i < previewData.value.products.length; i += chunk) {
    result.push(previewData.value.products.slice(i, i + chunk));
  }
  return result;
});

const handleSelectedRowsChange = (val) => {
  selectedRowsInSelectedList.value = val;
};

const handleSelectedBatchRemove = () => {
  const idsToRemove = selectedRowsInSelectedList.value.map((r) => r.id);
  currentScheme.value.products = currentScheme.value.products.filter((p) => !idsToRemove.includes(p.id));
  ElMessage.success(`成功移除 ${idsToRemove.length} 个商品`);
  selectedRowsInSelectedList.value = [];
};

// 商品库选择器相关状态
const searchProd = ref('');
const searchProductNo = ref('');
const tempSelectedProds = ref([]);
const prodLoading = ref(false);
const pickerPage = ref(1);
const pickerPageSize = ref(10);
const pickerTotal = ref(0);
const pickerProducts = ref([]);
const pickerHasMore = ref(true);  // 是否还有更多数据（游标分页）
const pickerWay = ref(undefined); // 翻页方向：0=上一页，1=下一页
const pickerPageHistory = ref([]); // 每页首尾 id 历史，支持双向翻页

const pickerTableRef = ref(null);

// 服务端游标分页加载商品
const fetchPickerProducts = async () => {
  prodLoading.value = true;
  try {
    const currentPageNum = pickerPage.value;
    const params = {
      pageNum: currentPageNum,
      pageSize: pickerPageSize.value,
      itemName: searchProd.value || undefined,
      productNo: searchProductNo.value || undefined
    };

    // 第一页不需要游标参数
    if (currentPageNum === 1) {
      delete params.lastSeenId;
      delete params.way;
    } else {
      if (pickerWay.value === 0) {
        // 上一页：使用目标页的 firstId
        const targetPageHistory = pickerPageHistory.value[currentPageNum];
        if (targetPageHistory) {
          params.firstSeenId = targetPageHistory.firstId;
          params.way = 0;
        }
      } else {
        // 下一页：使用前一页的 lastId
        const prevPageHistory = pickerPageHistory.value[currentPageNum - 1];
        if (prevPageHistory) {
          params.lastSeenId = prevPageHistory.lastId;
          params.way = 1;
        }
      }
    }

    const res = await listBase(params);
    pickerProducts.value = (res.rows || []).map((p) => ({
      ...p,
      marketPrice: p.marketPrice,
      categoryName: p.categoryName || '未分类'
    }));
    pickerTotal.value = res.total || 0;

    // 判断是否还有更多数据
    pickerHasMore.value = pickerProducts.value.length === pickerPageSize.value;

    // 记录当前页的首尾 id
    if (pickerProducts.value.length > 0) {
      const firstItem = pickerProducts.value[0];
      const lastItem = pickerProducts.value[pickerProducts.value.length - 1];
      if (pickerPageHistory.value.length <= currentPageNum) {
        pickerPageHistory.value[currentPageNum] = {
          firstId: firstItem.id,
          lastId: lastItem.id
        };
      }
    }
  } catch (e) {
    ElMessage.error('商品列表加载失败');
  } finally {
    prodLoading.value = false;
  }
  nextTick(() => {
    syncTableSelection();
  });
};

const openProductBatchPicker = () => {
  // 1. 初始化临时选中列表
  tempSelectedProds.value = [...currentScheme.value.products];
  // 2. 重置分页、游标历史与搜索
  pickerPage.value = 1;
  pickerWay.value = undefined;
  pickerPageHistory.value = [];
  searchProd.value = '';
  searchProductNo.value = '';
  prodPickerVisible.value = true;
  // 3. 加载第一页数据
  fetchPickerProducts();
};

const handleProdSelection = (val) => {
  tempSelectedProds.value = val;
};

// 提取同步逻辑，供打开弹窗和翻页时调用
const syncTableSelection = () => {
  if (!pickerTableRef.value) return;

  const selectedIds = tempSelectedProds.value.map((p) => p.id);

  // 遍历当前页显示的商品，如果在已选中列表中，则勾选
  pickerProducts.value.forEach((row) => {
    const isSelected = selectedIds.includes(row.id);
    pickerTableRef.value.toggleRowSelection(row, isSelected);
  });
};

const confirmProducts = () => {
  // 直接覆盖方案商品列表，这样在弹窗中取消勾选也能生效
  currentScheme.value.products = [...tempSelectedProds.value];
  prodPickerVisible.value = false;
  ElMessage.success(`商品清单已更新，当前共 ${currentScheme.value.products.length} 项`);
};

const handlePickerSearch = () => {
  pickerPage.value = 1;
  pickerWay.value = undefined;
  pickerPageHistory.value = [];
  fetchPickerProducts();
};

// 数据加载与持久化
// 数据加载与持久化
const topSearchText = ref('');
const activeTab = ref('all');

// 数据加载：根据当前 Tab 传入对应查询参数，由后端过滤
const loadAllData = async () => {
  loading.value = true;
  try {
    // 根据 Tab 构建查询参数
    const query = {};
    if (activeTab.value === 'mine') {
      // 我创建的：createBy = 当前用户 ID
      query.createBy = userStore.userId;
    } else if (activeTab.value === 'sharedToMe') {
      // 分享给我的：ownerId = 当前用户 ID 且 isShared = '1'
      query.sharerId = userStore.userId;
      query.isShared = '1';
    }
    const schemeRes = await listPptScheme(query);
    const currentUser = { userId: userStore.userId };
    schemeList.value = (schemeRes.rows || []).map((vo) => voToScheme(vo, currentUser));
  } catch (e) {
    ElMessage.error('数据加载失败');
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  loadAllData();
});

// 切换 Tab 时重新请求，并重置到第一页
watch(activeTab, () => {
  currentPage.value = 1;
  loadAllData();
});

// 列表常规操作
const handleSelectionChange = (val) => {
  selectedRows.value = val;
};

const getLayoutName = (val) => {
  if (val === 3) return '单品详细明细 (1P3)';
  if (val === 2) return '交错展示 (1P2)';
  return '基础展示 (1P1)';
};

const getLayoutTagType = (val) => {
  if (val === 3) return 'danger';
  if (val === 2) return 'warning';
  return '';
};

const handleDelete = (id) => {
  ElMessageBox.confirm('确定删除该方案吗？', '提示')
    .then(() => {
      delPptScheme(id).then(() => {
        ElMessage.success('已删除');
        loadAllData();
      });
    })
    .catch(() => {});
};

const handleBatchDelete = () => {
  ElMessageBox.confirm(`确定批量删除选中的 ${selectedRows.value.length} 个方案吗？`, '警告').then(() => {
    const ids = selectedRows.value.map((r) => r.id);
    delPptScheme(ids).then(() => {
      ElMessage.success('批量删除成功');
      loadAllData();
    });
  });
};

const handleDownload = async (scheme) => {
  try {
    ElMessage.info('PPT渲染及转换中，请稍候...');
    await generatePPT(scheme.template, scheme.products);
    ElMessage.success('PPT下载成功');
  } catch (err) {
    ElMessage.error('渲染PPT失败：' + err.message);
  }
};

const handleBatchDownload = async () => {
  ElMessage.warning('批量导出 PPT 可能会有较大浏览器资源占用，请耐心等待文件弹出。');
  for (const r of selectedRows.value) {
    await handleDownload(r);
  }
};

const handleExportProducts = (scheme) => {
  download('/product/pptTemplate/exportSchemeProducts', { schemeId: scheme.id }, `${scheme.name || 'PPT方案'}_商品导出.xlsx`);
};

const handlePreview = (row) => {
  previewData.value = row;
  previewVisible.value = true;
};

// 分享功能逻辑
const openShareDrawer = async (row) => {
  sharingScheme.value = row;
  selectedEmployees.value = [];
  shareSearchText.value = '';
  shareDrawerVisible.value = true;
  // 首次打开时加载用户列表（之后复用缓存）
  if (!allUsers.value.length) {
    usersLoading.value = true;
    try {
      const res = await listUser({ pageNum: 1, pageSize: 500, userSonType: 0 });
      allUsers.value = (res.rows || []).map((u) => ({
        id: u.userId,
        name: u.nickName,
        dept: u.deptName || '',
        email: u.email || ''
      }));
    } catch (e) {
      // 错误由请求拦截器统一处理
    } finally {
      usersLoading.value = false;
    }
  }
};

const toggleEmployeeSelection = (emp) => {
  const idx = selectedEmployees.value.findIndex((s) => s.id === emp.id);
  if (idx > -1) {
    selectedEmployees.value.splice(idx, 1);
  } else {
    selectedEmployees.value.push(emp);
  }
};

const removeEmployee = (emp) => {
  selectedEmployees.value = selectedEmployees.value.filter((s) => s.id !== emp.id);
};

const confirmShare = async () => {
  if (!sharingScheme.value) return;
  const userIds = selectedEmployees.value.map((e) => e.id);
  const names = selectedEmployees.value.map((e) => e.name).join('、');
  try {
    await sharePptScheme(sharingScheme.value.id, userIds);
    shareDrawerVisible.value = false;
    ElMessage({ type: 'success', message: `分享成功！方案已同步至：${names}`, duration: 5000 });
    await loadAllData();
  } catch (e) {
    // 错误由请求拦截器统一处理
  }
};

// Wizard 新增/编辑流程逻辑
const openAddScheme = async () => {
  isEdit.value = false;
  activeStep.value = 0;

  // 生成今天的截止日期字符串（与 value-format 保持一致）
  const today = new Date();
  const yyyy = today.getFullYear();
  const mm = String(today.getMonth() + 1).padStart(2, '0');
  const dd = String(today.getDate()).padStart(2, '0');
  const todayValidity = `方案有效期：${yyyy}年${mm}月${dd}日`;

  // 按需加载模板列表，取第一个作为默认模板
  let defaultTemplate = { id: 99, name: '默认通用模板', cover: '', themeColor: '#C00000', itemsPerPage: 1, validity: todayValidity };
  try {
    const res = await listPptTemplate();
    const tplList = (res.rows || []).map(tplVoToTemplate);
    if (tplList.length) {
      allTemplates.value = tplList;
      defaultTemplate = { ...tplList[0], validity: todayValidity };
    } else if (!allTemplates.value.length) {
      allTemplates.value = [defaultTemplate];
    }
  } catch (e) {
    if (!allTemplates.value.length) {
      allTemplates.value = [defaultTemplate];
    }
  }

  currentScheme.value = {
    id: Date.now(),
    name: '新建PPT方案_' + new Date().toLocaleDateString(),
    template: { ...defaultTemplate },
    products: [],
    createTime: new Date().toLocaleString(),
    creator: '管理员'
  };
  schemeDrawerVisible.value = true;
};

const handleEditScheme = (row) => {
  isEdit.value = true;
  activeStep.value = 0;
  currentScheme.value = JSON.parse(JSON.stringify(row));
  schemeDrawerVisible.value = true;
};

const handleEditAtStep = (row, step = 0) => {
  isEdit.value = true;
  activeStep.value = step;
  currentScheme.value = JSON.parse(JSON.stringify(row));
  schemeDrawerVisible.value = true;
};

const openTplSelector = async () => {
  tplPickerVisible.value = true;
  tplLoading.value = true;
  try {
    const res = await listPptTemplate();
    const tplList = (res.rows || []).map(tplVoToTemplate);
    allTemplates.value = tplList.length ? tplList : [{ id: 99, name: '默认通用模板', cover: '', themeColor: '#C00000', itemsPerPage: 1 }];
  } catch (e) {
    ElMessage.error('模板列表加载失败');
  } finally {
    tplLoading.value = false;
  }
};

const selectTemplate = (tpl) => {
  currentScheme.value.template = { ...tpl };
  tplPickerVisible.value = false;
};

const uploadingProp = ref(''); // 正在上传的字段名，用于显示加载状态

const handleStaticFileChange = async (file, prop) => {
  if (!file || !file.raw) return;
  uploadingProp.value = prop;
  try {
    const formData = new FormData();
    formData.append('file', file.raw);
    const res = await request({
      url: '/resource/oss/upload',
      method: 'post',
      headers: { 'Content-Type': 'multipart/form-data' },
      data: formData
    });
    if (res.data && res.data.url) {
      currentScheme.value.template[prop] = res.data.url;
    } else {
      ElMessage.error('图片上传失败');
    }
  } catch (e) {
    ElMessage.error('图片上传失败，请重试');
  } finally {
    uploadingProp.value = '';
  }
};

const removeProductFromScheme = (idx) => {
  currentScheme.value.products.splice(idx, 1);
};

const previewInWizard = () => {
  previewData.value = currentScheme.value;
  previewVisible.value = true;
};

const saveAndGenerate = async (download = false) => {
  const formData = schemeToForm(currentScheme.value);
  try {
    if (isEdit.value) {
      await updatePptScheme(formData);
    } else {
      await addPptScheme(formData);
    }
    schemeDrawerVisible.value = false;
    await loadAllData();
    if (download) {
      await handleDownload(currentScheme.value);
    } else {
      ElMessage.success('方案已保存至列表');
    }
  } catch (e) {
    ElMessage.error('保存失败，请重试');
  }
};
</script>

<style scoped>
.ml-10 {
  margin-left: 10px;
}
.mr-5 {
  margin-right: 5px;
}
.mb-10 {
  margin-bottom: 10px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 40px;
  flex: 1;
}
.header-filters {
  display: flex;
  align-items: center;
  gap: 35px;
  flex: 1;
}
.premium-status-tabs {
  margin-bottom: -2px;
}
.premium-status-tabs :deep(.el-tabs__header) {
  margin-bottom: 0;
  border-bottom: none;
}
.premium-status-tabs :deep(.el-tabs__nav-wrap::after) {
  height: 0;
}
.premium-status-tabs :deep(.el-tabs__item) {
  font-size: 16px;
  font-weight: 500;
  color: #606266;
  padding: 0 25px;
  height: 50px;
  line-height: 50px;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.premium-status-tabs :deep(.el-tabs__item.is-active) {
  color: #409eff;
  font-weight: bold;
  font-size: 17px;
}
.premium-status-tabs :deep(.el-tabs__active-bar) {
  height: 3px;
  border-radius: 3px;
  background-color: #409eff;
}
.top-search-input {
  width: 350px;
}
.top-search-input :deep(.el-input__wrapper) {
  border-radius: 12px;
  background: #f5f7fa;
  box-shadow: none !important;
  border: 1px solid #e4e7ed;
  height: 40px;
  transition: all 0.3s;
}
.top-search-input :deep(.el-input__wrapper.is-focus) {
  background: #fff;
  border-color: #409eff;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.header-left .title-text {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.scheme-name-box .s-name {
  font-weight: 600;
  color: #409eff;
  font-size: 15px;
}
.scheme-name-box .s-time {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

.table-thumb {
  width: 80px;
  height: 50px;
  border-radius: 4px;
  border: 1px solid #eee;
}
.tpl-info .tpl-name {
  font-size: 13px;
  color: #666;
  margin-bottom: 4px;
}

.pagination-box {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

/* Wizard Styles */
.wizard-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.step-bar {
  padding: 10px 0;
  border-bottom: 1px solid #f0f2f5;
}
.step-content {
  flex: 1;
  padding: 15px 20px;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
}
.flex-col-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.prod-selector-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.selected-prods-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.wizard-footer {
  height: 70px;
  padding: 0 20px;
  border-top: 1px solid #f0f2f5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.footer-center {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
}

.selected-table-stretch {
  border: 1px solid #ebeef5;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
.selected-pagination-box {
  margin-top: 20px;
  padding: 15px;
  background: #fcfcfc;
  border-radius: 8px;
  border: 1px solid #f0f0f0;
  display: flex;
  justify-content: flex-end;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}
.dialog-pagination-fix {
  margin-top: 15px;
}

/* Premium Search Style */
.premium-search {
  width: 260px;
}
.premium-search :deep(.el-input__wrapper) {
  border-radius: 20px;
  background-color: #f5f7fa;
  border: 1px solid #e4e7ed;
  box-shadow: none !important;
  padding-left: 15px;
  transition: all 0.3s;
}
.premium-search :deep(.el-input__wrapper.is-focus) {
  background-color: #fff;
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1) !important;
}
.batch-remove-btn {
  border-radius: 20px;
  padding: 0 20px;
}

/* Premium Pagination Styles */
.premium-pagination :deep(.el-pagination__total) {
  font-weight: 600;
  color: #606266;
}
.premium-pagination :deep(.el-pager li) {
  border-radius: 4px;
  margin: 0 3px;
  border: 1px solid #dcdfe6;
  transition: all 0.3s;
}
.premium-pagination :deep(.el-pager li.is-active) {
  background-color: #409eff;
  color: #fff;
  border-color: #409eff;
  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
}
.premium-pagination :deep(.btn-prev),
.premium-pagination :deep(.btn-next) {
  border-radius: 4px;
  border: 1px solid #dcdfe6;
}

.header-left-group {
  display: flex;
  align-items: center;
  gap: 30px;
}
.selected-batch-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mini-search-in-selected {
  width: 220px;
}

/* 滚动条美化 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #999;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.sub-title {
  font-size: 15px;
  font-weight: 600;
  color: #555;
  margin: 0;
}
.area-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  margin-top: 10px;
}

.tpl-snap-img {
  width: 140px;
  height: 80px;
  border-radius: 6px;
  border: 1px solid #ddd;
}
.tpl-config-layout {
  display: flex;
  gap: 30px;
  margin-top: 10px;
}
.tpl-preview-side {
  width: 180px;
  flex-shrink: 0;
}
.tpl-form-side {
  flex: 1;
  background: #fff;
  border: 1px solid #eee;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05);
}
.tpl-snap {
  position: relative;
}
.tpl-snap-badge {
  position: absolute;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px 0 0 0;
}
.tpl-base-info {
  margin-top: 10px;
}
.tpl-base-info .name {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 5px;
}
.tpl-base-info .desc {
  font-size: 12px;
  color: #666;
  display: flex;
  align-items: center;
  gap: 5px;
}
.color-val-text {
  font-family: monospace;
  color: #409eff;
  font-weight: bold;
}
.color-dot {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.form-group-title {
  font-size: 14px;
  font-weight: bold;
  color: #409eff;
  padding-left: 10px;
  border-left: 4px solid #409eff;
  margin: 15px 0 10px 0;
  background: #f0f7ff;
  padding: 4px 10px;
  border-radius: 2px;
}
.mini-upload-box {
  width: 60px;
  height: 36px;
  border: 1px dashed #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 4px;
}
.mini-upload-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Picker Specific Styles */
.premium-picker-dialog .el-dialog__body {
  padding: 10px 20px 20px;
}
.prod-picker-box.fixed-height {
  height: 500px;
  display: flex;
  flex-direction: column;
}
.picker-filter-bar {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  background: #f9f9f9;
  padding: 15px;
  border-radius: 8px;
}
.filter-item.wide-picker {
  width: 400px;
}
.search-input {
  width: 400px;
}
.picker-prod-thumb {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  border: 1px solid #eee;
}
.picker-table {
  border-radius: 8px;
  overflow: hidden;
  flex: 1;
}
.price-compare {
  line-height: 1.4;
}
.price-compare .m-price {
  font-size: 11px;
  color: #999;
  text-decoration: line-through;
}
.price-compare .p-price {
  color: #e3132d;
  font-weight: bold;
  font-size: 14px;
}

/* 强制单行不换行 */
:deep(.el-cascader__tags) {
  flex-wrap: nowrap;
  overflow: hidden;
}
:deep(.el-tag) {
  max-width: 180px;
}

.picker-pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
.picker-footer-actions {
  margin-top: 20px;
  text-align: center;
  border-top: 1px solid #eee;
  padding-top: 20px;
}

.banner-upload-box {
  width: 100%;
  height: 100px;
  border: 1px dashed #ddd;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.banner-upload-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.banner-upload-box .mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: 0.3s;
}
.banner-upload-box:hover .mask {
  opacity: 1;
}

.color-picker-group {
  display: flex;
  align-items: center;
  gap: 10px;
}
.color-text {
  font-family: monospace;
  color: #666;
  font-size: 13px;
}

.final-summary {
  text-align: center;
  padding: 40px 0;
}
.summary-card {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  background: #f0f9eb;
  border: 1px solid #e1f3d8;
  padding: 30px;
  border-radius: 12px;
  text-align: left;
  margin-bottom: 20px;
}
.sum-icon {
  font-size: 40px;
}
.sum-text h3 {
  margin: 0 0 10px 0;
  color: #67c23a;
}
.sum-text p {
  margin: 5px 0;
  color: #5e6d82;
}
.preview-banner-hint {
  color: #909399;
  font-size: 13px;
  margin-bottom: 40px;
}
.action-buttons-group {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.tpl-tip {
  font-size: 12px;
  color: #ff9900;
  margin-top: 10px;
  font-style: italic;
}

.mini-prod-img {
  width: 40px;
  height: 40px;
  border-radius: 4px;
}

/* Tpl Picker Grid */
.tpl-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  padding: 10px;
}
.tpl-grid-item {
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  transition: all 0.2s;
  background: #fdfdfd;
}
.tpl-grid-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}
.tpl-grid-item.active {
  border-color: #409eff;
  background: #ecf5ff;
}
.grid-img {
  width: 100%;
  height: 120px;
  border-radius: 4px;
}
.grid-name {
  font-size: 14px;
  font-weight: 600;
  margin-top: 10px;
  margin-bottom: 4px;
}
.grid-layout {
  font-size: 12px;
  color: #999;
}

.picker-footer {
  margin-top: 20px;
  text-align: right;
  border-top: 1px solid #eee;
  padding-top: 15px;
}

/* Premium Preview Dialog Style (Synced with Product Module) */
.premium-preview-dialog :deep(.el-overlay-dialog) {
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.premium-preview-dialog :deep(.el-dialog) {
  margin: 7vh 0 0 0 !important;
  display: flex;
  flex-direction: column;
  max-height: 85vh;
  width: 900px;
}
.premium-preview-dialog :deep(.el-dialog__body) {
  padding: 0 !important;
  overflow: hidden;
  background: #fff;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.preview-scroll-wrapper {
  display: flex;
  flex-direction: column;
  gap: 35px;
  align-items: center;
  background: #e1e3e6;
  padding: 30px 10px;
  border-radius: 0;
  height: calc(100vh - 320px);
  min-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.05);
}
.preview-scroll-wrapper::-webkit-scrollbar {
  width: 8px;
}
.preview-scroll-wrapper::-webkit-scrollbar-thumb {
  background: #b0b0b0;
  border-radius: 4px;
}
.preview-scroll-wrapper::-webkit-scrollbar-track {
  background: transparent;
}
.preview-slide {
  width: 800px;
  height: 450px;
  background: white;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  box-sizing: border-box;
  border: 1px solid #ddd;
}

.cover-slide {
  display: flex;
  flex-direction: column;
  background: #fff;
}
.cover-top-img-area {
  flex: 0 0 75%;
  position: relative;
  overflow: hidden;
  background: #eee;
}
.preview-full-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.preview-bg-mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}
.cover-text-group {
  position: absolute;
  left: 40px;
  top: 55%;
  transform: translateY(-50%);
  z-index: 5;
  color: white;
  text-align: left;
}
.c-main-title {
  font-size: 38px;
  font-weight: bold;
  margin: 0 0 10px 0;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
.c-sub-title {
  font-size: 24px;
  margin: 0 0 15px 0;
  opacity: 0.95;
}
.c-validity {
  font-size: 13px;
  color: #eee;
}

.cover-bottom-white-bar {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 35px;
  background: white;
}
.bar-left {
  display: flex;
  align-items: center;
}
.bar-logo {
  height: 60px;
  max-width: 100px;
  object-fit: contain;
}
.bar-v-line {
  width: 1px;
  height: 50px;
  background: #ddd;
  margin: 0 20px;
}
.bar-brand-info {
  text-align: left;
}
.b-name {
  font-size: 22px;
  font-weight: bold;
  color: #000;
  line-height: 1.2;
}
.b-slogan {
  font-size: 11px;
  color: #666;
  margin-top: 4px;
}
.bar-right {
  text-align: right;
}
.b-contact {
  font-size: 13px;
  font-weight: bold;
  color: #000;
  margin-bottom: 2px;
}

.end-slide {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 60px;
  background: #fff;
  position: relative;
}
.end-content-right {
  text-align: right;
  z-index: 5;
}
.thanks-title {
  font-size: 100px;
  font-weight: 900;
  margin: 0;
  line-height: 1;
  letter-spacing: -2px;
}
.end-brand-line {
  margin-top: 20px;
  font-size: 18px;
  font-weight: bold;
}
.end-divider {
  margin: 0 5px;
  color: #333;
}
.end-b-name {
  color: #333;
}
.end-website {
  margin-top: 10px;
  font-size: 16px;
  font-weight: bold;
}

.end-deco-cloud {
  position: absolute;
  right: -50px;
  bottom: -80px;
  width: 340px;
  height: 340px;
  border: 50px solid var(--theme-color, #c00000);
  opacity: 0.3;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}
.end-deco-cloud::before {
  content: '';
  position: absolute;
  right: 120px;
  bottom: 60px;
  width: 200px;
  height: 200px;
  border: 35px solid var(--theme-color, #c00000);
  opacity: 0.3;
  border-radius: 50%;
}

.content-slide {
  background: #fafafa;
}
.top-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: #fff;
  border-bottom: 3px solid var(--theme-color);
  display: flex;
  align-items: center;
  padding: 0 20px;
  font-weight: bold;
  color: var(--theme-color);
  font-size: 16px;
  z-index: 10;
}
.bottom-deco {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: var(--theme-color);
  opacity: 0.15;
}
.corner-deco {
  position: absolute;
  bottom: 15px;
  right: -25px;
  width: 100px;
  height: 100px;
  background: var(--theme-color);
  opacity: 0.08;
  transform: rotate(45deg);
}

.preview-slide * {
  box-sizing: border-box;
}
.layout-1p1 {
  display: flex;
  height: 100%;
  padding: 60px 40px 30px 40px;
  box-sizing: border-box;
  gap: 30px;
  align-items: center;
  justify-content: center;
}
.layout-1p1 .img-box {
  flex: 0 0 50%;
  max-width: 50%;
  height: 260px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f5f5;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 0;
  overflow: hidden;
}
.layout-1p1 .img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.layout-1p1 .info-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
}
.prod-name {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin: 0 0 15px 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.layout-1p1 .info-box p {
  font-size: 13px;
  color: #666;
  margin: 4px 0;
}
.layout-1p1 .price-tag {
  background: var(--theme-color);
  color: white;
  padding: 6px 20px;
  border-radius: 6px;
  font-size: 20px;
  font-weight: bold;
  margin-top: 20px;
}

.layout-1p2 {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 45px 35px 25px 35px;
  box-sizing: border-box;
}
.half {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.half .img-box {
  flex: 0 0 35%;
  max-width: 35%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f5f5;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 0;
  height: 125px;
  overflow: hidden;
}
.half .img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.half .info-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.upper .info-box {
  align-items: flex-start;
  text-align: left;
}
.lower .info-box {
  align-items: flex-end;
  text-align: right;
}
.layout-1p2 .prod-name {
  font-size: 16px;
  margin: 0 0 8px 0;
  -webkit-line-clamp: 2;
}
.layout-1p2 p {
  margin: 3px 0;
  font-size: 12px;
  color: #888;
}
.price-text {
  color: var(--theme-color);
  font-weight: bold;
  font-size: 18px;
  margin-top: 8px;
}
.divider {
  border-bottom: 1px dashed #ddd;
  margin: 5px 0;
}

.detail-top-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: #fff;
  border-bottom: 1px dotted #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  z-index: 10;
}
.d-left-title {
  font-size: 18px;
  font-weight: bold;
  color: #111;
  display: flex;
  align-items: center;
}
.red-stick {
  width: 4px;
  height: 18px;
  background: #e3132d;
  margin-right: 12px;
}
.d-right-logo {
  height: 26px;
  object-fit: contain;
}

.layout-1p1-detail {
  display: flex;
  height: 100%;
  padding: 75px 30px 30px 40px;
  box-sizing: border-box;
  gap: 35px;
}
.d-img-box {
  flex: 0 0 38%;
  max-width: 38%;
  padding: 5px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 250px;
  overflow: hidden;
}
.d-img-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.d-info-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  text-align: left;
  justify-content: flex-start;
  padding-top: 5px;
}
.d-prod-name {
  font-size: 15px;
  font-weight: normal;
  color: #000;
  margin: 0 0 6px 0;
  -webkit-line-clamp: 2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.d-red-line {
  width: 100%;
  height: 1px;
  background: #e3132d;
  margin-bottom: 8px;
}
.d-base-props p {
  font-size: 12px;
  font-weight: bold;
  color: #111;
  margin: 2px 0;
  line-height: 1.1;
}
.strikethrough {
  text-decoration: line-through;
  color: #666;
}
.mt-2 {
  margin-top: 5px !important;
}
.strong-red {
  color: #e3132d !important;
  font-size: 14px !important;
  margin-top: 1px !important;
}

.d-grid-props {
  display: flex;
  margin-top: 6px;
  gap: 10px;
}
.d-grid-col {
  flex: 1;
}
.d-grid-col h4 {
  font-size: 12px;
  color: #111;
  margin: 0 0 3px 0;
  font-weight: 900;
}
.d-list {
  padding: 0;
  margin: 0;
  list-style: none;
}
.d-list li {
  font-size: 11px;
  color: #555;
  margin-bottom: 5px;
  line-height: 1.4;
  letter-spacing: -0.3px;
}

.s-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.scheme-name-box .s-name {
  font-weight: 600;
  color: #409eff;
  font-size: 15px;
  cursor: pointer;
  transition: 0.2s;
  white-space: nowrap;
}
.scheme-name-box .s-name:hover {
  color: #66b1ff;
  text-decoration: underline;
}
.s-meta-line {
  font-size: 12px;
  color: #999;
  display: flex;
  align-items: center;
  gap: 5px;
}
.s-meta-line .label {
  color: #666;
  font-weight: 500;
}
.s-meta-line .divider {
  color: #eee;
  margin: 0 2px;
}
.s-share-line {
  font-size: 11px;
  color: #67c23a;
  display: flex;
  align-items: center;
  gap: 4px;
  background: #f0f9eb;
  padding: 2px 8px;
  border-radius: 4px;
  width: fit-content;
  flex-shrink: 0;
}

/* Share Drawer Styles */
.share-panel-drawer :deep(.el-drawer__body) {
  padding: 0;
}
.share-drawer-body {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #f8f9fa;
}
.share-search-section {
  padding: 20px;
  background: #fff;
  border-bottom: 1px solid #eee;
}
.premium-search-input :deep(.el-input__wrapper) {
  border-radius: 8px;
  background: #f5f7fa;
  box-shadow: none !important;
  border: 1px solid #e4e7ed;
}
.share-main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.selection-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 20px;
}
.section-title {
  font-size: 14px;
  font-weight: bold;
  color: #303133;
  margin: 0 0 15px 0;
}
.employee-list-scroll {
  flex: 1;
  overflow-y: auto;
  padding-right: 5px;
}
.emp-item {
  display: flex;
  align-items: center;
  padding: 12px;
  background: #fff;
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
}
.emp-item:hover {
  background: #f0f7ff;
  transform: translateX(5px);
}
.emp-item.is-selected {
  border-color: #409eff;
  background: #f0f7ff;
}
.emp-avatar {
  background: #409eff;
  color: #fff;
  margin-right: 12px;
}
.emp-info {
  flex: 1;
}
.e-name {
  font-size: 14px;
  font-weight: bold;
  color: #303133;
}
.e-dept {
  font-size: 12px;
  color: #909399;
  margin-top: 2px;
}
.check-icon {
  color: #409eff;
  font-size: 18px;
}

.selected-summary {
  padding: 15px 20px;
  background: #fff;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.summary-header {
  font-size: 13px;
  font-weight: bold;
  color: #606266;
  margin-bottom: 10px;
}
.summary-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.m-2 {
  margin: 0 !important;
}

.share-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  width: 100%;
}

.fade-in {
  animation: fadeIn 0.3s ease-in;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>