<template>
    <div class="zj-main">
        <mt-header title="优惠券">
            <router-link to="/personCenter" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
        </mt-header>
        <ul class="common-tab">
            <li class="selected">未使用</li>
            <li>已使用</li>
            <li>已过期</li>
        </ul>
        <div class="cyc-scroll2">
            <mt-loadmore :bottom-method="loadBottom" @bottom-status-change="handleBottomChange"
                         :bottom-all-loaded="allLoaded" ref="loadmore">
                <ul>
                    <person-coupon-item v-for="item in myCouponList" :item="item"></person-coupon-item>
                </ul>
                <div class="loadmore-end" v-show="allLoaded && myCouponList.length>0">--end--</div>
                <div slot="bottom" class="mint-loadmore-bottom">
                    <span v-show="bottomStatus !== 'loading'" :class="{ 'is-rotate': bottomStatus === 'drop' }">↑</span>
					<span v-show="bottomStatus === 'loading'">
                        <mt-spinner type="snake"></mt-spinner>
                      </span>
                </div>
            </mt-loadmore>
            <no-data v-if="myCouponList.length==0">
                <img src="../../static/images/nocoupon.svg"/>
                <p>您还没有优惠券记录哦~</p>
            </no-data>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
    import personCouponItem from "../coupon/personCouponItem.vue"
    import noData from '../common/noData.vue'
    import {getmyCouponList, clearmyCouponList} from '../../vuex/actions'
    export default {
        data() {
            return {
                page: 0,
                pageNum: 10,
                allLoaded: false,
                bottomStatus: '',
                wrapperHeight: 0
            }
        },
        components: {
            personCouponItem,
            noData
        },
        methods: {
            gotoback(){
                this.$router.go(-1)
            },
            handleBottomChange(status) {
                this.bottomStatus = status;
            },
            loadBottom(id) {
//                if(this.browseRecordList.length>=this.browseRecordList.count){
//                    this.allLoaded=true;
//                }
                var self = this;
                setTimeout(function () {
                    if (self.myCouponList.length >= self.myCouponCount) {
                        self.allLoaded = true;
                    }
                }, 0);
                if (self.myCouponList.length > 0 && !this.allLoaded) {
                    self.page++;
                    self.getmyCouponList(self.page, self.pageNum).then(function (result) {
                        if (result == "stop") {
                            self.allLoaded = true;
                        }
                    });
                }
                this.$refs.loadmore.onBottomLoaded(id);
            }
        },
        vuex: {
            getters: {
                myCouponList: ({personCenterData}) => {
                    return personCenterData.myCouponList;
                }
            },
            actions: {
                getmyCouponList,
                clearmyCouponList
            }
        },
        beforeRouteEnter(to, from, next) {
            next(vm => {
                vm.clearmyCouponList().then(function () {
                    vm.getmyCouponList(vm.page, vm.pageNum).then(function (result) {
                        if (result == "stop") {
                            vm.allLoaded = true;
                        }
                    });
                });
                setTimeout(function () {
                    $(".cyc-scroll2").scrollTop(0);
                }, 0)
            });
        },
        beforeRouteLeave (to, from, next){

            next();

        }
    }
</script>