<template>
  <div class="share">
    <div class="block">
      <div class="title">
        Hoje
        <h-img
          class="wh"
          type="local"
          src="infinite/icon_02.png"
          @click="showTipsVisible = true"
        />
      </div>
      <div class="content">
        <div>
          <span>{{ data.todayChildNum }}</span>
          <span>Inscrições</span>
        </div>
        <div>
          <span>{{ data.todayChildFirstPayNum }}</span>
          <span>Novos jogadores</span>
        </div>
        <div>
          <span>R$ {{ (data.todayBet / 10000).toFixed(2) }}</span>
          <span>Aposta válidas em equipe</span>
        </div>
        <div>
          <span>{{ (data.todayCoins / 10000).toFixed(2) }}</span>
          <span>Comissão</span>
        </div>
      </div>
    </div>
    <div class="block">
      <div class="title">
        Total
        <h-img
          class="wh"
          type="local"
          src="infinite/icon_02.png"
          @click="showTipsVisible = true"
        />
      </div>
      <div class="content">
        <div>
          <span>{{ data.totalChildNum }}</span>
          <span>Inscrições</span>
        </div>
        <div>
          <span>{{ data.totalChildPayNum }}</span>
          <span>Jogadores totais</span>
        </div>
        <div>
          <span>R$ {{ (data.totalBet / 10000).toFixed(2) }}</span>
          <span>Aposta válidas total</span>
        </div>
        <div>
          <span>{{ (data.totalCoins / 10000).toFixed(2) }}</span>
          <span>Comissão</span>
        </div>
      </div>
    </div>
    <div class="block">
      <div class="title" @click="open">
        Comissão <h-img class="wh" type="local" src="infinite/icon_02.png" />
      </div>
      <div class="content">
        <div class="left" @click="open">
          <h-img type="local" width="1.1rem" src="infinite/icon_01.png" />
          <div class="ts">
            <p>Nível de Agente</p>
            <h-img type="local" width=".35rem" src="infinite/icon_03.png" />
          </div>
        </div>
        <div class="right">
          <div class="right-top">
            <div>
              <div>R$ {{ (data.totalCoinsGet / 10000).toFixed(2) }}</div>
              <div>Total pago</div>
            </div>
            <div>
              <div>
                {{ (data.totalCoinsWait / 10000).toFixed(2) }}
              </div>
              <div>Não pago</div>
            </div>
          </div>
          <div class="receber" @click.stop="receiveChildRebate">
            TRANSFERIR PARA A CARTEIRA
          </div>
          <div class="tips">Valor mínimo de transferência de 10 BRL</div>
        </div>
      </div>
    </div>
    <!-- 分享 -->
    <div class="share-box">
      <h3>Compartilhe com sua comunidade social</h3>
      <div class="flex-sad">
        <h-img
          @click="goLink(item.path, item.type)"
          :src="item.icon"
          v-for="(item, index) in shareList"
          :key="index"
        />
      </div>
      <div>Compartilhe este link de indicação com seus amigos</div>
      <div class="share-link">
        <span>{{ shareUrl }}</span>
        <span class="copy" @click="clipboard(shareUrl)">
          Cópia
        </span>
      </div>
    </div>
    <div class="block">
      <div class="title">
        Regras de recompensas por comissão
        <h-img
          class="wh"
          type="local"
          src="infinite/icon_02.png"
          @click="open"
        />
      </div>
      <div class="content no">
        <h3>
          Ganhe dinheiro indicando amigos para o 18N.com, você ganha mais de 80%
          em recompensas de comissão!
        </h3>
        <block-bottom />
      </div>
    </div>

    <h-center-popup v-model="showTipsVisible" title="Definição">
      <ul class="ul">
        <li>1.Inscrições - Número de usuários registrados totais</li>
        <li>
          2.Jogadores totais - Número total de indicações e membros de suas
          equipes que contribuíram com apostas válidas
        </li>
        <li>
          3.Aposta válidas total - Total do valor de apostas válidas
          provenientes de indicações e contribuições de suas equipes
        </li>
      </ul>
    </h-center-popup>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import socketApi from "@/socket/socketApi";
