<template>
  <div class="page">
    <h-navbar title="VIP details" />
    <div class="page-body">
      <div class="container">
        <div class="vip-top flex-ct">
          <div class="left">
            <div class="left-top">
              <div>VIP Level</div>
              <div class="version">VIP {{ currentLevel.lv }}</div>
            </div>
            <div class="left-bottom">
              <p v-if="currentLevel.lv != levelLength">
                {{vipInfo && vipInfo.vipLevelType === 1 ? 'Recharge' : 'Bet'}} {{ formatDigit(poorRecharge / 10000) }} to get to the
                {{ nextLevel.lv }}
              </p>
              <p v-else>{{vipInfo && vipInfo.vipLevelType === 1 ? 'Recharge' : 'Bet'}} 0 to reach VIP {{levelLength}}</p>
              <div class="line">
                <div
                  class="line-p"
                  :style="{
                    width: currentLevel.lv != levelLength ? levelSpeed : '100%',
                  }"
                >
                  {{ currentLevel.lv != levelLength ? (levelSpeed ? levelSpeed : '') : "100%" }}
                </div>
              </div>
              <div class="vips flex-sb">
                <div>V{{ currentLevel.lv }}</div>
                <div>
                  V{{ currentLevel.lv != levelLength ? nextLevel.lv : currentLevel.lv }}
                </div>
              </div>
            </div>
          </div>
          <div class="right flex-ct">
            <h-img width="2rem" src="perfil/icon01.png" />
          </div>
        </div>
        <div class="tips flex-ct" @click="goPage('/introduceVip')">
          Member Privilege
          <h-img
            width="0.4rem"
            style="margin-left: 0.2rem"
            src="perfil/icon_bangzghu.png"
          />
        </div>
      </div>
      <div class="content">
        <!-- 日 -->
        <div class="block flex-sb">
          <div class="left flex-ct">
            <h-img
              class="icon"
              v-if="levelProp.award &&levelProp.award.length === 0"
              src="perfil/jinbi_04.png"
            />
            <van-image class="icon" v-else :src="getImage(fullImgUrl(levelProp.dailyAward && levelProp.dailyAward[0].propId))" />
          </div>
          <div class="right flex-sb">
            <span>Daily Entry Bonus</span>
            <van-button
              color="#676e6e"
              class="not-received"
              v-if="vipInfo.isGetDay"
              >Received</van-button
            >
            <van-button color="#a9792e" v-else @click="receive(Bonus.DAILY)">
              Receive
            </van-button>
          </div>
        </div>
        <!-- 周 -->
        <div class="block flex-sb">
          <div class="left flex-ct">
            <h-img class="icon" v-if="levelProp.weeklyAward.length === 0" src="perfil/jinbi_04.png" />
            <van-image class="icon"  v-else :src="getImage(fullImgUrl(levelProp.weeklyAward[0] && levelProp.weeklyAward[0].propId))" />
          </div>
          <div class="right flex-sb">
            <span>Weekly Bonus</span>
            <van-button
              color="#676e6e"
              class="not-received"
              v-if="vipInfo.isGetWeek"
            >
              Received
            </van-button>
            <van-button color="#a9792e" v-else @click="receive(Bonus.WEEKLY)">
              Receive
            </van-button>
          </div>
        </div>
        <!-- 月 -->
        <div class="block flex-sb">
          <div class="left flex-ct">
            <h-img class="icon" v-if="levelProp.monthlyAward.length === 0" src="perfil/jinbi_04.png" />
            <van-image class="icon"  v-else :src="getImage(fullImgUrl(levelProp.monthlyAward[0] && levelProp.monthlyAward[0].propId))" />
          </div>
          <div class="right flex-sb">
            <span>Monthly Bonuses</span>
            <van-button
              color="#676e6e"
              class="not-received"
              v-if="vipInfo.isGetMonth"
            >
              Received
            </van-button>
            <van-button color="#a9792e" v-else @click="receive(Bonus.MONTH)">
              Receive
            </van-button>
          </div>
        </div>
        <div class="block flex-sb">
          <div class="left flex-ct">
            <h-img class="icon" v-if="levelProp.award && levelProp.award.length === 0" src="perfil/jinbi_04.png" />
            <van-image class="icon"  v-else :src="getImage(fullImgUrl(levelProp.award[0] && levelProp.award[0].propId))" />
          </div>
          <div class="right flex-sb">
            <span>Level Bonuses</span>
            <van-button color="#a9792e" @click="goPage('/levelReceive')">
              Receive
            </van-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted,ref } from "vue";
import { useRouter } from "vue-router";
import useUserLevel from "@/hooks/useUserLevel";
import { formatDigit,getImage } from "@/utils";
import socketApi from "@/https/modules/center";
import { closeLoading, showLoading, toast } from "@/utils/toast";
import { useUserStore } from "@/stores/modules/user";
import http from "@/https/index";
const userStore = useUserStore();

