<template>
  <div class="page">
    <h-navbar title="Perfil">
      <template v-slot:left>
        <h-img
          type="local"
          class="back"
          width=".8rem"
          src="base/fanhui.png"
          @click="goBack"
        />
      </template>
    </h-navbar>
    <div class="page-body">
      <Personal />
      <Level />
      <div class="handle">
        <div
          class="handle-item flex-ct"
          v-for="(item, index) in handles"
          :key="index"
          @click="goPage(item.path)"
        >
          <h-img :src="item.icon" />
          <span>{{ item.label }}</span>
        </div>
      </div>
      <div class="handle">
        <div
          class="handle-item flex-ct"
          @click="goPage('/cashback')"
          style="
            font-size: 0.3rem;
            background: linear-gradient(to bottom, #292024, #312023, #3b2021);
          "
        >
          <h-img width=".5rem" type="local" src="menu/icon_05.png" />
          <span style="color: #fff">Cashback 25%</span>
        </div>
        <div
          @click="goPage('/turntable')"
          class="handle-item flex-ct"
          style="
            background: linear-gradient(to bottom, #1b1b2b, #2b213f, #392652);
            font-size: 0.3rem;
          "
        >
          <h-img width=".5rem" type="local" src="menu/icon_06.png" />
          <span style="color: #fff">Receba R$ 200 de graça</span>
        </div>
      </div>
      <Cell />
      <div class="login-out" @click="() => (showOut = true)">Sair e entrar</div>
    </div>
    <van-overlay :show="showOut" :z-index="999999">
      <div class="showOut-box">
        <p>Deseja sair?</p>
        <div class="btn">
          <van-button color="#343C3C" @click="() => (showOut = false)">
            Cancelar
          </van-button>
          <van-button color="#268C71" @click="loginout">Continuar</van-button>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script setup lang="ts">
import { inject, ref } from "vue";
import { useRouter } from "vue-router";
import Personal from "./components/personal.vue";
import Cell from "./components/cell.vue";
import Level from "./components/level.vue";
import { useUserStore } from "@/stores/modules/user";
import emitter from "@/utils/eventBus";
import useGift from "@/hooks/useGift";
import useShare from "@/hooks/useShare";
import { clipboard } from "@/utils";
const { shareList, shareUrl, goLink } = useShare();
const { hasShowOneOfThree } = useGift();

const socket: any = inject("socket");
const userStore = useUserStore();
const showOut = ref(false);
const router = useRouter();

const handles = [
  { label: "Depósito", icon: "perfil/icon_1.png", path: "/deposit" },
  { label: "Sacar", icon: "perfil/icon_2.png", path: "/withdrawal" },
  // { label: "Banco", icon: "perfil/icon_3.png", path: "/wallet" },
];

const goPage = (path: string) => {
  router.push(path);
};
const goBack = () => {
  router.replace("/");
};
const loginout = () => {
  socket.disconnect();
  userStore.clearUser();
  router.replace("/login");
  socket.connectMsg();
};

// onMounted(() => {
//   userStore.getUserInfo();
// });
</script>

<style lang="scss" scoped>
.page-body {
  .handle {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.25rem;
    margin: 0.25rem 0;

    &-item {
      font-size: 0.4rem;
      padding: 0.28rem 0;
      background: #2f6368;
      border-radius: 0.2rem;
      span {
        margin-left: 0.2rem;
        color: #d6fff5;
      }
    }
  }
  .login-out {
    width: 60%;
    text-align: center;
    font-size: 0.4rem;
    margin: 0.6rem auto;
    padding: 0.3rem 0;
    color: #d6fff5;
    background-color: #2f6368;
    border-radius: 0.1rem;
    cursor: pointer;
  }
}
.showOut-box {
  background-color: #053230;
  position: relative;
  width: 70%;
  margin: 0 auto;
  top: 30%;
  border-radius: 0.3rem;
  padding: 0.2rem;
  > p {
    color: #b1f051;
    font-size: 0.5rem;
    text-align: center;
    margin-top: 0.5rem;
  }
  .btn {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0.5rem 0;
    .van-button {
      width: 35%;
      font-size: 0.4rem;
    }
    > .van-button:nth-of-type(1) {
      color: #9da4a2 !important;
    }
  }
}
</style>
