<template>
  <div class="vip-progress flex-sb">
    <div class="flex-sb progress" @click="goPage('/level')">
      <div>
        <h-img width=".8rem" type="local" src="base/vip_bg.png" />
        <span>V{{ currentLevel.lv }}</span>
      </div>
      <div class="line">
        <div
          class="line-p"
          :style="{ width: currentLevel.lv == 10 ? '100%' : levelSpeed }"
        ></div>
      </div>
      <div>
        <!-- <h-img width=".5rem" height=".5rem" type="local" src="base/icon_vip.png" /> -->
        <span>
          V{{ currentLevel.lv != 10 ? nextLevel.lv : currentLevel.lv }}
        </span>
      </div>
    </div>
    <!-- <van-button
      color="#C78C2E"
      size="small"
      style="font-size: 0.3rem"
      @click="goPage('/level')"
    >
      <span style="color: #fff">VIP detalhes</span>
    </van-button> -->
    <h-img width=".2rem" type="local" src="menu/arrows.png" @click="goPage('/level')"/>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import useUserLevel from "@/hooks/useUserLevel";
const { currentLevel, nextLevel, levelSpeed } = useUserLevel();
const router = useRouter();

const goPage = (path: string) => {
  router.push(path);
};
</script>

<style lang="scss" scoped>
.vip-progress {
  background-color: #2D353C;
  padding: 0.25rem;
  margin-top: 0.2rem;
  border-radius: 0.25rem;
  .progress {
    flex: 0.98;
    padding: 0 0.2rem;
    align-items: center;
    .line {
      flex: 0.98;
      background: #022520;
      height: 0.35rem;
      margin: 0 0.2rem;
      border-radius: 1rem;
      position: relative;
      overflow: hidden;
      @extend .transition;
      &-p {
        position: absolute;
        height: 100%;
        background: linear-gradient(to right, #4ea670, #afdf7b, #c3ea7d);
        border-radius: 1rem;
        font-size: 0.3rem;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        @extend .transition;
      }
    }
    div {
      display: flex;
      align-items: center;
      span {
        font-size: 0.4rem;
        font-weight: bold;
        margin-left: 0.1rem;
        color: #FFF14B;
      }
    }
  }
  .van-button {
    color: #21d1a5 !important;
  }
}
</style>
