<template>
	<view class="mine">
		<view class="mine_money">
			<!-- <image class="mine_money_bei" src="/static/home/boxBor.png" mode="widthFix"></image> -->
			<view class="mine_money_num">
				<view class="mine_money_num_view">
					<view class="mine_money_num_view_monNum">{{wallet.money || 0.00}}</view>
					<view class="mine_money_num_view_tip">余额（元）</view>
				</view>
				<view class="mine_money_num_view">
					<view style="font-size: 32rpx;" class="mine_money_num_view_monNum">
						{{wallet.freeze_money || 0.00}}
					</view>
					<view class="mine_money_num_view_tip">冻结（元）</view>
				</view>
			</view>
<!-- 			<view class="mine_money_bottom">
				<view @click="topay()">充值</view>
				<view @click="navto('/pages/wallet/withdraw')">提现</view>
			</view> -->
		</view>
		<!-- 		<view class="mine_grid">
			<view class="mine_grid_view" v-for="item in 8" :key="item">
				<image></image>
				<view>提现</view>
			</view>
		</view> -->

		<view style="border-radius: 10rpx;background-color: #fff;margin: 20rpx 0;">
			<u-grid :border="false" :col="4">
				<u-grid-item :customStyle="{padding:'20rpx 0'}" @click="navto('/pages/wallet/list')">
					<u-icon name="/static/icon/money-list.png" size="50rpx"></u-icon>
					<view style="height: 10rpx;"></view>
					<text class="grid-text-mini">账单</text>
				</u-grid-item>
				<u-grid-item :customStyle="{padding:'20rpx 0'}"
					@click="navto(`/pages/wallet/temp?data=${encodeURIComponent(JSON.stringify(wallet))}`)">
					<u-icon name="gift" size="66rpx"></u-icon>
					<text class="grid-text-mini">转赠</text>
				</u-grid-item>
				<u-grid-item :customStyle="{padding:'20rpx 0'}" @click="navto('/pages/wallet/account/index')">
					<u-icon name="/static/icon/bank.png" size="50rpx"></u-icon>
					<view style="height: 10rpx;"></view>
					<text class="grid-text-mini">银行卡</text>
				</u-grid-item>
				<u-grid-item :customStyle="{padding:'20rpx 0'}" @click="navto('/pages/wallet/withdraw')">
					<u-icon name="/static/icon/tx.png" size="50rpx"></u-icon>
					<view style="height: 10rpx;"></view>
					<text class="grid-text-mini">提现</text>
				</u-grid-item>
			</u-grid>
		</view>


		<view class="mine_block">
			<view class="mine_block_tit">
				<view class="mine_block_tit_left">充电桩</view>
				<!-- 				<view class="mine_block_tit_right">详情 <image src="/static/home/toIcon.png" mode="widthFix"></image>
				</view> -->
			</view>

			<view class="mine_block_view">
				<!-- <image mode="widthFix" src="/static/home/zu1.png"></image> -->
				<view class="u-flex-y-center u-flex-between u-flex-fill">
					<view style="width: 50%;">
						<view style="color: #3770AE;font-size: 30rpx;">{{device.num || 0}}</view>
						<view style="color: #999;">
							自购充电桩数
						</view>
					</view>
					<view style="width: 50%;">
						<view style="color: #3770AE;font-size: 30rpx;">{{device.team_num || 0}}</view>
						<view style="color: #999;">
							团队充电桩数
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="mine_block" v-for="(item,index) in money_list" :key="index">
			<view class="mine_block_tit">
				<view class="mine_block_tit_left">{{item.name}}</view>
			</view>
			<view class="mine_block_view u-flex-between">
				<!-- <image mode="widthFix" src="/static/home/zu2.png"></image> -->
				<view class="u-flex-fill">
					<view class="u-flex-y-center u-flex-between u-flex-fill" style="margin-bottom: 20rpx;">
						<view style="width: 50%;">
							<view style="font-size: 30rpx;">
								<text style="color: #3770AE;">{{item.data.day_money || 0}}</text>
							</view>
							<view style="color: #999;">
								今日{{item.type}}
							</view>
						</view>

						<view style="width: 50%;">
							<view style="font-size: 30rpx;">
								<text style="color: #3770AE;">{{item.data.week_money1 || 0}}</text>
							</view>
							<view style="color: #999;">
								上周{{item.type}}
							</view>
						</view>
					</view>
					<view class="u-flex-y-center u-flex-between u-flex-fill">
						<view style="width: 50%;">
							<view style="font-size: 30rpx;">
								<text style="color: #3770AE;">{{item.data.week_money0 || 0}}</text>
							</view>
							<view style="color: #999;">
								本周{{item.type}}
							</view>
						</view>
						<view style="width: 50%;">
							<view style="font-size: 30rpx;">
								<text style="color: #3770AE;">{{item.data.total_money || 0}}</text>
							</view>
							<view style="color: #999;">
								累计{{item.type}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				walletInfo: {},
				order: {},
				device_fee: {},
				device: {},
				invite: {},
				wallet: {},
				money_list: [{
					name: "收益统计",
					type: "收益",
					data: {}
				}, {
					name: "推广统计",
					type: "推广",
					data: {}
				}, {
					name: "邀请统计",
					type: "邀请",
					data: {}
				}]
			}
		},
		// onLoad() {
		// 	this.getWalletInfo()
		// },
		onShow() {
			this.getWalletInfo()
		},
		methods: {
			calltel() {
				uni.makePhoneCall({
					phoneNumber: 'tel:400-800-5326'
				});
			},
			topay() {
				uni.navigateTo({
					url: '/pages/wallet/recharge?data=' + encodeURIComponent(JSON.stringify(this.wallet))
				})
			},
			navto(url) {
				uni.navigateTo({
					url: url
				})
			},
			getWalletInfo() {
				this.$http.get('/shop/v10/wallet/report').then(({
					data,
					success
				}) => {
					if (success) {
						this.wallet = data.wallet
						this.device = data.device
						// this.wallet.freeze_money = this.wallet.freeze_money.toFixed(2)
						this.wallet.info = data.shop
						this.money_list = [{
							name: "收益统计",
							type: "收益",
							data: data.device_fee
						}, {
							name: "推广统计",
							type: "推广",
							data: data.order
						}, {
							name: "邀请统计",
							type: "邀请",
							data: data.invite
						}]
					}

				})
			},
		}
	}
