<template>
	<view>
        <!-- 订单分类 -->
        <scroll-view class="nav" scroll-x="true" scroll-with-animation="true">
            <view :class="['nav-item', selectNavId === item.state ? 'nav-item-selected':'']" v-for="(item,index) in navList" :key="index" @click="selectNav(item.state)">
        		  {{item.name}}
            </view>
        </scroll-view>
        
        <!-- 订单列表 -->
        <store-order :list="returnInfo" listType="deliver" @navDetail="$Router.push({name: 'goodsDetails', params:{id: $event.id}})" />
        
        <!-- 分页 -->
        <uni-load-more :status="pageStatus" :iconSize="16" v-if="returnInfo.length > 0"></uni-load-more>
	</view>
</template>

<script>
    import { storeDeliver } from '@/apis/interfaces/store'
    import storeOrder from '@/components/store-order/store-order'
	export default {
        comments:{
        	storeOrder
        },
		data() {
			return {
				returnInfo  : [] ,// 列表
                navList     : [{
						name    : '待发货',
						state   : '1'
					},{
						name    : '已发货',
						state   : '2'
					},{
						name    : '待提货',
						state   : '3'
					},{
						name    : '已提货',
						state   : '4'
					}
                ],
                selectNavId : '1',
                
                // 分页
                pageStatus	 : '',
                pageCurrent	 : 1
			}
		},
        onShow() {
            // 获取退货单列表
            this.returnData();
        },
		methods: {
            // 退货单列表
			returnData(){
                storeDeliver({
                    state: this.selectNavId,
                    page : this.pageCurrent
                }).then(res=>{
                    if(res.page.current === 1){
                    	this.returnInfo = []
                    }
                    this.returnInfo  = this.returnInfo.concat(res.data)
                    this.pageCurrent = res.page.current
                    this.pageStatus	 = res.page.has_more ? 'more': 'noMore'
                })
            },
            
            // 选择订单
            selectNav(id) {
                if (this.selectNavId !== id) {
                    this.selectNavId = id
					this.pageCurrent = 1
                    this.returnData()
                }
            },
			
            // 下拉加载
            onReachBottom() {
            	if(this.pageStatus == 'more'){
            		this.pageStatus = 'loading'
					this.pageCurrent += 1
					this.returnData();
            	}
            }
		}
	}
</script>

<style lang="scss" scoped>
    // 订单nav
    .nav {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        box-sizing: border-box;
        white-space: nowrap;
        font-size: $title-size*0.95;
        padding: 0 30rpx;
        background-color: #fff;
        color: #666;
        position: sticky;
        top: 0rpx;
        z-index: 1;
        .nav-item {
            width: 25%;
            text-align: center;
            display: inline-block;
            border-bottom: solid 4rpx #fff;
            padding: 30rpx 0;
        }
        .nav-item-selected {
            color: $mian-color;
        }
    }
    
    // 暂无订单
    .pack-center {
        text-align: center;
        font-size: $title-size-sm;
        color: $text-gray;
        padding-top: 50%;
        image {
            width: $uni-img-size-lg * 2;
            height:$uni-img-size-lg * 2;
            border-radius: $uni-border-radius-circle;
            margin-bottom: $margin;
        }
    }
</style>
