<!--
 * @Date: 2025-01-09 00:00:00
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-10-29 13:24:24
 * @FilePath: /lls_program/src/components/RankingCard.vue
 * @Description: 排行榜卡片组件
-->
<template>
  <view class="ranking-card bg-blue-500 bg-opacity-50">
    <!-- 卡片头部 -->
    <view class="card-header" style="margin: 40rpx;">
      <view class="card-title flex items-center">
        <IconFont size="20" name="https://cdn.ipadbiz.cn/lls_prog/icon/%E5%A5%96%E6%9D%AF.png" />
        <text class="ml-2">家庭步数总榜</text>
      </view>
      <view class="view-more text-sm" @tap="handleViewMore">查看更多</view>
    </view>

    <!-- 顶部导航 -->
    <view class="nav-tabs" style="margin: 40rpx;">
      <!-- 滑动指示器 -->
      <view
        class="tab-indicator"
        :class="{
          'indicator-shanghai': activeTab === 'shanghai',
          'indicator-region': activeTab !== 'shanghai' && activeTab !== 'support',
          'indicator-support': activeTab === 'support'
        }"
      ></view>
      <view
          v-for="region in availableRegions.slice(0, 3)"
          :key="region.value"
          class="tab-item"
          :class="{ active: activeTab === region.value }"
          @click="switchTab(region.value)"
        >
          {{ getTabDisplayName(region) }}
        </view>
    </view>

    <!-- 排行榜内容 -->
    <view class="rank-content" :class="{ 'content-switching': isContentSwitching }" style="margin: 40rpx;">
      <!-- 排行榜日期 -->
      <view class="rank-date relative">
        <view v-if="activeTab !== 'support'" class="flex items-center justify-center"><text class="mr-2">截止昨日</text>{{ currentDate }}<text class="ml-2">排名</text><IconFont name="ask" size="14" class="ml-2" @click="handleRankAskClick"></IconFont></view>
        <!-- <view v-if="activeTab === 'support'" class="absolute font-bold text-white bg-orange-500 top-0 rounded-full px-4 py-1" style="right: 45rpx; top: -5rpx; font-size: 23rpx;" @tap="joinOrganization">助力码</view> -->
        <view v-if="activeTab === 'support'" class="flex items-center justify-center">
          <text class="font-bold text-white bg-orange-500 top-0 rounded-full px-4 py-1" style="font-size: 23rpx;" @tap="joinOrganization">助力码</text>
        </view>
      </view>

      <!-- <view v-if="activeTab === 'shanghai'" class="relative mb-2 text-white">
        <view class="flex items-center justify-center">
          <text class="mr-2" style="font-size: 28rpx;">有</text>
          <NumberRoll
            ref="numberRollRef"
            :target-value="currentTotalFamilySum"
            :digit-count="5"
            :duration="1500"
            :digit-delay="150"
          />
          <text class="ml-2" style="font-size: 28rpx;"><text class="mr-1 text-base">+</text>组家庭参与排名</text>
        </view>
      </view> -->

      <!-- 助力榜空状态提示 -->
      <view v-if="activeTab === 'support' && (!supportData || !supportData.families || supportData.families.length === 0)" class="support-empty-state">
        <view class="empty-image">
          <image :src="supportImg" class="empty-img"  />
        </view>
        <view class="empty-text">
          <view class="empty-line">家庭的二、三代小辈</view>
          <view class="empty-line">输入助力码，来为大家长助力</view>
        </view>
      </view>

      <!-- 前三名展示 -->
      <view v-else-if="activeTab !== 'support'" class="top-three">
        <!-- 第二名 -->
        <view v-if="topRanks[1]" class="rank-item second">
          <view class="crown">
            <image src="https://cdn.ipadbiz.cn/lls_prog/images/crow-silver.png" class="w-5 h-5" mode="aspectFill" />
          </view>
          <view class="avatar">
            <image :src="activeTab === 'support' ? (topRanks[1]?.avatar_url || defaultAvatar) : (topRanks[1]?.avatar_url || defaultAvatar)" class="avatar-img" mode="aspectFill" />
          </view>
          <view class="family-name">{{ activeTab === 'support' ? topRanks[1]?.name : topRanks[1]?.name }}</view>
          <view class="leader-name">{{ activeTab === 'support' ? `${topRanks[1]?.created_by_nickname}个家庭` : `大家长：${topRanks[1]?.created_by_nickname}` }}</view>
          <view class="rank-number">
            <view class="rank-num">2</view>
            <view class="steps-in-rank">{{ activeTab === 'support' ? formatSupportSteps(topRanks[1]?.step) : formatSteps(topRanks[1]?.step) }}</view>
          </view>
        </view>

        <!-- 第一名 -->
        <view v-if="topRanks[0]" class="rank-item first">
          <view class="crown">
            <image src="https://cdn.ipadbiz.cn/lls_prog/images/crow-gold.png" class="w-5 h-5" mode="aspectFill" />
          </view>
          <view class="avatar">
            <image :src="activeTab === 'support' ? (topRanks[0]?.avatar_url || defaultAvatar) : (topRanks[0]?.avatar_url || defaultAvatar)" class="avatar-img" mode="aspectFill" />
          </view>
          <view class="family-name">{{ topRanks[0]?.name }}</view>
          <view class="leader-name">{{ activeTab === 'support' ? `${topRanks[0]?.created_by_nickname}个家庭` : `大家长：${topRanks[0]?.created_by_nickname}` }}</view>
          <view class="rank-number">
            <view class="rank-num">1</view>
            <view class="steps-in-rank">{{ activeTab === 'support' ? formatSupportSteps(topRanks[0]?.step) : formatSteps(topRanks[0]?.step) }}</view>
          </view>
        </view>

        <!-- 第三名 -->
        <view v-if="topRanks[2]" class="rank-item third">
          <view class="crown">
            <image src="https://cdn.ipadbiz.cn/lls_prog/images/crow-bronze.png" class="w-5 h-5" mode="aspectFill" />
          </view>
          <view class="avatar">
            <image :src="activeTab === 'support' ? (topRanks[2]?.avatar_url || defaultAvatar) : (topRanks[2]?.avatar_url || defaultAvatar)" class="avatar-img" mode="aspectFill" />
          </view>
          <view class="family-name">{{ topRanks[2]?.name }}</view>
          <view class="leader-name">{{ activeTab === 'support' ? `${topRanks[2]?.created_by_nickname}个家庭` : `大家长：${topRanks[2]?.created_by_nickname}` }}</view>
          <view class="rank-number">
            <view class="rank-num">3</view>
            <view class="steps-in-rank">{{ activeTab === 'support' ? formatSupportSteps(topRanks[2]?.step) : formatSteps(topRanks[2]?.step) }}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 隐藏的弹幕组件，在页面加载时就开始滚动 -->
    <!-- <view class="danmu-section" :style="{ visibility: activeTab === 'support' ? 'visible' : 'hidden', position: activeTab === 'support' ? 'static' : 'absolute', top: activeTab === 'support' ? 'auto' : '-9999px' }">
      <NativeDanmuComponent
        :container-height="700"
        :show-controls="true"
        :track-count="3"
        @danmu-click="handleDanmuClick"
        @danmu-hover="handleDanmuHover"
        ref="danmuRef"
      />
    </view> -->

    <!-- 可滚动家庭简介列表组件 -->
    <view v-if="activeTab === 'support'" class="scrollable-family-section mt-1" style="padding: 0 24rpx 34rpx;">
      <ScrollableFamilyList
        :family-data="familyDanmus"
        :extra-placeholder="0"
        height="600rpx"
      />
    </view>

    <!-- 我的排名卡片 -->
    <!-- 特殊写法 因为直接写一个排名卡片排名数字有被截断问题 -->
    <view v-if="myRank && topRanks.length > 0 && activeTab !== 'support'" class="my-rank-section" style="margin: 40rpx;">
      <view class="my-rank-content">
        <view class="my-rank-left">
          <view class="my-rank-number">
            {{ myRank?.isNotRanked ? '-' : (myRank?.rank > 99 ? '99+' : myRank?.rank) }}
          </view>
          <view class="my-avatar">
            <image :src="myRank.avatar_url || defaultAvatar" class="my-avatar-img" mode="aspectFill" />
          </view>
          <view class="my-family-info">
            <view class="my-family-name">{{ myRank?.name }}</view>
            <view class="my-leader-name">{{ activeTab === 'support' ? `${myRank?.created_by_nickname}个家庭` : `大家长：${myRank?.created_by_nickname}` }}</view>
          </view>
        </view>
        <view class="my-rank-right">
          <view class="my-steps">{{ activeTab === 'support' ? formatSupportSteps(myRank?.step) : formatStepsForList(myRank?.step) }}</view>
        </view>
      </view>
    </view>
    <view v-if="myRank && !topRanks.length && activeTab !== 'support'" class="my-rank-section" style="margin: 40rpx;">
      <view class="my-rank-content">
        <view class="my-rank-left">
          <view class="my-rank-number">
            {{ myRank?.isNotRanked ? '-' : (myRank?.rank > 99 ? '99+' : myRank?.rank) }}
          </view>
          <view class="my-avatar">
            <image :src="myRank?.avatar_url || defaultAvatar" class="my-avatar-img" mode="aspectFill" />
          </view>
          <view class="my-family-info">
            <view class="my-family-name">{{ myRank?.name }}</view>
            <view class="my-leader-name">{{ activeTab === 'support' ? `${myRank?.created_by_nickname}个家庭` : `大家长：${myRank?.created_by_nickname}` }}</view>
          </view>
        </view>
        <view class="my-rank-right">
          <view class="my-steps">{{ activeTab === 'support' ? formatSupportSteps(myRank?.step) : formatStepsForList(myRank?.step) }}</view>
        </view>
      </view>
    </view>

    <!-- 步数排行榜须知对话框 -->
    <nut-dialog
        v-model:visible="showRankTipDialog"
        title="温馨提示"
    >
        <template #default>
            <view class="text-gray-700 leading-loose text-sm text-left">为确保公平，排行榜将根据步数被系统成功记录和收集的日期进行统计，而非用户实际行走的日期。</view>
        </template>
        <template #footer>
            <nut-button
                @click="showRankTipDialog = false"
                type="primary"
                size="normal"
                :color="THEME_COLORS.PRIMARY"
                block
            >
                我知道了
            </nut-button>
        </template>
    </nut-dialog>
  </view>
