<template>
	<view class="container" v-if="loading">
		<view class="totle">
			<view class="server">
				<text class="line"></text>
				<text class="text">售买概览</text>
				<text class="line"></text>
			</view>
			<view class="num_wrap">
				<view class="num-box">
					<view class="num">
						<text>{{ statisticsData.num || 0 }}</text>
					</view>
					<view class="text"><text>当日订单数量</text></view>
				</view>
				<view class="num-box">
					<view class="num">
						<text>{{ statisticsData.price || 0 }}</text>
					</view>
					<view class="text"><text>当日销售金额</text></view>
				</view>
			</view>
		</view>
		<view class="server">
			<text class="line"></text>
			<text class="text">订单列表</text>
			<text class="line"></text>
		</view>
		<view class="food-list" v-if="orderList.length > 0">
			<view class="main" v-for="(item, index) in orderList" :key="index">
				<view class="top">
					<view class="dining">{{ item.userName }}</view>
					<view class="status" v-if="item.status == 1">预定成功</view>
					<view class="status" v-if="item.status == 0">已取消</view>
				</view>
				<view class="list-item" v-for="(it, index) in item.foodList" :key="index">
					<view class="img-box"><image :src="it.picture" mode=""></image></view>
					<view class="fr-content">
						<view class="name">
							{{ it.food_name }}
							<text class="ct">x{{ it.count }}</text>
						</view>
						<view class="price">&yen;{{ it.price }}/{{ it.company }}</view>
					</view>
				</view>
				<view class="bottom">
					<text class="price">
						共计：&yen;
						<span>{{ item.price }}</span>
					</text>
					<text class="order-time">{{ item.order_time }}</text>
				</view>
			</view>
		</view>
		<!-- <view class="list" v-if="orders.length > 0">
			<view class="main" v-for="(item,i) in orders" :key="i">
				<view class="top">
					<view class="dining">{{item.buyer_name}}</view>
					<view class="status" v-if="item.order_status == 1">预定成功</view>
					<view class="status" v-if="item.order_status == 0">已取消</view>
				</view>
				<view class="middle">
					<view class="foodList" v-for="(item1, index) in item.orderDetails" :key="index">
						<image mode="" :src="item1.goods_icon" />
						<text >{{item1.goods_name}} {{item1.goods_num}}份</text>
					</view>
				</view>
				<view class="bottom">
					<text class="price">金额：￥<span>{{item.pay_price}}</span></text>
					<text class="order-time">{{item.order_time}}</text>
				</view>
			</view>
		</view> -->
		<content-none v-else :padTop="20"></content-none>
		<load-more :loadingType="loadingType" :contentText="contentText"></load-more>
	</view>
</template>

<script>
import { toDaylist } from '@/common/api.js';
import { callbackRequest, getStorage, alertTip } from '@/common/util.js';
import loadMore from '@/components/loadMore.vue';
import contentNone from '@/components/contentNone.vue';
export default {
	data() {
		return {
			loading: false,
			userId: getStorage('userInfo').id, //用户id
			page: 1,
			pageSize: 10,
			loadingType: 0, //0-loading前；1-loading中；2-没有更多了
			contentText: {
				contentdown: '上拉加载更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多数据了'
			},
			statisticsData: {}, //统计数据
			orderList: [
				{
					userName: '刘晓明',
					status: 1,
					order_time: '2020-01-10 09:00',
					price: 100,
					foodList: [
						{
							price: '20',
							company: '斤',
							picture: 'http://47.99.190.179:80/appImageDir/a68b13fe0bcf4ee1992ee32623055639.jpg',
							food_name: '猪蹄',
							count: 2
						},
						{
							price: '30',
							company: '份',
							picture: 'http://47.99.190.179:80/appImageDir/42d0a21e68804c398ca3abb4bdc20314.jpg',
							food_name: '鱿鱼圈',
							count: 2
						}
					]
				}
			] //订单列表
		};
	},
	components: {
		loadMore,
		contentNone
	},
	onLoad() {
		this.initData();
	},
	methods: {
		initData() {
			let params = {
				method: toDaylist,
				data: {
					userId: this.userId,
					// userId:'8a0621e158f611250159675bfc6d054f',
					pageSize: this.pageSize,
					pageNum: this.page
				}
			};
			callbackRequest(params).then(res => {
				if (res.data.returnCode == 1) {
					let result = res.data.returnData || {};
					result.orderList = result.orderList || [];
					if (this.page == 1) {
						let numList = result.numList || [];
						this.statisticsData = numList[0] || {};
						this.orders = result.orderList || [];
					} else {
						if (result.orderList.length > 0) {
							this.orders = [...this.orders, ...result.orderList];
							this.loadingType = 0;
						} else {
							this.loadingType = 2;
						}
					}
					this.loading = true;
				} else {
					alertTip(res.data.returnMsg);
				}
			});
		}
	},
	onReachBottom() {
		if (this.loadingType !== 0) {
			return;
		}
		this.loadingType = 1;
		this.page = this.page + 1;
		this.initData();
	}
};
</script>