enum Bonus {
  DAILY = 0,
  WEEKLY,
  MONTH,
}
const porpData = ref<Array<any>>([])
const { nextLevel, levelSpeed, poorRecharge, currentLevel, levelProp } =
  useUserLevel();

const router = useRouter();
const vipInfo = computed(() => {
  return userStore.vipInfo;
});
const levelLength = computed(() => {
  let newData = userStore.vipInfo.rows ? [...userStore.vipInfo.rows] : [];
  return newData.length;
});
const fullImgUrl = (id:any) => {
  let value = porpData.value.filter((item:any) => item._id === id)
  console.log(value);
  
  return value[0] ? value[0].iconUrl : "/perfil/jinbi_04.png"
}
// getPropsCache
// 获取道具信息
const getPropsCache = async () => {
  let propData:Array<any> = []
  if(levelProp.value.dailyAward && levelProp.value.dailyAward.length > 0){
    propData.push(levelProp.value.dailyAward[0].propId)
  }
  if(levelProp.value.weeklyAward && levelProp.value.weeklyAward.length > 0){
    propData.push(levelProp.value.weeklyAward[0].propId)
  }
  if(levelProp.value.monthlyAward && levelProp.value.monthlyAward.length > 0){
    propData.push(levelProp.value.monthlyAward[0].propId)
  }
  if(levelProp.value.award && levelProp.value.award.length > 0){
    propData.push(levelProp.value.award[0].propId)
  }
  if(propData.length == 0) return
  const res = await http.getPropsCache({propIds:propData})
  if(res.code !== 0) return 
  porpData.value = res.data.props
};
// 领取
const receive = (bonus: number) => {
  showLoading();
  http.getVipAwardCycle({
    awardType:bonus
  }).then(async (res: any) => {
    if (res.code !== 0) {
      closeLoading();
      toast(res.txt);
      return;
    }
    closeLoading();
    switch (bonus) {
      case Bonus.DAILY:
        vipInfo.value.isGetDay = true;
        break;
      case Bonus.WEEKLY:
        vipInfo.value.isGetWeek = true;
        break;
      case Bonus.MONTH:
        vipInfo.value.isGetMonth = true;
        break;
    }
    await userStore.getUserInfo();
    toast("Successfully received");
  });
};

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

<style lang="scss" scoped>
.page-body {
  :deep(.van-button) {
    width: 2.5rem;
  }
  .container {
    background: #031a15 url("https://cdn.18n.com/perfil/bg_01.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 4.5rem;
    border-radius: $border-radius;
    position: relative;

    .vip-top {
      height: 3.4rem;
      padding: 0.2rem;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      font-size: 0.5rem;
      .left {
        flex: 1;
        color: #ee0a24;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-start;
        &-top {
          display: flex;
          align-items: center;
          @extend .blod;
          width: 100%;
          .version {
            background: #ee0a24;
            color: #fff;
            border-radius: 0.2rem;
            padding: 0 0.25rem;
            margin-left: 0.1rem;
          }
        }
        &-bottom {
          width: 100%;
          p {
            font-size: 0.4rem;
            font-weight: 500;
          }
        }
      }
      .right {
        width: 3rem;
      }

      .line {
        flex: 1;
        background: #000;
        height: 0.3rem;
        margin-top: 0.2rem;
        border-radius: $border-radius;
        position: relative;
        border-radius: 1rem;

        &-p {
          box-sizing: border-box;
          position: absolute;
          height: 100%;
          line-height: 100%;
          background: #96C2FF;
          border-radius: 1rem;
          font-size: 0.3rem;
          font-weight: bold;
          text-align: right;
          color: #606060;
        }
      }
      .vips {
        font-size: 0.35rem;
        @extend .blod;
      }
    }

    .tips {
      position: absolute;
      font-size: 0.45rem;
      width: 80%;
      text-align: center;
      font-weight: bold;
      color: #c9d7c9;
      bottom: 5%;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .content {
    .block {
      background: linear-gradient(to right, #262b31, #1c3236, #184039, #1d493c);
      margin: 0.25rem 0;
      height: 100%;
      border-radius: 0.15rem;
      .left {
        width: 1.5rem;
        background: rgba($color: #298255, $alpha: 1);
        padding: 0.2rem 0;
        border-top-left-radius: 0.15rem;
        border-bottom-left-radius: 0.15rem;
        .icon {
          width: 1rem;
        }
      }
      .right {
        flex: 1;
        height: 100%;
        font-size: 0.35rem;
        padding: 0 0.2rem;
        color: #c9d7c9;
        @extend .blod;
        .not-received {
          color: $font-text3;
        }
        .van-button {
          :deep(.van-button__text:first-child) {
            color: #f3e615;
            font-weight: bold;
          }
        }
      }
    }
  }
}
</style>
