<template>
	<view class="order-pages">
		<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="reachBottom">
			<view class="order-list">
				<view v-for="item in list" :key="item.id" class="order-list-item" @click="goView(item)">
					<view>
						<view>{{item.storeName}}</view>
						<view class="order-finish">{{item.payStatus}}</view>
					</view>
					<view>
						<view class="order-carNo">{{item.customerMobile}}</view>
						<u-icon name="arrow-right" color="#666" size="28"></u-icon>
					</view>
					<view>
						<view class="order-price">
							<text>￥{{item.paymentAmount}}</text>
							<text>{{item.payType}}</text>
						</view>
						<view>2020-07-25 16:20:33</view>
					</view>
				</view>
			</view>
			<u-empty :text="noDataText" img-width="120" v-if="list.length==0 && status!='loading'" mode="list"></u-empty>
			<view style="padding: 20upx;">
				<u-loadmore v-if="total>pageSize || status=='loading'" :status="status" />
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {getOrderList, orderDetail} from '@/api/order.js'
	export default {
		data() {
			return {
				noDataText: '暂无数据',
				status: 'loadmore',
				list:[],
				pageNo:1,
				pageSize:15,
				count:0,
			};
		},
		onLoad() {
			this.getList()
			console.log(this.orderStatusList,'1111')
		},
		methods: {
			
			getOptionName (list,val) {
			  let p = list.find((item) => {
				  return item.code == val
			  })
			  return p ? p.dispName : '-'
			},
			// 获取订单列表
			getList() {
				this.status = "loading"
				let orderStatusList = this.$store.state.vuex_payStatus
				let payTypeList = this.$store.state.vuex_payType
				let params = {
					pageNo: this.pageNo,
					pageSize: this.pageSize
				}
				getOrderList(params).then(res=>{
					this.status = "loadmore"
					if(res.status == 200) {
						let list = res.data.list
						list.map(item => {
							item.payStatus = this.getOptionName(orderStatusList,item.payStatus)
							item.payType = item.payType ? this.getOptionName(payTypeList,item.payType) : ''
						})
						this.list = this.list.concat(list)
						this.count = res.data.count
					} else {
						this.list = []
						this.count = 0
						this.noDataText = res.message
						this.toashMsg(res.message)
					}
				})
			},
			// 查看详情
			goView(item){
				uni.navigateTo({
					url:"/pages/order/orderDetail?id="+item.id
				})
			},
			// 滚动到底部自动加载下页
			reachBottom() {
				if(this.list.length < this.count){
					this.pageNo += 1
					this.getList()
				}else{
					this.status = "nomore"
				}
			}
		},
		
	}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
	.order-pages{
		width: 100%;
		height: 100%;
		.scroll-Y {
			width: 100%;
			height: 100%;
			.order-list{
				padding: 25rpx;
				.order-list-item{
					box-shadow: 1rpx 1rpx 5rpx #eee;
					border: 1px solid #eee;
					border-radius: 10rpx;
					margin: 30rpx 0;
					> view{
						padding:20rpx 30rpx;
						display: flex;
						align-items: center;
						border-bottom: 1px dashed #eee;
						&:last-child{
							border: 0;
						}
						>view{
							&:first-child{
								flex-grow: 1;
							}
							&:last-child{
								padding-left: 15rpx;
							}
						}
						.order-finish{
							color: #00aa00;
						}
						.order-unPay{
							color: #ff0000;
						}
						.order-cansel{
							color: #7e7b88;
						}
						.order-carNo{
							font-size: 32rpx;
						}
						.order-price{
							text{
								margin-right: 20rpx;
								color: #666;
								&:first-child{
									color: red;
									font-size: 32rpx;
								}
							}
						}
					}
				}
			}
		}
	}
</style>
