<template>
	<view class="body">
		<view class="background"></view>
		<view class="content">
			<view class="userInfo">
				<view class="userInfo-box">
					<view class="userInfo-img">
						<image class="portrait" :src="userInfo.avatar || '../../static/error/missing-face.png'"></image>
					</view>
					<view class="userInfo-xinxi">
						<view class="title clamp">
							{{userInfo.nickname}}
						</view>
						<!-- <view class="phone">
							好评总数：10251
						</view> -->
					</view>
					<view class="balance" @click="navTo('/pages/user/award')">当前佣金：{{userInfo.brokerage_price}}</view>
				</view>
				<view class="user-money flex" v-if="userInfo && agent && agent.count">
					<view class="user-money-item" >
						<view class="user-money-num">{{ agent.count.cashback_sum*1 || 0 }}</view>
						<view class="user-money-font"> 累计金额</view>
					</view>
					<view class="user-xian"></view>
					<view class="user-money-item" >
						<view class="user-money-num">{{ agent.count.status_count_0*1 || 0 }}</view>
						<view class="user-money-font">待处理单数</view>
					</view>
					<view class="user-xian"></view>
					<view class="user-money-item" >
						<view class="user-money-num">{{ agent.count.status_count_2*1 || 0 }}</view>
						<view class="user-money-font">完成单数</view>
					</view>
				</view>
			</view>
			<view class="userInfoList">
				<view class="userInfoList-bottom" @click="navTo('/pages/order/orderAdmin')">
					<image src="../../static/icon/admin3.png" mode="" class="bottom">
						家政维修
				</view>
				<view class="userInfoList-bottom" @click="navTo('/pages/order/wuyouAdmin')">
					<image src="../../static/icon/admin4.png" mode="" class="bottom">
						洗衣订单
				</view>
				<view class="userInfoList-bottom" @click="navTo('/pages/user/award')">
					<image src="../../static/icon/admin1.png" mode="" class="bottom">
						佣金管理
				</view>
				<view class="userInfoList-bottom" @click="navTo('/pages/user/spread')">
					<image src="../../static/icon/admin2.png" mode="" class="bottom">
						我的推广
				</view>
				<view class="userInfoList-bottom" @click="navTo('/pages/user/team')">
					<image src="../../static/icon/admin5.png" mode="" class="bottom">
						我的团队
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {agentInfo} from '@/api/user.js'
	export default {
		data() {
			return {
				type: '',
				image: '',
				name: '',
				phone: '',
				address: '',
				code: '',
				agent:{}
			};
		},
		onLoad() {
			this.agentInfo()
		},
		computed: {
			...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
		},
		methods: {
			//跳转
			navTo(url) {
				uni.navigateTo({
					url
				});
			},
			agentInfo() {
				agentInfo().then(res=> {
					console.log(res);
					this.agent = res.data
				})
			}
		}
	};
</script>

<style lang="scss">
	page {
		height: 100%;
		background-color: #eeeded;
		padding: 0;
		margin: 0;
	}

	.content {
		background-color: #eeeded;
		margin: 0 30rpx;
		display: flex;
		flex-direction: column;
	}

	.background {
		width: 100%;
		height: 220rpx;
		background-color: $base-color;
	}

	.userInfo {
		margin-top: -110rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #f9f9f9;
		border-radius: 19rpx;
		width: 100%;
		margin-bottom: 20rpx;
		padding-bottom: 30rpx;

		.userInfo-box {
			display: flex;
			flex-direction: column;
			align-items: center;

			.userInfo-img {
				margin: -65rpx 0 0 0;
				width: 130rpx;
				height: 130rpx;
				border: 5rpx solid #fff;
				border-radius: 50%;

				image {
					border-radius: 50%;
					width: 100%;
					height: 100%;
					background: #fff;
				}
			}

			.userInfo-xinxi {
				.title {
					margin: 20rpx 0;
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;
					text-align: center;
				}

				.phone {
					font-size: 28rpx;
					font-weight: 500;
					color: #666666;
				}
			}

			.balance {
				margin-top: 10rpx;
				text-align: center;
				width: 500rpx;
				background: $base-color;
				border-radius: 30rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #ffffff;
				line-height: 60rpx;
			}
		}
	}

	.userInfoList {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.userInfoList-bottom {
			margin-bottom: 15rpx;
			width: 340rpx;
			height: 250rpx;
			background: #f9f9f9;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.bottom {
				margin-bottom: 20rpx;
				width: 68rpx;
				height: 68rpx;
			}
		}
	}

	.user-money {
		width: 100%;
		margin-top: 50rpx;
		justify-content: center;

		.user-money-item {
			width: 50%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.user-money-num {
				font-size: 36rpx;
				font-weight: bold;
			}

			.user-money-font {
				margin-top: 20rpx;
				font-size: 24rpx;
				font-weight: 500;
			}
		}

		.user-xian {
			width: 1px;
			height: 77rpx;
			background: #eeeeee;
		}
	}
</style>