<template>
  <div class="user-card">
    <img src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif" class="user-avatar">
    <div class="right-content">
      <div class="name">
        <span>{{ userName }}</span>
        <i v-if="!notOpen" class="vip-icon" :class="{ close: vipInfo.vipStatus === 0 || vipInfo.vipStatus === 3 }" />
      </div>
      <div class="info">
        <span v-if="vipInfo.endTime" class="time">会员到期时间：{{ vipInfo.endTime | formatTime }}</span>
        <span v-if="vipInfo.vipStatus !== 3" class="record" @click="handleToRecord">购买记录</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { formatDate } from '@/utils'
// import avatar from '@/assets/img/avatar.png'
export default {
  name: 'AvatarWrapper',
  filters: {
    formatTime(time) {
      if (!time) {
        return ''
      }
      return formatDate(time, 'yyyy-MM-DD')
    }
  },
  computed: {
    ...mapGetters(['name', 'mobile', 'loginAccount', 'vipInfo']),
    mobileWidthStar() {
      return this.mobile ? this.mobile.replace(/^(\w{3})\w+(\w{4})$/, '$1****$2') : ''
    },
    userName() {
      return this.loginAccount || this.mobileWidthStar || this.name
    },
    // 未开通会员
    notOpen() {
      return this.vipInfo.vipStatus === 3
    }
  },
  methods: {
    handleToRecord() {
      this.$router.push('/personal/vip-record')
    }
  }
}
</script>
<style scoped lang="scss">
.user-card {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #2c3e50;
  color: #f1f1f1;
  padding-top: 12px;
  padding-bottom: 12px;
  margin-bottom: 6px;
  border-radius: 8px 8px 0 0;
  .user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 10px;
  }
  .right-content {
    width: 220px;
    margin-left: 16px;
    .name {
      font-size: 20px;
    }
    .info {
      font-size: 12px;
      .record {
        margin-left: 6px;
        text-decoration: underline;
      }
    }
  }

  &:hover {
    background: #2c3e50;
    color: #f1f1f1;
  }
}
</style>