</template>

<script setup>
import { ref, computed, onMounted, watch, nextTick } from 'vue'
import Taro from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro';
// import NumberRoll from './NumberRoll.vue'
// import NativeDanmuComponent from '@/components/NativeDanmuComponent.vue'
import ScrollableFamilyList from '@/components/ScrollableFamilyList.vue'
// 默认头像
const defaultAvatar = 'https://cdn.ipadbiz.cn/lls_prog/images/%E5%85%A8%E5%AE%B6%E7%A6%8F3_%E5%89%AF%E6%9C%AC.jpg?imageMogr2/strip/quality/60'
// 助力榜图片
const supportImg = 'https://cdn.ipadbiz.cn/lls_prog/images/support_img_1.png'
// 导入接口
import { getStepLeaderboardAPI } from '@/api/points'
// 导入主题颜色
import { THEME_COLORS } from '@/utils/config';

// 区域信息
import { SHANGHAI_REGION as shanghaiRegion } from '@/utils/config'

const shanghaiRegionOptions = computed(() => {
  return shanghaiRegion.map(item => ({
    text: item.text,
    value: String(item.value)
  }))
})

// 定义props
const props = defineProps({
  onViewMore: {
    type: Function,
    default: () => {}
  }
})

// 当前激活的tab
const activeTab = ref('shanghai')

