<template>
  <div>
    <Row>
      <Col :span="16">
        <alert-vip style="margin-right: 2px" />
        <span :class="userColor">{{ userTitle }}</span>
      </Col>
      <Col
        :span="8"
        class="text-right"
      >
        <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>
  .user-plan-free {
    color: #fff;
    background-color: #2a2a2a;
    border-color: #000000;
    padding: 2px 4px 2px 4px;
    border-radius: 5px;
  }

  .user-plan-paid {
    color: #fff;
    background-color: #ee4d2d;
    border-color: #ee4d2d;
    padding: 2px 4px 2px 4px;
    border-radius: 5px;
  }
</style>
