<template>
  <view class="box">
    <image class="headImage" :src="userData.headImage"></image>
    <view style="margin-left: 10px" class="">{{ userData.nickName }}</view>
    <view
      @click="goBuyVip"
      v-if="!isVip"
      style="color: #0a1a33; margin-left: 10px"
      >开通VIP</view
    >
    <!-- <view v-if="isVip" style="color: #0a1a33; margin-left: 10px">VIP会员</view> -->
    <view  @click="goBuyVip" v-if="isVip" style="color: #0a1a33; margin-left: 10px">{{expireTime}}</view>
    <image
     @click="goBuyVip"
      v-if="isVip"
      style="margin-left: 8px"
      class="diamond"
      :src="diamond"
    ></image>
    <image
      @click="goBuyVip"
      v-if="!isVip"
      style="margin-left: 8px"
      class="diamond"
      :src="diamondGray"
    ></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      diamond: require("@/assets/img/diamond.png"),
      diamondGray: require("@/assets/img/diamond_gray.png"),
    };
  },
  props: {
    userData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  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 {
  margin-left: 7px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  width: 100%;
}
.diamond {
  width: 16px;
  height: 16px;
}
.headImage {
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
</style>