</script>

<style>
	page {
		background: #F7F7F7;
	}
</style>
<style scoped lang="scss">
	view {
		box-sizing: border-box;
	}

	.mine {
		padding: 30rpx;

		&_money {
			position: relative;
			width: 690rpx;
			height: 260rpx;
			// padding: 6rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;


			&_bei {
				width: 690rpx;
				height: 172rpx;
				position: absolute;
				z-index: -1;
				top: 0;
				left: 0;
			}

			&_num {
				width: 100%;
				height: 172rpx;
				background-color: #4497D1;
				padding: 30rpx 110rpx 30rpx 50rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-radius: 15rpx;

				&_view {
					&_monNum {
						font-weight: bold;
						font-size: 52rpx;
						color: #FFFFFF;
						height: 70rpx;
						display: table-cell;
						vertical-align: bottom;
					}

					&_tip {
						margin-top: 20rpx;
						font-size: 28rpx;
						color: #FFFFFF;
					}
				}
			}

			&_bottom {
				background-color: #3978B9;
				width: 100%;
				height: 76rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-radius: 0 0 15rpx 15rpx;

				view {
					width: 50%;
					text-align: center;
					line-height: 76rpx;
					font-weight: bold;
					font-size: 28rpx;
					color: #D9E221;
				}
			}
		}

		&_grid {
			display: flex;
			flex-wrap: wrap;
			margin: 35rpx 0;

			&_view {
				width: 25%;
				font-weight: bold;
				font-size: 28rpx;
				color: #707070;
				text-align: center;
				margin-bottom: 22rpx;

				image {
					width: 98rpx;
					height: 98rpx;
					border-radius: 50%;
					background-color: #fff;
					margin-bottom: 8rpx;
				}
			}
		}

		&_block {
			padding: 24rpx;
			background-color: #fff;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			margin-bottom: 20rpx;

			&_tit {
				display: flex;
				align-items: center;
				justify-content: space-between;

				&_left {
					font-weight: bold;
					font-size: 28rpx;
					color: #232323;
				}

				&_right {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #CBD73B;

					image {
						width: 13rpx;
						height: 22rpx;
						margin-left: 15rpx;
						margin-top: 6rpx;
					}
				}
			}

			&_view {
				width: 100%;
				min-height: 120rpx;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				border: 2rpx solid rgba(55, 112, 174, 0.1);
				margin-top: 16rpx;
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #232323;
				padding: 20rpx 30rpx;
				text-align: center;

				image {
					width: 48rpx;
					height: 48rpx;
					margin-right: 25rpx;
				}
			}
		}
	}
</style>