<template>
  <view class="rank-rules"
    :style="{ background: themeStore.theme.promo.rank.rulesBgColor, color: themeStore.theme.promo.rank.tabColor }">
    <view class="rank-rules-title">Activity Award:</view>
    <view class="rank-rules-table" :style="{ background: themeStore.theme.promo.rank.historyBgColor }">
      <view class="rank-rules-table-item rank-rules-table-item-bg" :style="{
        background: themeStore.theme.promo.rank.ruleHeaderBgColor
      }">
        <view class="rank-rules-table-item1">{{
          $t("promo.public.rank")
        }}</view>
        <view class="rank-rules-table-item2">{{
          $t("promo.leaderboard.dailyList")
        }}</view>
        <view class="rank-rules-table-item3">{{
          $t("promo.leaderboard.weeklyList")
        }}</view>
        <view class="rank-rules-table-item4">{{
          $t("promo.leaderboard.monthlyList")
        }}</view>
      </view>
      <template v-for="item in promoStore.betrankList">
        <template v-if="item.rank == 1">
          <view :key="item.rank" class="rank-rules-table-item rank-rules-table-item-bg1" :style="{
            marginTop: '6rpx',
            background: themeStore.theme.promo.rank.firstRowBgColor
          }">
            <view class="rank-rules-table-item1">
              <theme-image src="@/static/rank/pm1.png" class="rank-image"></theme-image>
            </view>
            <view class="rank-rules-table-item2">{{ formatNum(item.day * 100) + '%' }}</view>
            <view class="rank-rules-table-item3">{{ formatNum(item.week * 100) + '%' }}</view>
            <view class="rank-rules-table-item4">{{ formatNum(item.month * 100) + '%' }}</view>
          </view>
        </template>
        <template v-else-if="item.rank == 2">
          <view :key="item.rank" class="rank-rules-table-item rank-rules-table-item-bg1" :style="{
            background: themeStore.theme.promo.rank.secondRowBgColor
          }">
            <view class="rank-rules-table-item1">
              <theme-image src="@/static/rank/pm2.png" class="rank-image"></theme-image>
            </view>
            <view class="rank-rules-table-item2">{{ formatNum(item.day * 100) + '%' }}</view>
            <view class="rank-rules-table-item3">{{ formatNum(item.week * 100) + '%' }}</view>
            <view class="rank-rules-table-item4">{{ formatNum(item.month * 100) + '%' }}</view>
          </view>
        </template>
        <template v-else-if="item.rank == 3">
          <view :key="item.rank" class="rank-rules-table-item rank-rules-table-item-bg1" :style="{
            background: themeStore.theme.promo.rank.thirdRowBgColor
          }">
            <view class="rank-rules-table-item1">
              <theme-image src="@/static/rank/pm3.png" class="rank-image"></theme-image>
            </view>
            <view class="rank-rules-table-item2">{{ formatNum(item.day * 100) + '%' }}</view>
            <view class="rank-rules-table-item3">{{ formatNum(item.week * 100) + '%' }}</view>
            <view class="rank-rules-table-item4">{{ formatNum(item.month * 100) + '%' }}</view>
          </view>
        </template>
        <template v-else>
          <view :key="item.rank" class="rank-rules-table-item rank-rules-table-item-bg1">
            <view class="rank-rules-table-item1">{{ item.rank }}</view>
            <view class="rank-rules-table-item2">{{ formatNum(item.day * 100) + '%' }}</view>
            <view class="rank-rules-table-item3">{{ formatNum(item.week * 100) + '%' }}</view>
            <view class="rank-rules-table-item4">{{ formatNum(item.month * 100) + '%' }}</view>
          </view>
        </template>
      </template>

    </view>
    <view class="plr30">
      <Rules :list="RankingRules" color="#ffffff"></Rules>
    </view>
  </view>
</template>

<script setup>
import Rules from "@/pages/promo/components/Rules.vue";
import { RankingRules } from "@/pages/promo/constants/index.js";
import { useThemeStore } from "@/store/useThemeStore";
import { usePromoStore } from "@/store/usePromoStore";
import { formatNum } from "@/module/utils/util";
import { getTypeDetailApi } from "@/api/promo";
import { onMounted } from "vue";

const themeStore = useThemeStore()
const promoStore = usePromoStore()
async function getTypeData() {
    try {
        const {data} = await getTypeDetailApi({type: 5})
        console.log("config content:", data);
        content.value = data.content
    } catch (error) {
        console.log("config error:", error);
    }
}

onMounted(() => {
  getTypeData()
})
</script>

<style lang="scss" scoped>
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
  display: none;
}
.rank-rules {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-top: 37rpx;
  overflow-y: auto;

  .rank-rules-title {
    width: 100%;
    box-sizing: border-box;
    padding-left: 41rpx;
    color: #fff;
    font-size: 30rpx;
    line-height: 32rpx;
  }

  .rank-rules-table {
    width: 100%;
    box-sizing: border-box;
    margin-top: 21rpx;

    .rank-rules-table-item {
      width: 100%;
      display: flex;
      justify-content: space-between;
      text-align: center;
      height: 62rpx;
      line-height: 62rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 24rpx;

      .rank-rules-table-item1 {
        width: 30%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .rank-rules-table-item2 {
        width: 30%;
      }

      .rank-rules-table-item3 {
        width: 30%;
      }

      .rank-rules-table-item4 {
        width: 30%;
      }
    }

    // .rank-rules-table-item-bg {
    //   background: #b42118;
    // }

    // .rank-rules-table-item-bg1 {
    //   background: rgba(180, 40, 32, 0.7);
    // }
  }

  .rank-image {
    width: 42rpx;
    height: 32rpx;
  }
}
</style>
