<template>
  <div class="pricing-table">
    <div class="pricing-plan" :class="{ 'is-active': plan === 'free' }">
      <div class="plan-header">Gratuit</div>
      Parfait pour démarrer rapidement
      <div class="plan-price"><span class="plan-price-amount"><span class="plan-price-currency">€</span>0</span>/mois</div>
      <div class="plan-items">
        <div class="plan-item">jusqu'à 20 comptes</div>
        <div class="plan-item">jusqu'à 20 amis/compte</div>
        <div class="plan-item">jusqu'à 200 dépenses/compte</div>
        <div class="plan-item">33 devises</div>
      </div>
      <div class="plan-footer">
        <button class="button is-fullwidth" @click="choose('free')">
          <span v-if="plan !== 'free'">Choix par défaut</span>
          <span v-else>Sélectionné</span>
        </button>
      </div>
    </div>

    <div class="pricing-plan is-success" :class="{ 'is-active': plan === 'premium' }">
      <div class="plan-header">Premium</div>
      Vaquant sans aucune limite !
      <div class="plan-price"><span class="plan-price-amount"><span class="plan-price-currency">€</span>3</span>/mois</div>
      <div class="plan-items">
        <div class="plan-item"><awe-icon icon="infinity" /> comptes</div>
        <div class="plan-item"><awe-icon icon="infinity" /> amis/compte</div>
        <div class="plan-item"><awe-icon icon="infinity" /> dépenses/compte</div>
        <div class="plan-item">150+ devises</div>
        <div class="plan-item">pièces jointes disponibles</div>
      </div>
      <div class="plan-footer">
        <button class="button is-fullwidth" @click="choose('premium')" disabled>
          Bientôt disponible
          <!-- <span v-if="plan !== 'premium'">Passer en premium</span>
          <span v-else>Sélectionné</span> -->
        </button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component
export default class PrincingTable extends Vue {
  @Prop({ type: String, default: '' })
  public firstPlan!: string
  public plan: string = ''

  public mounted(): void {
    this.plan = this.firstPlan
  }
  public choose(plan: string): void {
    this.plan = plan
    this.$emit(plan)
  }
}
</script>
