<template>
	<view>
		<u-navbar autoBack placeholder bgColor="#FFFFFF">
			<view class="navSlot" slot="center">
				<!-- <u-icon name="arrow-left" size="19"></u-icon> -->
				<view class="title">历史订单</view>
			</view>
		</u-navbar>

		<view class="bgMain">
			<view class="" v-for="(item,index) in dataList" :key="index" style="margin-bottom: 20rpx;" @click="clickItem(item.orderId,item.goodsId)">
				<view class="historicalOrderList">
					<view class="historicalOrderItem">
						<view class="shopName">
							<view style="display: flex;">
								<view class="shopNameInfo">{{item.storeName}}</view>
								<view>
									<image class="img" :src="item.goodsImage"></image>
								</view>
							</view>
							<view class="orderStatus">{{item.status == 0? '待支付':item.status == 1? '待发货' :item.status == 2?'待使用': item.status == 3?'已完成' : item.status == 4?'待评价' : item.status == 5?'退款/售后' : item.status == 6?'已结算' : item.status == 7?'未成团' : item.status == 8?'已成团' : '已取消'}}</view>
						</view>
				
						<view class="info">
							<view style="display: flex; flex: 1;" >
								<view>
									<image style="width: 156rpx; height: 156rpx;" :src="item.goodsImage"></image>
								</view>
								<view style="padding-left: 10rpx;flex: 1;">
									<view class="title">{{item.goodsName}}</view>
									<view style="font-size: 24rpx;color: #999999; padding-top: 10rpx;">壳牌机油</view>
									<view class="price">
										<view
											style="font-size: 32rpx;color: #FF4502; font-weight: 800; padding-top: 10rpx;">
											￥{{item.goodsPrice}}</view>
										<view style="font-size: 24rpx;color: #999999;">×{{item.goodsNum}}</view>
									</view>
								</view>
							</view>
				
						</view>
					</view>
					<view class="goodsSpecifications">
						<view></view>
						<view style="display: flex;">
							<view class="num">
								共 {{item.goodsNum}} 件
							</view>
							<view class="payAmount" v-if="item.actualPayment">实付金额</view>
							<view class="payPrice" v-if="item.actualPayment">{{item.actualPayment}}</view>
						</view>
				
					</view>
				</view>
			</view>
			


		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				pageNum: 1,
				total: 0,
				dataList: [],
				id: ''
			}
		},

		onLoad(op) {
			this.id = op.id
		},

		onShow() {
			this.pageNum = 1
			this.getAfterSalesOrderList()
		},

		onReachBottom() {
			console.log(this.total, this.dataList.length);
			if (this.total > this.dataList.length) {
				this.pageNum = this.pageNum + 1
				this.getAfterSalesOrderList(true)
			} else {
				wx.showToast({
					title: '没有更多啦！',
					icon: 'none'
				})
			}
		},

		methods: {
			getAfterSalesOrderList(flag) {
				this.$http.post("/api/store/clientUser/hisOrder", {
					pageNum: this.pageNum,
					pageSize: '20',
					userId: this.id
				}).then(res => {
					if (res.code == 200)
						console.log(res.data.rows)
					this.dataList = !flag ? res.data.rows : this.dataList.concat(res.data.rows)
					this.total = res.data.total

				})
			},
			clickItem(orderId,goodsId){
				uni.navigateTo({
					url:'/pages/historicalOrderDetails/historicalOrderDetails?orderId='+orderId +"&goodsId="+ goodsId
				})
			}
		}
	}
</script>

<style lang="scss">
	.historicalOrderList {
		background: #FFFFFF;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		padding: 24rpx;

		.num {
			font-size: 24rpx;
			color: #999999;
		}

		.info {
			.title {
				padding-top: 10rpx;
				font-size: 28rpx;
				color: #333333;
			}
		}

		.goodsSpecifications {
			display: flex;
			justify-content: space-between;

			.payPrice {
				font-size: 24rpx;
				color: #FF4502;
				padding-left: 10rpx;
			}

			.payAmount {
				font-size: 24rpx;
				color: #999999;
				padding-left: 10rpx;
			}
		}



		.historicalOrderItem {
			.price {
				display: flex;
				justify-content: space-between;
			}

			.shopName {
				display: flex;
				justify-content: space-between;
				text-align: center;

				.shopNameInfo {
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
				}

				.orderStatus {
					font-family: Microsoft YaHei, Microsoft YaHei;
					font-weight: 400;
					font-size: 24rpx;
					color: #FF4502;
				}

				.img {
					padding-left: 10rpx;
					padding-bottom: 10rpx;
					width: 8rpx;
					height: 16rpx;
				}
			}
		}
	}
</style>