<template>
    <div class="container createAd">
        <div class="row margin-top-50">
            <div class="col-md-12">
                <div class="form-group">
                    <label>عنوان آگهی</label>
                    <input v-model="title" type="text" class="form-control" placeholder="عنوان آگهی" />
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label>استان</label>
                    <v-select :options="states" label="title" v-model="selectedState" placeholder="انتخاب استان">
                        <span slot="no-options">
                            نتیجه ای یافت نشد
                        </span>
                    </v-select>
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label>شهر</label>
                    <v-select :options="cities" label="title" v-model="selectedCity" placeholder="انتخاب شهر">
                        <span slot="no-options">
                            نتیجه ای یافت نشد
                        </span>
                    </v-select>
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label>دسته بندی</label>
                    <v-select :options="categories" label="title" v-model="selectedCat" placeholder="انتخاب دسته بندی">
                        <span slot="no-options">
                            نتیجه ای یافت نشد
                        </span>
                    </v-select>
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label>زیر دسته</label>
                    <v-select :options="subCategories" label="title" v-model="selectedSubCat" placeholder="انتخاب زیر دسته">
                        <span slot="no-options">
                            نتیجه ای یافت نشد
                        </span>
                    </v-select>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4" v-for="itm in catItems">
                <div class="form-group">
                    <label>{{itm.title}}</label>
                    <input v-if="itm.type=='text'" type="text" class="form-control" :placeholder="itm.title" v-model="datas[itm.id]" />
                    <select v-if="itm.type=='select'" class="form-control" v-model="datas[itm.id]">
                        <option :value="data" v-for="data in JSON.parse(itm.data)">{{data}}</option>
                    </select>
                    <div v-if="itm.type=='switch'" class="switch-button">
                        <label class="switch">
                            <input type="checkbox" v-model="datas[itm.id]" @change="changeSwitch">
                            <span class="slider round"></span>
                        </label>
                    </div>
                    <textarea v-if="itm.type=='text-box'" class="form-control" v-model="datas[itm.id]"></textarea>
                </div>
            </div>
        </div>
        <div class="row margin-bottom-50">
            <div class="col-md-12 text-left">
                <button class="submit-form btn" @click="search">جست جو</button>
            </div>
        </div>
    </div>
</template>
<script>
    import vSelect from 'vue-select'
    export default {
        components: {
            vSelect
        },
        data() {
            return {
                title:null,
                states:[],
                selectedState:null,
                finalState:null,
                cities:[],
                selectedCity:null,
                finalCity:null,
                categories:[],
                selectedCat:null,
                finalCat:null,
                subCategories:[],
                selectedSubCat:null,
                finalSubCat:null,
                catItems:[],
                datas:{},
            }

        },
        beforeMount(){
            axios.get('/advertisement/data-states').then(res=>{
                this.states = res.data
            })
            axios.get('/advertisement/category/list').then(res=>{
                this.categories = res.data.data
            })
        },
        watch:{
            selectedState: function (val) {
                this.cities=[]
                this.selectedCity=null
                this.finalCity=null
                this.finalState=val.id
                axios.get('/advertisement/data-cities/'+val.id).then(res=>{
                    this.cities=res.data
                })
            },
            selectedCity: function (val) {
                this.finalCity=val.id
            },
            selectedCat: function (val) {
                this.subCategories=[]
                this.selectedSubCat=null
                this.finalSubCat=null
                this.finalCat= val.id
                this.catItems=[]
                this.datas={}
                axios.get('/advertisement/sub-category/'+val.id).then(res=>{
                    this.subCategories=res.data
                })
            },
            selectedSubCat: function (val) {
                this.finalSubCat=val.id
                axios.get('/advertisement/data-category/'+val.id).then(res=>{
                    this.catItems=res.data.items
                    this.expiration_time=res.data.expiration_time
                    this.catItems.map((sw)=>{
                        if(sw.type== 'switch'){
                            this.datas[sw.id]=sw.value=="1"?true:false
                        }
                    })
                })
            },
        },
        mounted() {

        },
        methods:{
            changeSwitch:function () {
                this.$forceUpdate()
            },
            search:function(){
                for (let i in this.datas){
                    if(this.datas[i] ==true){
                        this.datas[i]='1'
                    }else if(this.datas[i] ==false){
                        this.datas[i]='0'
                    }
                }
                window.location.replace("/list?cat="+this.finalCat+'&sub='+this.finalSubCat+'&city='+this.finalCity+'&state='+this.finalState+'&q='+this.title+'&filters='+JSON.stringify(this.datas)+'&priority='+null+'&order='+null);
            },
        },
    }
</script>
