<template>
	<view class="hm-p-lr-20">
		<view class="title">门店统计</view>
		<view class="hm-p-b-20 hm-bg-f">
			<view class="card card__violet">
				<div class="card-body">
					<div class="card-description">商品总量</div>
					<div class="card-value"></div>
					<div class="card-header">{{count.goods}}</div>
					<div class="card-description">当前商品总数量</div>
				</div>
				<view class="card-icon">
					<u-icon name="gift" size="40" color="#fff"></u-icon>
				</view>
			</view>
			<view class="card card__blue">
				<div class="card-body">
					<div class="card-description">用户总量</div>
					<div class="card-value"></div>
					<div class="card-header">{{count.user.all.all}}</div>
					<div class="card-description">当前用户总数量</div>
				</div>
				<view class="card-icon">
					<u-icon name="account" size="40" color="#fff"></u-icon>
				</view>
			</view>
			<view class="card card__red">
				<div class="card-body">
					<div class="card-description">订单总量</div>
					<div class="card-value"></div>
					<div class="card-header">{{count.order.all.all}}</div>
					<div class="card-description">当前订单总数量</div>
				</div>
				<view class="card-icon">
					<u-icon name="order" size="40" color="#fff"></u-icon>
				</view>
			</view>
			<view class="card card__primary">
				<div class="card-body">
					<div class="card-description">好评总量</div>
					<div class="card-value"></div>
					<div class="card-header">{{count.comment.all}}</div>
					<div class="card-description">当前好评总数量</div>
				</div>
				<view class="card-icon">
					<u-icon name="heart" size="40" color="#fff"></u-icon>
				</view>
			</view>
		</view>
		<view class="title">订单统计</view>
		<view class="hm-p-b-20 hm-bg-f">
			<view class="card-box">
				<view>堂食订单 </view>
				<view class="hm-font-22 hm-col-tips">
					今天：<text :class="count.order.today.tang > 0?'hm-col-error hm-font-b':''">{{count.order.today.tang}}</text>
				</view>
				<view class="hm-font-22 hm-col-tips">
					昨天：<text :class="count.order.today2.tang > 0?'hm-col-error hm-font-b':''">{{count.order.today2.tang}}</text>
				</view>
				<view class="hm-font-22 hm-col-tips">
					本月；<text :class="count.order.month.tang > 0?'hm-col-error hm-font-b':''">{{count.order.month.tang}}</text>
				</view>
				<view class="hm-font-22 hm-col-tips">
					上月：<text :class="count.order.month2.tang > 0?'hm-col-error hm-font-b':''">{{count.order.month2.tang}}</text>
				</view>
			</view>
			<view class="card-box">
				<view>自取订单 </view>
				<view class="hm-font-22 hm-col-tips">
					今天：<text :class="count.order.today.qu > 0?'hm-col-error hm-font-b':''">{{count.order.today.qu}}</text>
				</view>
				<view class="hm-font-22 hm-col-tips">
					昨天：<text :class="count.order.today2.qu > 0?'hm-col-error hm-font-b':''">{{count.order.today2.qu}}</text>
				</view>
				<view class="hm-font-22 hm-col-tips">
					本月：<text :class="count.order.month.qu > 0?'hm-col-error hm-font-b':''">{{count.order.month.qu}}</text>
				</view>
				<view class="hm-font-22 hm-col-tips">
					上月：<text :class="count.order.month2.qu > 0?'hm-col-error hm-font-b':''">{{count.order.month2.qu}}</text>
				</view>
			</view>
			<view class="card-box">
				<view>外卖订单 </view>
				<view class="hm-font-22 hm-col-tips">
					今天：<text :class="count.order.today.wai > 0?'hm-col-error hm-font-b':''">{{count.order.today.wai}}</text>
				</view>
				<view class="hm-font-22 hm-col-tips">
					昨天：<text :class="count.order.today2.wai > 0?'hm-col-error hm-font-b':''">{{count.order.today2.wai}}</text>
				</view>
				<view class="hm-font-22 hm-col-tips">
					本月：<text :class="count.order.month.wai > 0?'hm-col-error hm-font-b':''">{{count.order.month.wai}}</text>
				</view>
				<view class="hm-font-22 hm-col-tips">
					上月：<text :class="count.order.month2.wai > 0?'hm-col-error hm-font-b':''">{{count.order.month2.wai}}</text>
				</view>
			</view>
			<view class="card-box">
				<view>退款订单 </view>
				<view class="hm-font-22 hm-col-tips">
					今天：<text :class="count.order.today.refund > 0?'hm-col-error hm-font-b':''">{{count.order.today.refund}}</text>
				</view>
				<view class="hm-font-22 hm-col-tips">
					昨天：<text
						:class="count.order.today2.refund > 0?'hm-col-error hm-font-b':''">{{count.order.today2.refund}}</text>
				</view>
				<view class="hm-font-22 hm-col-tips">
					本月：<text :class="count.order.month.refund > 0?'hm-col-error hm-font-b':''">{{count.order.month.refund}}</text>
				</view>
				<view class="hm-font-22 hm-col-tips">
					上月：<text
						:class="count.order.month2.refund > 0?'hm-col-error hm-font-b':''">{{count.order.month2.refund}}</text>
				</view>
			</view>
			<view class="card-box">
				<view>预约订桌 </view>
				<view class="hm-font-22 hm-col-tips">
					今天：<text :class="count.pact.today > 0?'hm-col-error hm-font-b':''">{{count.pact.today}}</text>
				</view>
				<view class="hm-font-22 hm-col-tips">
					昨天：<text :class="count.pact.today2 > 0?'hm-col-error hm-font-b':''">{{count.pact.today2}}</text>
				</view>
				<view class="hm-font-22 hm-col-tips">
					本月：<text :class="count.pact.month > 0?'hm-col-error hm-font-b':''">{{count.pact.month}}</text>
				</view>
				<view class="hm-font-22 hm-col-tips">
					上月：<text :class="count.pact.month2 > 0?'hm-col-error hm-font-b':''">{{count.pact.month2}}</text>
				</view>
			</view>
		</view>
		<view class="title">交易统计</view>
		<view class="hm-p-b-20 hm-bg-f">
			<view class="card-box">
				<view>订单金额 </view>
				<view class="hm-font-22 hm-col-tips">
					今天：<text
						:class="count.order.today.money.order > 0?'hm-col-error hm-font-b':''">{{count.order.today.money.order}}</text>
				</view>
				<view class="hm-font-22 hm-col-tips">
					昨天：<text
						:class="count.order.today2.money.order > 0?'hm-col-error hm-font-b':''">{{count.order.today2.money.order}}</text>
				</view>
				<view class="hm-font-22 hm-col-tips">
					本月：<text
						:class="count.order.month.money.order > 0?'hm-col-error hm-font-b':''">{{count.order.month.money.order}}</text>
				</view>
				<view class="hm-font-22 hm-col-tips">
					上月：<text
						:class="count.order.month2.money.order > 0?'hm-col-error hm-font-b':''">{{count.order.month2.money.order}}</text>
				</view>
			</view>
			<view class="card-box">
				<view>退款金额 </view>
				<view class="hm-font-22 hm-col-tips">
					今天：<text
						:class="count.order.today.money.refund > 0?'hm-col-error hm-font-b':''">{{count.order.today.money.refund}}</text>
				</view>
				<view class="hm-font-22 hm-col-tips">
					昨天：<text
						:class="count.order.today2.money.refund > 0?'hm-col-error hm-font-b':''">{{count.order.today2.money.refund}}</text>
				</view>
				<view class="hm-font-22 hm-col-tips">
					本月：<text
						:class="count.order.month.money.refund > 0?'hm-col-error hm-font-b':''">{{count.order.month.money.refund}}</text>
				</view>
				<view class="hm-font-22 hm-col-tips">
					上月：<text
						:class="count.order.month2.money.refund > 0?'hm-col-error hm-font-b':''">{{count.order.month2.money.refund}}</text>
				</view>
			</view>
			<view class="card-box">
				<view>优惠金额</view>
				<view class="hm-font-22 hm-col-tips">
					今天：<text
						:class="count.order.today.money.activity > 0?'hm-col-error hm-font-b':''">{{count.order.today.money.activity}}</text>
				</view>
				<view class="hm-font-22 hm-col-tips">
					昨天：<text
						:class="count.order.today2.money.activity > 0?'hm-col-error hm-font-b':''">{{count.order.today2.money.activity}}</text>
				</view>
				<view class="hm-font-22 hm-col-tips">
					本月：<text
						:class="count.order.month.money.activity > 0?'hm-col-error hm-font-b':''">{{count.order.month.money.activity}}</text>
				</view>
				<view class="hm-font-22 hm-col-tips">
					上月：<text
						:class="count.order.month2.money.activity > 0?'hm-col-error hm-font-b':''">{{count.order.month2.money.activity}}</text>
				</view>
			</view>
			<view class="card-box">
				<view>充值金额 </view>
				<view class="hm-font-22 hm-col-tips">
					今天：<text
						:class="count.record['today']['10'] > 0?'hm-col-error hm-font-b':''">{{count.record['today']['10']}}</text>
				</view>
				<view class="hm-font-22 hm-col-tips">
					昨天：<text
						:class="count.record['today2']['10'] > 0?'hm-col-error hm-font-b':''">{{count.record['today2']['10']}}</text>
				</view>
				<view class="hm-font-22 hm-col-tips">
					本月：<text
						:class="count.record['month']['10'] > 0?'hm-col-error hm-font-b':''">{{count.record['month']['10']}}</text>
				</view>
				<view class="hm-font-22 hm-col-tips">
					上月：<text
						:class="count.record['month2']['10'] > 0?'hm-col-error hm-font-b':''">{{count.record['month2']['10']}}</text>
				</view>
			</view>
			<view class="card-box">
				<view>赠送金额</view>
				<view class="hm-font-22 hm-col-tips">
					今天：<text
						:class="count.record['today']['40'] > 0?'hm-col-error hm-font-b':''">{{count.record['today']['40']}}</text>
				</view>
				<view class="hm-font-22 hm-col-tips">
					昨天：<text
						:class="count.record['today2']['40'] > 0?'hm-col-error hm-font-b':''">{{count.record['today2']['40']}}</text>
				</view>
				<view class="hm-font-22 hm-col-tips">
					本月：<text
						:class="count.record['month']['40'] > 0?'hm-col-error hm-font-b':''">{{count.record['month']['40']}}</text>
				</view>
				<view class="hm-font-22 hm-col-tips">
					上月：<text
						:class="count.record['month2']['40'] > 0?'hm-col-error hm-font-b':''">{{count.record['month2']['40']}}</text>
				</view>
			</view>
		</view>
		<view class="title">七日走势</view>
		<view class="canvas7">
			<canvas canvas-id="areaCanvas"></canvas>
		</view>
		<!-- 技术支持 -->
		<view class="hm">
			{{applet.copyright}} <text class="v">V{{applet.version}}</text>
		</view>
	</view>
