<template>
    <div class="zj-main">
        <mt-header title="优惠券中心">
			 <span @click="gotoback" slot="left">
                <mt-button icon="back"></mt-button>
            </span>
        </mt-header>
        <div class="coupon-banner">
            <img src="../../static/images/ccbanner.png" class="ccbanner-img"/>
        </div>
        <ul class="common-tab">
            <li class="selected">全部</li>
            <li>折扣券</li>
            <li>金额券</li>
            <li>礼品券</li>
            <li>定价券</li>
            <li>包邮</li>
            <li>礼品券</li>
            <li>定价券</li>
            <li>包邮</li>
        </ul>
        <div class="cyc-scroll3">
            <mt-loadmore :bottom-method="loadBottom" @bottom-status-change="handleBottomChange"
                         :bottom-all-loaded="allLoaded" ref="loadmore">
                <ul>
                    <center-coupon-item v-for="item in couponCenterList" :item="item"></center-coupon-item>
                </ul>
                <div class="loadmore-end" v-show="allLoaded && couponCenterList.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="couponCenterList.length==0">
                <img src="../../static/images/nocoupon.svg"/>
                <p>您还没有该类优惠券，尽请期待吧~</p>
            </no-data>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
    import centerCouponItem from "../coupon/centerCouponItem.vue"
    import noData from '../common/noData.vue'
    import {getcouponCenterList, getcouponTab, clearcouponCenterList} from '../../vuex/actions'
    export default {
        data() {
            return {
                page: 0,
                pageNum: 10,
                allLoaded: false,
                bottomStatus: '',
                wrapperHeight: 0
            }
        },
        components: {
            centerCouponItem,
            noData
        },
        methods: {
            gotoback(){
                this.$router.go(-1)
            },
            handleBottomChange(status) {
                this.bottomStatus = status;
            },
            loadBottom(id) {
                var self = this;
                setTimeout(function () {
                    if (self.couponCenterList.length >= self.couponCenterCount) {
                        self.allLoaded = true;
                    }
                }, 0);
                if (self.couponCenterList.length > 0 && !this.allLoaded) {
                    self.page++;
                    self.getcouponCenterList(self.cplType, self.page, self.pageNum).then(function (result) {
                        if (result == "stop") {
                            self.allLoaded = true;
                        }
                    });
                }
                this.$refs.loadmore.onBottomLoaded(id);
            }
        },
        vuex: {
            getters: {
                couponCenterList: ({couponCenterData}) => {
                    return couponCenterData.couponCenterList;
                }
            },
            actions: {
                getcouponCenterList,
                clearcouponCenterList
            }
        },
        beforeRouteEnter(to, from, next) {
            next(vm => {
                vm.clearcouponCenterList().then(function () {
                    vm.getcouponCenterList(vm.cplType, vm.page, vm.pageNum).then(function (result) {
                        if (result == "stop") {
                            vm.allLoaded = true;
                        }
                    });
                });
                setTimeout(function () {
                    $(".cyc-scroll3").scrollTop(0);
                }, 0)
            });
        },
        beforeRouteLeave (to, from, next){
            next();
        }
    }
</script>