<template>
    <section>
        <div class="states_pick">
            <div class="container">
                <div class="back_ul">
                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item" v-for="category in categories">
                            <a class="nav-link" href="javascript:void(0);" @click="changeCat(category.id,$event)"><img :src="category.attachments?'/files?uid='+category.attachments.uid+'&width=27&height=27':''">{{category.title}}</a>
                        </li>
                    </ul>
                </div>
                <div class="tab-content">
                    <div>
                        <div class="full_slide" dir="ltr">
                            <swiper :options="swiperOption" id="slider_1">
                                <swiper-slide v-for="state in states" :key="state.id">
                                    <div class="states_back" @click="setState(state.id,$event)">
                                        <img :src="'/uploads/img/ostan/'+state.id+'.png'">
                                        <span>{{state.title}}</span>
                                    </div>
                                </swiper-slide>
                            </swiper>
                            <div class="swiper-button-next" slot="button-next"></div>
                            <div class="swiper-button-prev" slot="button-prev"></div>
                        </div>
                        <div class="search_style">
                            <input type="text" placeholder="نام محصول ، قطعه یا مشخصه دستگاه مورد نظر خود را وارد نمایید..." v-model="searchInput">
                            <a :href="'/list?cat='+selectedCat+'&sub='+finalSubCat+'&city='+finalCity+'&state='+selectedState+'&priority='+finalPriority+'&order='+finalOrderBy+'&q='+searchInput"><button>جستجو کن</button></a>
                        </div>
                        <img class="dashes" src="/uploads/img/dashes.png">
                        <div class="select_2_back">
                            <div class="row">
                                <div class="col-lg-3 col-md-6 mb-3 mb-md-0 count">
                                    <v-select :options="subCategories" label="title" v-model="selectedSubCat">
                                        <span slot="no-options">
                                          {{selectedCat ? 'نتیجه ای یافت نشد' : 'ابتدا دسته بندی اصلی را انتخاب کنید'}}
                                        </span>
                                    </v-select>
                                </div>
                                <div class="col-lg-3 col-md-6 count">
                                    <v-select :options="orderBy" label="title" v-model="selectedOrderBy">
                                        <span slot="no-options">
                                            نتیجه ای یافت نشد
                                        </span>
                                    </v-select>
                                </div>
                                <div class="col-lg-3 col-md-6 count mt-3 mt-lg-0">
                                    <v-select :options="priority" label="title" v-model="selectedPriority">
                                        <span slot="no-options">
                                            نتیجه ای یافت نشد
                                        </span>
                                    </v-select>
                                </div>
                                <div class="col-lg-3 col-md-6 count mt-3 mt-lg-0">
                                    <v-select :options="cities" label="title" v-model="selectedCity">
                                        <span slot="no-options">
                                          {{selectedState ? 'نتیجه ای یافت نشد' : 'ابتدا استان را انتخاب کنید'}}
                                        </span>
                                    </v-select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <a class="advanced_search" href="/advanceSearch">جستجوی پیشرفته</a>
                </div>
            </div>
        </div>
    </section>
</template>

<script>
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    import vSelect from 'vue-select'
    export default {
        components: {
            swiper,
            swiperSlide,
            vSelect
        },
        data() {
            return {
                swiperOption: {
                    slidesPerView: 6,
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev'
                    },
                    breakpoints: {
                        991: {
                            slidesPerView: 5,
                        },
                        767: {
                            slidesPerView: 3,
                        },
                        425: {
                            slidesPerView: 2,
                        },
                        340: {
                            slidesPerView: 1,
                        },
                    },
                },
                states:[],
                categories:[],
                subCategories:[],
                selectedSubCat:null,
                finalSubCat:null,
                selectedPriority:null,
                finalPriority:null,
                selectedCity:null,
                finalCity:null,
                selectedState:null,
                cities:[],
                selectedCat:null,
                orderBy:[
                    {
                        title:'صعودی قیمت',
                        key:'priceAsc',
                    },
                    {
                        title:'نزولی قیمت',
                        key:'priceDesc',
                    },
                    {
                        title:'صعودی تاریخ',
                        key:'idAsc',
                    },
                    {
                        title:'نزولی تاریخ',
                        key:'idDesc',
                    }
                ],
                selectedOrderBy:null,
                finalOrderBy:null,
                priority:[
                    {
                        title:'عادی',
                        key:'normal',
                    },
                    {
                        title:'فوری',
                        key:'immediate',
                    },
                    {
                        title:'ویژه',
                        key:'special',
                    },
                    {
                        title:'ویژه فوری',
                        key:'immediate-special',
                    },
                ],
                searchInput:null,
            }
        },
        watch:{
            selectedSubCat: function (val) {
               this.finalSubCat=val.id
            },
            selectedOrderBy: function (val) {
               this.finalOrderBy=val.key
            },
            selectedPriority: function (val) {
               this.finalPriority=val.key
            },
            selectedCity: function (val) {
               this.finalCity=val.id
            },
        },
        mounted() {
            axios.get('/advertisement/data-states').then(res=>{
                this.states = res.data
            })
            axios.get('/advertisement/category/list').then(res=>{
                this.categories = res.data.data
            })
        },
        methods:{
            changeCat(id,event){
                $('.nav-link').removeClass('active')
                event.currentTarget.classList.add('active')
                this.selectedCat=id
                axios.get('/advertisement/sub-category/'+id).then(res=>{
                    this.subCategories=res.data
                })
            },
            setState(id,e){
                $('.states_back').removeClass('active')
                e.currentTarget.classList.add('active')
                this.selectedState = id
                axios.get('/advertisement/data-cities/'+id).then(res=>{
                    this.cities=res.data
                })
            }
        },
    }
</script>
