<template>
  <div ref="rankings">
    <!-- 倒计时 -->
    <div :style="styleData.countdownBg">
      <div :style="styleData.countdownText" style="display: flex; align-items: center;">
        <span :style="styleData.countdownTitle">{{ countDownText }}</span>
        <van-count-down v-if="basicDataRule && countDownTime" :time="countDownTime - new Date().getTime()" format="DD 天 HH 时 mm 分 ss 秒">
          <template #default="timeData">
            <span :style="styleData.countdownItem">
              {{ timeData.days >= 10 ? timeData.days : "0" + timeData.days }}
            </span>
            <span :style="styleData.countdownColon">天</span>
            <span :style="styleData.countdownItem">
              {{ timeData.hours >= 10 ? timeData.hours : "0" + timeData.hours }}
            </span>
            <span :style="styleData.countdownColon">时</span>
            <span :style="styleData.countdownItem">
              {{ timeData.minutes >= 10 ? timeData.minutes : "0" + timeData.minutes }}
            </span>
            <span :style="styleData.countdownColon">分</span>
            <span :style="styleData.countdownItem">
              {{ timeData.seconds >= 10 ? timeData.seconds : "0" + timeData.seconds }}
            </span>
            <span :style="styleData.countdownColon">秒</span>
          </template>
        </van-count-down>
      </div>
    </div>

    <!-- 奖品预览 -->
    <div v-if="prizeList && prizeList.length > 0" :style="styleData.prizePreviewBg">
      <!-- 奖品数量 <=3 时平铺展示 -->
      <div :style="styleData.prizeList" v-if="prizeList.length <= 3">
        <div v-for="(item, index) in prizeList" :key="index" :style="styleData.prizeItem">
          <div :style="styleData.prizeRankWrap">
            <div :style="styleData.prizeRank">{{ getRankName(index) }}({{item.allNum}}份)</div>
          </div>
          <div :style="styleData.prizeImg">
            <!-- <img :src="item.showImg"/> -->
            <van-image style="width: 85%;height: 85%;" :src="item.showImg" @click="previewImage(item.showImg)" />
          </div>
          <div :style="styleData.prizeInfo">
            <div v-if="item.prizeName.length <= 7" :style="styleData.prizeName">{{ item.prizeName }}</div>
            <van-notice-bar v-else :style="styleData.prizeName" :speed="20" scrollable :text="item.prizeName" />
          </div>
        </div>
      </div>
      <!-- 奖品数量 >3 时，轮播图展示 -->
      <div v-else-if="prizeList.length > 3" ref="prizeSwiperRef" :style="styleData.swiperContainer || {}">
        <div class="swiper-wrapper" :style="styleData.swiperWrapper || {}">
          <div class="swiper-slide" v-for="(item, index) in prizeList" :key="index" :style="styleData.swiperSlide || {}">
            <div :style="styleData.prizeItem || {}">
              <div :style="styleData.prizeRankWrap || {}">
                <div :style="styleData.prizeRank || {}">{{ getRankName(index) }}({{item.allNum}}份)</div>
              </div>
              <div :style="styleData.prizeImg || {}">
                <!-- <img :src="item.showImg"/> -->
                <van-image style="width: 85%;height: 85%;" :src="item.showImg" @click="previewImage(item.showImg)" />
              </div>
              <div :style="styleData.prizeInfo || {}">
                <div v-if="item.prizeName.length <= 7" :style="styleData.prizeName || {}">{{ item.prizeName }}</div>
                <van-notice-bar v-else :style="styleData.prizeName || {}" :speed="20" scrollable :text="item.prizeName" />
              </div>
            </div>
          </div>
        </div>
        <!-- 左右切换按钮 -->
        <div :style="styleData.swiperBtnWrap || {}">
          <div :style="styleData.swiperBtnPrev || {}" @click="prevSlide"></div>
          <div :style="styleData.swiperBtnNext || {}" @click="nextSlide"></div>
        </div>
      </div>
      <div v-if="basicDataRule && basicDataRule.settlementStartTime" :style="styleData.bulletinTime">
        榜单公示时间：{{ formatTime(basicDataRule.settlementStartTime) }} - {{ formatTime(basicDataRule.settlementEndTime) }}
      </div>
    </div>

    <div v-if="receiveStatus == 1" :style="styleData.risingSignBtn2" @click="conditionClick">
      <span v-if="datas.registrationtext" :style="styleData.registrationText">已报名</span>
    </div>
    <div v-if="!receiveStatus" :style="styleData.risingSignBtn1" @click="conditionClick(0)">
      <span v-if="datas.registrationtext" :style="styleData.registrationText">报名</span>
    </div>
    <div :style="styleData.textMsg">
      榜单每2小时更新一次，持续刷新中～～</br>
      奖励随排名动态变化，最终结果以榜单公示后为准
    </div>
    <!-- 活动榜单模块 -->
    <div :style="styleData.rankingsBg" v-show="rankInfo.taskRankUserStepsDtoList">
      <!-- 结算期 -->
      <div :style="styleData.settlementBtn" v-if="rankInfo.rankStatus == 0 && (new Date().getTime() >= rankInfo.settlementStartTime-60*60*1000 )"></div>
      <!-- 已领取 -->
      <div :style="styleData.hasStyleDiv" v-else-if="rankInfo.status == 1"></div>
      <!-- 可领取 -->
      <div :style="styleData.mainStyleDiv" v-else-if="rankInfo.status == 0" @click="drawprize()"></div>
      <div :style="styleData.rankingWrapStyle">
        <!-- 左侧 Tab 切换 -->
        <div :style="styleData.rankingTabsStyle">
          <div v-for="(tab, index) in rankInfo.taskRankUserStepsDtoList" :key="index" :style="currentTabIndex === index ? { ...(styleData.rankingTabStyle || {}), ...(styleData.rankingTabActiveStyle || {}) } : (styleData.rankingTabStyle || {})" @click="currentTabIndex = index">
            <span :style="currentTabIndex === index ? { ...(styleData.rankingTabTextStyle || {}), ...(styleData.rankingTabTextActiveStyle || {}) } : (styleData.rankingTabTextStyle || {})">{{ tab.stepsName }}</span>
          </div>
        </div>
        <!-- 右侧数据展示区域 -->
        <div :style="styleData.rankingContentStyle">
          <!-- 总榜单 -->
          <div v-if="currentTabIndex === 0" :style="styleData.rankingListWrapStyle">
            <div style="width: 100%;height: 70%">
              <!-- {{ currentTabIndex }}~ -->
              <!-- 表头 -->
              <div :style="styleData.rankingListHeaderStyle">
                <span :style="styleData.rankingListHeaderItemStyle">排名</span>
                <span :style="styleData.rankingListHeaderItemStyle">用户</span>
                <span :style="styleData.rankingListHeaderItemStyle">活动金额</span>
                <span v-if="showExpectedRewardColumn" :style="styleData.rankingListHeaderItemStyle">预计奖励</span>
              </div>
              <!-- 数据列表 -->
              <div :style="styleData.allListBox">
                <div v-if="!hasCurrentTabRankData()" :style="styleData.emptyRankTextStyle">
                  暂无满足条件用户～
                </div>
                <template v-else>
                  <div v-for="(item, index) in rankInfo.taskRankUserStepsDtoList[currentTabIndex].taskRankUserStepsUserDtoList" :key="index" :style="styleData.rankingListRowStyle">
                    <span :style="styleData.rankingListCellStyle">
                      <div v-if="item.ranking == 1" :style="styleData.rankingImg1Style"></div>
                      <div v-else-if="item.ranking == 2" :style="styleData.rankingImg2Style"></div>
                      <div v-else-if="item.ranking == 3" :style="styleData.rankingImg3Style"></div>
                      <span v-else>{{ item.ranking }}</span>
                    </span>
                    <span :style="styleData.rankingListCellStyle">
                      <img :src="item.userImg" alt="" style="border-radius: 50%;width: .3rem;height: .3rem;">
                      {{ item.nickName }}
                    </span>
                    <span :style="styleData.rankingListCellStyle">{{ item.orderPrice }}元</span>
                    <span v-if="showExpectedRewardColumn" :style="styleData.rankingListCellStyle">
                      <img v-if="item.prizeImg" :src="item.prizeImg" alt="" style="border-radius: 50%;width: .3rem;height: .3rem;">
                      <span v-else>无奖品</span>
                    </span>
                  </div>
                </template>
              </div>
            </div>
            <div style="width: 100%;height: 30%;" :style="styleData.myRankStyle">
              <div :style="styleData.myRankTop"></div>
              <div :style="styleData.rankingListMyStyle">
                <span :style="styleData.rankingListCellStyle">
                  <span>{{ rankInfo.ranking ? rankInfo.ranking : '未上榜' }}</span>
                </span>
                <span :style="styleData.rankingListCellStyle">
                  <img :src="rankInfo.myData.userImg" alt="" style="border-radius: 50%;width: .3rem;height: .3rem;">
                  {{ rankInfo.myData.nickName }}
                </span>
                <span :style="styleData.rankingListCellStyle">
                  {{ rankInfo.myData.orderPrice }}元
                </span>
                <span v-if="showExpectedRewardColumn" :style="styleData.rankingListCellStyle">
                  <img v-if="rankInfo.myData.prizeImg" :src="rankInfo.myData.prizeImg" alt="" style="border-radius: 50%;width: .3rem;height: .3rem;">
                  <span v-else>无奖品</span>
                </span>
              </div>
              <div :style="styleData.rankingTextStyle">满足入榜门槛，订单确认收货后金额进入榜单</div>
            </div>
          </div>
          <!-- 其他榜单（商品榜单/品牌榜单） -->
          <div v-else :style="styleData.rankingListWrapStyle">
            <!-- 顶部区域：左右布局 -->
            <div :style="styleData.rankingTopStyle">
              <img :src="rankInfo.taskRankUserStepsDtoList[currentTabIndex].prizeImg" :style="styleData.rankingTopImgStyle" />
              <div :style="styleData.rankingTopRightStyle">
                <div :style="styleData.rankingTopRightTopStyle">
                  <span :style="styleData.rankingTopStepsStyle">{{ rankInfo.taskRankUserStepsDtoList[currentTabIndex].stepsName }}</span>
                  <span :style="styleData.rankingTopStepsStyle">{{ rankInfo.taskRankUserStepsDtoList[currentTabIndex].allNum }}人</span>
                </div>
                <div :style="styleData.rankingTopRightBottomStyle" v-if="rankInfo.taskRankUserStepsDtoList[currentTabIndex].maxLimitNum > 0">获奖条件：活动金额≥{{ rankInfo.taskRankUserStepsDtoList[currentTabIndex].maxLimitNum }}</div>
              </div>
            </div>
            <div :style="styleData.rankingMsgStyle">
              *榜单数据随活动动态更新，排名因用户下单而变化，奖品获奖名单以活动结算结果为准
            </div>
            <!-- 榜单列表 -->
            <div :style="styleData.rankingListHeaderStyle">
              <span :style="styleData.rankingListHeaderItemStyle">排名</span>
              <span :style="styleData.rankingListHeaderItemStyle">用户</span>
              <span :style="styleData.rankingListHeaderItemStyle">活动金额</span>
            </div>
            <div :style="styleData.otherListBox">
              <div v-if="!hasCurrentTabRankData()" :style="styleData.emptyRankTextStyle">
                暂无满足条件用户～
              </div>
              <template v-else>
                <div v-for="(item, index) in rankInfo.taskRankUserStepsDtoList[currentTabIndex].taskRankUserStepsUserDtoList" :key="index" :style="styleData.rankingListRowStyle">
                  <span :style="styleData.rankingListCellStyle">
                    <div v-if="item.ranking == 1" :style="styleData.rankingImg1Style"></div>
                    <div v-else-if="item.ranking == 2" :style="styleData.rankingImg2Style"></div>
                    <div v-else-if="item.ranking == 3" :style="styleData.rankingImg3Style"></div>
                    <span v-else>{{ item.ranking }}</span>
                  </span>
                  <span :style="styleData.rankingListCellStyle">
                    <img :src="item.userImg" alt="" :style="styleData.rankingUserImgStyle">
                    {{ item.nickName }}
                  </span>
                  <span :style="styleData.rankingListCellStyle">{{ item.orderPrice }}元</span>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 温馨提示模块 -->
    <div :style="styleData.warmTipsBg">
      <div :style="styleData.warmTipsContentStyle">
        <div v-for="(item, index) in warmTipsList" :key="index">
          {{ index + 1 }}.{{ item }}
        </div>
        <div :style="styleData.warmTipsRuleText">*具体规则详见《活动规则》</div>
      </div>
    </div>
  </div>