// 内容切换状态
const isContentSwitching = ref(false)

// 排行榜数据
const leaderboardData = ref(null)

// 助力榜数据
const supportData = ref(null)

const joinOrganization = () => {
  Taro.navigateTo({
    url: '/pages/JoinOrganization/index'
  })
  // 恢复默认选中状态
  setTimeout(() => {
    activeTab.value = 'shanghai'
  }, 500);
}

// 加载状态
const loading = ref(false)

// 排行榜日期
const currentDate = ref('')

// 当前总家庭数
const currentTotalFamilySum = ref(0);

// 数字滚动组件引用
const numberRollRef = ref(null)

// 数字滚动触发状态
const hasTriggeredNumberRoll = ref(false)

/**
 * 触发数字滚动动画
 */
const triggerNumberRoll = () => {
  if (numberRollRef.value && numberRollRef.value.start) {
    hasTriggeredNumberRoll.value = true
    numberRollRef.value.start()
  }
}

/**
 * 重置数字滚动状态
 */
const resetNumberRoll = () => {
  hasTriggeredNumberRoll.value = false
  if (numberRollRef.value && numberRollRef.value.reset) {
    numberRollRef.value.reset()
  }
}

/**
 * 切换tab
 * @param {string} tab - tab名称
 */
const switchTab = async (tab) => {
  if (activeTab.value === tab) return

  // 开始切换动画
  isContentSwitching.value = true

  // 延迟切换内容，让淡出动画先执行
  setTimeout(async () => {
    activeTab.value = tab

    // 重新加载排行榜数据
    await loadLeaderboardData(false)

    // 数据加载完成后触发数字滚动动画
    setTimeout(() => {
      // 先重置数字滚动状态
      resetNumberRoll()
      // 延迟一点再触发滚动
      setTimeout(() => {
        triggerNumberRoll()
      }, 100)
    }, 300)

    // 内容切换后，结束切换状态，开始淡入动画
    setTimeout(() => {
      isContentSwitching.value = false
    }, 50)
  }, 200)
}

