<template>
  <slide-template
    title="price__title"
    subtitle="price__subtitle"
    >
    <q-tabs
      v-model="tab"
      dense
      class="text-grey"
      active-color="primary"
      indicator-color="primary"
      align="justify"
      narrow-indicator
      >
      <q-tab
        v-for="tab in tabs"
        :key="tab.name"
        :name="tab.name"
        :label="$t(tab.label)"
      />
    </q-tabs>
    <div
      class="fit row q-pb-lg"
      >
      <div class="col-md-3 col-sm-6 col-xs-12 q-pa-lg"
        v-for="(item, idx) in tariff"
        :key="idx"
        >
        <price-section-item
          :name="item.name"
          :chats-qty="item.chatsQty"
          :price="tab === 'legal' ? item.price_rub : item.price"
          :price_unit="tab === 'legal' ? 'rub' : 'stars'"
        />
      </div>
    </div>
    <q-card 
      flat
      class="bg-white rounded-card"
      >
      <q-item v-if="tab === 'legal'">
        <q-item-section avatar>
          <span class="text-h4 text-grey q-px-sm">
            ₽
          </span>
        </q-item-section>
        <q-item-section>
          <q-item-label class="text-grey">
            {{ $t('price__rub_pay') }}
          </q-item-label>
          <q-item-label class="text-h6">
             {{ $t('price__rub_resident') }}
          </q-item-label>
          <q-item-label class="text-grey">
            {{ $t('price__rub_closing_documents') }}
          </q-item-label>
        </q-item-section>
      </q-item>
      <q-item v-if="tab === 'individual'">
        <q-item-section avatar>
          <telegram-star color="gold" size="48px"/>
        </q-item-section>
        <q-item-section>
          <q-item-label class="text-grey">
            {{ $t('price__stars_pay') }}
          </q-item-label>
          <q-item-label class="text-h6">
            Telegram Stars
          </q-item-label>
          <q-item-label class="text-grey">
            {{ $t('price__stars_description') }}
          </q-item-label>
        </q-item-section>
      </q-item>
    </q-card>
  </slide-template> 
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import SlideTemplate from 'components/SlideTemplate.vue'
  import PriceSectionItem from 'components/PriceSectionItem.vue'
  import telegramStar from 'components/TelegramStar.vue'

  const tabs = [
    { name: 'legal', label: 'price__legal'},
    { name: 'individual', label: 'price__individual'}
  ]
  const tab = ref(tabs[0].name)
  
  const tariff = [
    { id: 1, name: 'TEST', price: null, price_rub: null, chatsQty: 5 },
    { id: 2, name: 'START', price: 1000, price_rub: 2000, chatsQty: 15 },
    { id: 3, name: 'PRO', price: 5000, price_rub: 10000, chatsQty: 40 },
    { id: 4, name: 'VIP', price: 12000, price_rub: 24000, chatsQty: null }
  ]
  
</script>

<style scoped>
</style>
