<template>
	<view>

		<topnav title="统计报表" @tohome='tohome'></topnav>
		<view class="content">

			<block v-for="(item,index) in info">
				<view>
					<view class="indexbox">
						<boxtitle :title="item.name">
							<text>{{item.data.recharge==null?0:item.data.recharge.total}}</text>
						</boxtitle>
						<view class="statBox" @click="toinfo(item,'recharge')">
							<view class="statItem" style="width: 33.33%;">
								<view class="statItemHeader">
									<view class="statItemCBar "></view>
									<text class="statItemTitele">现金（元）</text>
								</view>
								<view class="statNum mf-26">{{item.data.recharge==null?0:item.data.recharge.cash}}
								</view>
							</view>
							<view class="statItem" style="width: 33.33%;">
								<view class="statItemHeader ">
									<view class="statItemCBar green"></view>
									<text class="statItemTitele">扫码（元）</text>
								</view>
								<view class="statNum mf-26">
									{{item.data.recharge==null?0:item.data.recharge.total_online}}
								</view>
							</view>
							<view class="statItem" style="width: 33.33%;">
								<view class="statItemHeader ">
									<view class="statItemCBar blue"></view>
									<text class="statItemTitele">转账（元）</text>
								</view>
								<view class="statNum mf-26">{{item.data.recharge==null?0:item.data.recharge.pos}}</view>
							</view>
						</view>

						<boxtitle title="退款">
							<text style="color: crimson;">{{item.data.refund}}</text>
						</boxtitle>
						<view class="statBox" @click="toinfo(item,'refund')">
							<view class="statItem" style="width: 33.33%;">
								<view class="statItemHeader">
									<view class="statItemCBar "></view>
									<text class="statItemTitele">现金（元）</text>
								</view>
								<view class="statNum mf-26">
									{{item.data.refund_by_methods==null?0:item.data.refund_by_methods.cash}}
								</view>
							</view>
							<view class="statItem" style="width: 33.33%;">
								<view class="statItemHeader ">
									<view class="statItemCBar blue"></view>
									<text class="statItemTitele">扫码（元）</text>
								</view>
								<view class="statNum mf-26">
									{{item.data.refund_by_methods==null?0:(item.data.refund_by_methods.online)}}
								</view>
							</view>
							<view class="statItem" style="width: 33.33%;">
								<view class="statItemHeader ">
									<view class="statItemCBar green"></view>
									<text class="statItemTitele"></text>
								</view>
								<view class="statNum mf-26">
								</view>
							</view>
						</view>


						<boxtitle title="交账">
							<text style="color: blue;">{{item.data.budget.total}}</text>
						</boxtitle>
						<view class="statBox">
							<view class="statItem" style="width: 33.33%;">
								<view class="statItemHeader">
									<view class="statItemCBar "></view>
									<text class="statItemTitele">现金（元）</text>
								</view>
								<view class="statNum mf-26">{{item.data.budget.cash}}
								</view>
							</view>
							<view class="statItem" style="width: 33.33%;">
								<view class="statItemHeader ">
									<view class="statItemCBar blue"></view>
									<text class="statItemTitele">扫码（元）</text>
								</view>
								<view class="statNum mf-26">{{item.data.budget.online}}</view>
							</view>
							<view class="statItem" style="width: 33.33%;">
								<view class="statItemHeader ">
									<view class="statItemCBar green"></view>
									<text class="statItemTitele"></text>
								</view>
								<view class="statNum mf-26">

								</view>
							</view>
						</view>


						<view class="lCircle lc_1"></view>
						<view class="lCircle lc_2"></view>
					</view>
				</view>
			</block>
			<view class="btnBgWhite" @tap="backhome">
				<text>返回首页</text>
			</view>
		</view>
	</view>
</template>

<script>
	var util = require("../../../../utils/util.js");
	export default {
		data() {
			return {
				info: [{
					"type": "today",
					"name": "今日营收",
					"data": {}
				}, {
					"type": "yesterday",
					"name": "昨日营收",
					"data": {}
				}, {
					"type": "this_week",
					"name": "本周营收",
					"data": {}
				}, {
					"type": "this_month",
					"name": "本月营收",
					"data": {}
				}]
			}
		},
		onShow: function() {
			var that = this;
			var i = 0;
			for (var m of that.info) {
				that.loadData(m.type, i,
					function(r, i) {
						console.log(r.recharge)
						
						
						r.refund_by_methods.online =parseFloat(r.refund_by_methods.weixin) +parseFloat(r.refund_by_methods.alipay);
						
						that.info[i].data = r;

						that.info[i].data.budget = {

							total: r.recharge.total - r.refund,

							cash: r.recharge.cash - r.refund_by_methods.cash,

							online: r.recharge.total_online - r.refund_by_methods.weixin-r.refund_by_methods.alipay
						};
					})
				i++;
			}
		},
		methods: {
			toinfo: function(item, type) {
				uni.navigateTo({
					url: "../statinfo/statinfo?type=" + type + "&from=" + item.type
				})
			},
			tohome: function() {
				uni.navigateTo({
					url: "../../../../pages/index/index"
				})
			},
			backhome: function() {
				uni.navigateTo({
					url: "../../../../pages/index/index"
				})
			},
			loadData: function(duration, index, success) {
				var that = this;
				var currentProject = uni.getStorageSync('currentProject');
				util.request({
					bindThis: that,
					api: 'manager/statistics/by-duration',
					customLoading: false,
					data: {
						project_id: currentProject.id,
						duration: duration
					},
					utilSuccess: function(r) {
						success(r, index);
					},
					utilFail: function(res) {}
				});
			}
		}
	}
</script>

<style>
	page {
		padding-top: 160rpx;
	}

	.content {
		padding: 0rpx 31rpx;
	}

	.indexbox {
		margin-top: 20rpx;

		position: relative;
	}



	.statBox {
		display: flex;
		margin-top: 20rpx;
	}

	.statItem {
		display: flex;
		justify-content: flex-start;
		flex-direction: column;
		width: 50%;

	}

	.statItemHeader {
		display: flex;
		line-height: 30rpx;
	}

	.statNum {
		margin-top: 16rpx;
		padding-left: 24rpx;
	}


	.statItem .statItemTitele {
		font-family: SourceHanSansCN-Normal;
		font-size: 24rpx;
		color: #666666;
		margin-left: 18rpx;
	}

	.statItemCBar {
		background: #FDB030;
		border: 2rpx solid #FFFFFF;
		border-radius: 4rpx;
		width: 6rpx;
		height: 16rpx;
	}

	.blue {
		background: #3C91F5;
	}

	.green {
		background: #52D5A6;
	}
</style>