<template>
  <div class="member-card">
    <div class="member-card__content">
      <template v-if="isInvite">
        <cr-image src="@/assets/images/maxMember/max-logo.png" width="2.08rem" height="0.48rem" />
      </template>
      <div v-else class="member-card__content__info">
        <cr-image
          :src="avator"
          width="1.28rem"
          height="1.28rem"
          class="member-card__content__avator"
        />
        <div>
          <div class="member-card__content__name">{{ mobile }}</div>
          <div class="member-card__content__exipre">{{ info.exipreDate || '-' }}</div>
        </div>
      </div>
      <cr-button
        hairline
        plain
        shape="circle"
        size="small"
        type="default"
        class="member-card__content__button"
        @click="showRules"
      >
        规则
      </cr-button>
    </div>
    <div class="member-card__foot">
      享花卡+备用金 <span class="member-card__foot__tag">0息费</span>
    </div>
  </div>
</template>
<script>
import { formatMaskPhone } from '@/service/utils.service';
// import avatorDefault from '@/assets/images/maxMember/avator-default.jpg';
import avatorDefault from '@/assets/images/maxMember/avator-default-max-member.png';
export default {
  props: {
    isInvite: Boolean,
    info: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  computed: {
    avator() {
      return this.info.avatarUrl || avatorDefault;
    },
    mobile() {
      if (!this.info.mobile) {
        return '-';
      }
      return formatMaskPhone(this.info.mobile);
    }
  },
  methods: {
    showRules() {
      this.$track.registeredEvents('H5_MaxMemberOpenPageRulesBtnClick');
      this.$emit('show-rule');
    }
  }
};
</script>
<style lang="less" scoped>
.member-card {
  background: url('~@/assets/images/maxMember/member-card.png') top center no-repeat;
  background-size: contain;
  height: 152px - (@padding-md + 2) * 2;
  padding: @padding-md + 2;
  position: relative;
  margin: 0 auto @padding-sm;
  &__content {
    display: flex;
    justify-content: space-between;
    &__button {
      background-color: transparent;
      min-width: auto;
      height: 26px;
      color: @white;
      margin-left: auto;
    }
    &__info {
      display: flex;
      align-items: center;
    }
    &__avator {
      border-radius: 50%;
      overflow: hidden;
      margin-right: @padding-xs;
    }
    &__name {
      .text-size(17px);
      font-weight: 500;
      color: @white;
    }
    &__exipre {
      .text-size(12px);
      color: fade(@white, 70%);
    }
  }
  &__foot {
    position: absolute;
    bottom: @padding-md + 2;
    left: @padding-md + 2;
    .text-size(14px);
    color: fade(@white, 80%);
    &__tag {
      margin-left: @padding-sm;
      color: #a6fbf8;
    }
  }
}
</style>