import { toast } from "@/utils/toast";
import { clipboard } from "@/utils";
import blockBottom from "./block-bottom.vue";
import emitter from "@/utils/eventBus";
import useShare from "@/hooks/useShare";
import { useUserStore } from "@/stores/modules/user";
import http from "@/https/index";

const data = ref<any>({});
const userStore = useUserStore();
const { shareList, shareUrl, goLink, shareMessage } = useShare();

const nowRebate = ref<any>(0);
const showTipsVisible = ref(false);

const open = () => {
  emitter.emit("showVisible");
};
const getChildRebateInfo = async () => {
  const res = await http.getChildRebateInfo({ type: 3 });
  if (res.code !== 0) {
    toast(res.txt);
    return;
  }
  data.value = res.data;
};
const receiveChildRebate = async () => {
  const res = await http.receiveChildRebate({ type: 3 });
  console.log(res);
  if (res.code !== 0) {
    toast(res.txt);
    return;
  }
  userStore.getUserInfo();
  await getChildRebate();
  return toast("Receive Success");
};

const list = ref<Array<any>>([]);

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);
  }
};

onMounted(async () => {
  await getChildRebateInfo();
  await getChildRebate();
});
</script>

<style lang="scss" scoped>
.share {
  color: #000;
  padding: 0.2rem 0.1rem;
  .block {
    margin-bottom: 0.1rem;
    font-size: 0.35rem;
    background: #fff;
    border-radius: $border-radius;
    .title {
      text-align: left;
      display: flex;
      align-items: center;
      padding: 0.2rem;
      margin: 0 0.2rem;
      border-bottom: 1px solid #bbb;
      color: grey;
      @extend .blod;
      .wh {
        margin-left: 0.1rem;
        width: 0.45rem;
        height: 0.45rem;
        @extend .pointer;
      }
    }
    .content {
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 0.2rem 0;
      font-size: 0.29rem;
      div {
        display: flex;
        flex-direction: column;
        align-items: center;
        span:first-child {
          @extend .blod;
          font-size: 0.35rem;
        }
      }
    }
    .left {
      background-color: #f3f3f3;
      border-radius: 0.2rem;
      padding: 0.25rem 0.1rem;
      .ts {
        flex-direction: row !important;
        font-size: 0.25rem;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 0.3rem;
        p {
          margin-right: 0.1rem;
          color: $nav-bar;
          @extend .blod;
        }
      }
    }
    .right {
      width: 60%;
      &-top {
        width: 80%;
        flex-direction: row !important;
        justify-content: space-between;
      }
      .receber {
        width: 80%;
        padding: 0.2rem 0;
        margin: 0.2rem;
        border-radius: $border-radius;
        border: 1px solid #000;
        @extend .pointer;
      }
      .tips {
        width: 100%;
        align-items: flex-start !important;
      }
    }
  }
  &-box {
    padding-bottom: 0.3rem;
    margin-bottom: 0.1rem;
    background: #fff;
    border-radius: $border-radius;
    padding: 0.2rem;
    font-size: 0.35rem;
    h3 {
      font-size: 0.35rem;
      color: grey;
      @extend .blod;
    }

    .flex-sad {
      margin: 0.3rem 0.2rem;
      .van-image {
        width: 1.2rem;
      }
    }

    .share-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #f3f3f3;
      padding: 0.2rem;
      border-radius: $border-radius;
      font-size: 0.35rem;
      margin: 0.3rem 0 0.2rem 0;

      span:first-child {
        margin-left: 0.2rem;
        flex: 1;
        text-align: left;
      }
      .copy {
        color: #60b3fc;
      }
    }
  }

  .no {
    flex-direction: column !important;
    padding: 0.2rem !important;
    h3 {
      font-size: 0.35rem;
    }
  }

  .ul {
    font-size: 0.38rem;
    font-weight: 500;
    padding: 0.1rem;
    li {
      margin-bottom: 0.3rem;
    }
  }
}
</style>
