<template>
    <div>
        <div class="catList">
            <div class="mainCat" v-for="cat in categories">
                <h6>{{cat.title}}</h6>
                <div class="subCatParent">
                    <div class="subCat" v-for="sub in cat.subs">
                        <input type="checkbox" :id="'cb'+sub.id" @change="pushToExpert(sub.id)" />
                        <label :for="'cb'+sub.id">{{sub.title}}</label>
                    </div>
                </div>
            </div>
            <div class="margin-top-20">
                <textarea class="form-control" v-model="description" placeholder="توضیحات"></textarea>
            </div>
        </div>
        <div class="text-left margin-top-20">
            <button class="btn fabrikaBtn" @click="submit">ثبت</button>
        </div>
    </div>

</template>

<script>
    export default {
        props:['cat'],
        components: {
        },
        data() {
            return {
                categories:[],
                catSelected:[],
                description:'',
            }

        },
        watch:{

        },
        mounted(){
            axios.get('/advertisement/category/list').then(res=>{
                this.categories = res.data.data
            })
        },
        methods:{
            pushToExpert:function (id) {
                if(this.catSelected.includes(id)){
                    let index = this.catSelected.indexOf(id)
                    this.catSelected.splice(index,1)
                    this.$forceUpdate()
                }else{
                    this.catSelected.push(id)
                    this.$forceUpdate()
                }
            },
            submit:function () {
                axios.post('/expert/create',{category_id:this.catSelected,description:this.description}).then(res=>{
                    location.reload();
                })
            }
        }
    }
</script>

<style scoped>

</style>