<template>
  <a
    v-if="isShowAlert"
    class="alert-vip"
    @click="openPayment"
  >
    <Icon type="ios-flame-outline" />
    <span>
      {{ alertText }}
    </span>
  </a>
</template>

<script>
import { priceMonth } from '@/config/pricing';

export default {
  name: 'HotDeal',
  methods: {
    openPayment() {
      this.$router.push({
        name: 'UpgradePlan',
        query: {
          plan: 'Vip',
        },
      });
    },
  },
  computed: {
    isShowAlert() {
      return !(this.getIsAuthed && this.getIsPaidPlan);
    },
    alertText() {
      return this.$t('ALERT_REQUIRED_PLAN_VIP', {
        price: priceMonth,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
  .alert-vip {
    color: #fff;
    background-color: #ee4d2d;
    border-color: #ee4d2d;
    padding: 2px 4px 2px 4px;
    border-radius: 5px;
  }
</style>
