<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%;" v-for="(mod,idx) in getRechargeItems(item.data.recharge)" :key="'recharge-'+idx">
								<view class="statItemHeader ">
									<view class="statItemCBar" :class="mod.barClass"></view>
									<text class="statItemTitele">{{mod.label}}</text>
								</view>
								<view class="statNum mf-26">{{mod.value}}</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%;" v-for="(mod,idx) in getRefundItems(item.data.refund_by_methods)" :key="'refund-'+idx">
								<view class="statItemHeader ">
									<view class="statItemCBar" :class="mod.barClass"></view>
									<text class="statItemTitele">{{mod.label}}</text>
								</view>
								<view class="statNum mf-26">{{mod.value}}</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%;" v-for="(mod,idx) in getBudgetItems(item.data.budget)" :key="'budget-'+idx">
								<view class="statItemHeader ">
									<view class="statItemCBar" :class="mod.barClass"></view>
									<text class="statItemTitele">{{mod.label}}</text>
								</view>
								<view class="statNum mf-26">{{mod.value}}</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 = r.refund_by_methods || {};
						r.recharge = r.recharge || {};
						r.refund_by_methods.online = that.num(r.refund_by_methods.weixin) + that.num(r.refund_by_methods.alipay);
						
						that.info[i].data = r;

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

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

							cash: that.num(r.recharge.cash) - that.num(r.refund_by_methods.cash),
							weixin: that.num(r.recharge.weixin) - that.num(r.refund_by_methods.weixin),
							alipay: that.num(r.recharge.alipay) - that.num(r.refund_by_methods.alipay),
							pos: that.num(r.recharge.pos) - that.num(r.refund_by_methods.pos),
							offline_pos: that.num(r.recharge.offline_pos) - that.num(r.refund_by_methods.offline_pos),
							offline_qrcode: that.num(r.recharge.offline_qrcode) - that.num(r.refund_by_methods.offline_qrcode),
							transfer: that.num(r.recharge.transfer) - that.num(r.refund_by_methods.transfer),
							offline_cash: that.num(r.recharge.offline_cash) - that.num(r.refund_by_methods.offline_cash)
						};
					})
				i++;
			}
		},
		methods: {
			num: function(v) {
				return parseFloat(v || 0);
			},
			getRechargeOfflineTotal: function(recharge) {
				recharge = recharge || {};
				return this.num(recharge.pos) + this.num(recharge.transfer) + this.num(recharge.offline_pos) + this
					.num(recharge.offline_qrcode) + this.num(recharge.offline_cash);
			},
			getRefundOfflineTotal: function(refundByMethods) {
				refundByMethods = refundByMethods || {};
				return this.num(refundByMethods.pos) + this.num(refundByMethods.transfer) + this.num(
					refundByMethods.offline_pos) + this.num(refundByMethods.offline_qrcode) + this.num(
					refundByMethods.offline_cash);
			},
			getRechargeItems: function(recharge) {
				recharge = recharge || {};
				return [{
					label: "现金（元）",
					value: this.num(recharge.cash),
					barClass: ""
				}, {
					label: "微信（元）",
					value: this.num(recharge.weixin),
					barClass: "green"
				}, {
					label: "支付宝（元）",
					value: this.num(recharge.alipay),
					barClass: "blue"
				}, {
					label: "刷卡（元）",
					value: this.num(recharge.pos),
					barClass: ""
				}, {
					label: "线下POS（元）",
					value: this.num(recharge.offline_pos),
					barClass: "green"
				}, {
					label: "线下二维码（元）",
					value: this.num(recharge.offline_qrcode),
					barClass: "blue"
				}, {
					label: "转账（元）",
					value: this.num(recharge.transfer),
					barClass: ""
				}, {
					label: "线下现金（元）",
					value: this.num(recharge.offline_cash),
					barClass: "green"
				}];
			},
			getRefundItems: function(refundByMethods) {
				refundByMethods = refundByMethods || {};
				return [{
					label: "现金（元）",
					value: this.num(refundByMethods.cash),
					barClass: ""
				}, {
					label: "微信（元）",
					value: this.num(refundByMethods.weixin),
					barClass: "green"
				}, {
					label: "支付宝（元）",
					value: this.num(refundByMethods.alipay),
					barClass: "blue"
				}, {
					label: "刷卡（元）",
					value: this.num(refundByMethods.pos),
					barClass: ""
				}, {
					label: "线下POS（元）",
					value: this.num(refundByMethods.offline_pos),
					barClass: "green"
				}, {
					label: "线下二维码（元）",
					value: this.num(refundByMethods.offline_qrcode),
					barClass: "blue"
				}, {
					label: "转账（元）",
					value: this.num(refundByMethods.transfer),
					barClass: ""
				}, {
					label: "线下现金（元）",
					value: this.num(refundByMethods.offline_cash),
					barClass: "green"
				}];
			},
			getBudgetItems: function(budget) {
				budget = budget || {};
				return [{
					label: "现金（元）",
					value: this.num(budget.cash),
					barClass: ""
				}, {
					label: "微信（元）",
					value: this.num(budget.weixin),
					barClass: "green"
				}, {
					label: "支付宝（元）",
					value: this.num(budget.alipay),
					barClass: "blue"
				}, {
					label: "刷卡（元）",
					value: this.num(budget.pos),
					barClass: ""
				}, {
					label: "线下POS（元）",
					value: this.num(budget.offline_pos),
					barClass: "green"
				}, {
					label: "线下二维码（元）",
					value: this.num(budget.offline_qrcode),
					barClass: "blue"
				}, {
					label: "转账（元）",
					value: this.num(budget.transfer),
					barClass: ""
				}, {
					label: "线下现金（元）",
					value: this.num(budget.offline_cash),
					barClass: "green"
				}];
			},
			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;
		flex-wrap: wrap;
	}

	.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>