<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-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 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>
        </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>
  </div>
</template>

<script>
import { getEventList, getTeamData, getStoreData, getPersonData } from '@/api/lqTkjlb'

export default {
  name: 'TkjlbReport',
  data() {
    return {
      queryParams: {
        eventId: ''
      },
      eventList: [],
      teamData: [],
      storeData: [],
      personData: [],
      eventLoading: false,
      teamLoading: false,
      storeLoading: false,
      personLoading: false,
      screenshotLoading: false,
      screenshotDataUrl: '',
      previewVisible: false,
      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)
    },
    // 个人前三名
    topPersonData() {
      return this.personData.slice(0, 3)
    },
    // 未拓客人员（完成数量为0）
    noExpansionData() {
      return this.personData.filter(person => person.CompletedTarget === 0)
    }
  },
  created() {
    this.getEventList()
    // 添加测试数据，确保页面正常显示
    // this.addTestData()
  },
  methods: {
    // 获取活动列表
    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()
    },
    
    // 重置查询
    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 = []
      }
    },

    // 选项卡切换
    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
      }
    },

    // 计算完成率
    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')
    },

    // 计算门店总目标
    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
    },

    // 添加测试数据
    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'
        })

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

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

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

        // 配置截图选项
        const options = {
          allowTaint: true,
          useCORS: true,
          scale: 1.0, // 降低缩放比例提高兼容性
          backgroundColor: '#ffffff',
          logging: true, // 开启日志便于调试
          imageTimeout: 30000,
          removeContainer: true,
          foreignObjectRendering: false, // 关闭foreignObject渲染提高兼容性
          scrollX: 0,
          scrollY: 0,
          width: element.scrollWidth,
          height: actualHeight,
          windowWidth: element.scrollWidth,
          windowHeight: 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%'
            }
            
            // 确保所有报表区域完整显示
            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 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'
            })

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

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

        // 生成截图
        const canvas = await html2canvas.default(element, options)
        
        console.log('截图生成完成，画布尺寸:', {
          width: canvas.width,
          height: canvas.height
        })
        
        // 恢复原始样式
        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)
        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;
  min-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;
  }
}

// 报表内容容器样式
.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;
}

// 排行榜样式 - 商务高端版
.ranking-section {
  margin-bottom: 40px;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  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-table {
  .zero-count {
    color: #F56C6C;
    font-weight: 500;
  }
  
  .zero-progress {
    background: #F56C6C !important;
  }
}

// 截图预览样式
.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;
  }
}
</style>