// 家庭弹幕数据
const familyDanmus = ref([])

/**
 * 加载排行榜数据
 * @param {boolean} isInitialLoad - 是否为初始加载，避免无限递归
 */
const loadLeaderboardData = async (isInitialLoad = false) => {
  try {
    loading.value = true
    const params = {}

    // 根据activeTab设置type参数
    if (activeTab.value === 'shanghai') {
      params.type = 'shanghai_family'
    } else if (activeTab.value === 'support') {
      params.type = 'institution'
    } else {
      params.type = 'county_family'
    }

    const response = await getStepLeaderboardAPI(params)
    if (response.code) {
      if (activeTab.value === 'support') {
        supportData.value = response.data
      } else {
        leaderboardData.value = response.data
      }
      // 设置当前日期
      currentDate.value = response.data.yesterday
      // 设置总家庭数
      currentTotalFamilySum.value = response.data.family_count || 0;
      // 家庭弹幕数据处理
      if (response.data?.bullet_families) {
        familyDanmus.value = response.data.bullet_families.map(family => ({
          id: family.id,
          familyName: family.name,
          familyIntro: family.note,
          avatar: family.avatar_url || defaultAvatar
        }))
      }
    }
  } catch (error) {
    console.error('获取排行榜数据失败:', error)
  } finally {
    loading.value = false
  }
}

/**
 * 计算当前区域的中文名称
 */
const currentRegionName = computed(() => {
  if (activeTab.value === 'shanghai') {
    return '上海市'
  }
  const region = shanghaiRegionOptions.value.find(item => item.value === activeTab.value)
  return region ? region.text : '黄浦区'
})

/**
 * 计算可用的区域选项
 */
