<template>
	<view class="deliveryRecord-container">
		<scroll-view class="scroll-con" scroll-y @scrolltolower="onreachBottom">
			<!-- 列表数据 -->
			<view class="cell-item-con">
				<u-gap height="15"></u-gap>
				<view class="cell-item" v-for="(item, index) in listdata" :key="index">
					<text class="cell-item-date">{{item.deliveryTime}}</text>
					<view class="cell-item-main">
						<u-image mode="scaleToFill" shape="circle" width="80rpx" height="80rpx" :src="`/static/${item.rubbishType}.png`" class="cell-item-pic"></u-image>
						<view class="cell-item-r">
							<view class="cell-item-head">
								<view class="cell-item-val">
									<text class="cell-item-num">{{item.rubbishWeight}}</text>克
							    </view>
								<view class="cell-item-ledu">
									<text>+{{item.goldNum}}</text>
								    <u-image mode="scaleToFill" width="34rpx" height="34rpx" src="/static/ledou.png"></u-image>
								</view>
							</view>
							<text class="cell-item-des">{{item.stationName}}</text>
						</view>
					</view>
				</view>
			</view>
			<u-empty class="nodata" :text="noDataText" v-if="listdata.length==0 && status!='loading'" mode="list"></u-empty>
			<view class="loadmore">
				<u-loadmore v-if="total>pageSize || status=='loading'" :status="status" />
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getDeliveryLogList
	} from '@/api/deliveryRecord.js'
	export default {
		data() {
			return {
				listdata: [],
				pageNo: 1,  //  当前页码
				pageSize: 10,  //  每页条数
				total: 0,  //  数据总条数
				noDataText: '暂无数据',  //  列表请求状态提示语
				status: 'loadmore',  //  加载中状态
				rubbishType: []
			}
		},
		onShow() {
			this.searchHandle(1)
			this.rubbishType = this.$store.state.vuex_rubbishType
		},
		methods:{
			// 搜索查询
			searchHandle (pageNo,suppName) {
				this.status = "loading"
				pageNo ? this.pageNo = pageNo : null
				getDeliveryLogList({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
				}).then(res => {
					if (res.status == 200) {
						if(this.pageNo>1){
							this.listdata = this.listdata.concat(res.data.list || [])
						}else{
							this.listdata = res.data.list || []
						}
						this.total = res.data.count || 0
					} else {
						this.noDataText = res.message
						this.listdata = []
						this.total = 0
					}
					this.status = "loadmore"
				})
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				if(this.listdata.length < this.total){
					this.pageNo += 1
					this.searchHandle()
				}else{
					uni.showToast({ title: '已经到底了', icon: 'none' })
					this.status = "nomore"
				}
			}
		}
	}
</script>

<style lang="less">
	.deliveryRecord-container{
		width: 100%;
		//  列表
		.scroll-con{
			height: 100%;
			overflow: auto;
		}
		//  列表样式
		.cell-item-con{
			.cell-item{
				background-color: #fff;
				color: #606266;
				padding: 20rpx 32rpx 22rpx;
				border-bottom: 1rpx solid #EEEEEE;
				&:last-child{
					border:0;
				}
				.cell-item-date{
					display: block;
					color: #909399;
					font-size: 24rpx;
				}
				.cell-item-main{
					display: flex;
					justify-content: space-around;
					align-items: center;
					padding-top: 14rpx;
					.cell-item-pic{
						flex-shrink: 0;
						margin-right: 20rpx;
					}
					.cell-item-r{
						flex-grow: 1;
						.cell-item-head{
							display: flex;
							justify-content: space-between;
							align-items: center;
							.cell-item-val{
								font-size: 30rpx;
								font-weight: bold;
								.cell-item-num{
									display: inline-block;
									margin-right: 6rpx;
								}
							}
							.cell-item-ledu{
								display: flex;
								justify-content: space-between;
								align-items: center;
								text{
									font-size: 40rpx;
									color: #01c9b2;
								}
							}
						}
						.cell-item-des{
							color: #909399;
							font-size: 26rpx;
						}
					}
				}
			}
		}
	}
</style>
