<template>
  <div class="page">
    <h-navbar title="Privilégios de membro" />
    <div class="page-body">
      <div class="historico">
        <div class="label">
          <span class="label-item" v-for="item in labels" :key="item">
            {{ item }}
          </span>
        </div>
        <div class="table">
          <div class="row" v-for="(item, index) in data" :key="index">
            <span style="padding: 0 0.2rem">{{ item.lv }}</span>
            <span>{{ item.amount / 10000 }}</span>
            <span>{{
              item.dailyAward.length > 0 ? item.dailyAward[0].num / 10000 : 0
            }}</span>
            <span>{{
              item.weeklyAward.length > 0 ? item.weeklyAward[0].num / 10000 : 0
            }}</span>
            <span>{{
              item.monthlyAward.length > 0
                ? item.monthlyAward[0].num / 10000
                : 0
            }}</span>
          </div>
        </div>
      </div>
      <div class="text-content">
        <p>
          1,Bonus selogin Diario：Bônus sujeito a 1x giro de aposta válido antes
          da retirada
        </p>
        <p>
          2,Bônus Semanal ： Os dias naturais de cálculo são de segunda a
          domingo, e você pode obtê-lo toda segunda-feira. A condição é que você
          possa obtê-lo se tiver feito algum depósito na semana passada. Você
          precisa completar 1 vez o giro da aposta antes de retirar o bônus.
        </p>
        <p>
          3,Bônus mensal： Os dias naturais de cálculo vão do primeiro ao último
          dia do mês anterior, podendo ser coletados no início do mês. A
          condição é que haja um registro de recebimento de todas as recompensas
          de login semanais no mês anterior. Os bônus exigem que 1x apostas
          válidas sejam retiradas.
        </p>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, computed } from "vue";
import { useUserStore } from "@/stores/modules/user";
onMounted(async () => {});
const labels = [
  "VIP",
  "Bet",
  "Bônus de login diário",
  "Bônus Semanal",
  "Bônus mensal",
];
const userStore = useUserStore();
const data = computed(() => {
  let newData = userStore.vipInfo.rows ? [...userStore.vipInfo.rows] : [];
  return newData.sort((a: any, b: any) => a.lv - b.lv);
});
</script>
<style lang="scss" scoped>
.page-body {
  .text-content {
    font-size: 0.4rem;
    text-align: left;
    padding: 0.4rem 0.2rem;
    p {
      margin-top: 0.3rem;
    }
  }
  .historico {
    font-size: 0.35rem;
    font-weight: 500;
    margin: 0.2rem 0.2rem 0 0.2rem;
    border-left: 1px solid $other-color;
    border-right: 1px solid $other-color;
    border-top: 1px solid $other-color;
    .label {
      display: grid;
      grid-template-columns: 0.8rem 1.6rem 2.3rem 2rem auto;
      text-align: center;
      align-items: center;
      background-color: #005742;
      height: 1.1rem;
      &-item {
        border-right: 1px solid $other-color;
        height: 100%;
        line-height: 0.55rem;
      }
      &-item:nth-child(1),
      &-item:nth-child(2) {
        line-height: 1.1rem;
      }
      &-item:last-child {
        border: none;
        line-height: 1rem;
      }
    }
    .table {
      font-size: 0.3rem;
      .row {
        display: grid;
        grid-template-columns: 0.8rem 1.6rem 2.3rem 2rem auto;
        border-bottom: 1px solid $other-color;
        span {
          border-right: 1px solid $other-color;
          padding: 0.2rem 0.1rem;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
          word-break: break-all;
        }
        span:last-child {
          border: none;
        }
      }
    }
  }
}
</style>
