<template>
    <section v-if="loading == 0">
        <div class="container">
            <div class="list_style">
                <div class="row">
                    <div class="col-lg-3 col-md-4">
                        <div class="back_right">
                            <div class="name_ad">
                                <div v-if="!editCat && catInfo">
                                    <img :src="'/files?uid='+catInfo.attachments.uid+'&width=87&height=87'">
                                    <span> {{catInfo.title}} <i class="o-icon o-edit-76" @click="()=>editCat=true"></i></span>
                                </div>
                                <div v-if="editCat" style="width:100%">
                                    <v-select :options="categories" label="title" v-model="catFilter" placeholder="دسته بندی">
                                        <span slot="no-options">
                                            نتیجه ای یافت نشد
                                        </span>
                                    </v-select>
                                    <v-select :options="subCategories" label="title" v-model="subCatFilter" placeholder="زیر دسته" style="margin-top:10px">
                                        <span slot="no-options">
                                            نتیجه ای یافت نشد
                                        </span>
                                    </v-select>
                                </div>
                            </div>
                            <div class="dashes">
                                <img src="/uploads/img/dashes_3.png">
                            </div>
                            <div class="filters">
                                <span>فیلترها</span>

                                <div class="margin-bottom-5">
                                    <b>محدوده قیمت: <strong>( تومان)</strong></b>
                                </div>
                                <vue-slider ref="slider" v-if="priceSlider" v-model="slider.price" v-bind="slider"></vue-slider>
                            </div>
                            <div class="select_2_back">
                                <div class="count">
                                    <v-select :options="states" label="title" placeholder="انتخاب استان" v-model="selectedState">
                                        <span slot="no-options">
                                            نتیجه ای یافت نشد
                                        </span>
                                    </v-select>
                                </div>
                                <div class="count">
                                    <v-select :options="cities" label="title" placeholder="انتخاب شهر" v-model="selectedCity">
                                        <span slot="no-options">
                                            نتیجه ای یافت نشد
                                        </span>
                                    </v-select>
                                </div>
                            </div>
                            <div class="buttons">
                                <button @click="filter">اعمال فیلترها</button>
                                <button @click="cancelFilter">لغو فیلتر</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-9 col-md-8 mt-4 mt-md-0">
                        <div class="back_left">
                            <div class="search_style">
                                <input type="text" placeholder="نام محصول ، قطعه یا مشخصه دستگاه مورد نظر خود را وارد نمایید..." v-model="searchInput">
                                <button @click="search">جستجو کن</button>
                            </div>
                            <div class="select_2_back">
                                <div class="padding-right-10 padding-left-10 margin-top-15">
                                    <div class="row">
                                        <div class="col-lg-4 padding-right-5 padding-left-5 count">
                                            <v-select :options="orderBy" label="title" v-model="selectedOrderBy" placeholder="ترتیب نمایش">
                                                <span slot="no-options">
                                                    نتیجه ای یافت نشد
                                                </span>
                                            </v-select>
                                        </div>
                                        <div class="col-lg-4 padding-right-5 padding-left-5 count mt-3 mt-lg-0">
                                            <v-select :options="priorities" label="title" v-model="selectedPriority" placeholder="اولویت">
                                                <span slot="no-options">
                                                    نتیجه ای یافت نشد
                                                </span>
                                            </v-select>
                                        </div>
                                        <div class="col-lg-4 padding-right-5 padding-left-5 mt-3 mt-lg-0 d-flex align-items-center">
                                            <a href="/advanceSearch" style="width:100%"><button>جستجوی پیشرفته</button></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <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-4 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>