</template>

<script>
	let App = getApp();
	import wxCharts from '@/utils/wxcharts.js';
	export default {
		data() {
			return {
				count: [],
				applet: {}
			};
		},

		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		async onLoad(opt) {
			let _this = this;
			//等待onLaunch执行完毕
			await _this.$onLaunched;
			_this.applet = App.getApplet();
			App.setTitle();
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onShow: function() {
			let _this = this;
			_this.getCount(); //获取统计数据 
		},
		methods: {

			/**
			 * 获取首页数据
			 */
			getCount: function() {
				let _this = this;

				App._get('index/getCount', {}, function(result) {
					let count = result.data.count;
					_this.count = result.data.count;
					//前天
					let day4 = new Date();
					day4.setTime(day4.getTime() - 3 * 24 * 60 * 60 * 1000);
					let d4 = day4.getMonth() + 1 + "月" + day4.getDate() + "日"; //前天

					let day5 = new Date();
					day5.setTime(day5.getTime() - 4 * 24 * 60 * 60 * 1000);
					let d5 = day5.getMonth() + 1 + "月" + day5.getDate() + "日"; //前天

					let day6 = new Date();
					day6.setTime(day6.getTime() - 5 * 24 * 60 * 60 * 1000);
					let d6 = day6.getMonth() + 1 + "月" + day6.getDate() + "日"; //前天

					let day7 = new Date();
					day7.setTime(day7.getTime() - 6 * 24 * 60 * 60 * 1000);
					let d7 = day7.getMonth() + 1 + "月" + day7.getDate() + "日";

					new wxCharts({
						canvasId: 'areaCanvas',
						type: 'area',
						categories: ['今天', '昨天', '前天', d4, d5, d6, d7],
						series: [{
							name: '订单量',
							data: [count.order['today']['all'], count.order['today2']['all'],
								count
								.order['today3']['all'], count.order['today4']['all'],
								count.order['today5']['all'], count.order['today6']['all'],
								count.order['today7']['all']
							],
							format: function(val) {
								return val;
							}
						}, {
							name: '成交额',
							data: [count.order.today.money.order,
								count.order.today2.money.order,
								count.order.today3.money.order, count.order.today4.money.order,
								count.order.today5.money.order, count.order.today6.money.order,
								count.order.today7.money.order
							],
							format: function(val) {
								return val;
							}
						}],
						yAxis: {
							format: function(val) {
								return val;
							}
						},
						width: 397,
						height: 200
					});
				});
			}
		}
	};
</script>
<style>
	.title {
		padding: 20rpx 0;
		font-size: 30rpx;
		font-weight: 900;
		color: #000;
	}

	.canvas7 {
		padding: 20rpx 20rpx 20rpx 0rpx;
		background-color: #FFF;
		border-radius: 10rpx;
	}

	.canvas7 canvas {
		width: 100%;
		height: 350rpx;
	}


	/*下面是管理页面*/
	.card {
		display: inline-block;
		width: 40%;
		margin: 20rpx 0rpx 0rpx 20rpx;
		height: 150rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		box-shadow: 6rpx 6rpx 8rpx rgba(26, 26, 26, 0.2);
	}

	.card.card__blue {
		background: linear-gradient(-125deg, #57bdbf, #2f9de2);
	}

	.card.card__red {
		background: linear-gradient(-125deg, #ff7d7d, #fb2c95);
	}

	.card.card__violet {
		background: linear-gradient(-113deg, #c543d8, #925cc3);
	}

	.card.card__primary {
		background: linear-gradient(-141deg, #ecca1b, #f39526);
	}

	.card-box {
		width: 23.5%;
		margin: 20rpx 0 0 20rpx;
		padding: 20rpx;
		display: inline-block;
		border-radius: 10rpx;
		background-color: #ecf5ff;
		border: 1rpx solid #a0cfff;
		box-shadow: 6rpx 6rpx 8rpx rgba(26, 26, 26, 0.2);
	}

	.card-header {
		position: relative;
		display: block;
		color: #fff;
		font-size: 30rpx;
		text-transform: uppercase;
		line-height: 50rpx;
		font-weight: 900;
	}

	.card-value {
		position: relative;
		font-weight: bold;
		display: block;
		color: #fff;
		font-size: 50rpx;
		line-height: 85rpx;
	}

	.card-description {
		position: relative;
		display: block;
		font-size: 22rpx;
		color: rgba(255, 255, 255, 0.88);
		line-height: 40rpx;
	}

	.card-icon {
		float: right;
		margin-top: -120rpx;
	}
</style>
