<template>
    <div v-if="loading==0">
        <section>
            <div class="breadcrumb_style">
                <div class="container">
                    <ul>
                        <li><a href="/">صفحه اصلی</a></li>
                        <li><a href="javascript:;">ویرایش آگهی {{adv.title}}</a></li>
                    </ul>
                </div>
            </div>
        </section>
        <form class="container createAd" id="adForm" @submit="submitForm">
            <div class="row margin-top-50">
                <div class="col-md-4">
                    <div class="form-group">
                        <label>عنوان آگهی</label>
                        <input name="title" type="text" class="form-control" placeholder="عنوان آگهی" :value="adv.title" />
                        <input name="id" type="hidden" :value="adv.id" />
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label>قیمت</label>
                        <input name="price" type="number" class="form-control" placeholder="قیمت" :value="adv.price" />
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label>اولویت</label>
                        <select name="priority" class="form-control">
                            <option value="normal">عادی</option>
                            <option value="immediate">فوری</option>
                            <option value="special">ویژه</option>
                            <option value="immediate-special">ویژه و فوری</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label>نوع</label>
                        <select name="type" class="form-control">
                            <option value="sale">فروش</option>
                            <option value="rent">اجاره</option>
                            <option value="buy">خرید</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label>قابلیت پیشنهاد دادن</label>
                        <div class="switch-button">
                            <label class="switch">
                                <input type="checkbox" :v-model="offer">
                                <span class="slider round"></span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="d-flex" style="justify-content:space-between">
                        <div class="photo-upload text-center" v-for="(input , index) in adv.attachmentsImage">
                            <label>
                                <img :src="'/files?uid='+input.uid+'&width=300&height=300'" class="width100" />
                                <i class="o-icon o-simple-remove" style="color:red;cursor: pointer;vertical-align: middle;position:absolute;top:5px;left:5px" @click="deleteImg(input.uid,index)"></i>
                            </label>
                        </div>
                        <div class="photo-upload text-center" v-for="(input , index) in imgInput">
                            <label :for="'image'+index+1">
                                <input name="image[]" type="file" class="d-none" v-bind="input.file"  accept="image/*" :id="'image'+index+1" @change="imgChange(index,$event.target)"/>
                                <img src="images/add_image.png" class="width100" />
                                <div class="bg pic-show" :id="'bg'+index" :style="{backgroundImage:'url(\''+input+'\')' }"></div>

                            </label>
                        </div>
                    </div>

                </div>
                <div class="col-md-4" v-for="itm in adv.category.items">
                    <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" @change="changeSwitch" v-model="datas[itm.id]">
                                <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">
                    <div class="form-group">
                        <label>توضیحات</label>
                        <textarea class="form-control" name="description">{{adv.description}}</textarea>
                    </div>
                </div>
                <div class="col-md-12 text-left">
                    <button type="submit" class="submit-form btn">ویرایش آگهی</button>
                </div>
            </div>
        </form>
    </div>

</template>
<script>
    import vSelect from 'vue-select'
    export default {
        components: {
            vSelect
        },
        props:['id'],
        data() {
            return {
                adv:{},
                imgInput:[],
                catItems:[],
                datas:{},
                offer:false,
                loading:1,
            }

        },
        beforeMount(){
            axios.get('/advertisement/single?id='+this.id).then(res=>{
                this.adv=res.data.data
                this.offer=res.data.data.offer == 1 ?true:false
                this.datas = JSON.parse(res.data.data.data)
                this.loading--
                this.adv.category.items.map((itm)=>{
                    if(itm.type=='switch'){
                        this.datas[itm.id] = parseInt(this.datas[itm.id])
                    }
                })
                for(let i=0;i<this.adv.category.limit-this.adv.attachmentsImage.length;i++){
                    this.imgInput.push('/images/add_image.png')
                }
            })
        },
        watch:{
        },
        mounted() {

        },
        methods:{
            imgChange:function (pic,input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();
                    reader.onload = (e)=> {
                        this.imgInput[pic]=e.target.result
                        this.$forceUpdate()
                    }
                    reader.readAsDataURL(input.files[0]);
                }
            },
            changeSwitch:function () {
                this.$forceUpdate()
            },
            submitForm:function (e) {
                e.preventDefault()
                let fd = new FormData($('#adForm')[0])
                fd.append('offer',this.offer?1:0)
                for (let i in this.datas){
                    if(this.datas[i] ==true){
                        fd.append(`datas[${i}]`,1)
                    }else if(this.datas[i] ==false){
                        fd.append(`datas[${i}]`,0)
                    }else{
                        fd.append(`datas[${i}]`,this.datas[i])
                    }
                }
                axios.post('/advertisement/update',fd,{headers: {'Content-Type': 'multipart/form-data'}}).then(res=>{
                    window.location.replace("/myAds");
                })
            },
            deleteImg:function (uid,index) {
                axios.post('/advertisement/delete-attachment',{uid:uid}).then(res=>{
                    this.adv.attachmentsImage.splice(index,1)
                    this.imgInput.push('/images/add_image.png')
                })
            }
        },
    }
</script>
