<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" />
        
        <!-- 分页 -->
        <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	 : '',
                page		 : 1
			}
		},
        created() {
        },
        onShow() {
            // 获取退货单列表
            this.returnData();
        },
		methods: {
            // 退货单列表
			returnData(){
                storeDeliver({
                    state: this.selectNavId,
                    page : this.goodsPage
                }).then(res=>{
                    if(res.page.current === 1){
                    	this.returnInfo = []
                    }
                    this.returnInfo = this.returnInfo.concat(res.data)
                    this.goodsPage  = res.page.current
                    this.pageStatus	= res.page.has_more ? 'more': 'noMore'
                })
            },
            
            // 选择订单
            selectNav(id) {
                if (this.selectNavId !== id) {
                    this.selectNavId = id
                    this.returnData()
                }
            },
            
            // 我要发货
            goSend(orderNo) {
                console.log(orderNo)
                return
                uni.showModal({
                    title: '是否签收此订单？',
                    success: res => {
                        if(res.confirm) {
                            storeSign(orderNo).then(() => {
                                uni.showToast({
                                    icon: 'none',
                                    title: '签收成功'
                                })
                                setTimeout(()=>{
                                    this.returnData()
                                },3000)
                            }).catch(err => {
                                uni.showToast({
                                    icon: 'none',
                                    title: err.message
                                })
                            })
                        }
                    }
                })
            },
            
            // 下拉加载
            onReachBottom() {
            	if(this.pageStatus == 'more'){
            		this.pageStatus = 'loading'
            		if(this.selectNavId === '1') {
            			this.goodsPage += 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: $main-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>