</template>

<script>
  import Vue from "vue";
  import { CountDown, ImagePreview } from "vant";
  import { Image as VanImage } from 'vant';
  Vue.use(CountDown);
  Vue.use(VanImage);
  Vue.use(ImagePreview);
  import Swiper from "swiper";
  import "swiper/swiper.min.css";
  import apis1 from '../../../util/apis1.js';
  let { orderCourtesy, orderCourtesyPrizeList, orderCourtesySignApi, getRankInfoNewApi, getMemderGetPrize } = apis1;
  import bus from '../../../util/bus.js';
  import { AddressPopComService,PrizeResultPopComService,NoPrizeResultPopComService } from "../../../util/hdzxtcomCreate";

  export default {
    props: ['datas', 'styleData', 'keyData', 'isTemplate', 'templateData', 'modifyContent', 'isWebClick', 'defaultDatas'],
    data() {
      return {
        basicDataRule: {},
        prizeList: [],
        countDownTime: '',
        countDownText: '',
        prizeSwiper: null,
        receiveStatus: 0,
        opportunityType: 0,
        currentTabIndex: 0,
        rankInfo: {
          myData: {
            nickName: '',
            orderPrice: '',
            prizeImg: '',
          },
          taskRankUserStepsDtoList: [
            {
              taskRankUserStepsUserDtoList: []
            }
          ]
        },
        isPlayType: false,
      };
    },
    created() {
      this.initData();
    },
    methods: {
      getPrizeStepName(position) {
        const toChineseNumber = (num) => {
          const chineseNums = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];

          if (!num || num < 1) return '一';
          if (num < 10) return chineseNums[num];
          if (num === 10) return '十';
          if (num < 20) return `十${chineseNums[num % 10]}`;

          const tens = Math.floor(num / 10);
          const units = num % 10;

          return `${chineseNums[tens]}十${units ? chineseNums[units] : ''}`;
        };

        return `${toChineseNumber(Number(position))}等奖`;
      },
      initData() {
        if (this.isTemplate) {
          // 模板预览模式
          if (this.templateData){
            this.countDownText = "距活动开始倒计时："
            this.countDownTime = new Date().getTime()
            this.prizeList = this.templateData.rank.draw.prizeList
            setTimeout(() => {
              if (this.prizeList.length > 3 && this.$refs.prizeSwiperRef) {
                this.initSwiper();
              }
            }, 100);
            this.basicDataRule = {
              settlementStartTime:this.templateData.rank.settlementStartTime,
              settlementEndTime:this.templateData.rank.settlementEndTime,
            }
            this.rankInfo = {
              myData: {
                nickName: 'xxx',
                orderPrice: '0',
                prizeImg: '',
              },
              taskRankUserStepsDtoList:[{
                steps:0,
                stepsName:'总榜单',
                taskRankUserStepsUserDtoList:[]
              }]
            }
            this.templateData.rank.draw.prizeList.forEach(item => {
              item.allNum = item.totalPrizeNum
              item.maxLimitNum = item.amountLimit
              item.prizeImg = item.showImg
              item.stepsName = this.getPrizeStepName(item.position)
            })
            this.rankInfo.taskRankUserStepsDtoList = this.rankInfo.taskRankUserStepsDtoList.concat(this.templateData.rank.draw.prizeList)
            this.rankInfo.shareStartTime = this.templateData.rank.shareStartTime
            this.rankInfo.shareEndTime = this.templateData.rank.shareEndTime
            this.rankInfo.settlementStartTime = this.templateData.rank.settlementStartTime
            this.rankInfo.oneOrderSill = this.templateData.orderCourtesy.rules.oneOrderSill
            this.rankInfo.moreOrderSill = this.templateData.orderCourtesy.rules.moreOrderSill
          }else{
            this.countDownText = "距活动开始倒计时："
            this.countDownTime = new Date().getTime()
            this.basicDataRule = {
              settlementStartTime:new Date().getTime(),
              settlementEndTime:new Date().getTime() + 60 * 60 * 1000,
            }
            this.prizeList = [{
              allNum:10,
              prizeName:'5积分',
              showImg:'//img10.360buyimg.com/imgzone/jfs/t1/172629/8/10529/9649/60a4cb50Edc2ee40a/b53b1246de5f2089.png',
              prizeImg:'//img10.360buyimg.com/imgzone/jfs/t1/172629/8/10529/9649/60a4cb50Edc2ee40a/b53b1246de5f2089.png',
              stock:10,
              position:1,
              stepsName:'一等奖',
              maxLimitNum:30
            },{
              allNum:10,
              prizeName:'3积分',
              showImg:'//img10.360buyimg.com/imgzone/jfs/t1/172629/8/10529/9649/60a4cb50Edc2ee40a/b53b1246de5f2089.png',
              prizeImg:'//img10.360buyimg.com/imgzone/jfs/t1/172629/8/10529/9649/60a4cb50Edc2ee40a/b53b1246de5f2089.png',
              stock:3,
              position:2,
              stepsName:'二等奖',
              maxLimitNum:20
            }]
            this.rankInfo = {
              myData: {
                nickName: 'xxx',
                orderPrice: '0',
                prizeImg: '',
              },
              taskRankUserStepsDtoList:[{
                steps:0,
                stepsName:'总榜单',
                taskRankUserStepsUserDtoList:[]
              }]
            }
            this.rankInfo.taskRankUserStepsDtoList = this.rankInfo.taskRankUserStepsDtoList.concat(this.prizeList)
            this.rankInfo.shareStartTime = new Date().getTime(),
            this.rankInfo.shareEndTime = new Date().getTime(),
            this.rankInfo.settlementStartTime = new Date().getTime(),
            this.rankInfo.oneOrderSill = 10
            this.rankInfo.moreOrderSill = 20
          }
        } else {
          this.orderCourtesyFun();
          this.orderCourtesyPrizeListFun();
          this.getRankInfoFun()
        }
      },
      getRankInfoFun() {
        getRankInfoNewApi(res => {
          this.rankInfo = res.data
        })
      },
      orderCourtesyPrizeListFun() {
        let activityId = sessionStorage.getItem('activityId');
        orderCourtesyPrizeList(activityId, prizesData => {
          let data = prizesData.data || [];
          this.prizeList = data;
          // 等待 DOM 和数据更新完成后再初始化 Swiper
          setTimeout(() => {
            if (this.prizeList.length > 3 && this.$refs.prizeSwiperRef) {
              this.initSwiper();
            }
          }, 100);
        });
      },
      orderCourtesyFun() {
        orderCourtesy(res => {
          sessionStorage.setItem("priceTypeFlag", res.data.priceType);
          sessionStorage.setItem('opportunityType', res.data.opportunityType)
          sessionStorage.setItem('settlementStartTime', res.data.settlementStartTime)
          bus.$emit('assignGoodsFlag', res.data.assignGoodsFlag);
          this.basicDataRule = res.data;
          this.receiveStatus = res.data.receiveStatus
          this.opportunityType = res.data.opportunityType
          this.setCountDown();
        });
      },
      formatTime(timestamp) {
        if (!timestamp) return '';
        const date = new Date(timestamp);
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        const seconds = String(date.getSeconds()).padStart(2, '0');
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      },
      getRankName(index) {
        const ranks = ['一等奖', '二等奖', '三等奖', '四等奖', '五等奖', '六等奖', '七等奖', '八等奖', '九等奖', '十等奖'];
        return ranks[index] || `第${index + 1}名`;
      },
      hasCurrentTabRankData() {
        const currentTab = this.rankInfo.taskRankUserStepsDtoList && this.rankInfo.taskRankUserStepsDtoList[this.currentTabIndex];
        const currentTabUsers = currentTab && currentTab.taskRankUserStepsUserDtoList;
        return Array.isArray(currentTabUsers) && currentTabUsers.length > 0;
      },
      initSwiper() {
        if (this.prizeList.length <= 3) return;

        // 销毁旧的 Swiper 实例
        if (this.prizeSwiper) {
          try {
            this.prizeSwiper.destroy(false, true);
          } catch (e) {
            console.log('Swiper destroy error:', e);
          }
          this.prizeSwiper = null;
        }

        this.$nextTick(() => {
          // 使用 ref 获取容器元素
          const container = this.$refs.prizeSwiperRef;
          if (!container) return;

          this.prizeSwiper = new Swiper(container, {
            slidesPerView: 3,
            spaceBetween: 10,
            loop: true,
            // pagination: {
            //   el: container.querySelector('.swiper-pagination'),
            //   clickable: true,
            // },
            autoplay: false,
          });
        });
      },
      prevSlide() {
        if (this.prizeSwiper) {
          this.prizeSwiper.slidePrev();
        }
      },
      nextSlide() {
        if (this.prizeSwiper) {
          this.prizeSwiper.slideNext();
        }
      },
      setCountDown() {
        const now = Date.now();
        if (now < this.basicDataRule.activityStartTime) {
          this.countDownTime = this.basicDataRule.activityStartTime;
          this.countDownText = '距活动开始倒计时：';
        } else if (now >= this.basicDataRule.activityStartTime && now < this.basicDataRule.orderEndTime) {
          this.countDownTime = this.basicDataRule.orderEndTime;
          this.countDownText = '距下单结束倒计时：';
        } else {
          this.countDownTime = this.basicDataRule.activityEndTime;
          this.countDownText = '距活动结束倒计时：';
        }
      },
      // 预览图片
      previewImage(img) {
        console.log(this.isWebClick)
        if (this.isTemplate == true || this.isWebClick){
          return
        }
        ImagePreview({
          images: [img],
          showIndex: false,
          loop: false,
          startPosition: 0
        });
      },
      conditionClick(type) {
        if (this.isTemplate || this.isWebClick) {
          // this.$toast('活动预览，仅供参考');
          return;
        }
        if (sessionStorage.getItem('actStatus') == 1) {
          this.$toast('活动尚未开始');
          return;
        }
        if (type == 0) {
          if (this.opportunityType == 1) {
            var datas = {
              isEditAddress: true,
              isAlLookAddress: false,
            };
            AddressPopComService.create(datas, this.styleData, (submit) => {
              AddressPopComService.close();
              if (submit) {
                this.receiveStatus = 1
                orderCourtesySignApi(res => { })
              } else {
                this.$toast("报名前请先填写收货信息，方便中奖后奖品的发放。");
              }
            });
          } else {
            this.receiveStatus = 1
            orderCourtesySignApi(res => { })
          }
          return
        }
        this.$toast("您已报名成功～");
      },
      drawprize() {
        if (this.isPlayType) {
          return;
        }
        this.isPlayType = true;
        sessionStorage.setItem('prizeInfoId', this.rankInfo.prizeInfoId)
        getMemderGetPrize(this.rankInfo.prizeInfoId, (receiveData => {
          if (receiveData.resp_code == 0) {
            this.isPlayType = false;
            if (receiveData.data.result == true) {
              var obj = {
                datas: {},
                keyData: {
                  prizeUrl: "showImg",
                  prizeName: "prizeName",
                  prizeType: "prizeType",
                  priceInfo: "priceInfo",
                  discountType: "discountType",
                  couponType: "couponType",
                },
              };
              obj.datas = receiveData.data;
              PrizeResultPopComService.create(
                obj,
                receiveData.data,
                this.styleData,
                (submit) => {
                  console.log(submit);
                  PrizeResultPopComService.close();
                  this.initData()
                  // this.publicData.$emit('pizereFresh', true)
                }
              );
            } else {
              NoPrizeResultPopComService.create(
                this.styleData,
                (submit) => {
                  NoPrizeResultPopComService.close();
                }
              );
              this.initData();
            }
          } else {
            this.isPlayType = false;
            this.$toast("奖品已领完，下次早点哦");
          }
        }))
      }

    },

    computed: {
      tabStyle() {
        const base = this.styleData.rankingTabStyle || {};
        const active = this.styleData.rankingTabActiveStyle || {};
        return this.currentTabIndex === this.index ? { ...base, ...active } : base;
      },
      tabTextStyle() {
        const base = this.styleData.rankingTabTextStyle || {};
        const active = this.styleData.rankingTabTextActiveStyle || {};
        return this.currentTabIndex === this.index ? { ...base, ...active } : base;
      },
      warmTipsList() {
        const settlementTime = this.rankInfo.settlementStartTime
          ? this.formatTime(this.rankInfo.settlementStartTime - 60 * 60 * 1000)
          : '';

        return [
          `下单时间：${this.formatTime(this.rankInfo.shareStartTime)}至${this.formatTime(this.rankInfo.shareEndTime)}`,
          `结算时间：${settlementTime}（须在此前完成确认收货）`,
          '退款说明：退款可能导致丧失活动参与资格，无法获得奖品',
          (this.rankInfo.oneOrderSill && this.rankInfo.oneOrderSill > 0) ? `单笔订单满${this.rankInfo.oneOrderSill}元才可以参与活动` : '',
          (this.rankInfo.moreOrderSill && this.rankInfo.moreOrderSill > 0) ? `累计订单满${this.rankInfo.moreOrderSill}元并确认收货后,方可进入榜单` : '',
          '每位用户仅可获得1份奖品'
        ].filter(Boolean);
      },
      showExpectedRewardColumn() {
        return this.rankInfo.newAct != 0;
      },
    },
  }
</script>
