<template>
    <div v-if="loading == 0">
        <section>
            <div class="breadcrumb_style">
                <div class="container">
                    <ul>
                        <li><a href="/">صفحه اصلی</a></li>
                        <li><a href="/shopList">لیست فروشگاه ها</a></li>
                        <li><a href="javascript:;">{{shop.title}}</a></li>
                    </ul>
                </div>
            </div>
        </section>
        <section>
            <div :style="{backgroundImage: shop.attachmentsImage.filter((img)=>{if(img.filename == 'cover') return true}).length?'url(/files?uid='+shop.attachmentsImage.filter((img)=>{if(img.filename == 'cover') return true})[0].uid+'&width=1900&height=300)':'url(/images/default-image.png)'}">
                <div class="shop_list" style="background-color: rgba(0,0,0,.5)">
                    <div class="container">
                        <div class="row">
                            <div class="col-lg-7">
                                <div class="padding-right-10 padding-left-10">
                                    <div class="row">
                                        <div class="col-sm-3 text-center padding-right-5 padding-left-5">
                                            <img :src="shop.attachmentsImage.filter((img)=>{if(img.filename == 'logo') return true}).length?'/files?uid='+shop.attachmentsImage.filter((img)=>{if(img.filename == 'logo') return true})[0].uid+'&width=120&height=120':'/images/default-image.png'">
                                        </div>
                                        <div class="col-sm-9 d-flex align-items-center padding-right-5 padding-left-5">
                                            <div class="info">
                                                <h3>{{shop.title}}</h3>
                                                <div class="d-flex flex-column align-items-center align-items-sm-start">
                                                    <span>آدرس:  {{shop.address}}</span>
                                                    <span>تلفن تماس:  <span dir="ltr" style="cursor: pointer" @click="()=>tell=shop.tell">{{tell}}</span></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-5 mt-4 mt-lg-0">
                                <div class="row h-100 d-flex align-items-center">
                                    <div class="col-sm-12">
                                        <div class="rate">
                                            <div class="margin-top-10">
                                                <span>سطح:</span>
                                                <span v-if="shop.type=='normal'">عادی</span>
                                                <span v-if="shop.type=='gold'">طلایی</span>
                                                <span v-if="shop.type=='silver'">نقره ای</span>
                                            </div>
                                        </div>
                                    </div>
                                    <!--<div class="col-sm-6">-->
                                    <!--<button>عضویت در خبرنامه</button>-->
                                    <!--</div>-->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section>
            <div class="container">
                <div class="list_style">
                    <div class="row">
                        <div class="col-lg-12 mt-4 mt-md-0">
                            <div class="back_left">
                                <div class="dashes">
                                    <img src="/uploads/img/dashes_2.png">
                                </div>
                                <div class="result">
                                    <span>تعداد نتایج: <strong>{{totalResult}} مورد</strong></span>
                                    <div>
                                        <i class="o-icon o-menu-to-close-2 changeView" @click="changeView(false,$event)"></i>
                                        <i class="o-icon o-grid-to-list changeView active" @click="changeView(true,$event)"></i>
                                    </div>
                                </div>
                                <div class="padding-right-5 padding-left-5">
                                    <div v-if="gridView" class="row padding-top-25">
                                        <div class="col-lg-3 col-md-6 padding-right-10 padding-left-10" v-for="ad in advertisements">
                                            <advertisement :ad="ad"></advertisement>
                                        </div>
                                    </div>
                                    <div v-else class="row padding-top-25 part_3_back">
                                        <div class="col-md-12 padding-right-10 padding-left-10"  v-for="ad in advertisements">
                                            <advertisementList :ad="ad"></advertisementList>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="loadMore" v-show="loadMore"><img src="/images/loading.gif" /></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>
<script>
    import advertisement from './advertisement'
    import advertisementList from './advertisementList'
    export default {
        components: {
            advertisement,
            advertisementList
        },
        props:['id'],
        data() {
            return {
                gridView:true,
                page:1,
                advertisements:[],
                lastPage:0,
                loading:1,
                shop:{},
                loadMore:false,
                tell:null,
                totalResult:null
            }
        },
        watch:{
        },
        beforeMount(){
            axios.post('/shop/show', {id:this.id}).then(res=>{
                this.shop=res.data.data
                this.loading--
                this.tell=res.data.data.tell.substring(0,5)+'***'
            })
        },
        mounted() {

            if(this.selectedCat){
                this.editCat=false
                axios.get('/advertisement/data-category/'+this.selectedCat).then(res=>{
                    this.catInfo = res.data
                })
            }
            this.getAdRequest()
            $(window).bind('mousewheel DOMMouseScroll',(event)=> {
                if(event.originalEvent.wheelDelta<0 && this.page <= this.lastPage && !this.loadMore){
                    if($(window).outerHeight()+$(window).scrollTop() > Math.round($('#loadMore').offset().top +200)){
                        this.loadMore=true
                        this.getAdRequest()
                    }
                }
            })

        },
        methods:{
            getAdRequest(){
                let lastAds=this.advertisements
                axios.post('/shop/show-adv', {page:this.page, id:this.id}).then(res=>{
                    let adv = res.data.data.data;
                    this.advertisements.push.apply(lastAds,adv)
                    this.page = res.data.data.current_page + 1
                    this.lastPage=res.data.data.last_page
                    this.loadMore=false
                    this.totalResult=res.data.data.total
                })
            },
            changeView(grid,e){
                $('.changeView').removeClass('active')
                e.currentTarget.classList.add('active')
                if(grid){
                    this.gridView=true
                }else{

                    this.gridView=false
                }
            },
        },
    }
</script>
