<template>
	<view class="content">
		<view class="dt-header">
			<view class="title">已领取商品数量</view>
			<view class="num">{{glz}}<span>件</span></view>
		</view>
		<view class="logs-title">领取记录</view>
		<block v-if="array.length >= 1">
		   <view style="padding: 0 30rpx;">
		       <!-- 订单列表  -->
		       <missionsGoodsItem v-for="(item, arrayIndex) in array" :order-info="item" :key="arrayIndex" 
                @onBtn="onType" />
		       <!-- 加载更多 -->
		       <view class="pages-load">
		           <u-loadmore :status="status" />
		       </view>
		   </view>
		</block>
		<block v-else>
		    <view class="vertical order-null">
		        <u-empty mode="order" icon="http://cdn.uviewui.com/uview/empty/order.png" text="暂无领取记录"
		            textColor="#999" />
		    </view>
		</block>
	</view>
</template>

<script>
    import missionsGoodsItem from '@/components/missions-goods-item/index.vue'
    import {myPinList} from '@/apis/interfaces/pin'
	export default {
        components:{
            missionsGoodsItem
        },
		data() {
			return {
                status: "loading",
				glz: '0.00',
				array: []
			};
		},
		onLoad() {
		    this.getOrder()
		},
        onReachBottom() {
            if (this.status === 'loadmore') {
                this.page += 1
                this.status = 'loading'
                this.getOrder()
            }
        },
        methods:{
            getOrder() {
                myPinList({
                    page: this.page
                }).then(res => {
                    console.log(res)
                    if (res.page.current === 1) {
                        this.array = []
                    }
                    let ordersArr = res.data.map(val => {
                        return {
                            no: val.order_no,
                            cover: val.item.cover,
                            name: val.item.name,
                            price: val.item.price,
                            sum: 1,
                            collage: val.collage,
                            shop: val.shop,
                            goods_id: val.item.goods_id,
                            unit: val.item.unit,
                            users: val.users,
                            invite: val.invite,
                            order: val.order,
                            url: val.url
                        }
                    })
                    this.array = this.array.concat(ordersArr)
                    this.status = res.page.has_more ? 'loadmore' : 'nomore'
                })
            },
            onType(item){
                console.log(item);
            }
        }
	}
</script>

<style lang="scss">
	.pages-empty {
	    height: 50vh;
	}
	.content{
		background: $window-color;
		min-height: 100vh;
		.dt-header{
			background: #e74a45;
			padding: $padding*2 $padding $padding*2;
			.title{
				color: rgba(255, 255, 255, .9);
				font-size: 28rpx;
			}
			.num{
				font-weight: bold;
				font-size: 60rpx;
				padding-top: 10rpx;
				color: white;
                span{
                    font-size:26rpx;
                    padding-left: 20rpx;
                    padding-bottom: 10rpx;
                    font-weight: normal;
                }
			}
		}
		// 账户记录
		.logs-title{
			padding: 0 $padding;
			font-weight: bold;
			line-height: 90rpx;
			color: #333;
			font-size: 30rpx;
		}
		.logs-item{
			position: relative;
			background: white;
			border-radius: $radius;
			padding: $padding - 10 $padding;
			padding-right: 240rpx;
			box-sizing: border-box;
			margin: 0 $margin ($margin - 10);
			.logs-item-title{
				font-weight: bold;
				font-size: 30rpx;
				line-height: 50rpx;
			}
			.logs-item-time{
				font-size: 28rpx;
				line-height: 40rpx;
				color: gray;
			}
			.logs-item-price{
				position: absolute;
				right: $padding;
				top: $padding - 10;
				line-height: 90rpx;
				width: 180rpx;
				text-align: right;
				font-weight: bold;
				@extend .nowrap;
				&.add{
					color: #e74a45;
				}
				&.remove{
					color: $text-price;
				}
			}
		}
	}
</style>
