<template>
    <div class="zj-main">
        <mt-header title="收货地址">
            <span @click="gotoback" slot="left">
                <mt-button icon="back"></mt-button>
            </span>
        </mt-header>
        <div class="zj-main-mid">

            <mt-loadmore :bottom-method="loadBottom" @bottom-status-change="handleBottomChange"
                         :bottom-all-loaded="allLoaded" ref="loadmore">
                <ul class="page-loadmore-list">
                    <address-item v-for="(item,index) in myAddressList" :index="index" :item="item"
                                  :page-num="pageNum"></address-item>
                    <li class="loadmore-end" v-show="allLoaded&&myAddressList.length>0">--end--</li>
                </ul>
                <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="myAddressList.length==0">
                <img src="../../static/images/noaddress.svg"/>
                <p>您还没有收货地址哦~</p>
            </no-data>
        </div>
        <div class="zj-bottom">
            <router-link :to="{name:'addAddress',params: {Id:false,teype:'add' }}" tag="button" class="zj-bottom-btn">
                + 新增地址
            </router-link>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import addressItem from '../address/addressItem.vue'
    import {getmyAddressList, ClearAddresslist} from '../../vuex/actions'
    import noData from '../common/noData.vue'
    export default {
        data() {
            return {
                page: 0,
                pageNum: 10,
                allLoaded: false,
                bottomStatus: '',
            }
        },
        components: {
            addressItem,
            noData
        },
        methods: {
            gotoback(){
                this.$router.go(-1)
            },
            handleBottomChange(status) {
                this.bottomStatus = status;
            },
            loadBottom(id) {
                var self = this;
                setTimeout(function () {
                    if (self.myAddressList.length >= self.myAddressCount) {
                        console.log("allLoaded:" + self.allLoaded);
                        self.allLoaded = true;
                    }
                }, 0);
                if (self.myAddressList.length > 0 && !self.allLoaded) {
                    self.page++;
                    self.getmyAddressList(self.page, self.pageNum).then(function (result) {
                        if (result == "stop") {
                            self.allLoaded = true;
                        }
                    });
                }
                this.$refs.loadmore.onBottomLoaded(id);
            }
        },
        vuex: {
            getters: {
                myAddressList: ({addressData}) => {
                    return addressData.myAddressList;
                },
                myAddressCount: ({addressData}) => {
                    return addressData.myAddressCount;
                }
            },
            actions: {
                getmyAddressList,
                ClearAddresslist

            }
        },
        beforeRouteEnter (to, from, next){
            next(vm => {
                vm.ClearAddresslist().then(function () {
                    vm.getmyAddressList(vm.page, vm.pageNum).then(function (result) {
                        if (result == "stop") {
                            vm.allLoaded = true;
                        }
                    });
                });
                setTimeout(function () {
                    $(".zj-main-mid").scrollTop(0);
                }, 0);
            });
        },
        beforeRouteLeave (to, from, next){
            next();
        }
    }
</script>