<template>
  <van-nav-bar fixed placeholder>
    <template #left>
      <div class="vip-box">
        <m-user-avatar class="user-avatar" />
        <m-user-name />
      </div>
    </template>
    <template #right>
      <div class="vip-box" @click="goBuyVip">
        <m-icon class="vip-icon" type="huiyuan" />
        <span>{{ expireTime ? expireTime : "开通会员" }}</span>
      </div>
    </template>
  </van-nav-bar>
</template>

<script lang="ts">
import { useExpireTime, RouterBus } from "@/hooks";
</script>

<script lang="ts" setup>
const { expireTime } = useExpireTime();
const { goBuyVip } = new RouterBus();
</script>

<style lang="scss" scoped>
.vip-box {
  display: flex;
  align-items: center;
  font-size: 17px;
  .user-avatar {
    width: 24px;
    height: 24px;
    margin-right: 2px;
  }
}
.vip-icon {
  margin-right: 5px;
}
</style>
