Vue.component('product_quick_view', {
template: `
<div class="product_quick_view">

    <div v-if="is_loading" style="padding:20px">
        <div class="loader"></div>

    </div>
    <div>
        <div v-if="!is_loading">



            <div class="row">
                <div class="col-sm-8" style="overflow:hidden">
                    <product_photos_view :photos="thisProduct.photos" source="quicklook" v-if="!is_loading"></product_photos_view>

                </div>

                <div class="col">
                    <div v-if="!is_loading">
                        Sold by
                        <br />
                        <a v-bind:href="site_url+'/'+thisProduct.vendor.username"><img :src="thisProduct.vendor.logo_square_thumb" width="100" /></a>
                    </div>
                    <br /> Price
                    <br />
                    <div class="price_big">
                        <span id="price">{{product.price}}</span><span id="currency">{{product.currency}}</span>
                    </div>

                    <br />
                    <button type="button" class="btn btn-outline-secondary" v-if="product.max_order_quantity < 1"
                            onclick="return false;">
                        Out of stock
                    </button>
                    <a class="btn btn-primary btn-lg active" v-on:click="addToCartThis(product)" v-if="product.max_order_quantity > 0">
                        <i class="fas fa-cart-plus"></i>
                        Add to cart
                    </a>
                    <div class="v-divider"></div>
                    <b-button primary v-on:click="addToFavsThis(product)">
                        <i class="fas fa-heart"></i>
                        Add to wishlist
                    </b-button>



                </div>
            </div>





        </div>

    </div>

</div>


`,
props: ['product', 'href_url_template', 'api_url', 'site_url'],
data: function () {
return {
// 'href_url': this.href_url_template.replace("{product_id}", this.product.id).replace("{product_name}", this.product.name_en.replace('/', '').replace(' ', ''.replace('%20', ''))),
is_loading: true,
thisProduct: []
}

},
watch: {
product: {
handler: function (newVal, oldVal) {
// this.href_url = this.href_url_template.replace("{product_id}", this.product.id).replace("{product_name}", this.product.name_en.replace('/', '').replace(' ', ''.replace('%20', '')));
this.is_loading = true;

var thisCompo = this;

axios.get(this.api_url + '/products/get/' + this.product.id)
.then(function (response) {
thisCompo.thisProduct = response.data.data;
thisCompo.is_loading = false;
})
.catch(function (error) {
console.log(error);
});
}
}
},
methods: {
addToCartThis: function (product) {
addToCart(product);
}, addToFavsThis: function (product) {
addToFavs(product);
},
}
});