<template>
  <view class="box">
    <view class="box-left">
      <image
        class="headImage"
        v-if="userData.headImage"
        :src="userData.headImage"
      ></image>
      <image class="headImage" v-else :src="unLoginHead"></image>
      <view style="margin-left: 10px;color:#fff" class="">{{
        userData.nickName ? userData.nickName : "新用户"
      }}</view>
    </view>
    <view class="box-right">
      <!-- <view
        @click="goBuyVip"
        v-if="!isVip"
        style="color: #0a1a33; margin-left: 15px"
        >开通VIP</view
      >
     
      <image
        v-if="isVip"
        style="margin-left: 8px"
        class="diamond"
        :src="diamond"
      ></image>
      <text v-if="isVip" style="margin-left: 15rpx">vip会员</text>
      <image
        @click="goBuyVip"
        v-if="!isVip"
        style="margin-left: 8px"
        class="diamond"
        :src="diamondGray"
      ></image> -->
    </view>
  </view>
</template>

<script>
import unLoginHead from "@/assets/img/unLoginHead.png";
export default {
  data() {
    return {
      diamond: require("@/assets/img/diamond.png"),
      diamondGray: require("@/assets/img/diamond_gray.png"),
      unLoginHead,
    };
  },
  props: {
    userData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    mode: {
      type: String,
      default: "default",
    },
  },
  computed: {
    jpcjUserInfo() {
      return this.$store.state.user.jpcjUserInfo || {};
    },
    // expireTime() {
    //   return this.$store.state.user.userInfo.expireTime
    //     ? this.$store.state.user.userInfo.expireTime.split(/\s+/)[0]
    //     : "";
    // },
    isVip() {
      console.log(this.$store.getters.isVip);
      return this.$store.getters.isVip;
    },
  },
  watch: {
    userData(newVal, oldVal) {},
  },
  methods: {
    goBuyVip(e) {
      uni.navigateTo({
        url: "/otherPages/buyVip/index",
      });
    },
  },
  mounted() {
    //钻石
    console.log(this.userData);
  },
};
</script>

<style lang="scss" scoped>
.box {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  width: 100%;
  padding: 15rpx 30rpx;
  font-size: 32rpx;
  .box-left {
    display: flex;
    align-content: center;
    align-items: center;
  }
  .box-right {
    display: flex;
    align-content: center;
    align-items: center;
  }
}
.diamond {
  width: 36rpx;
  height: 30rpx;
}
.headImage {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
</style>