<style lang="scss">
@import '@/static/css/common.scss';
.container {
	min-height: 100vh;
	background: #f8f8f8;
	.server {
		text-align: center;
		line-height: 70upx;
		text {
			display: inline-block;
			vertical-align: middle;
		}
		.line {
			width: 70upx;
			height: 3upx;
			background: #999;
		}
		.text {
			font-size: 30upx;
			padding: 0 20upx;
			font-weight: bold;
		}
	}
	.totle {
		background: #ffffff;
		border-radius: 10upx;
		.num_wrap {
			overflow: hidden;
			padding: 30upx 0;
			.num-box {
				float: left;
				width: 50%;
				height: 100upx;
				text-align: center;
				font-size: 26upx;
			}
			.num {
				text-align: center;
				text {
					font-size: 40upx;
					color: $themeColor;
				}
			}
			.text {
				text-align: center;
				text {
					font-size: 28upx;
					color: #666;
				}
			}
		}
	}
}

.food-list {
	height: 100%;
	overflow: auto;
	background: #fff;
	margin: 15upx;
	.main {
		background: #ffffff;
		margin: 10upx;
		border-radius: 10upx;
		.top {
			border-bottom: 1px solid #eee;
			padding: 20upx 30upx;
			overflow: hidden;
			.dining {
				float: left;
				font-size: 28upx;
				line-height: 40upx;
				color: #555;
			}
			.status {
				float: right;
				font-size: 24upx;
				color: #00c277;
				line-height: 40upx;
			}
		}

		.bottom {
			padding: 5upx 5upx 0upx 5upx;
			border-top: 1px solid #eee;
			line-height: 50upx;
			overflow: hidden;
			.order-time {
				font-size: 26rpx;
				color: #666;
			}
			.price {
				float: right;
				font-size: 28upx;
				color: #666;
			}
		}
	}
	.list-item {
		overflow: hidden;
		padding: 10upx 10upx 0upx 5upx;
		border-bottom: 1px solid #f8f8f8;
		.img-box {
			border-radius: 10upx;
			float: left;
			width: 200upx;
			height: 200upx;
			image {
				display: block;
				width: 100%;
				height: 100%;
				border-radius: 6px;
			}
		}

		.fr-content {
			margin-left: 220upx;
			.name {
				font-size: 30upx;
				color: #333;
				font-weight: bold;
				@include overstepOne;
				line-height: 40upx;
				margin-bottom: 6upx;
			}
			.num {
				font-size: 26upx;
				color: #666;
				line-height: 40upx;
				margin-bottom: 6upx;
			}
			.quota-num {
				min-height: 50rpx;
			}
			.buy-num {
				display: inline-block;
				border: 1px solid #ff0000;
				font-size: 24upx;
				color: #ff0000;
				border-radius: 8upx;
				line-height: 32upx;
				padding: 0 10upx;
				vertical-align: top;
			}
			.choose-num {
				float: right;
				image {
					width: 40upx;
					height: 40upx;
					vertical-align: top;
				}
				text {
					display: inline-block;
					font-size: 28upx;
					color: #666;
					width: 80upx;
					text-align: center;
					line-height: 40upx;
					vertical-align: top;
				}
				.fl {
					float: right;
					padding: 10upx 20upx;
					font-size: 24upx;
					color: $assistColor;
					line-height: 32upx;
					border: 1px solid $assistColor;
					border-radius: 8upx;
					margin-left: 10upx;
				}
			}
			.price {
				font-size: 32upx;
				color: #ff0000;
				margin-top: 116upx;
			}
			.ct {
				margin-left: 20upx;
				color: #ff00009c;
			}
		}
	}
}
</style>