</template>
<script>
    import vSelect from 'vue-select'
    import vueSlider from 'vue-slider-component';
    import advertisement from './advertisement'
    import advertisementList from './advertisementList'
    export default {
        components: {
            vSelect,
            vueSlider,
            advertisement,
            advertisementList
        },
        props:['cat','sub','city','priority','order','q','filters'],
        data() {
            return {
                gridView:true,
                priceSlider:false,
                slider:{
                    price:[null,null],
                    min:0,
                    max:100,
                    interval:1,
                    tooltip:'hover',
                    tooltipDir:'bottom',
                    tooltipStyle:{'background-color':'#f2c200','border':'1px solid #f2c200','padding':'2px','font-size':'15px'},
                    processStyle:{'background-color':'#f2c200'},
                },
                states:[],
                selectedState:null,
                selectedCity:null,
                finalCity:null,
                cities:[],
                page:1,
                advertisements:[],
                lastPage:0,
                loadMore:false,
                orderBy:[
                    {
                        title:'صعودی قیمت',
                        key:'priceAsc',
                    },
                    {
                        title:'نزولی قیمت',
                        key:'priceDesc',
                    },
                    {
                        title:'صعودی تاریخ',
                        key:'idAsc',
                    },
                    {
                        title:'نزولی تاریخ',
                        key:'idDesc',
                    }
                ],
                selectedOrderBy:null,
                finalOrderBy:null,
                priorities:[
                    {
                        title:'عادی',
                        key:'normal',
                    },
                    {
                        title:'فوری',
                        key:'immediate',
                    },
                    {
                        title:'ویژه',
                        key:'special',
                    },
                    {
                        title:'ویژه فوری',
                        key:'immediate-special',
                    },
                ],
                selectedPriority:null,
                finalPriority:null,
                price:null,
                searchInput:null,
                selectedCat:null,
                selectedSubCat:null,
                finalState:null,
                catInfo:null,
                loading:3,
                categories:[],
                catFilter:null,
                subCategories:[],
                subCatFilter:null,
                editCat:true,
                filtering:null,
                totalResult:null
            }
        },
        watch:{
            selectedState: function (val) {
                this.cities=[]
                this.selectedCity=null
                this.finalCity=null
                axios.get('/advertisement/data-cities/'+val.id).then(res=>{
                    this.cities=res.data
                })
            },
            selectedOrderBy: function (val) {
                this.finalOrderBy = val.key
                this.advertisements=[]
                this.page=1
                this.getAdRequest()
            },
            selectedPriority: function (val) {
                this.finalPriority = val.key
                this.advertisements=[]
                this.page=1
                this.getAdRequest()
            },
            selectedCity: function (val) {
                this.finalCity=val.id
            },
            catFilter:function (val) {
                this.selectedCat = val.id
                this.selectedSubCat=null
                this.subCatFilter=null
                axios.get('/advertisement/sub-category/'+val.id).then(res=>{
                    this.subCategories = res.data
                })
            },
            subCatFilter:function (val) {
                this.selectedSubCat = val.id
            }
        },
        beforeMount(){
            this.finalOrderBy = this.order != 'null'?this.order:null
            this.finalPriority = this.priority != 'null'?this.priority:null
            this.searchInput = this.q != 'null'?this.q:null
            this.finalCity = this.city != 'null'?this.city:null
            this.selectedCat = this.cat != 'null'?this.cat:null
            this.selectedSubCat = this.sub != 'null'?this.sub:null
            this.finalState = this.state != 'null'?this.state:null
            this.filtering = this.filters != 'null'?this.filters:null
        },
        mounted() {
            axios.get('/advertisement/data-states').then(res=>{
                this.states = res.data
                this.loading--
            })
            axios.get('/advertisement/category/list').then(res=>{
                this.categories = res.data.data
                this.loading--
            })
            axios.get('/advertisement/max-price').then(res=>{
                this.slider.price[0] = 0
                this.slider.price[1] = res.data.data+1
                this.slider.interval = (res.data.data/10)
                this.slider.max = res.data.data+1
                this.priceSlider=true
                this.loading--
            })
            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('/advertisement/show',
                    {
                        page:this.page,
                        cat_parent:this.selectedCat?this.selectedCat:null,
                        category_id:this.selectedSubCat?this.selectedSubCat:null,
                        priority:this.finalPriority?this.finalPriority:null,
                        pricemin:this.price?this.price[0]:null,
                        pricemax:this.price?this.price[1]:null,
                        orderby:this.finalOrderBy?this.finalOrderBy:null,
                        city_id:this.finalCity?this.finalCity:null,
                        state_id:this.finalState?this.finalState:null,
                        q:this.searchInput?this.searchInput:null,
                        filter:this.filtering?this.filtering:null
                    }).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
                })
            },
            filter(){
                this.advertisements=[]
                this.page=1
                this.price=[this.slider.price[0],this.slider.price[1]]
                this.getAdRequest()
            },
            cancelFilter(){
                this.advertisements=[]
                this.page=1
                this.selectedCity=null
                this.selectedState=null
                this.finalOrderBy=null
                this.finalPriority=null
                this.price=null
                this.searchInput=null
                this.selectedCat=null
                this.selectedSubCat=null
                this.$refs.slider.setValue([0,this.slider.max])
                this.$forceUpdate()
                this.getAdRequest()
            },
            search(){
                this.advertisements=[]
                this.page=1
                this.getAdRequest()
            },
            changeView(grid,e){
                $('.changeView').removeClass('active')
                e.currentTarget.classList.add('active')
                if(grid){
                    this.gridView=true
                }else{

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