<template>
  <div v-if="disabled === 0 && is_paid === 1 && $page.props.auth.user.id !== user_id" class="mt-3 rounded-md  bg-indigo-300 p-4"
       @click.stop=""
  >
    <div v-if="bought == 0" class="flex items-center justify-center">
      <div class="mr-5 mb-2 md:mb-0 font-bold text-center md:text-left w-full md:w-auto">
        Цена: {{ price }}
      </div>
      <div>
        <button type="button" class="my-1 transition shadow-none hover:shadow-classic2 inline-flex items-center px-8 py-1 md:py-3 justify-center  text-sm md:text-base rounded-md text-white bg-pink focus:outline-none"
                @click="purchaseFeed"
        >
          Купить
        </button>
      </div>
    </div>
    <div v-else class="flex flex-wrap items-center justify-center">
      <div class="paid-feed-msg mr-5 mb-2 md:mb-0 font-bold text-center md:text-left w-full md:w-auto">
        Данный товар вами куплен
      </div>

      <button v-if="disable_btn == 0 && paid_open == 0" type="button"
              class="my-1 mx-1 transition shadow-none hover:shadow-classic2 inline-flex items-center px-8 py-1 md:py-3 justify-center  text-sm md:text-base rounded-md text-white bg-orange focus:outline-none" @click="replaceFeed"
      >
        Показать
      </button>


      <inertia-link :href="route('setting.show.purchases', feed_id)" class="my-1 mx-1 transition shadow-none hover:shadow-classic2 inline-flex items-center px-8 py-1 md:py-3 justify-center text-sm md:text-base rounded-md text-white bg-pink focus:outline-none">
        Скачать
      </inertia-link>
    </div>
  </div>
  <div v-else-if="is_paid === 1 && $page.props.auth.user.id === user_id" class="p-4 text-center"
       @click.stop=""
  >
    <button v-if="paid_open === 0" type="button"
            class="my-1 mx-1 transition shadow-none hover:shadow-classic2 inline-flex items-center px-8 py-1 md:py-2 justify-center  text-sm rounded-md text-white bg-orange focus:outline-none" @click="replaceFeed"
    >
      Показать эксклюзивный контент
    </button>
  </div>
</template>


<script>
import axios from 'axios'

export default {
    components: {},
    props: {
        user_id: Number,
        is_paid: Number,
        feed_id: Number,
        price: String,
        paid_open: {
            type: Number,
            default: 0,
        },
    },
    emits: ['onReplaceFeed'],
    data() {
        return {
            bought: 0,
            disable_btn: 0,
            disabled: 1,
        }
    },
    mounted() {
        if (this.is_paid === 1) {
            axios
                .post(route('feeds.purchase_check', this.feed_id))
                .then(({ data }) => {
                    if (data === 1) {
                        this.bought = 1
                    }
                    this.disabled = 0
                })
        }
    },

    methods: {
        purchaseFeed() {
            axios.post(route('feed.purchase', this.feed_id)).then(({ data }) => {
                if (data.error == 1) {
                    alert(data.msg)
                } else {
                    this.$emit('onReplaceFeed', data)
                    this.disable_btn = 1
                    this.bought = 1
                }
            })
        },
        replaceFeed() {
            axios.post(route('feeds.replace', this.feed_id)).then(({ data }) => {
                if (data.collection) {
                    this.$emit('onReplaceFeed', data)
                    this.disable_btn = 1
                }
            })
        },
    },
}
</script>
