<template>
  <div
    style="background: url('/imgs/personal_banner.png'); background-size: cover"
    class="w-full h-220px relative"
  >
    <div
      class="w-full h-full bg-[rgba(18, 64, 38, 1)] backdrop-filter backdrop-blur-md"
    ></div>
    <div class="flex items-center absolute bottom-0 right-0 left-0 top-0">
      <div class="w-1200px m-auto flex items-center justify-between px-70px">
        <div class="flex items-center">
          <div
            class="w-120px h-120px rounded-full border-white border-1px border-solid mr-20px"
          >
            <img :src="$store.state.userinfo.avatarUrl" class="object-cover w-full h-full rounded-full" />
          </div>

          <div>
            <div class="text-size-20px text-white">{{$store.state.userinfo.nickname}}</div>
            <div class="h-26px"></div>
            <div class="text-size-16px text-white">{{$store.state.userinfo.email}}</div>
          </div>
        </div>
        <div v-if="$store.state.userinfo.exipreVip" class="flex items-center">
          <div class="text-white text-size-18px mr-19px">
            {{ $t("当前会员有效期至") + $store.state.userinfo.vipStopStr}}
          </div>
          <div
                  @click="handleGoTo"
            class="text-size-14px text-white w-80px h-30px bg-primary flex items-center justify-center rounded-full cursor-pointer"
          >
            {{ $t("续费")}}

          </div>
        </div>
      </div>
    </div>
    <vip-srv-box ref="vsb"></vip-srv-box>

  </div>
</template>

<script>
  export default {

    data() {
      return {
        currentPath: this.$route.path,
      };
    },
    beforeRouteEnter(to, from, next) {
      next((vm) => {
        vm.currentPath = to.path;
      });
    },
    methods:{
      handleGoTo() {
        this.$refs.vsb.open();
      }
    }
  };
</script>
