<template>
	<view class="fix-top-window">
		<view class="uni-header">
			<uni-section titleColor="#444" :title="$t('index.all.title')" type="line" titleFontSize="25"></uni-section>
		</view>
		<view class="uni-container">
			<uni-row gutter="50">
				<uni-col :xs="12" :sm="12" :md="6">
					<view class="widget-card card__blue">
						<view class="card-header">{{$t('index.all.user')}}</view>
						<view class="card-body">
							<view class="card-icon">
								<uni-icons custom-prefix="iconfont" type="icon-yonghuguanli" color="#fff" size="60">
								</uni-icons>
							</view>
							<view class="card-value">{{count.user.all.all}}</view>
							<view class="card-description">{{$t('index.all.user_describle')}}</view>
						</view>
					</view>
				</uni-col>
				<uni-col :xs="12" :sm="12" :md="6">
					<view class="widget-card card__red">
						<view class="card-header">{{$t('index.all.goods')}}</view>
						<view class="card-body">
							<view class="card-icon">
								<uni-icons custom-prefix="iconfont" type="icon-fenxiao" color="#f7f7f7" size="60">
								</uni-icons>
							</view>
							<view class="card-value">{{count.goods}}</view>
							<view class="card-description">{{$t('index.all.goods_describle')}}</view>
						</view>
					</view>
				</uni-col>
				<uni-col :xs="12" :sm="12" :md="6">
					<view class="widget-card card__violet">
						<view class="card-header">{{$t('index.all.order')}}</view>
						<view class="card-body">
							<view class="card-icon">
								<uni-icons custom-prefix="iconfont" type="icon-weixinxiaochengxu" color="#f7f7f7"
									size="60"></uni-icons>
							</view>
							<view class="card-value">{{count.order.all.all}}</view>
							<view class="card-description">{{$t('index.all.order_describle')}}</view>
						</view>
					</view>
				</uni-col>
				<uni-col :xs="12" :sm="12" :md="6">
					<view class="widget-card card__primary">
						<view class="card-header">{{$t('index.all.comment')}}</view>
						<view class="card-body">
							<view class="card-icon">
								<uni-icons custom-prefix="iconfont" type="icon-weixingongzhonghao" color="#f7f7f7"
									size="60"></uni-icons>
							</view>
							<view class="card-value">{{count.comment.all}}</view>
							<view class="card-description">{{$t('index.all.comment_describle')}}</view>
						</view>
					</view>
				</uni-col>
			</uni-row>
		</view>
		<view class="uni-header">
			<uni-section titleColor="#444" :title="$t('index.trend.title')" type="line" titleFontSize="25">
			</uni-section>
		</view>
		<view class="uni-container">
			<view class="charts-box">
				<qiun-data-charts type="line" :chartData="chartData" echartsH5 echartsApp
					tooltipFormat="tooltipCustom" />
			</view>
		</view>
		<!-- #ifndef H5 -->
		<fix-window />
		<!-- #endif -->
	</view>
</template>

<script>
	let App = getApp();
	export default {
		data() {
			return {
				count: {
					goods:0,
					user: {all:{all:0}},
					order: {all:{all:0}},
					comment: {all:0}
				},
				chartData: {}
			}
		},
		onShow() {
			let _this = this;
			_this.index();
		},
		methods: {
			/**
			 * 获取首页数据
			 */
			index: function() {
				let _this = this;
				App._get('index/index', {}, function(result) {
					let count = result.data.count;
					_this.count = count;
					let day5 = new Date();
					day5.setTime(day5.getTime() - 4 * 24 * 60 * 60 * 1000);
					let d5 = +"月" + 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() + "日";
					let res = {
						categories: [_this.getData(), _this.getData(1), _this.getData(2), _this.getData(3),
							_this.getData(4), _this.getData(5), _this.getData(6)
						],
						series: [{
								name: "成交额",
								data: [count.record.today['10']+count.record.today['20'], count.record.today2['10']+count.record.today2['20'], count.record.today3['10']+count.record.today3['20'], count.record.today4['10']+count.record.today4['20'], count.record.today5['10']+count.record.today5['20'], count.record.today6['10']+count.record.today6['20'], count.record.today7['10']+count.record.today7['20']]
							},
							{
								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]
							}, {
								name: "用户量",
								data: [count.user.today, count.user.today2, count.user.today3, count.user.today4, count.user.today5, count.user.today6, count.user.today7]
							}
						]
					};
					_this.chartData = JSON.parse(JSON.stringify(res));
				});
			},
			getData(day = 0) {
				let data = new Date();
				data.setTime(data.getTime() - (day * 24 * 60 * 60 * 1000));
				let year = data.getFullYear(),
					month = data.getMonth() + 1,
					days = data.getDate();
				if (month >= 1 && month <= 9) {
					month = '0' + month;
				}
				if (days >= 0 && days <= 9) {
					days = '0' + days;
				}
				return year + '-' + month + '-' + days;
			},
			navTo(url, id) {
				if (url.indexOf('http') > -1) {
					window.open(url)
				} else {
					if (id) {
						url = `${url}?appid=${id}`
					}
					uni.navigateTo({
						url
					})
				}
			}
		}

	}
</script>

<style>
	.charts-box {
		width: 100%;
		height: 300px;
	}

	.widget-card {
		min-height: 90px;
		color: #ffffff;
		padding: 20px;
		margin-bottom: 20px;
		font-size: 15px;
	}

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

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

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

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

	.widget-card .card-header {
		position: relative;
		display: block;
		color: #fff;
		text-transform: uppercase;
		margin-bottom: 8px;
	}

	.widget-card .card-icon {
		display: inline-block;
		float: right;
		margin-top: -7px;
		margin-right: 10px;
	}

	.widget-card .card-value {
		position: relative;
		font-weight: 500;
		display: block;
		color: #fff;
		font-size: 30px;
		margin-bottom: 8px;
	}

	.widget-card .card-description {
		position: relative;
		display: block;
		color: rgba(255, 255, 255, 0.88);
	}

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

	.canvas7 canvas {
		width: 100%;
		height: 350rpx;
	}
</style>