const availableRegions = computed(() => {
  // 固定显示：上海榜、地区榜、助力榜
  const regions = [
    { text: '上海市', value: 'shanghai' },
    { text: '地区', value: 'region' },
    { text: '助力', value: 'support' }
  ]

  // 如果有用户区县信息，将地区榜的value设置为用户区县
  const currentFamilyCounty = leaderboardData.value?.current_family?.county
  if (currentFamilyCounty) {
    const userCounty = String(currentFamilyCounty)
    const userRegion = shanghaiRegionOptions.value.find(item => item.value === userCounty)
    if (userRegion) {
      regions[1] = { text: userRegion.text, value: userCounty }
    }
  }

  return regions
})

/**
 * 获取标签页显示名称
 * @param {object} region - 区域对象
 * @returns {string} 显示名称
 */
const getTabDisplayName = (region) => {
  if (region.value === 'shanghai') {
    return '上海榜'
  } else if (region.value === 'support') {
    return '助力墙'
  } else {
    // 直接显示区域名称，如"黄浦区"、"杨浦区"等
    return region.text
  }
}

/**
 * 格式化步数显示
 * @param {number} steps - 步数
 * @returns {string} 格式化后的步数
 */
const formatSteps = (steps) => {
  return steps ? steps.toLocaleString() : '0'
}

/**
 * 格式化步数显示（用于列表显示，使用千位分隔符格式）
 * @param {number} steps - 步数
 * @returns {string} 格式化后的步数
 */
const formatStepsForList = (steps) => {
  return steps ? steps.toLocaleString() : '0'
}

/**
 * 格式化助力榜步数显示（超过10000显示为万+格式）
 * @param {number} steps - 步数
 * @returns {string} 格式化后的步数
 */
const formatSupportSteps = (steps) => {
  if (!steps) return '0'
  if (steps >= 10000) {
    const wan = (steps / 10000).toFixed(1)
    return `${wan}万+`
  }
  return steps.toLocaleString()
}

/**
 * 处理查看更多点击事件
 */
const handleViewMore = () => {
  if (props.onViewMore) {
    props.onViewMore();
    // 恢复默认选中状态
    setTimeout(() => {
      activeTab.value = 'shanghai'
    }, 500);
  }
}

/**
 * 处理排行榜须知点击事件
 */
const showRankTipDialog = ref(false)
const handleRankAskClick = () => {
  showRankTipDialog.value = true
}

// 计算前三名数据
const topRanks = computed(() => {
  if (activeTab.value === 'support') {
    // 助力榜数据
    if (!supportData.value || !supportData.value.families) {
      return []
    }
    return supportData.value.families.slice(0, 3)
  }

  // 家庭排行榜数据
  if (!leaderboardData.value || !leaderboardData.value.families) {
    return []
  }
  return leaderboardData.value.families.slice(0, 3)
})

// 计算我的排名信息
const myRank = computed(() => {
  if (activeTab.value === 'support') {
    // 助力榜我的单位信息
    if (!supportData.value || !supportData.value.current_family) {
      return null
    }

    const currentInstitution = supportData.value.current_family
    return {
      ...currentInstitution,
      name: currentInstitution.name,
      avatar_url: currentInstitution.avatar_url,
      step: currentInstitution.step,
      rank: currentInstitution.rank
    }
  }

  // 家庭排行榜我的排名信息
  if (!leaderboardData.value || !leaderboardData.value.current_family) {
    return null
  }

  const currentFamily = leaderboardData.value.current_family

  // 如果没有排名信息，返回未上榜状态
  if (!currentFamily.rank || currentFamily.rank === 0) {
    return {
      ...currentFamily,
      rank: 0,
      status: '未上榜',
      isNotRanked: true
    }
  }

  return {
    ...currentFamily,
    status: currentFamily.rank > 100 ? '未上榜' : '已上榜',
    isNotRanked: false
  }
})

