antissoft / lvqianmeiye_ERP

<template>
  <div class="app-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>拓客活动报表</h2>
    </div>

    <!-- 筛选条件 -->
    <div class="filter-container">
      <el-form :inline="true" :model="queryParams" class="demo-form-inline">
        <el-form-item label="拓客活动">
          <!-- <el-select
            v-model="queryParams.eventId"
            placeholder="请选择拓客活动"
            style="width: 300px"
            @change="handleQuery"
            :loading="eventLoading"
          >
            <el-option
              v-for="event in eventList"
              :key="event.id"
              :label="event.eventName"
              :value="event.id"
            />
          </el-select> -->
          <el-select
              :style='{"width":"100%"}'
              v-model="queryParams.eventId"
              filterable
              remote
              reserve-keyword
              placeholder="请输入关键词"
              :remote-method="remoteMethod"
              :loading="tkhdLoading">
              <el-option
              v-for="item in eventList"
              :key="item.id"
              :label="item.eventName"
              :value="item.id">
              </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button @click="resetQuery">重置</el-button>
          <el-button type="success" icon="el-icon-camera" @click="saveScreenshot" :loading="screenshotLoading">
            保存截图
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 选项卡 -->
    <div class="tabs-container">
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="团队数据" name="team">
          <div class="tab-content" v-loading="teamLoading">
            <div v-if="teamData.length === 0" class="no-data">
              暂无数据
            </div>
            <div v-else>
              <!-- 统计概览卡片 -->
              <div class="statistics-overview">
                <el-row :gutter="20">
                  <el-col :span="6">
                    <div class="stat-card">
                      <div class="stat-icon">
                        <i class="el-icon-s-shop"></i>
                      </div>
                      <div class="stat-content">
                        <div class="stat-number">{{ teamData.length }}</div>
                        <div class="stat-label">参与门店</div>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="stat-card">
                      <div class="stat-icon">
                        <i class="el-icon-s-custom"></i>
                      </div>
                      <div class="stat-content">
                        <div class="stat-number">{{ getTotalTeams() }}</div>
                        <div class="stat-label">参与战队</div>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="stat-card">
                      <div class="stat-icon">
                        <i class="el-icon-s-custom"></i>
                      </div>
                      <div class="stat-content">
                        <div class="stat-number">{{ getTotalMembers() }}</div>
                        <div class="stat-label">参与人员</div>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="stat-card">
                      <div class="stat-icon">
                        <i class="el-icon-trophy-1"></i>
                      </div>
                      <div class="stat-content">
                        <div class="stat-number">{{ getTotalExpansionCount() }}</div>
                        <div class="stat-label">总拓客数</div>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
              
              <div class="waterfall-container">
                <div v-for="store in sortedTeamData" :key="store.StoreId" class="store-card-waterfall">
                  <div class="store-header">
                    <div class="store-title-row">
                      <h4>{{ store.StoreName }}</h4>
                      <div class="store-summary">
                        <span class="summary-text">
                          目标: <span class="summary-value">{{ getStoreTotalTarget(store) }}</span>
                        </span>
                        <span class="summary-text">
                          完成: <span class="summary-value">{{ getStoreTotalCompleted(store) }}</span>
                        </span>
                        <span class="summary-text">
                          完成率: <span class="summary-value" :class="getStoreCompletionRateClass(store)">
                            {{ getStoreCompletionRate(store) }}%
                          </span>
                        </span>
                      </div>
                    </div>
                  </div>
                  <div class="teams-container">
                    <div v-for="team in store.TeamList" :key="team.TeamName" class="team-card">
                      <div class="team-header">
                        <span class="team-name">{{ team.TeamName }}</span>
                      </div>
                      <div class="team-members">
                        <div v-for="member in team.TeamUserInfo" :key="member.ExpansionUserId" class="member-row">
                          <div class="member-info">
                            <span class="member-name">{{ member.ExpansionUserName }}</span>
                          </div>
                          <div class="member-stats">
                            <span class="target">目标: {{ member.EventTarget }}</span>
                            <span class="count">完成: {{ member.ExpansionCount }}</span>
                            <span class="rate" :class="getCompletionRateClass(member.ExpansionCount, member.EventTarget)">
                              完成率: {{ getCompletionRate(member.ExpansionCount, member.EventTarget) }}%
                            </span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="排行榜" name="ranking">
          <div class="tab-content">
            <!-- 门店排行榜 -->
            <div class="ranking-section">
              <h3 class="ranking-title">
                <i class="el-icon-s-shop"></i>
                门店排行榜
              </h3>
              <div class="ranking-cards">
                <div 
                  v-for="(store, index) in topStoreData" 
                  :key="store.StoreId" 
                  class="ranking-card"
                  :class="'rank-' + (index + 1)"
                >
                  <div class="rank-number">{{ index + 1 }}</div>
                  <div class="rank-content">
                    <div class="rank-name">{{ store.StoreName }}</div>
                    <div class="rank-stats">
                      <div class="stat-row">
                        <span class="stat-label">目标</span>
                        <span class="stat-value target">{{ store.TotalTarget }}</span>
                      </div>
                      <div class="stat-row">
                        <span class="stat-label">完成</span>
                        <span class="stat-value completed">{{ store.CompletedTarget }}</span>
                      </div>
                      <div class="stat-row">
                        <span class="stat-label">完成率</span>
                        <span class="stat-value rate" :class="getCompletionRateClass(store.CompletedTarget, store.TotalTarget)">
                          {{ store.CompletionRate }}%
                        </span>
                      </div>
                    </div>
                  </div>
                  <div class="rank-medal" v-if="index < 3">
                    <!-- <i class="el-icon-trophy" v-if="index === 0"></i>
                    <i class="el-icon-medal" v-else-if="index === 1"></i>
                    <i class="el-icon-medal-1" v-else></i> -->
                  </div>
                </div>
              </div>
            </div>

            <!-- 个人排行榜 -->
            <div class="ranking-section">
              <h3 class="ranking-title">
                <i class="el-icon-s-custom"></i>
                个人排行榜
              </h3>
              <div class="ranking-cards">
                <div 
                  v-for="(person, index) in topPersonData" 
                  :key="person.UserId" 
                  class="ranking-card person-card"
                  :class="'rank-' + (index + 1)"
                >
                  <div class="rank-number">{{ index + 1 }}</div>
                  <div class="rank-content">
                    <div class="rank-name">{{ person.UserName }}</div>
                    <div class="rank-store">{{ person.StoreName }} - {{ person.TeamName }}</div>
                    <div class="rank-stats">
                      <div class="stat-row">
                        <span class="stat-label">目标</span>
                        <span class="stat-value target">{{ person.PersonalTarget }}</span>
                      </div>
                      <div class="stat-row">
                        <span class="stat-label">完成</span>
                        <span class="stat-value completed">{{ person.CompletedTarget }}</span>
                      </div>
                      <div class="stat-row">
                        <span class="stat-label">完成率</span>
                        <span class="stat-value rate" :class="getCompletionRateClass(person.CompletedTarget, person.PersonalTarget)">
                          {{ person.CompletionRate }}%
                        </span>
                      </div>
                    </div>
                  </div>
                  <div class="rank-medal" v-if="index < 3">
                    <!-- <i class="el-icon-trophy" v-if="index === 0"></i>
                    <i class="el-icon-medal" v-else-if="index === 1"></i>
                    <i class="el-icon-medal-1" v-else></i> -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="未拓客人员" name="no-expansion">
          <div class="tab-content" v-loading="personLoading">
            <div v-if="noExpansionData.length === 0" class="no-data">
              暂无未拓客人员
            </div>
            <div v-else>
              <div class="no-expansion-summary">
                未拓客人员总数：{{ noExpansionData.length }}人
              </div>
              <div class="no-expansion-table">
              <el-table :data="noExpansionData" stripe style="width: 100%">
                <el-table-column prop="UserName" label="姓名" />
                <el-table-column prop="StoreName" label="门店" />
                <el-table-column prop="TeamName" label="团队" />
                <el-table-column prop="PersonalTarget" label="个人目标" align="center" />
                <el-table-column prop="CompletedTarget" label="完成数量" align="center">
                  <template slot-scope="scope">
                    <span class="zero-count">{{ scope.row.CompletedTarget }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="完成率" min-width="150" align="center">
                  <template slot-scope="scope">
                    <div class="progress-container">
                      <div class="progress-bar">
                        <div 
                          class="progress-fill zero-progress" 
                          :style="{ width: Math.min(scope.row.CompletionRate, 100) + '%' }"
                        ></div>
                      </div>
                      <span class="progress-text">{{ scope.row.CompletionRate }}%</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="最后拓客时间" align="center">
                  <template slot-scope="scope">
                    {{ formatTime(scope.row.LastExpansionTime) }}
                  </template>
                </el-table-column>
              </el-table>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="门店排行榜" name="store-ranking">
          <div class="tab-content" v-loading="storeLoading">
            <div v-if="storeData.length === 0" class="no-data">
              暂无门店数据
            </div>
            <div v-else>
              <!-- 门店排行榜表格 -->
              <div class="store-ranking-table">
                <el-table :data="sortedStoreData" :show-header="true" style="width: auto">
                  <el-table-column prop="StoreName" label="门店" width="110" align="center">
                    <template slot-scope="scope">
                      <span :class="{ 'total-label': scope.row.isTotal }">{{ scope.row.StoreName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="TotalTarget" label="目标张数" width="85" align="center">
                    <template slot-scope="scope">
                      <span :class="{ 'total-value': scope.row.isTotal }">{{ scope.row.TotalTarget }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="CompletedTarget" label="总张数" width="85" align="center">
                    <template slot-scope="scope">
                      <span :class="{ 'total-value': scope.row.isTotal }">{{ scope.row.CompletedTarget }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="完成率" width="85" align="center">
                    <template slot-scope="scope">
                      <span :class="{ 'total-value': scope.row.isTotal }">{{ formatCompletionRate(scope.row.CompletionRate) }}%</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="排名" width="70" align="center">
                    <template slot-scope="scope">
                      <span v-if="!scope.row.isTotal" class="ranking" :class="getRankingClass(scope.$index + 1)">
                        {{ scope.$index + 1 }}
                      </span>
                      <span v-else></span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="到店情况" name="store-visit">
          <div class="tab-content" v-loading="funnelLoading">
            <div v-if="funnelData.length === 0" class="no-data">
              暂无到店情况数据
            </div>
            <div v-else>
              <!-- 统计概览 -->
              <div class="store-visit-summary">
                <div class="summary-item">
                  <span class="summary-label">参与门店总数：</span>
                  <span class="summary-value">{{ funnelData.length }}家</span>
                </div>
                <div class="summary-item">
                  <span class="summary-label">总拓客数量：</span>
                  <span class="summary-value">{{ getTotalTkCount() }}</span>
                </div>
                <div class="summary-item">
                  <span class="summary-label">总邀约数量：</span>
                  <span class="summary-value">{{ getTotalYaoyCount() }}</span>
                </div>
                <div class="summary-item">
                  <span class="summary-label">总预约数量：</span>
                  <span class="summary-value">{{ getTotalYyCount() }}</span>
                </div>
                <div class="summary-item">
                  <span class="summary-label">总开单数量：</span>
                  <span class="summary-value">{{ getTotalKdCount() }}</span>
                </div>
                <div class="summary-item">
                  <span class="summary-label">总耗卡数量：</span>
                  <span class="summary-value">{{ getTotalHkCount() }}</span>
                </div>
                <div class="summary-item">
                  <span class="summary-label">总耗卡金额：</span>
                  <span class="summary-value">{{ formatMoney(getTotalHkAmount()) }}</span>
                </div>
                <div class="summary-item">
                  <span class="summary-label">总开单金额：</span>
                  <span class="summary-value">{{ formatMoney(getTotalKdAmount()) }}</span>
                </div>
              </div>
              
              <!-- 到店情况表格 -->
              <div class="store-visit-table">
                <el-table :data="sortedFunnelData" stripe style="width: 100%">
                  <el-table-column prop="store_name" label="门店" align="center">
                    <template slot-scope="scope">
                      <span class="store-name-link" @click="handleStoreClick(scope.row)">
                        {{ scope.row.store_name }}
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="tk_count" label="拓客数量" align="center" sortable />
                  <el-table-column prop="yaoy_count" label="邀约数量" align="center" sortable />
                  <el-table-column prop="yy_count" label="预约数量" align="center" sortable />
                  <el-table-column prop="kd_count" label="开单数量" align="center" sortable />
                  <el-table-column prop="hk_count" label="耗卡数量" align="center" sortable />
                  <el-table-column prop="hk_amount" label="耗卡金额" align="center" sortable>
                    <template slot-scope="scope">
                      {{ formatMoney(scope.row.hk_amount) }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="kd_amount" label="开单金额" align="center" sortable>
                    <template slot-scope="scope">
                      {{ formatMoney(scope.row.kd_amount) }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="visit_rate" label="到店率" align="center" sortable>
                    <template slot-scope="scope">
                      {{ scope.row.visit_rate ? scope.row.visit_rate + '%' : '0%' }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="deal_rate" label="成交率" align="center" sortable>
                    <template slot-scope="scope">
                      {{ scope.row.deal_rate ? scope.row.deal_rate + '%' : '0%' }}
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </el-tab-pane>

      </el-tabs>
    </div>

    <!-- 报表内容容器 -->
    <div class="report-sections-container" style="display: none;">
    <!-- 团队数据报表 -->
    <div class="report-section">
      <div class="section-header">
        <h3>团队数据报表</h3>
      </div>
      <div v-loading="teamLoading" class="report-content">
        <div v-if="teamData.length === 0" class="no-data">
          暂无数据
        </div>
        <div v-else>
          <!-- 统计概览卡片 -->
          <div class="statistics-overview">
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="stat-card">
                  <div class="stat-icon">
                    <i class="el-icon-s-shop"></i>
                  </div>
                  <div class="stat-content">
                    <div class="stat-number">{{ teamData.length }}</div>
                    <div class="stat-label">参与门店</div>
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="stat-card">
                  <div class="stat-icon">
                    <i class="el-icon-s-custom"></i>
                  </div>
                  <div class="stat-content">
                    <div class="stat-number">{{ getTotalTeams() }}</div>
                    <div class="stat-label">参与战队</div>
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="stat-card">
                  <div class="stat-icon">
                    <i class="el-icon-s-custom"></i>
                  </div>
                  <div class="stat-content">
                    <div class="stat-number">{{ getTotalMembers() }}</div>
                    <div class="stat-label">参与人员</div>
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="stat-card">
                  <div class="stat-icon">
                    <i class="el-icon-trophy-1"></i>
                  </div>
                  <div class="stat-content">
                    <div class="stat-number">{{ getTotalExpansionCount() }}</div>
                    <div class="stat-label">总拓客数</div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
          
          <div class="waterfall-container">
            <div v-for="store in teamData" :key="store.StoreId" class="store-card-waterfall">
              <div class="store-header">
                <div class="store-title-row">
                  <h4>{{ store.StoreName }}</h4>
                  <div class="store-summary">
                    <span class="summary-text">
                      目标: <span class="summary-value">{{ getStoreTotalTarget(store) }}</span>
                    </span>
                    <span class="summary-text">
                      完成: <span class="summary-value">{{ getStoreTotalCompleted(store) }}</span>
                    </span>
                    <span class="summary-text">
                      完成率: <span class="summary-value" :class="getStoreCompletionRateClass(store)">
                        {{ getStoreCompletionRate(store) }}%
                      </span>
                    </span>
                  </div>
                </div>
              </div>
              <div class="teams-container">
                <div v-for="team in store.TeamList" :key="team.TeamName" class="team-card">
                  <div class="team-header">
                    <span class="team-name">{{ team.TeamName }}</span>
                  </div>
                  <div class="team-members">
                    <div v-for="member in team.TeamUserInfo" :key="member.ExpansionUserId" class="member-row">
                      <div class="member-info">
                        <span class="member-name">{{ member.ExpansionUserName }}</span>
                      </div>
                      <div class="member-stats">
                        <span class="target">目标: {{ member.EventTarget }}</span>
                        <span class="count">完成: {{ member.ExpansionCount }}</span>
                        <span class="rate" :class="getCompletionRateClass(member.ExpansionCount, member.EventTarget)">
                          完成率: {{ getCompletionRate(member.ExpansionCount, member.EventTarget) }}%
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 门店数据报表 -->
    <div class="report-section">
      <div class="section-header">
        <h3>门店数据报表</h3>
      </div>
      <div v-loading="storeLoading" class="report-content">
        <div v-if="storeData.length === 0" class="no-data">
          暂无数据
        </div>
         <div v-else class="store-table">
           <el-table :data="storeData" stripe style="width: 100%">
             <el-table-column prop="StoreName" label="门店名称"  />
             <el-table-column prop="TotalTarget" label="目标数据"  align="center" />
             <el-table-column prop="CompletedTarget" label="完成数量"  align="center" />
             <el-table-column label="完成率" min-width="180" align="center">
               <template slot-scope="scope">
                 <div class="progress-container">
                   <div class="progress-bar">
                     <div 
                       class="progress-fill" 
                       :style="{ width: scope.row.CompletionRate + '%' }"
                     ></div>
                   </div>
                   <span class="progress-text">{{ scope.row.CompletionRate }}%</span>
                 </div>
               </template>
             </el-table-column>
             <el-table-column prop="Ranking" label="排名" width="80" align="center">
               <template slot-scope="scope">
                 <span class="ranking" :class="getRankingClass(scope.row.Ranking)">
                   {{ scope.row.Ranking }}
                 </span>
               </template>
             </el-table-column>
           </el-table>
         </div>
      </div>
    </div>

    <!-- 个人数据报表 -->
    <div class="report-section">
      <div class="section-header">
        <h3>个人数据报表</h3>
      </div>
      <div v-loading="personLoading" class="report-content">
        <div v-if="personData.length === 0" class="no-data">
          暂无数据
        </div>
         <div v-else class="person-table">
           <el-table :data="personData" stripe style="width: 100%">
             <el-table-column prop="UserName" label="姓名"  />
             <el-table-column prop="StoreName" label="门店"  />
             <el-table-column prop="TeamName" label="团队"  />
             <el-table-column prop="PersonalTarget" label="个人目标"  align="center" />
             <el-table-column prop="CompletedTarget" label="完成数量" align="center" />
             <el-table-column label="完成率" min-width="150" align="center">
               <template slot-scope="scope">
                 <div class="progress-container">
                   <div class="progress-bar">
                     <div 
                       class="progress-fill" 
                       :style="{ width: Math.min(scope.row.CompletionRate, 100) + '%' }"
                     ></div>
                   </div>
                   <span class="progress-text">{{ scope.row.CompletionRate }}%</span>
                 </div>
               </template>
             </el-table-column>
             <el-table-column prop="Ranking" label="排名" width="80" align="center">
               <template slot-scope="scope">
                 <span class="ranking" :class="getRankingClass(scope.row.Ranking)">
                   {{ scope.row.Ranking }}
                 </span>
               </template>
             </el-table-column>
             <el-table-column label="最后拓客时间" align="center">
               <template slot-scope="scope">
                 {{ formatTime(scope.row.LastExpansionTime) }}
               </template>
             </el-table-column>
           </el-table>
         </div>
      </div>
    </div>
    </div>


    <!-- 截图预览对话框 -->
    <el-dialog
      title="截图预览"
      :visible.sync="previewVisible"
      width="80%"
      :before-close="closePreview"
      center
    >
      <div class="screenshot-preview">
        <img 
          v-if="screenshotDataUrl" 
          :src="screenshotDataUrl" 
          alt="报表截图" 
          style="width: 100%; max-height: 70vh; object-fit: contain;"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closePreview">取消</el-button>
        <el-button type="primary" @click="downloadScreenshot">下载图片</el-button>
      </span>
    </el-dialog>

    <!-- 门店详情对话框 -->
    <el-dialog
      :title="selectedStore ? selectedStore.store_name + ' - 客户详情' : '客户详情'"
      :visible.sync="storeDetailVisible"
      width="90%"
      :before-close="closeStoreDetail"
      center
    >
      <div class="store-detail-content" v-loading="customerDetailsLoading">
        <div v-if="storeCustomerDetails.length === 0" class="no-data">
          暂无客户数据
        </div>
        <div v-else>
          <el-table :data="storeCustomerDetails" stripe style="width: 100%">
            <el-table-column prop="customer_name" label="客户姓名" align="center" />
            <el-table-column prop="customer_phone" label="客户电话" align="center" width="120"/>
            <el-table-column prop="expansion_user_name" label="拓客人员" align="center" width="120"/>
            <el-table-column prop="invitation_status" label="邀约状态" align="center" />
            <el-table-column prop="appointment_status" label="预约状态" align="center" />
            <el-table-column prop="consume_status" label="耗卡状态" align="center" />
            <el-table-column prop="billing_status" label="开卡状态" align="center" />
            <el-table-column prop="tk_time" label="拓客时间" width="150" align="center">
              <template slot-scope="scope">
                {{ formatCustomerTime(scope.row.tk_time) }}
              </template>
            </el-table-column>
            <el-table-column prop="yaoy_time" label="邀约创建时间" width="150" align="center">
              <template slot-scope="scope">
                {{ formatCustomerTime(scope.row.yaoy_time) }}
              </template>
            </el-table-column>
            <el-table-column prop="yaoy_appointment_time" label="邀约预约时间" width="150" align="center">
              <template slot-scope="scope">
                {{ formatCustomerTime(scope.row.yaoy_appointment_time) }}
              </template>
            </el-table-column>
            <el-table-column prop="yy_time" label="预约创建时间" width="150" align="center">
              <template slot-scope="scope">
                {{ formatCustomerTime(scope.row.yy_time) }}
              </template>
            </el-table-column>
            <el-table-column prop="appointment_time" label="预约到店时间" width="150" align="center">
              <template slot-scope="scope">
                {{ formatCustomerTime(scope.row.appointment_time) }}
              </template>
            </el-table-column>
            <!-- <el-table-column prop="first_consume_time" label="首次耗卡时间" width="150" align="center">
              <template slot-scope="scope">
                {{ formatCustomerTime(scope.row.first_consume_time) }}
              </template>
            </el-table-column>
            <el-table-column prop="last_consume_time" label="最后耗卡时间" width="150" align="center">
              <template slot-scope="scope">
                {{ formatCustomerTime(scope.row.last_consume_time) }}
              </template>
            </el-table-column>
            <el-table-column prop="first_billing_time" label="首次开卡时间" width="150" align="center">
              <template slot-scope="scope">
                {{ formatCustomerTime(scope.row.first_billing_time) }}
              </template>
            </el-table-column>
            <el-table-column prop="last_billing_time" label="最后开卡时间" width="150" align="center">
              <template slot-scope="scope">
                {{ formatCustomerTime(scope.row.last_billing_time) }}
              </template>
            </el-table-column> -->
            <el-table-column prop="total_consume_amount" label="耗卡金额" align="center">
              <template slot-scope="scope">
                {{ formatMoney(scope.row.total_consume_amount) }}
              </template>
            </el-table-column>
            <el-table-column prop="consume_count" label="耗卡次数" align="center">  
              <template slot-scope="scope">
                {{ scope.row.consume_count || 0 }}
              </template>
            </el-table-column>
            <el-table-column prop="total_billing_amount" label="开卡金额" align="center">
              <template slot-scope="scope">
                {{ formatMoney(scope.row.total_billing_amount) }}
              </template>
            </el-table-column>
            <el-table-column prop="billing_count" label="开卡次数" align="center" >
              <template slot-scope="scope">
                {{ scope.row.billing_count || 0 }}
              </template>
            </el-table-column>
            <el-table-column prop="total_debt_amount" label="欠款金额" align="center">
              <template slot-scope="scope">
                {{ formatMoney(scope.row.total_debt_amount) }}
              </template>
            </el-table-column>
    
          </el-table>
          
          <!-- 分页组件 -->
          <div class="pagination-container" v-if="customerDetailsTotal > 0">
            <el-pagination
              @size-change="handleCustomerDetailsPageSizeChange"
              @current-change="handleCustomerDetailsPageChange"
              :current-page="customerDetailsPageIndex"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="customerDetailsPageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="customerDetailsTotal"
            />
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getEventList, getTeamData, getStoreData, getPersonData } from '@/api/lqTkjlb'
import request from '@/utils/request'
export default {
  name: 'TkjlbReport',
  data() {
    return {
      tkhdLoading: false,
      queryParams: {
        eventId: ''
      },
      eventList: [],
      teamData: [],
      storeData: [],
      personData: [],
      funnelData: [],
      storeCustomerDetails: [],
      customerDetailsTotal: 0,
      customerDetailsPageIndex: 1,
      customerDetailsPageSize: 10,
      eventLoading: false,
      teamLoading: false,
      storeLoading: false,
      personLoading: false,
      funnelLoading: false,
      customerDetailsLoading: false,
      screenshotLoading: false,
      screenshotDataUrl: '',
      previewVisible: false,
      storeDetailVisible: false,
      selectedStore: null,
      activeTab: 'team'
    }
  },
  computed: {
    // 按门店完成率排序的团队数据
    sortedTeamData() {
      return [...this.teamData].sort((a, b) => {
        const rateA = this.getStoreCompletionRate(a)
        const rateB = this.getStoreCompletionRate(b)
        return rateB - rateA // 降序排列
      })
    },
    // 门店前三名（按完成率排序）
    topStoreData() {
      return this.storeData.slice(0, 3)
    },
    // 按完成率排序的门店数据（用于总门店排行榜）
    sortedStoreData() {
      const sorted = [...this.storeData].sort((a, b) => {
        return b.CompletionRate - a.CompletionRate // 按完成率降序排列
      })
      // 添加总计行
      sorted.push({
        StoreName: '总计',
        TotalTarget: this.getTotalStoreTarget(),
        CompletedTarget: this.getTotalStoreCompleted(),
        CompletionRate: this.getTotalCompletionRate(),
        isTotal: true
      })
      return sorted
    },
    // 个人前三名
    topPersonData() {
      return this.personData
        .slice()
        .sort((a, b) => b.CompletedTarget - a.CompletedTarget)
        .slice(0, 3)
    },
    // 未拓客人员（完成数量为0）
    noExpansionData() {
      return this.personData.filter(person => person.CompletedTarget === 0)
    },
    // 按耗卡金额排序的漏斗数据
    sortedFunnelData() {
      if (!Array.isArray(this.funnelData)) {
        return []
      }
      return [...this.funnelData].sort((a, b) => {
        return (b.hk_amount || 0) - (a.hk_amount || 0) // 按耗卡金额降序排列
      })
    }
  },
  created() {
    this.getEventList()
    // 添加测试数据，确保页面正常显示
    // this.addTestData()
  },
  methods: {
    async remoteMethod(query){
        if (query !== '') {
            this.tkhdLoading = true;
            await request({
                url: '/api/Extend/lqevent?page=1&pageSize=10&eventName='+query,
                method: 'GET',
            }).then((res) => {
                this.tkhdLoading = false;
                if (res.code == 200 && res.data.list.length > 0) {
                    this.eventList = res.data.list;
                } else {
                    this.eventList = [];
                }
                console.error(this.eventList)
            })
        
        } else {
            // this.kdhyOptions = [];
        }
    },
    // 获取活动列表
    async getEventList() {
      this.eventLoading = true
      try {
        console.log('正在获取活动列表...')
        const response = await getEventList()
        console.log('活动列表响应:', response)
        this.eventList = response.data.list || []
        
        // 默认选中第一个活动
        if (this.eventList.length > 0) {
          this.queryParams.eventId = this.eventList[0].id
          console.log('默认选中活动:', this.eventList[0])
          // 自动查询第一个活动的数据
          this.handleQuery()
        }
      } catch (error) {
        console.error('获取活动列表失败:', error)
        this.$message.error('获取活动列表失败: ' + error.message)
        this.eventList = []
      } finally {
        this.eventLoading = false
      }
    },

    // 查询数据
    handleQuery() {
      if (!this.queryParams.eventId) {
        this.$message.warning('请选择拓客活动')
        return
      }
      this.getTeamData()
      this.getStoreData()
      this.getPersonData()
      this.getFunnelData()
    },
    
    // 重置查询
    resetQuery() {
      if (this.eventList.length > 0) {
        this.queryParams.eventId = this.eventList[0].id
        this.handleQuery()
      } else {
        this.queryParams.eventId = ''
        this.teamData = []
        this.storeData = []
        this.personData = []
        this.funnelData = []
      }
    },

    // 选项卡切换
    handleTabClick(tab) {
      this.activeTab = tab.name
      console.log('切换到选项卡:', tab.name)
    },

    // 获取团队数据
    async getTeamData() {
      this.teamLoading = true
      try {
        console.log('正在获取团队数据...')
        const response = await getTeamData(this.queryParams.eventId)
        console.log('团队数据响应:', response)
        this.teamData = response.data || []
        console.log('团队数据:', this.teamData)
      } catch (error) {
        console.error('获取团队数据失败:', error)
        this.$message.error('获取团队数据失败: ' + error.message)
        this.teamData = []
      } finally {
        this.teamLoading = false
      }
    },

    // 获取门店数据
    async getStoreData() {
      this.storeLoading = true
      try {
        console.log('正在获取门店数据...')
        const response = await getStoreData(this.queryParams.eventId)
        console.log('门店数据响应:', response)
        this.storeData = response.data || []
        console.log('门店数据:', this.storeData)
      } catch (error) {
        console.error('获取门店数据失败:', error)
        this.$message.error('获取门店数据失败: ' + error.message)
        this.storeData = []
      } finally {
        this.storeLoading = false
      }
    },

    // 获取个人数据
    async getPersonData() {
      this.personLoading = true
      try {
        console.log('正在获取个人数据...')
        const response = await getPersonData(this.queryParams.eventId)
        console.log('个人数据响应:', response)
        this.personData = response.data || []
        console.log('个人数据:', this.personData)
      } catch (error) {
        console.error('获取个人数据失败:', error)
        this.$message.error('获取个人数据失败: ' + error.message)
        this.personData = []
      } finally {
        this.personLoading = false
      }
    },

    // 获取到店情况数据
    async getFunnelData() {
      this.funnelLoading = true
      try {
        console.log('正在获取到店情况数据...')
        const response = await request({
          url: `/api/Extend/lqtkjlb/GetFunnelStatisticsFast/${this.queryParams.eventId}`,
          method: 'GET'
        })
        console.log('到店情况数据响应:', response)
        if (response.code === 200 && response.data) {
          this.funnelData = Array.isArray(response.data) ? response.data : (response.data.data || [])
        } else {
          this.funnelData = []
        }
        console.log('到店情况数据:', this.funnelData)
      } catch (error) {
        console.error('获取到店情况数据失败:', error)
        this.$message.error('获取到店情况数据失败: ' + (error.message || '未知错误'))
        this.funnelData = []
      } finally {
        this.funnelLoading = false
      }
    },

    // 获取门店客户详情
    async getStoreCustomerDetails(storeId, pageIndex = 1, pageSize = 10) {
      this.customerDetailsLoading = true
      try {
        console.log('正在获取门店客户详情...', storeId, pageIndex, pageSize)
        const response = await request({
          url: `/api/Extend/lqtkjlb/GetStoreCustomerDetailsPaged/${this.queryParams.eventId}/${storeId}?pageIndex=${pageIndex}&pageSize=${pageSize}`,
          method: 'GET'
        })
        console.log('门店客户详情响应:', response)
        if (response.code === 200 && response.data && response.data.data) {
          this.storeCustomerDetails = response.data.data.list || []
          this.customerDetailsTotal = response.data.data.total || 0
        } else {
          this.storeCustomerDetails = []
          this.customerDetailsTotal = 0
        }
        this.customerDetailsPageIndex = pageIndex
        this.customerDetailsPageSize = pageSize
        console.log('门店客户详情:', this.storeCustomerDetails)
        console.log('总数量:', this.customerDetailsTotal)
      } catch (error) {
        console.error('获取门店客户详情失败:', error)
        this.$message.error('获取门店客户详情失败: ' + (error.message || '未知错误'))
        this.storeCustomerDetails = []
        this.customerDetailsTotal = 0
      } finally {
        this.customerDetailsLoading = false
      }
    },

    // 点击门店名称显示详情
    async handleStoreClick(store) {
      // 需要从store中获取store_id，如果没有则尝试其他字段
      const storeId = store.store_id || store.id || store.StoreId
      if (!storeId) {
        this.$message.warning('无法获取门店ID')
        return
      }
      this.selectedStore = store
      this.storeDetailVisible = true
      this.customerDetailsPageIndex = 1 // 重置到第一页
      await this.getStoreCustomerDetails(storeId, 1, this.customerDetailsPageSize)
    },

    // 关闭门店详情弹窗
    closeStoreDetail() {
      this.storeDetailVisible = false
      this.selectedStore = null
      this.storeCustomerDetails = []
      this.customerDetailsTotal = 0
      this.customerDetailsPageIndex = 1
    },

    // 处理分页变化
    async handleCustomerDetailsPageChange(pageIndex) {
      if (this.selectedStore) {
        const storeId = this.selectedStore.store_id || this.selectedStore.id || this.selectedStore.StoreId
        if (storeId) {
          await this.getStoreCustomerDetails(storeId, pageIndex, this.customerDetailsPageSize)
        }
      }
    },

    // 处理每页显示数量变化
    async handleCustomerDetailsPageSizeChange(pageSize) {
      this.customerDetailsPageSize = pageSize
      if (this.selectedStore) {
        const storeId = this.selectedStore.store_id || this.selectedStore.id || this.selectedStore.StoreId
        if (storeId) {
          await this.getStoreCustomerDetails(storeId, 1, pageSize)
        }
      }
    },

    // 格式化客户时间
    formatCustomerTime(timestamp) {
      if (!timestamp) return '无'
      const date = new Date(timestamp)
      return date.toLocaleString('zh-CN')
    },

    // 格式化金额
    formatMoney(amount) {
      if (amount === null || amount === undefined || amount === '') return '0.00'
      return Number(amount).toFixed(2)
    },

    // 计算总拓客数量
    getTotalTkCount() {
      if (!Array.isArray(this.funnelData) || this.funnelData.length === 0) return 0
      return this.funnelData.reduce((total, item) => total + (item.tk_count || 0), 0)
    },

    // 计算总邀约数量
    getTotalYaoyCount() {
      if (!Array.isArray(this.funnelData) || this.funnelData.length === 0) return 0
      return this.funnelData.reduce((total, item) => total + (item.yaoy_count || 0), 0)
    },

    // 计算总预约数量
    getTotalYyCount() {
      if (!Array.isArray(this.funnelData) || this.funnelData.length === 0) return 0
      return this.funnelData.reduce((total, item) => total + (item.yy_count || 0), 0)
    },

    // 计算总开单数量
    getTotalKdCount() {
      if (!Array.isArray(this.funnelData) || this.funnelData.length === 0) return 0
      return this.funnelData.reduce((total, item) => total + (item.kd_count || 0), 0)
    },

    // 计算总耗卡数量
    getTotalHkCount() {
      if (!Array.isArray(this.funnelData) || this.funnelData.length === 0) return 0
      return this.funnelData.reduce((total, item) => total + (item.hk_count || 0), 0)
    },

    // 计算总耗卡金额
    getTotalHkAmount() {
      if (!Array.isArray(this.funnelData) || this.funnelData.length === 0) return 0
      return this.funnelData.reduce((total, item) => total + (Number(item.hk_amount) || 0), 0)
    },

    // 计算总开单金额
    getTotalKdAmount() {
      if (!Array.isArray(this.funnelData) || this.funnelData.length === 0) return 0
      return this.funnelData.reduce((total, item) => total + (Number(item.kd_amount) || 0), 0)
    },


    // 计算完成率
    getCompletionRate(completed, target) {
      if (target === 0) return 0
      return Math.round((completed / target) * 100)
    },

    // 获取完成率样式类
    getCompletionRateClass(completed, target) {
      const rate = this.getCompletionRate(completed, target)
      if (rate >= 100) return 'rate-excellent'
      if (rate >= 80) return 'rate-good'
      if (rate >= 60) return 'rate-normal'
      return 'rate-poor'
    },

    // 获取排名样式类
    getRankingClass(ranking) {
      if (ranking <= 3) return 'ranking-top'
      if (ranking <= 6) return 'ranking-good'
      return 'ranking-normal'
    },

    // 格式化时间
    formatTime(timestamp) {
      if (!timestamp) return '无'
      const date = new Date(timestamp)
      return date.toLocaleString('zh-CN')
    },


    // 格式化完成率，保留1位小数
    formatCompletionRate(rate) {
      if (rate === null || rate === undefined) return '0.0'
      return parseFloat(rate).toFixed(1)
    },

    // 计算门店总目标
    getStoreTotalTarget(store) {
      if (!store.TeamList) return 0
      let total = 0
      store.TeamList.forEach(team => {
        if (team.TeamUserInfo) {
          team.TeamUserInfo.forEach(member => {
            total += member.EventTarget || 0
          })
        }
      })
      return total
    },

    // 计算门店总完成数
    getStoreTotalCompleted(store) {
      if (!store.TeamList) return 0
      let total = 0
      store.TeamList.forEach(team => {
        if (team.TeamUserInfo) {
          team.TeamUserInfo.forEach(member => {
            total += member.ExpansionCount || 0
          })
        }
      })
      return total
    },

    // 计算门店完成率
    getStoreCompletionRate(store) {
      const target = this.getStoreTotalTarget(store)
      const completed = this.getStoreTotalCompleted(store)
      if (target === 0) return 0
      return Math.round((completed / target) * 100)
    },

    // 获取门店完成率样式类
    getStoreCompletionRateClass(store) {
      const rate = this.getStoreCompletionRate(store)
      if (rate >= 100) return 'rate-excellent'
      if (rate >= 80) return 'rate-good'
      if (rate >= 60) return 'rate-normal'
      return 'rate-poor'
    },

    // 计算总战队数
    getTotalTeams() {
      if (!this.teamData || this.teamData.length === 0) return 0
      let total = 0
      this.teamData.forEach(store => {
        if (store.TeamList) {
          total += store.TeamList.length
        }
      })
      return total
    },

    // 计算总参与人员数
    getTotalMembers() {
      if (!this.teamData || this.teamData.length === 0) return 0
      let total = 0
      this.teamData.forEach(store => {
        if (store.TeamList) {
          store.TeamList.forEach(team => {
            if (team.TeamUserInfo) {
              total += team.TeamUserInfo.length
            }
          })
        }
      })
      return total
    },

    // 计算总拓客数
    getTotalExpansionCount() {
      if (!this.teamData || this.teamData.length === 0) return 0
      let total = 0
      this.teamData.forEach(store => {
        if (store.TeamList) {
          store.TeamList.forEach(team => {
            if (team.TeamUserInfo) {
              team.TeamUserInfo.forEach(member => {
                total += member.ExpansionCount || 0
              })
            }
          })
        }
      })
      return total
    },

    // 计算门店总目标数
    getTotalStoreTarget() {
      if (!this.storeData || this.storeData.length === 0) return 0
      return this.storeData.reduce((total, store) => total + (store.TotalTarget || 0), 0)
    },

    // 计算门店总完成数
    getTotalStoreCompleted() {
      if (!this.storeData || this.storeData.length === 0) return 0
      return this.storeData.reduce((total, store) => total + (store.CompletedTarget || 0), 0)
    },

    // 计算总完成率
    getTotalCompletionRate() {
      const totalTarget = this.getTotalStoreTarget()
      const totalCompleted = this.getTotalStoreCompleted()
      if (totalTarget === 0) return 0
      return (totalCompleted / totalTarget) * 100
    },

    // 获取总完成率样式类
    getTotalCompletionRateClass() {
      const rate = this.getTotalCompletionRate()
      if (rate >= 100) return 'rate-excellent'
      if (rate >= 80) return 'rate-good'
      if (rate >= 60) return 'rate-normal'
      return 'rate-poor'
    },

    // 添加测试数据
    addTestData() {
      // 如果API调用失败，添加一些测试数据确保页面正常显示
      setTimeout(() => {
        // 如果没有活动列表，添加测试活动
        if (this.eventList.length === 0) {
          this.eventList = [
            {
              id: '740360861859710213',
              name: '测试拓客活动'
            }
          ]
          this.queryParams.eventId = this.eventList[0].id
        }
        
        if (this.teamData.length === 0) {
          this.teamData = [
            {
              "StoreId": "1649328471923847186",
              "StoreName": "绿纤骑士郡店",
              "TeamList": [
                {
                  "TeamName": "咕噜队",
                  "TeamUserInfo": [
                    {
                      "ExpansionUserId": "17882512738",
                      "ExpansionUserName": "梁诗雨",
                      "ExpansionCount": 6,
                      "EventTarget": 100
                    },
                    {
                      "ExpansionUserId": "admin",
                      "ExpansionUserName": "管理员",
                      "ExpansionCount": 0,
                      "EventTarget": 6
                    }
                  ]
                }
              ]
            }
          ]
        }
        
        if (this.storeData.length === 0) {
          this.storeData = [
            {
              "StoreId": "1649328471923847190",
              "StoreName": "绿纤亚洲湾店",
              "TotalTarget": 6,
              "CompletedTarget": 6,
              "CompletionRate": 100,
              "Ranking": 1
            },
            {
              "StoreId": "1649328471923847169",
              "StoreName": "绿纤紫荆店",
              "TotalTarget": 3,
              "CompletedTarget": 3,
              "CompletionRate": 100,
              "Ranking": 2
            }
          ]
        }
        
        if (this.personData.length === 0) {
          this.personData = [
            {
              "UserId": "19982024821",
              "UserName": "谢珂欣",
              "StoreId": "1649328471923847190",
              "StoreName": "绿纤亚洲湾店",
              "TeamName": "9444",
              "PersonalTarget": 1,
              "CompletedTarget": 6,
              "CompletionRate": 600,
              "Ranking": 1,
              "LastExpansionTime": 1758699730000
            },
            {
              "UserId": "17780181798",
              "UserName": "王任燕",
              "StoreId": "1649328471923847175",
              "StoreName": "绿纤468店",
              "TeamName": "222",
              "PersonalTarget": 1,
              "CompletedTarget": 3,
              "CompletionRate": 300,
              "Ranking": 2,
              "LastExpansionTime": 1758699412000
            }
          ]
        }
      }, 2000) // 2秒后添加测试数据
    },

    // 保存截图
    async saveScreenshot() {
      this.screenshotLoading = true
      try {
        // 动态导入html2canvas
        const html2canvas = await import('html2canvas')
        
        // 根据当前选中的选项卡获取要截图的容器
        let element
        console.log('当前选中的选项卡:', this.activeTab)
        
        // 尝试多种选择器来找到正确的元素
        const selectors = [
          `.el-tabs__content .el-tab-pane[name="${this.activeTab}"] .tab-content`,
          `.el-tab-pane[name="${this.activeTab}"] .tab-content`,
          `.el-tabs__content .el-tab-pane[aria-labelledby*="${this.activeTab}"] .tab-content`,
          `.el-tab-pane[aria-labelledby*="${this.activeTab}"] .tab-content`,
          `.tabs-container .tab-content`
        ]
        
        for (const selector of selectors) {
          element = document.querySelector(selector)
          if (element) {
            console.log('使用选择器找到元素:', selector, element)
            break
          }
        }
        
        // 如果还是找不到，尝试通过选项卡内容查找
        if (!element) {
          const tabPanes = document.querySelectorAll('.el-tab-pane')
          for (const pane of tabPanes) {
            if (pane.classList.contains('is-active') || pane.style.display !== 'none') {
              element = pane.querySelector('.tab-content')
              if (element) {
                console.log('通过活动选项卡找到元素:', element)
                break
              }
            }
          }
        }
        
        console.log('最终找到的截图元素:', element)
        
        // 如果还是找不到，使用整个选项卡容器作为备用
        if (!element) {
          element = document.querySelector('.tabs-container')
          console.log('使用备用方案 - 整个选项卡容器:', element)
        }
        
        if (!element) {
          this.$message.error('未找到要截图的内容')
          return
        }

        // 等待页面完全渲染
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        // 滚动到页面顶部确保所有内容可见
        window.scrollTo(0, 0)
        await new Promise(resolve => setTimeout(resolve, 500))

        // 临时保存原始样式
        const originalStyles = {
          height: element.style.height,
          overflow: element.style.overflow,
          maxHeight: element.style.maxHeight,
          position: element.style.position
        }

        // 临时修改样式以确保完整截图
        element.style.height = 'auto'
        element.style.overflow = 'visible'
        element.style.maxHeight = 'none'
        element.style.position = 'static'

        // 确保所有报表区域都可见
        const reportSections = element.querySelectorAll('.report-section')
        reportSections.forEach(section => {
          section.style.height = 'auto'
          section.style.overflow = 'visible'
          section.style.maxHeight = 'none'
          section.style.display = 'block'
        })

        // 确保统计概览完整显示
        const statisticsOverview = element.querySelector('.statistics-overview')
        if (statisticsOverview) {
          statisticsOverview.style.height = 'auto'
          statisticsOverview.style.overflow = 'visible'
          statisticsOverview.style.maxHeight = 'none'
          statisticsOverview.style.display = 'block'
          statisticsOverview.style.visibility = 'visible'
          statisticsOverview.style.opacity = '1'
        }

        // 确保瀑布流容器完整显示
        const waterfallContainer = element.querySelector('.waterfall-container')
        if (waterfallContainer) {
          waterfallContainer.style.height = 'auto'
          waterfallContainer.style.overflow = 'visible'
          waterfallContainer.style.maxHeight = 'none'
        }

        // 确保所有卡片完整显示
        const storeCards = element.querySelectorAll('.store-card-waterfall')
        storeCards.forEach(card => {
          card.style.height = 'auto'
          card.style.overflow = 'visible'
          card.style.maxHeight = 'none'
        })

        // 确保背景色统一为白色
        element.style.backgroundColor = '#ffffff'
        
        // 确保所有子元素背景色统一
        const allElements = element.querySelectorAll('*')
        allElements.forEach(el => {
          // 只处理有背景色的元素，避免影响其他样式
          if (el.style.backgroundColor && el.style.backgroundColor !== 'transparent') {
            el.style.backgroundColor = '#ffffff'
          }
        })

        // 特别处理表格背景色和宽度
        const elementTables = element.querySelectorAll('.el-table')
        elementTables.forEach(table => {
          table.style.backgroundColor = '#ffffff'
          table.style.width = '100%'
          table.style.minWidth = '100%'
          table.style.maxWidth = 'none'
          table.style.tableLayout = 'auto'
        })

        // 特别处理表格单元格背景色
        const tableCells = element.querySelectorAll('.el-table td')
        tableCells.forEach(cell => {
          cell.style.backgroundColor = '#ffffff'
        })

        // 特别处理表格头部
        const tableHeaders = element.querySelectorAll('.el-table th')
        tableHeaders.forEach(header => {
          header.style.backgroundColor = '#f8f9fa'
        })

        // 确保表格容器和表格保持实际渲染宽度，避免被拉伸
        const tableContainers = element.querySelectorAll('.store-ranking-table, .no-expansion-table, .store-table, .person-table')
        tableContainers.forEach(container => {
          // 保持表格容器的原始宽度，避免被拉伸
          const originalWidth = container.offsetWidth || container.clientWidth
          if (originalWidth) {
            container.style.width = originalWidth + 'px'
            container.style.minWidth = originalWidth + 'px'
            container.style.maxWidth = originalWidth + 'px'
          }
          container.style.overflow = 'visible'
        })

        // 等待样式应用
        await new Promise(resolve => setTimeout(resolve, 500))

        // 对于门店排行榜表格，保持auto宽度，不要拉伸
        elementTables.forEach(table => {
          const tableContainer = table.closest('.store-ranking-table')
          if (tableContainer) {
            // 门店排行榜表格保持auto宽度
            table.style.width = 'auto'
            table.style.minWidth = 'auto'
            table.style.maxWidth = 'none'
          } else {
            // 其他表格保持原有逻辑
            table.style.width = 'auto'
            table.style.minWidth = 'auto'
            // 触发重新布局
            table.offsetHeight
            // 重新设置宽度
            table.style.width = '100%'
            table.style.minWidth = '100%'
          }
        })

        // 计算实际内容高度和宽度
        const actualHeight = Math.max(
          element.scrollHeight,
          element.offsetHeight,
          element.clientHeight
        )

        // 对于门店排行榜，使用表格的实际宽度，而不是整个容器宽度
        const storeRankingTable = element.querySelector('.store-ranking-table .el-table')
        let actualWidth
        let isStoreRanking = false
        
        if (storeRankingTable) {
          // 门店排行榜：使用表格的实际宽度，不添加额外边距
          actualWidth = storeRankingTable.offsetWidth || storeRankingTable.clientWidth || storeRankingTable.scrollWidth
          isStoreRanking = true
        } else {
          // 其他情况：使用元素的实际渲染宽度
          actualWidth = element.offsetWidth || element.clientWidth
          
          // 对于其他表格，使用表格的实际宽度
          const widthCheckTables = element.querySelectorAll('.el-table')
          widthCheckTables.forEach(table => {
            const tableWidth = table.offsetWidth || table.clientWidth
            if (tableWidth > actualWidth) {
              actualWidth = tableWidth
            }
          })
          
          // 确保宽度不超过容器的实际宽度
          const containerWidth = (element.parentElement && element.parentElement.offsetWidth) || element.offsetWidth
          if (actualWidth > containerWidth) {
            actualWidth = containerWidth
          }
        }
        
        // 进一步限制宽度，避免截图过大
        const maxWidth = Math.min(actualWidth, window.innerWidth || 1200)
        // 只有门店排行榜除以2
        actualWidth = isStoreRanking ? maxWidth / 2 : maxWidth

        console.log('容器尺寸信息:', {
          scrollWidth: element.scrollWidth,
          scrollHeight: element.scrollHeight,
          offsetWidth: element.offsetWidth,
          offsetHeight: element.offsetHeight,
          clientWidth: element.clientWidth,
          clientHeight: element.clientHeight,
          actualHeight: actualHeight,
          actualWidth: actualWidth
        })

        // 对于门店排行榜，创建一个只包含表格的临时容器用于截图
        let screenshotElement = element
        let shouldRemoveTempContainer = false
        
        if (storeRankingTable) {
          // 创建临时容器，只包含表格
          const tempContainer = document.createElement('div')
          tempContainer.style.position = 'absolute'
          tempContainer.style.left = '-9999px'
          tempContainer.style.width = actualWidth + 'px'
          tempContainer.style.padding = '0'
          tempContainer.style.margin = '0'
          tempContainer.style.backgroundColor = '#ffffff'
          
          // 克隆表格容器
          const tableContainer = storeRankingTable.closest('.store-ranking-table')
          if (tableContainer) {
            const clonedContainer = tableContainer.cloneNode(true)
            // 确保克隆的容器宽度也是auto
            clonedContainer.style.width = 'auto'
            clonedContainer.style.minWidth = 'auto'
            clonedContainer.style.maxWidth = 'none'
            tempContainer.appendChild(clonedContainer)
            document.body.appendChild(tempContainer)
            screenshotElement = tempContainer
            shouldRemoveTempContainer = true
          }
        }

        // 配置截图选项
        const options = {
          allowTaint: true,
          useCORS: true,
          scale: 2,
          backgroundColor: '#ffffff',
          logging: true,
          imageTimeout: 30000,
          removeContainer: true,
          foreignObjectRendering: false,
          scrollX: 0,
          scrollY: 0,
          width: actualWidth,
          height: shouldRemoveTempContainer ? screenshotElement.scrollHeight : actualHeight,
          ignoreElements: (element) => {
            // 忽略可能影响截图的元素
            return element.classList.contains('el-loading-mask') || 
                   element.classList.contains('el-loading-spinner') ||
                   element.classList.contains('el-message') ||
                   element.classList.contains('el-dialog__wrapper') ||
                   element.classList.contains('el-tooltip__popper')
          },
          onclone: (clonedDoc) => {
            // 在克隆的文档中确保所有容器都能完整显示
            const clonedElement = clonedDoc.querySelector('.report-sections-container')
            if (clonedElement) {
              clonedElement.style.height = 'auto'
              clonedElement.style.overflow = 'visible'
              clonedElement.style.maxHeight = 'none'
              clonedElement.style.position = 'static'
              clonedElement.style.width = '100%'
              clonedElement.style.backgroundColor = '#ffffff'
            }

            // 确保克隆文档中所有元素背景色统一
            const allClonedElements = clonedDoc.querySelectorAll('*')
            allClonedElements.forEach(el => {
              // 处理有背景色的元素
              if (el.style.backgroundColor && el.style.backgroundColor !== 'transparent') {
                el.style.backgroundColor = '#ffffff'
              }
            })

            // 特别处理表格背景色和宽度
            const clonedTables = clonedDoc.querySelectorAll('.el-table')
            clonedTables.forEach(table => {
              table.style.backgroundColor = '#ffffff'
              table.style.width = '100%'
              table.style.minWidth = '100%'
              table.style.maxWidth = 'none'
              table.style.tableLayout = 'auto'
            })

            // 特别处理表格单元格背景色
            const clonedTableCells = clonedDoc.querySelectorAll('.el-table td')
            clonedTableCells.forEach(cell => {
              cell.style.backgroundColor = '#ffffff'
            })

            // 特别处理表格头部
            const clonedTableHeaders = clonedDoc.querySelectorAll('.el-table th')
            clonedTableHeaders.forEach(header => {
              header.style.backgroundColor = '#f8f9fa'
            })

            // 确保表格容器宽度足够
            const clonedTableContainers = clonedDoc.querySelectorAll('.store-ranking-table, .no-expansion-table, .store-table, .person-table')
            clonedTableContainers.forEach(container => {
              // 保持表格容器的原始宽度，避免被拉伸
              const originalWidth = container.offsetWidth || container.clientWidth || container.scrollWidth
              if (originalWidth) {
                container.style.width = originalWidth + 'px'
                container.style.minWidth = originalWidth + 'px'
                container.style.maxWidth = originalWidth + 'px'
              } else {
                container.style.width = '100%'
                container.style.minWidth = '100%'
                container.style.maxWidth = 'none'
              }
              container.style.overflow = 'visible'
            })
            
            // 对于门店排行榜表格，确保表格本身保持auto宽度
            const clonedStoreRankingTables = clonedDoc.querySelectorAll('.store-ranking-table .el-table')
            clonedStoreRankingTables.forEach(table => {
              table.style.width = 'auto'
              table.style.minWidth = 'auto'
              table.style.maxWidth = 'none'
            })
            
            // 确保所有报表区域完整显示
            const reportSections = clonedDoc.querySelectorAll('.report-section')
            reportSections.forEach(section => {
              section.style.height = 'auto'
              section.style.overflow = 'visible'
              section.style.maxHeight = 'none'
              section.style.display = 'block'
              section.style.visibility = 'visible'
              section.style.opacity = '1'
            })
            
            // 确保统计概览完整显示
            const statisticsOverview = clonedDoc.querySelector('.statistics-overview')
            if (statisticsOverview) {
              statisticsOverview.style.height = 'auto'
              statisticsOverview.style.overflow = 'visible'
              statisticsOverview.style.maxHeight = 'none'
              statisticsOverview.style.display = 'block'
              statisticsOverview.style.visibility = 'visible'
              statisticsOverview.style.opacity = '1'
              statisticsOverview.style.position = 'static'
            }
            
            // 确保统计卡片完整显示
            const statCards = clonedDoc.querySelectorAll('.stat-card')
            statCards.forEach(card => {
              card.style.height = 'auto'
              card.style.overflow = 'visible'
              card.style.maxHeight = 'none'
              card.style.display = 'flex'
              card.style.visibility = 'visible'
              card.style.opacity = '1'
              card.style.position = 'static'
            })
            
            // 确保栅格系统完整显示
            const elRows = clonedDoc.querySelectorAll('.el-row')
            elRows.forEach(row => {
              row.style.height = 'auto'
              row.style.overflow = 'visible'
              row.style.maxHeight = 'none'
            })
            
            const elCols = clonedDoc.querySelectorAll('.el-col')
            elCols.forEach(col => {
              col.style.height = 'auto'
              col.style.overflow = 'visible'
              col.style.maxHeight = 'none'
            })
            
            // 确保排行榜卡片完整显示
            const rankingSections = clonedDoc.querySelectorAll('.ranking-section')
            rankingSections.forEach(section => {
              section.style.height = 'auto'
              section.style.overflow = 'visible'
              section.style.maxHeight = 'none'
              section.style.display = 'block'
              section.style.visibility = 'visible'
              section.style.opacity = '1'
            })
            
            const rankingCards = clonedDoc.querySelectorAll('.ranking-card')
            rankingCards.forEach(card => {
              card.style.height = 'auto'
              card.style.overflow = 'visible'
              card.style.maxHeight = 'none'
              card.style.display = 'flex'
              card.style.visibility = 'visible'
              card.style.opacity = '1'
              card.style.position = 'static'
            })
            
            const rankingCardsContainer = clonedDoc.querySelectorAll('.ranking-cards')
            rankingCardsContainer.forEach(container => {
              container.style.display = 'flex'
              container.style.visibility = 'visible'
              container.style.opacity = '1'
              container.style.height = 'auto'
              container.style.overflow = 'visible'
            })
            
            // 确保瀑布流容器完整显示
            const waterfallContainer = clonedDoc.querySelector('.waterfall-container')
            if (waterfallContainer) {
              waterfallContainer.style.height = 'auto'
              waterfallContainer.style.overflow = 'visible'
              waterfallContainer.style.maxHeight = 'none'
              waterfallContainer.style.display = 'flex'
              waterfallContainer.style.flexWrap = 'wrap'
            }
            
            // 确保所有卡片完整显示
            const storeCards = clonedDoc.querySelectorAll('.store-card-waterfall')
            storeCards.forEach(card => {
              card.style.height = 'auto'
              card.style.overflow = 'visible'
              card.style.maxHeight = 'none'
              card.style.display = 'block'
            })

            // 确保所有团队和成员数据完整显示
            const teamCards = clonedDoc.querySelectorAll('.team-card')
            teamCards.forEach(card => {
              card.style.height = 'auto'
              card.style.overflow = 'visible'
              card.style.display = 'block'
            })

            // 确保表格完整显示
            const tables = clonedDoc.querySelectorAll('.el-table')
            tables.forEach(table => {
              table.style.height = 'auto'
              table.style.overflow = 'visible'
              table.style.maxHeight = 'none'
              table.style.width = '100%'
              table.style.minWidth = '100%'
              table.style.maxWidth = 'none'
              table.style.tableLayout = 'auto'
            })

            // 确保表格行完整显示
            const tableRows = clonedDoc.querySelectorAll('.el-table__row')
            tableRows.forEach(row => {
              row.style.height = 'auto'
              row.style.overflow = 'visible'
            })

            // 确保表格列完整显示
            const tableCols = clonedDoc.querySelectorAll('.el-table__column')
            tableCols.forEach(col => {
              col.style.width = 'auto'
              col.style.minWidth = 'auto'
              col.style.maxWidth = 'none'
            })

            // 确保表格主体完整显示
            const tableBody = clonedDoc.querySelectorAll('.el-table__body')
            tableBody.forEach(body => {
              body.style.width = '100%'
              body.style.minWidth = '100%'
              body.style.maxWidth = 'none'
              body.style.overflow = 'visible'
            })

            // 确保表格头部完整显示
            const tableHead = clonedDoc.querySelectorAll('.el-table__header')
            tableHead.forEach(head => {
              head.style.width = '100%'
              head.style.minWidth = '100%'
              head.style.maxWidth = 'none'
              head.style.overflow = 'visible'
            })

            // 确保表格包装器完整显示
            const tableWrapper = clonedDoc.querySelectorAll('.el-table__body-wrapper, .el-table__header-wrapper')
            tableWrapper.forEach(wrapper => {
              wrapper.style.width = '100%'
              wrapper.style.minWidth = '100%'
              wrapper.style.maxWidth = 'none'
              wrapper.style.overflow = 'visible'
            })
          }
        }

        console.log('开始生成截图，配置选项:', options)

        // 生成截图
        const canvas = await html2canvas.default(screenshotElement, options)
        
        console.log('截图生成完成，画布尺寸:', {
          width: canvas.width,
          height: canvas.height
        })
        
        // 清理临时容器
        if (shouldRemoveTempContainer && screenshotElement.parentElement) {
          screenshotElement.parentElement.removeChild(screenshotElement)
        }
        
        // 恢复原始样式
        element.style.height = originalStyles.height
        element.style.overflow = originalStyles.overflow
        element.style.maxHeight = originalStyles.maxHeight
        element.style.position = originalStyles.position
        
        // 恢复报表区域样式
        reportSections.forEach(section => {
          section.style.height = ''
          section.style.overflow = ''
          section.style.maxHeight = ''
        })
        
        // 转换为DataURL
        this.screenshotDataUrl = canvas.toDataURL('image/png', 1.0)
        
        // 显示预览对话框
        this.previewVisible = true
        
        this.$message.success('截图生成成功')
      } catch (error) {
        console.error('截图生成失败:', error)
        // 清理临时容器（如果存在）
        if (shouldRemoveTempContainer && screenshotElement && screenshotElement.parentElement) {
          screenshotElement.parentElement.removeChild(screenshotElement)
        }
        this.$message.error('截图生成失败: ' + error.message)
      } finally {
        this.screenshotLoading = false
      }
    },

    // 下载截图
    downloadScreenshot() {
      if (!this.screenshotDataUrl) {
        this.$message.error('没有可下载的图片')
        return
      }

      try {
        // 创建下载链接
        const link = document.createElement('a')
        link.download = `拓客活动报表_${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.png`
        link.href = this.screenshotDataUrl
        
        // 触发下载
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        
        this.$message.success('图片下载成功')
      } catch (error) {
        console.error('下载失败:', error)
        this.$message.error('下载失败，请重试')
      }
    },

    // 关闭预览
    closePreview() {
      this.previewVisible = false
      this.screenshotDataUrl = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 12px;
  // background-color: #f5f5f5;
  // height: 100vh;
  overflow-y: scroll;
  // box-sizing: border-box;
}

.page-header {
  margin-bottom: 12px;
  
  h2 {
    margin: 0;
    color: #303133;
    font-size: 20px;
    font-weight: 500;
  }
}

.filter-container {
  background: white;
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.report-section {
  background: white;
  border-radius: 6px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.section-header {
  background: #409EFF;
  color: white;
  padding: 10px 16px;
  
  h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
  }
}

.report-content {
  padding: 12px;
}

.no-data {
  text-align: center;
  color: #909399;
  padding: 20px 0;
  font-size: 14px;
}

// 统计概览样式
.statistics-overview {
  margin-bottom: 20px;
  
  .stat-card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    height: 100px;
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    
    .stat-icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16px;
      
      i {
        font-size: 24px;
        color: white;
      }
      
      &:nth-child(1) {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }
    }
    
    .stat-content {
      flex: 1;
      
      .stat-number {
        font-size: 28px;
        font-weight: bold;
        color: #303133;
        line-height: 1;
        margin-bottom: 4px;
      }
      
      .stat-label {
        font-size: 14px;
        color: #909399;
        line-height: 1;
      }
    }
    
    // 不同卡片的图标背景色
    &:nth-child(1) .stat-icon {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
    
    &:nth-child(2) .stat-icon {
      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }
    
    &:nth-child(3) .stat-icon {
      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }
    
    &:nth-child(4) .stat-icon {
      background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    }
  }
}

// 瀑布流容器
.waterfall-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}

// 团队数据样式 - 瀑布流版本
.store-card-waterfall {
  width: calc(25% - 9px); // 25%宽度减去gap的一半
  margin-bottom: 12px;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  overflow: hidden;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  
  // 响应式设计
  @media (max-width: 1200px) {
    width: calc(33.333% - 8px); // 3列
  }
  
  @media (max-width: 900px) {
    width: calc(50% - 6px); // 2列
  }
  
  @media (max-width: 600px) {
    width: 100%; // 1列
  }
}

// 原有的store-card样式保留，用于其他报表
.store-card {
  margin-bottom: 12px;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  overflow: hidden;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.store-header {
  background: #f8f9fa;
  padding: 8px 12px;
  border-bottom: 1px solid #e4e7ed;
}

.store-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  
  h4 {
    margin: 0;
    color: #303133;
    font-size: 14px;
    font-weight: 500;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.store-summary {
  display: flex;
  gap: 8px;
  font-size: 10px;
  flex-shrink: 0;
}

.summary-text {
  color: #606266;
  
  .summary-value {
    font-weight: 500;
    color: #303133;
    
    &.rate-excellent {
      color: #67C23A;
    }
    
    &.rate-good {
      color: #409EFF;
    }
    
    &.rate-normal {
      color: #E6A23C;
    }
    
    &.rate-poor {
      color: #F56C6C;
    }
  }
}

.teams-container {
  padding: 8px;
}

.team-card {
  margin-bottom: 8px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  overflow: hidden;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.team-header {
  background: #f0f2f5;
  padding: 6px 8px;
  border-bottom: 1px solid #e4e7ed;
  
  .team-name {
    font-weight: 500;
    color: #606266;
    font-size: 13px;
  }
}

.team-members {
  padding: 6px;
}

.member-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid #f0f2f5;
  
  &:last-child {
    border-bottom: none;
  }
}

.member-info {
  flex: 1;
  min-width: 0; // 防止内容溢出
  
  .member-name {
    font-weight: 500;
    color: #303133;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.member-stats {
  display: flex;
  gap: 8px;
  flex-shrink: 0; // 防止统计信息被压缩
  
  span {
    font-size: 10px;
    white-space: nowrap;
    
    &.target {
      color: #606266;
    }
    
    &.count {
      color: #409EFF;
      font-weight: 500;
    }
    
    &.rate {
      font-weight: 500;
      
      &.rate-excellent {
        color: #67C23A;
      }
      
      &.rate-good {
        color: #409EFF;
      }
      
      &.rate-normal {
        color: #E6A23C;
      }
      
      &.rate-poor {
        color: #F56C6C;
      }
    }
  }
}

// 表格样式
.store-table, .person-table {
  .el-table {
    border-radius: 4px;
    overflow: hidden;
    font-size: 12px;
  }
  
  .el-table th {
    padding: 8px 0;
    font-size: 12px;
  }
  
  .el-table td {
    padding: 6px 0;
    font-size: 12px;
  }
}

.progress-container {
  display: flex;
  align-items: center;
  gap: 6px;
}

.progress-bar {
  flex: 1;
  height: 6px;
  background: #f0f2f5;
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: #409EFF;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 11px;
  color: #606266;
  min-width: 35px;
  text-align: right;
}

.ranking {
  font-weight: 500;
  font-size: 12px;
  
  &.ranking-top {
    color: #F56C6C;
  }
  
  &.ranking-good {
    color: #E6A23C;
  }
  
  &.ranking-normal {
    color: #606266;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .app-container {
    padding: 8px;
  }
  
  .waterfall-container {
    gap: 8px;
  }
  
  .store-card-waterfall {
    width: 100% !important; // 移动端强制单列
  }
  
  .statistics-overview {
    .stat-card {
      height: 80px;
      padding: 16px;
      
      .stat-icon {
        width: 50px;
        height: 50px;
        margin-right: 12px;
        
        i {
          font-size: 20px;
        }
      }
      
      .stat-content {
        .stat-number {
          font-size: 24px;
        }
        
        .stat-label {
          font-size: 12px;
        }
      }
    }
  }
  
  .store-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .store-summary {
    gap: 6px;
    font-size: 9px;
  }
  
  .member-stats {
    gap: 4px;
    
    span {
      font-size: 9px;
    }
  }
  
  .progress-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  
  // 总门店排行榜响应式
  .store-ranking-summary {
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    
    .summary-item {
      justify-content: space-between;
      
      .summary-label {
        font-size: 13px;
      }
      
      .summary-value {
        font-size: 15px;
      }
    }
  }
  
  .store-ranking-table {
    .el-table {
      font-size: 12px;
    }
    
    .el-table th {
      padding: 8px 0;
      font-size: 12px;
    }
    
    .el-table td {
      padding: 6px 0;
      font-size: 12px;
    }
    
    .progress-container {
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
    }
    
    .progress-bar {
      height: 6px;
    }
    
    .progress-text {
      font-size: 11px;
      min-width: 35px;
    }
  }
}

// 报表内容容器样式
.report-sections-container {
  // 确保容器能完整显示所有内容
  min-height: 100vh;
  width: 100%;
}

// 选项卡容器样式
.tabs-container {
  background: white;
  border-radius: 6px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  
  .el-tabs__header {
    margin: 0;
    background: #f8f9fa;
    border-bottom: 1px solid #e4e7ed;
  }
  
  .el-tabs__nav-wrap {
    padding: 0 16px;
  }
  
  .el-tabs__item {
    font-weight: 500;
    color: #606266;
    
    &.is-active {
      color: #409EFF;
    }
  }
}

// 选项卡内容样式
.tab-content {
  padding: 16px;
  min-height: 400px;
  background: #ffffff; // 确保内容区域背景为纯白色
}

// 排行榜样式 - 商务高端版
.ranking-section {
  margin-bottom: 40px;
  background: #ffffff; // 使用纯白色背景，去掉渐变效果
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.04);
  
  &:last-child {
    margin-bottom: 0;
  }
}

.ranking-title {
  display: flex;
  align-items: center;
  margin: 0 0 28px 0;
  font-size: 22px;
  font-weight: 700;
  color: #1a202c;
  position: relative;
  text-align: center;
  justify-content: center;
  
  // &::before {
  //   content: '';
  //   position: absolute;
  //   top: 50%;
  //   left: 0;
  //   right: 0;
  //   height: 1px;
  //   background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
  //   z-index: 1;
  // }
  
  &::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 2px;
    z-index: 2;
  }
  
  i {
    margin-right: 12px;
    color: #667eea;
    font-size: 24px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  span {
    background: white;
    padding: 0 20px;
    position: relative;
    z-index: 3;
  }
}

.ranking-cards {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}

.ranking-card {
  flex: 1;
  min-width: 300px;
  max-width: 360px;
  background: white;
  border-radius: 20px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.06);
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, #e2e8f0, #e2e8f0);
    transition: all 0.4s ease;
  }
  
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  &:hover {
    transform: translateY(-12px) scale(1.03);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    
    &::after {
      opacity: 1;
    }
  }
  
  &.rank-1 {
    &::before {
      background: linear-gradient(90deg, #ffd700, #ffb347, #ffd700);
    }
    
    .rank-number {
      background: linear-gradient(135deg, #ffd700 0%, #ffb347 50%, #ff8c00 100%);
      color: white;
      box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
      border: 3px solid rgba(255, 215, 0, 0.3);
    }
    
    .rank-medal i {
      filter: drop-shadow(0 4px 8px rgba(255, 215, 0, 0.4));
    }
    
    .rank-name {
      color: #b8860b;
    }
  }
  
  &.rank-2 {
    &::before {
      background: linear-gradient(90deg, #c0c0c0, #d3d3d3, #c0c0c0);
    }
    
    .rank-number {
      background: linear-gradient(135deg, #c0c0c0 0%, #d3d3d3 50%, #a9a9a9 100%);
      color: white;
      box-shadow: 0 8px 25px rgba(192, 192, 192, 0.4);
      border: 3px solid rgba(192, 192, 192, 0.3);
    }
    
    .rank-medal i {
      filter: drop-shadow(0 4px 8px rgba(192, 192, 192, 0.4));
    }
    
    .rank-name {
      color: #708090;
    }
  }
  
  &.rank-3 {
    &::before {
      background: linear-gradient(90deg, #cd7f32, #daa520, #cd7f32);
    }
    
    .rank-number {
      background: linear-gradient(135deg, #cd7f32 0%, #daa520 50%, #b8860b 100%);
      color: white;
      box-shadow: 0 8px 25px rgba(205, 127, 50, 0.4);
      border: 3px solid rgba(205, 127, 50, 0.3);
    }
    
    .rank-medal i {
      filter: drop-shadow(0 4px 8px rgba(205, 127, 50, 0.4));
    }
    
    .rank-name {
      color: #8b4513;
    }
  }
}

.rank-number {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 24px;
  margin-bottom: 20px;
  flex-shrink: 0;
  transition: all 0.4s ease;
  position: relative;
  border: 3px solid transparent;
  
  &::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  &:hover::before {
    opacity: 1;
  }
}

.rank-content {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rank-name {
  font-size: 20px;
  font-weight: 700;
  color: #1a202c;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  max-width: 100%;
}

.rank-store {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  padding: 6px 12px;
  border-radius: 20px;
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, 0.05);
  max-width: 100%;
}

.rank-stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  
  .stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    
    .stat-label {
      font-size: 13px;
      color: #64748b;
      font-weight: 500;
    }
    
    .stat-value {
      font-size: 14px;
      font-weight: 600;
      
      &.target {
        color: #64748b;
      }
      
      &.completed {
        color: #3b82f6;
      }
      
      &.rate {
        &.rate-excellent {
          color: #10b981;
          background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.2));
          padding: 4px 8px;
          border-radius: 8px;
          border: 1px solid rgba(16, 185, 129, 0.3);
        }
        
        &.rate-good {
          color: #3b82f6;
          background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.2));
          padding: 4px 8px;
          border-radius: 8px;
          border: 1px solid rgba(59, 130, 246, 0.3);
        }
        
        &.rate-normal {
          color: #f59e0b;
          background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.2));
          padding: 4px 8px;
          border-radius: 8px;
          border: 1px solid rgba(245, 158, 11, 0.3);
        }
        
        &.rate-poor {
          color: #ef4444;
          background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.2));
          padding: 4px 8px;
          border-radius: 8px;
          border: 1px solid rgba(239, 68, 68, 0.3);
        }
      }
    }
  }
}

.rank-medal {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 28px;
  transition: all 0.4s ease;
  z-index: 10;
  
  &:hover {
    transform: scale(1.2) rotate(5deg);
  }
  
  i {
    &.el-icon-trophy {
      color: #ffd700;
    }
    
    &.el-icon-medal {
      color: #c0c0c0;
    }
    
    &.el-icon-medal-1 {
      color: #cd7f32;
    }
  }
}

// 个人排行榜特殊样式
.person-card {
  .rank-content {
    .rank-name {
      font-size: 22px;
      margin-bottom: 10px;
    }
    
    .rank-store {
      font-size: 13px;
      margin-bottom: 18px;
    }
  }
}

// 未拓客人员统计样式
.no-expansion-summary {
  margin-bottom: 16px;
  font-size: 14px;
  color: #606266;
}

// 总门店排行榜样式
.store-ranking-summary {
  display: flex;
  gap: 24px;
  margin-bottom: 20px;
  padding: 16px;
  background: #ffffff; // 使用纯白色背景
  border-radius: 8px;
  border: 1px solid #e4e7ed;
  flex-wrap: wrap;
  
  .summary-item {
    display: flex;
    align-items: center;
    gap: 8px;
    
    .summary-label {
      font-size: 14px;
      color: #606266;
      font-weight: 500;
    }
    
    .summary-value {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
      
      &.rate-excellent {
        color: #67C23A;
      }
      
      &.rate-good {
        color: #409EFF;
      }
      
      &.rate-normal {
        color: #E6A23C;
      }
      
      &.rate-poor {
        color: #F56C6C;
      }
    }
  }
}

.store-ranking-table {
  .el-table {
    border: 1px solid #e4e7ed;
    font-size: 12px;
    background: #ffffff;
    border-collapse: separate;
    border-spacing: 0;
  }
  
  .el-table th {
    background: #92d04f !important;
    color: #000 !important;
    font-weight: 500;
    padding: 6px 4px;
    font-size: 12px;
    border-bottom: 1px solid #7ab83a;
    border-right: 1px solid #7ab83a;
    line-height: 1.4;
    
    &:last-child {
      border-right: none;
    }
  }
  
  // 确保表头背景色正确应用
  ::v-deep .el-table__header-wrapper {
    .el-table__header {
      th {
        background-color: #92d04f !important;
        color: #000 !important;
        padding: 6px 4px;
        font-size: 12px;
        line-height: 1.4;
      }
    }
  }
  
  .el-table td {
    padding: 6px 4px;
    font-size: 12px;
    background: #ffffff;
    border-bottom: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
    color: #303133;
    line-height: 1.4;
    
    &:last-child {
      border-right: none;
    }
  }
  
  .el-table__body tr:hover > td {
    background-color: #ffffff !important;
  }
  
  .el-table__body tr:last-child td {
    border-bottom: none;
  }
  
  .ranking-number {
    font-weight: 600;
    font-size: 12px;
    
    &.ranking-top {
      color: #F56C6C;
    }
    
    &.ranking-good {
      color: #E6A23C;
    }
    
    &.ranking-normal {
      color: #606266;
    }
  }
  
  .progress-container {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .progress-bar {
    flex: 1;
    height: 8px;
    background: #f0f2f5;
    border-radius: 4px;
    overflow: hidden;
  }
  
  .progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
    background: linear-gradient(90deg, #409EFF, #66b1ff);
  }
  
  .progress-text {
    font-size: 13px;
    font-weight: 600;
    min-width: 40px;
    text-align: right;
    color: #409EFF;
  }
  
  .ranking {
    font-weight: 600;
    font-size: 12px;
    
    &.ranking-top {
      color: #F56C6C;
    }
    
    &.ranking-good {
      color: #E6A23C;
    }
    
    &.ranking-normal {
      color: #606266;
    }
  }
  
  // 总计行样式
  ::v-deep .el-table__body-wrapper {
    .el-table__body {
      tbody tr:last-child {
        background-color: #92d04f !important;
        
        td {
          background-color: #92d04f !important;
          border-bottom: none !important;
          padding: 6px 4px;
          font-size: 12px;
          line-height: 1.4;
          
          .total-label {
            font-weight: 600;
            color: #000;
            font-size: 12px;
          }
          
          .total-value {
            font-weight: 600;
            color: #000;
            font-size: 12px;
          }
        }
      }
    }
  }
}

// 未拓客人员表格样式
.no-expansion-table {
  .zero-count {
    color: #F56C6C;
    font-weight: 500;
  }
  
  .zero-progress {
    background: #F56C6C !important;
  }
}

// 到店情况统计概览样式
.store-visit-summary {
  display: flex;
  gap: 24px;
  margin-bottom: 20px;
  padding: 16px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
  flex-wrap: wrap;
  
  .summary-item {
    display: flex;
    align-items: center;
    gap: 8px;
    
    .summary-label {
      font-size: 14px;
      color: #606266;
      font-weight: 500;
    }
    
    .summary-value {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }
  }
}

// 到店情况表格样式
.store-visit-table {
  .el-table {
    border-radius: 8px;
    overflow: hidden;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background: #ffffff;
  }
  
  .el-table th {
    background: #f8f9fa;
    color: #606266;
    font-weight: 600;
    padding: 12px 0;
    font-size: 14px;
  }
  
  .el-table td {
    padding: 10px 0;
    font-size: 14px;
    background: #ffffff;
  }
  
  // 确保斑马纹效果正常显示
  .el-table--striped .el-table__body tr.el-table__row--striped td {
    background: #fafafa;
  }
  
  // 门店名称链接样式
  .store-name-link {
    color: #409EFF;
    cursor: pointer;
    text-decoration: none;
    font-weight: 500;
    
    &:hover {
      color: #66b1ff;
      text-decoration: underline;
    }
  }
}

// 门店详情弹窗样式
.store-detail-content {
  .el-table {
    border-radius: 6px;
    overflow: hidden;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    background: #ffffff;
    border: 1px solid #dcdfe6;
  }
  
  .el-table th {
    background: #f8f9fa;
    color: #303133;
    font-weight: 600;
    padding: 14px 12px;
    font-size: 14px;
    text-align: center;
    border-bottom: 1px solid #dcdfe6;
    border-right: 1px solid #dcdfe6;
    
    &:last-child {
      border-right: none;
    }
  }
  
  .el-table td {
    padding: 12px 12px;
    font-size: 14px;
    background: #ffffff;
    text-align: center;
    border-bottom: 1px solid #ebeef5;
    border-right: 1px solid #ebeef5;
    vertical-align: middle;
    
    &:last-child {
      border-right: none;
    }
  }
  
  // 确保斑马纹效果正常显示
  .el-table--striped .el-table__body tr.el-table__row--striped td {
    background: #fafafa;
  }
  
  // 表格行悬停效果
  .el-table__body tr:hover > td {
    background-color: #f5f7fa !important;
  }
}

// 分页组件样式
.pagination-container {
  margin-top: 16px;
  text-align: center;
  
  .el-pagination {
    justify-content: center;
  }
}

// 截图预览样式
.screenshot-preview {
  text-align: center;
  background: #f5f5f5;
  border-radius: 4px;
  padding: 10px;
  
  img {
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

// 响应式设计 - 排行榜
@media (max-width: 1200px) {
  .ranking-section {
    padding: 24px;
  }
  
  .ranking-cards {
    gap: 20px;
  }
  
  .ranking-card {
    min-width: 280px;
    max-width: 320px;
  }
}

@media (max-width: 768px) {
  .ranking-section {
    margin-bottom: 32px;
    padding: 20px;
    border-radius: 16px;
  }
  
  .ranking-title {
    font-size: 18px;
    margin-bottom: 20px;
    
    i {
      font-size: 20px;
    }
  }
  
  .ranking-cards {
    flex-direction: column;
    gap: 16px;
  }
  
  .ranking-card {
    min-width: auto;
    max-width: none;
    padding: 24px 20px;
    border-radius: 16px;
    
    &:hover {
      transform: translateY(-6px) scale(1.02);
    }
  }
  
  .rank-number {
    width: 60px;
    height: 60px;
    font-size: 20px;
    margin-bottom: 16px;
  }
  
  .rank-name {
    font-size: 18px;
  }
  
  .rank-store {
    font-size: 12px;
    padding: 4px 8px;
    margin-bottom: 14px;
  }
  
  .rank-stats {
    gap: 10px;
    
    .stat-row {
      padding: 6px 10px;
      
      .stat-label {
        font-size: 12px;
      }
      
      .stat-value {
        font-size: 13px;
        
        &.rate {
          padding: 3px 6px;
        }
      }
    }
  }
  
  .rank-medal {
    top: 16px;
    right: 16px;
    font-size: 24px;
  }
}

@media (max-width: 480px) {
  .ranking-section {
    padding: 16px;
    margin-bottom: 24px;
  }
  
  .ranking-title {
    font-size: 16px;
    margin-bottom: 16px;
    
    i {
      font-size: 18px;
    }
  }
  
  .ranking-card {
    padding: 20px 16px;
    border-radius: 12px;
    
    &:hover {
      transform: translateY(-4px) scale(1.01);
    }
  }
  
  .rank-number {
    width: 50px;
    height: 50px;
    font-size: 18px;
    margin-bottom: 12px;
  }
  
  .rank-name {
    font-size: 16px;
    margin-bottom: 6px;
  }
  
  .rank-store {
    font-size: 11px;
    padding: 3px 6px;
    margin-bottom: 12px;
  }
  
  .rank-stats {
    gap: 8px;
    
    .stat-row {
      padding: 5px 8px;
      
      .stat-label {
        font-size: 11px;
      }
      
      .stat-value {
        font-size: 12px;
        
        &.rate {
          padding: 2px 4px;
        }
      }
    }
  }
  
  .rank-medal {
    top: 12px;
    right: 12px;
    font-size: 20px;
  }
  
  // 到店情况统计概览响应式
  .store-visit-summary {
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    
    .summary-item {
      justify-content: space-between;
      
      .summary-label {
        font-size: 13px;
      }
      
      .summary-value {
        font-size: 15px;
      }
    }
  }
  
  // 到店情况表格响应式
  .store-visit-table {
    .el-table {
      font-size: 12px;
    }
    
    .el-table th {
      padding: 8px 0;
      font-size: 12px;
    }
    
    .el-table td {
      padding: 6px 0;
      font-size: 12px;
    }
    
    .store-name-link {
      font-size: 12px;
    }
  }
  
  // 门店详情弹窗响应式
  .store-detail-content {
    .el-table {
      font-size: 12px;
    }
    
    .el-table th {
      padding: 8px 0;
      font-size: 12px;
    }
    
    .el-table td {
      padding: 6px 0;
      font-size: 12px;
    }
  }
}
</style>