<template>
  <div :class="ifItem()" style="padding-right: 2.5%; padding-left: 2.5%; cursor: pointer" v-on:click="$refs.vbd.openVBD()">
    <md-card class="md-card-base">
      <md-tooltip class="tooltip" md-direction="top">Нажми чтоб посмотреть</md-tooltip>
      <md-card-media-cover md-solid>
        <md-card-media md-ratio="1:1" class="md-card-media-base">
          <img :src="getImg()" :alt="price.human_duration">
        </md-card-media>
        <md-card-area class="md-card-area-base">
          <md-card-header>
            <span class="md-title" style="text-align: right; font-family: tf2build; border-bottom: 1px solid">VIP ({{price.human_duration}})</span>
            <span class="md-subhead" style="text-align: right; font-family: tf2secondary">{{price.money_price}} P</span>
            <span class="md-subhead" style="text-align: right; font-family: tf2secondary">{{price.item_price}}</span>
          </md-card-header>
        </md-card-area>
      </md-card-media-cover>
    </md-card>
    <VipBuyDialog :price="price" ref="vbd"/>
  </div>
</template>

<script>
import VipBuyDialog from "@/components/TabsMenuElements/VipView/Components/VipBuyDialog.vue";

export default {
  name: 'VipCard',
  components: {VipBuyDialog},
  props: {
    md_size: Number,
    box_in_item: {
      type:Boolean,
      default: true
    },
    price: {
      type: Object
    }
  },
  methods: {
    ifItem() {
      return this.box_in_item?`md-layout-item md-size-${this.md_size} md-xsmall-size-90 md-small-size-50`:'';
    },
    getImg() {
      return this.price.img_url;
    }
  }
}
</script>