/**
 * 刷新排行榜数据
 */
const refreshData = async () => {
  await loadLeaderboardData(true)
}


/**
 * 弹幕组件相关
 */
const danmuRef = ref(null)

// 处理弹幕点击事件
const handleDanmuClick = (familyData) => {
  console.log('弹幕点击:', familyData)
  // Taro.showToast({
  //   title: `点击了${familyData.familyName}`,
  //   icon: 'none',
  //   duration: 2000
  // })
}

// 处理弹幕悬停事件
const handleDanmuHover = (familyData) => {
  console.log('弹幕悬停:', familyData)
}

/**
 * 页面初始化
 */
onMounted(async () => {
  // 直接加载排行榜数据，使用current_county参数获取当前家庭所在区县信息
  await loadLeaderboardData(true)
})

// 暴露刷新方法给父组件
defineExpose({
  refreshData,
  startNumberRoll: () => {
    if (numberRollRef.value) {
      numberRollRef.value.start()
    }
  },
  resetNumberRoll: () => {
    if (numberRollRef.value) {
      numberRollRef.value.reset()
    }
  }
})
</script>

<style lang="less">
.ranking-card {
  // background: linear-gradient(180deg, var(--primary-color) 0%, var(--primary-color) 100%);
  // background: var(--primary-color);
  border-radius: 20rpx;
  // padding: 40rpx;
  margin: 30rpx;
  margin-bottom: 0;
  position: relative;
  overflow: hidden;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;

    .card-title {
      color: white;
      font-size: 32rpx;
      font-weight: 600;
    }

    .view-more {
      color: rgba(255, 255, 255, 0.8);
      // font-size: 24rpx;
      padding: 8rpx 16rpx;
      // border: 1rpx solid rgba(255, 255, 255, 0.3);
      // border-radius: 20rpx;
      transition: all 0.3s ease;

      &:hover {
        background: rgba(255, 255, 255, 0.1);
        color: white;
      }
    }
  }

  .nav-tabs {
    display: flex;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 60rpx;
    padding: 8rpx;
    margin-bottom: 40rpx;
    position: relative;
    overflow: hidden;

    .tab-indicator {
      position: absolute;
      top: 8rpx;
      left: 8rpx;
      width: calc(33.33% - 8rpx);
      height: calc(100% - 16rpx);
      background: rgba(255, 255, 255, 1);
      border-radius: 52rpx;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
      z-index: 1;

      &.indicator-shanghai {
        transform: translateX(0%);
      }

      &.indicator-region {
        transform: translateX(100%);
      }

      &.indicator-support {
        transform: translateX(200%);
      }
    }

    .tab-item {
      flex: 1;
      padding: 20rpx 0;
      text-align: center;
      border-radius: 52rpx;
      color: rgba(255, 255, 255, 0.8);
      font-size: 28rpx;
      font-weight: 500;
      transition: all 0.3s ease;
      position: relative;
      z-index: 2;
      cursor: pointer;

      &.active {
        color: var(--primary-color);
        font-weight: 600;
        transform: scale(1.02);
      }

      &:hover {
        color: rgba(255, 255, 255, 1);
      }
    }
  }

  .rank-content {
    transition: all 0.3s ease;
    transform: translateY(0);
    opacity: 1;

    &.content-switching {
      opacity: 0.3;
      // transform: translateY(-20rpx);
    }

    .rank-date {
      font-size: 28rpx;
      color: rgba(255, 255, 255, 0.8);
      text-align: center;
      margin-top: 40rpx;
      margin-bottom: 10rpx;
    }
  }

  .top-three {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    // margin-bottom: 40rpx;
    // height: 280rpx;
    gap: -20rpx;

    .rank-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

      .crown {
        font-size: 30rpx;
        // margin-bottom: 8rpx;

        &.crown-gold {
          filter: grayscale(0.3) brightness(1.1);
        }

        &.crown-silver {
          filter: hue-rotate(20deg) brightness(1.2);
        }

        &.crown-bronze {
          filter: hue-rotate(10deg) brightness(0.9);
        }
      }

      .avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        overflow: hidden;
        border: 4rpx solid rgba(255, 255, 255, 0.8);
        margin-bottom: 12rpx;

        .avatar-img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .family-name {
        color: white;
        font-size: 25rpx;
        font-weight: 600;
        margin-bottom: 6rpx;
        text-align: center;
        max-width: 120rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
        line-height: 1.2;
        max-height: 60rpx;
      }

      .leader-name {
        color: rgba(255, 255, 255, 0.8);
        font-size: 20rpx;
        margin-bottom: 12rpx;
        text-align: center;
        max-width: 140rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
        line-height: 1.2;
        max-height: 45rpx;
      }

      .rank-number {
        width: 100rpx;
        height: 120rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color) 100%);
        border-radius: 16rpx 16rpx 0 0;
        box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.2);

        .rank-num {
          font-size: 32rpx;
          font-weight: bold;
          color: white;
          margin-bottom: 8rpx;
        }

        .steps-in-rank {
          font-size: 32rpx;
          font-weight: 600;
          color: white;
          text-align: center;
          line-height: 1.2;
        }
      }

      &.second {
        order: 1;
        margin-top: 40rpx;
        margin-right: -10rpx;
        z-index: 2;

        .avatar {
          box-shadow: 0 0 10rpx rgba(192, 192, 192, 0.4);
        }

        .rank-number {
          width: 180rpx;
          height: 110rpx;
          background: linear-gradient(135deg, #C0C0C0 0%, #A0A0A0 100%);
        }
      }

      &.first {
        order: 2;
        z-index: 3;

        .avatar {
          width: 100rpx;
          height: 100rpx;
          border-color: #FFD700;
          box-shadow: 0 0 15rpx rgba(255, 215, 0, 0.5);
        }

        .rank-number {
          width: 180rpx;
          height: 140rpx;
          background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
        }
      }

      &.third {
        order: 3;
        margin-top: 40rpx;
        margin-left: -10rpx;
        z-index: 1;

        .avatar {
          box-shadow: 0 0 10rpx rgba(205, 127, 50, 0.4);
        }

        .rank-number {
          width: 180rpx;
          height: 100rpx;
          background: linear-gradient(135deg, #CD7F32 0%, #B8860B 100%);
        }
      }
    }
  }

  .support-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80rpx 40rpx;
    padding-top: 0;
    text-align: center;

    .empty-image {

      .empty-img {
        width: 400rpx;
        height: 400rpx;
      }
    }

    .empty-text {
      .empty-line {
        color: rgba(255, 255, 255, 0.9);
        font-size: 28rpx;
        line-height: 1.5;
        margin-bottom: 8rpx;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }

  .my-rank-section {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16rpx;
    padding: 20rpx 24rpx;
    backdrop-filter: blur(10px);
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);

    .my-rank-content {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .my-rank-left {
        display: flex;
        align-items: center;
        flex: 1;

        .my-rank-number {
          width: 48rpx;
          height: 48rpx;
          background: var(--primary-color);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20rpx;
          font-weight: bold;
          color: white;
          margin-right: 20rpx;
        }

        .my-avatar {
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
          overflow: hidden;
          margin-right: 20rpx;

          .my-avatar-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .my-family-info {
          flex: 1;

          .my-family-name {
            font-size: 24rpx;
            font-weight: 600;
            color: #333;
            margin-bottom: 6rpx;
            max-width: 200rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .my-leader-name {
            font-size: 20rpx;
            color: #666;
            max-width: 200rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }

      .my-rank-right {
        text-align: right;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .my-steps {
          font-size: 26rpx;
          font-weight: bold;
          color: var(--primary-color);
        }

        .rank-status {
          font-size: 20rpx;
          color: #999;
        }
      }
    }
  }
}
</style>