<template>
  <md-tab id="vipView" md-label="VIP">
    <div class="md-layout md-alignment-bottom-center">
      <CharacterImage :size="10" :hide_if_small="true" :img_src="require(`@/assets/images/characters/mgesold.png`)" :audio_src="require(`@/assets/sounds/soldier_laughevil03.mp3`)"/>
    </div>
    <div class="md-layout md-alignment-bottom-center">
      <div class="md-layout-item md-size-30 md-small-size-100 md-alignment-bottom-center rounded-and-colored" style="z-index: 1">
        <h3 class="txt-innert" style="text-align: center; margin-top: 1%; margin-bottom: 0%; line-height: 1em">Покупка VIP</h3>
      </div>
    </div>
    <div class="md-layout md-alignment-bottom-center" style="margin-top: -1.5%">
      <div class="md-layout-item md-size-60 md-small-size-100 md-alignment-bottom-center rounded-only">
        <h4 style="text-align: center">Нагибай всех благодаря нашей випке!</h4>
        <h5 style="text-align: center; font-family: tf2secondary">(Смотри не перестарайся)</h5>
        <hr width="90%">
        <div class="md-layout md-alignment-bottom-center">
          <div class="md-layout-item md-size-100 md-alignment-bottom-center">
            <div class="md-layout md-alignment-bottom-center md-gutter">
              <VipCard :md_size="30" v-for="price in $API.vip.vip_prices" :key="price.item_price" :price="price"/>
            </div>
          </div>
        </div>
        <hr width="90%">
        <div class="md-layout md-alignment-center-center" style="margin: 2%">
          <div :class="`md-layout-item md-size-${d_size} md-small-size-${s_size}`" style="margin: -5% 0%">
            <h4 style="text-align: center; font-family: tf2secondary">Что дает випка</h4>
          </div>
        </div>
        <div class="md-layout md-alignment-bottom-center">
          <div class="md-layout-item md-size-100 md-alignment-bottom-center">
            <div class="md-layout md-alignment-bottom-center md-gutter">
              <AboutVIPCard v-for="st in $API.vip.about" :key="st.name" :about="st"/>
            </div>
          </div>
        </div>
      </div>
    </div>

  </md-tab>
</template>

<script>
import VipCard from "@/components/TabsMenuElements/VipView/Components/VipCard.vue";
import CharacterImage from "@/components/Others/Images/CharacterImage.vue";
import AboutVIPCard from "@/components/TabsMenuElements/VipView/Components/AboutVIP/AboutVIPCard.vue";

export default {
  name: 'VipView',
  components: {AboutVIPCard, VipCard, CharacterImage},
  props: {
    d_size: {
      type:Number,
      default: 60
    },
    s_size: {
      type:Number,
      default: 90
    }
  },
  methods: {
    //require('../../../../../assets/images/about_vip/'+about.img)
    rnd() {
      return Math.random().toString(36).slice(4);
    },
    getVipStuff() {
      return [
          'Одна випка на все наши сервера.',
          'Резервный слот, и тебя не кикнет если сервер заполнится. Вас не кикнет за АФК.',
          'Хук, позволяет летать по карте используя паутину.',
          'Веревка, позволяет висеть как говно.',
          'Раздатчик теперь играет музыку.',
          'Менять свой класс используя команду !class игнорируя ограничения.',
          'КД у RTD, всегда будет равное двум минутам.',
          '"Бесплатные" аньюжки, каждая на каждый сервер, на каждый класс.'];
    },
    ee(){
      window.open('https://vk.com/topic-173269854_48239948');
    }
  }
}
</script>