<template>
  <div class="page">
    <h-navbar title="Afiliado Ganhe R$100000 por mês" />
    <van-tabs
      v-model:active="current"
      color="#000"
      title-active-color="#000"
      title-inactive-color="#8d9e9a"
    >
      <van-tab v-for="(item, index) in tabs" :key="index" :title="item.title">
        <component :is="item.component" :date="date" @changeTab="changeTab" />
      </van-tab>
    </van-tabs>
    <van-popup
      v-model:show="show"
      position="left"
      closeable
      :style="{ width: '100%', height: '100%' }"
    >
      <div class="level">
        <div class="title">Regras de recompensas por comissão</div>
        <div class="table">
          <div class="label">
            <div>Nivel Agente</div>
            <div>Cashback</div>
          </div>
          <div class="row" v-for="(item, index) in list" :key="index">
            <div>{{ item.upLevel }}</div>
            <div>{{ `${item.rebate}%` }}</div>
          </div>
        </div>
        <div class="wager-title">
          <div class="wager-title-dot"></div>
          <div>A apostas válidas depende dos diferentes jogos</div>
        </div>
        <div class="wager-content">
          Os tipos de crash e os jogos virtuais não serão considerados apostas
          válidas
        </div>
        <div class="wager-content">
          <div><span style="font-size: 0.6rem">100%</span> De aposta</div>
          <div>Jogos: Live Casino, 3rd Party</div>
        </div>
        <div class="wager-content">
          <div><span style="font-size: 0.6rem">100%</span> De aposta</div>
          <div>Jogos: Os outros jogos originais</div>
        </div>
        <div
          class="arrow"
          @click="
            show = false;
            changeTab({ current: 5 });
          "
        >
          <div>Regras de cálculo de comissão</div>
          <h-img class="arrow-icon" type="local" src="base/arrow.png" />
        </div>

        <div class="wager-title">
          <div class="wager-title-dot"></div>
          <div>
            As comissões podem ser retiradas em nossa carteira 18N.com do painel
            a qualquer momento.
          </div>
        </div>
        <div class="wager-title">
          <div class="wager-title-dot"></div>
          <div>O sistema calcula a comissão a cada 24 horas.</div>
        </div>
        <div class="wager-title">
          <div class="wager-title-dot"></div>
          <div>Comissão máxima diária : 10000 BRL</div>
        </div>
        <div class="wager-title">
          <div class="wager-title-dot"></div>
          <div>
            A comissão não será creditada para o mesmo IP ou dispositivo, e a
            inflação intencional do volume de negócios não será creditada para a
            comissão.
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script setup lang="ts">
import { ref, markRaw, onMounted } from "vue";
import share from "./components/share.vue";
import particulars from "./components/particulars.vue";
import relatorio from "./components/relatorio.vue";
import pagmentos from "./components/pagmentos.vue";
import faq from "./components/faq.vue";
import tutorial from "./components/tutorial.vue";
import emitter from "@/utils/eventBus";
import socketApi from "@/socket/socketApi";
import { fomartDate } from "@/utils";
import http from "@/https/index";

const current = ref(0);
const show = ref(false);
const list = ref<Array<any>>([]);
const date = ref(fomartDate(new Date(), "YYYY-MM-DD"));

const tabs = [
  { title: "PAINEL", component: markRaw(share) },
  { title: "REFERÊNCIAS", component: markRaw(particulars) },
  { title: "RELATÓRIO", component: markRaw(relatorio) },
  { title: "PAGAMENTOS", component: markRaw(pagmentos) },
  { title: "FAQ", component: markRaw(faq) },
  { title: "TUTORIAL", component: markRaw(tutorial) },
];

const changeTab = (props?: any) => {
  current.value = props.current;
  date.value = props.date;
};

const getChildRebate = async () => {
  const res = await http.getChildRebate();
  if (res.code === 0) {
    list.value = res.data.config.reverse() || [];
    // nowRebate.value = res.data.rows.find((row: any) => row.type == 3);
  }
};

const open = () => {
  show.value = true;
};

emitter.on("showVisible", open);

onMounted(async () => {
  await getChildRebate();
});
</script>
<style lang="scss" scoped>
.page {
  background: #f3f3f3 !important;

  .van-popup {
    &::-webkit-scrollbar {
      width: 0;
      display: none;
    }
    @include pc {
      width: 10rem !important;
    }
  }

  .level {
    color: #f3f3f3;
    background-color: #2d2d2d;
    height: 100%;
    overflow-y: scroll;
    @extend .blod;
    &::-webkit-scrollbar {
      width: 0 !important;
    }
    .title {
      padding: 0.3rem;
      font-size: 0.45rem;
      position: sticky;
      top: 0;
      border-bottom: 0.2rem solid #1d1d1d;

      background-color: #2d2d2d;
    }
    .table {
      text-align: center;
      font-size: 0.35rem;
      padding: 0.2rem;
      @extend .blod;
      .label {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        background: #4b4b4b;
        border-radius: 0.1rem;
        div {
          padding: 0.2rem;
        }
      }
      .row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        div {
          padding: 0.2rem;
          color: $font-text4;
        }
      }
      .row:nth-child(2n + 1) {
        background: rgba($color: #4b4b4b, $alpha: 0.5);
        border-radius: $border-radius;
      }
    }
    .wager-title {
      padding: 0.2rem;
      display: flex;
      align-items: center;
      font-size: 0.35rem;
      margin-top: 0.2rem;
      &-dot {
        display: inline-block;
        width: 0.2rem;
        height: 0.2rem;
        border-radius: 50%;
        background: #f3f3f3;
        margin-right: 0.2rem;
      }
      div:last-child {
        width: 90%;
      }
    }
    .arrow {
      font-size: 0.4rem;
      padding: 0.2rem;
      background-color: #4b4b4b;
      margin: 0 0.1rem;
      border-radius: $border-radius;
      display: flex;
      align-items: center;
      justify-content: space-between;
      &-icon {
        transform: rotate(180deg);
        width: 0.5rem;
      }
    }
    .wager-content {
      margin-left: 0.6rem;
      font-size: 0.35rem;
      margin-bottom: 0.2rem;
    }
  }
}
</style>
