<template>
    <section v-if="loading == 0">
        <div class="modal fade bd-example-modal-sm" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-body">
                        <p>آیا از حذف این آگهی مطمئن هستید؟</p>
                        <div class="margin-top-10 text-center">
                            <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">خروج</button>
                            <button type="button" class="btn btn-danger btn-sm" @click="deleteAd">حذف</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <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">
                                <h5>آگهی های من</h5>
                            </div>
                            <div class="dashes">
                                <img src="/uploads/img/dashes_3.png">
                            </div>
                            <img :src="user.attachments?'/files?uid='+user.attachments.uid+'&width=150&height=150':'/images/profile.png'" style="width: 150px;height: 150px;border-radius: 50%" />
                            <h5 class="margin-top-20">{{user.fname}} {{user.lname}}</h5>
                        </div>
                    </div>
                    <div class="col-lg-9 col-md-8 mt-4 mt-md-0">
                        <div class="back_left">
                            <div class="padding-right-5 padding-left-5">
                                <div class="row padding-top-25">
                                    <div class="col-lg-4 col-md-6 padding-right-10 padding-left-10" v-for="(ad,index) in advertisements">
                                        <advertisement :ad="ad"></advertisement>
                                        <div style="background-color:white;padding:2px;position: absolute;top: 0;right:20px">
                                            <i class="o-icon o-simple-remove" style="color:red;cursor: pointer;vertical-align: middle" data-toggle="modal" data-target="#deleteModal" @click="()=>{deleteId=ad.id;deleteIndex=index;$forceUpdate()}" ></i>
                                            <form class="d-inline-block" action="/editAd" method="post">
                                                <input type="hidden" name="id" :value="ad.id" />
                                                <button type="submit" style="background: none;border:none;padding: 0"><i class="o-icon o-edit-71" style="cursor: pointer;margin-right:5px;vertical-align: middle" ></i></button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="loadMore" v-show="loadMore"><img src="/images/loading.gif" /></div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>
<script>
    import advertisement from './advertisement'
    export default {
        components: {
            advertisement,
        },
        data() {
            return {
                states:[],
                page:1,
                advertisements:[],
                lastPage:0,
                loadMore:false,
                loading:1,
                user:{},
                deleteId:null,
                deleteIndex:null,
            }
        },
        watch:{

        },
        beforeMount(){
        },
        mounted() {
            axios.get('/core/user').then(res=>{
                this.user = res.data.data
                this.loading--
                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.get('/advertisement/user-advertisement?page='+this.page).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
                })
            },
            deleteAd(){
                axios.post('/advertisement/delete',{id:this.deleteId}).then(res=>{
                    this.advertisements.splice(this.deleteIndex,1)
                    this.deleteIndex=null
                    this.deleteId=null
                    $('#deleteModal').modal('hide')
                })
            }
        },
    }
</script>
