<template>
  <div class="pu-user">
    <Row>
      <Col :span="16">
        <div class="pu-user__identity">
          <alert-vip />
          <span :class="['pu-user__badge', userColor]">{{ userTitle }}</span>
        </div>
      </Col>
      <Col
        :span="8"
        class="pu-user__actions"
      >
        <slot name="right" />
      </Col>
    </Row>
  </div>
</template>

<script>
export default {
  name: 'UserIndex',
  computed: {
    userTitle() {
      return [
        this.getUsername,
        this.$t('USER_PLAN', { plan: this.getUserPlan }),
        this.getIsPaidPlan ? this.getTimeExpried : '',
      ]
        .filter((item) => item)
        .join(' | ');
    },
    userColor() {
      return this.getIsPaidPlan ? 'user-plan-paid' : 'user-plan-free';
    },
  },
};
</script>
<style lang="scss" scoped>
@import '@/vue/styles/tokens.scss';

.pu-user {
  &__identity {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }

  &__actions {
    text-align: right;
  }

  &__badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: $radius-sm;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 600;
    color: $c-surface;
    @include ellipsis;

    &.user-plan-free {
      background-color: $c-text-strong;
      border-color: $c-text-strong;
    }

    &.user-plan-paid {
      background-color: $c-brand;
      border-color: $c-brand;
    }
  }
}
</style>
