<template>
	<view class="container">
		<view class="mine-header">
			<view class="header-top">
				<!--navBar-->
				<view class="nav-bar" :style="{ height: height + 'px', 'padding-top': statusBarHeight + 'px' }"><text class="person-center">我的</text></view>
				<view class="user-info">
					<view class="top">
						<image class="avator" :src="userInfo.avatar" mode=""></image>
						<view class="info">
							<view class="name">{{userInfo.staffName}}</view>
							<view class="shop">{{userInfo.accountName}}</view>
						</view>
						<view class="select-acccount" v-if="userInfo.allowSwitching>0">
							切换行号
							<image class="img" src="../../static/arrow-right-w.png" mode=""></image>
						</view>
					</view>
					<view class="line"></view>
					<view class="user-integral">
						<view class="item">
							<view class="num">{{userInfo.allIntegral}}</view>
							<view class="bottom">累计积分</view>
						</view>
						<view class="item">
							<view class="num">{{userInfo.surplusIntegral}}</view>
							<view class="bottom">当前积分</view>
						</view>
						<view class="item">
							<view class="num">{{userInfo.consumeIntegral}}</view>
							<view class="bottom">消费积分</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom-setting">
				<view class="item">
					<view class="left">
						<image class="left-img" src="../../static/coupon.png" mode=""></image>
						<view class="title">卡片回收</view>
					</view>
					<image class="right-arrow" src="../../static/arrow-right.png" mode=""></image>
				</view>
				<view class="item">
					<view class="left">
						<image class="left-img" src="../../static/integral.png" mode=""></image>
						<view class="title">积分明细</view>
					</view>
					<image class="right-arrow" src="../../static/arrow-right.png" mode=""></image>
				</view>
				<view class="item">
					<view class="left">
						<image class="left-img" src="../../static/customer.png" mode=""></image>
						<view class="title">联系客服</view>
					</view>
					<image class="right-arrow" src="../../static/arrow-right.png" mode=""></image>
				</view>
				<view class="item last-item">
					<view class="left">
						<image class="left-img" src="../../static/setting.png" mode=""></image>
						<view class="title">设置</view>
					</view>
					<image class="right-arrow" src="../../static/arrow-right.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				height: this.CustomBarHeight,
				statusBarHeight: this.StatusBarHeight,
				userInfo: {}
			};
		},
		created() {
			this.getUserInfo()
		},
		methods: {
			getUserInfo() {
				this.$net.get('/staff/detail').then(res => {
					if (res.code === 200) {
						this.userInfo = res.data
						this.$store.commit('refreshUserInfo', this.userInfo)
					} else {
						this.toast(res.message)
					}
				})
			},
			getImg() {
				var that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],              //original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album', 'camera'],             //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
					success: function (res) {
						console.log(JSON.stringify(res.tempFilePaths));
						that.imgArr = res.tempFilePaths
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
.container {
	width: 100%;
	height: 100%;
	background-color: #F5F5F5;
	position: fixed;
	top: 0;
	left: 0;
	.mine-header {
		width: 100%;
		height: 392rpx;
		display: flex;
		flex-direction: column;
		background-image: url(../../static/mine-bg.png);
		background-size: 100% 100%;
		.header-top {
			top: 0;
			position: sticky;
			z-index: 999;
			.nav-bar {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				.person-center {
					color: #ffffff;
					font-size: 36upx;
					text-align: center;
					flex: 0.8;
				}
			}
		}
		.user-info {
			margin: 30rpx auto 0;
			// height: 312rpx;
			padding-bottom: 34rpx;
			width: 700rpx;
			border-radius: 16rpx;
			background-color: #FFFFFF;
			.top {
				display: flex;
				position: relative;
				height: 174rpx;
				.avator {
					margin-top: 30rpx;
					margin-left: 30rpx;
					height: 110rpx;
					width: 110rpx;
					border-radius: 110rpx;
				}
				.info {
					margin-top: 50rpx;
					margin-left: 20rpx;
					width: 380rpx;
					.name {
						font-size: 32rpx;
						color: #333333;
						font-weight: bolder;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}
					.shop {
						margin-top: 20rpx;
						font-size: 24rpx;
						color: #999999;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}
				}
				.select-acccount {
					top: 54rpx;
					position: absolute;
					right: 0;
					width: 160rpx;
					height: 50rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 24rpx;
					color: #FFFFFF;
					background-color: #FF7272;
					border-radius: 25rpx 0 0 25rpx;
					.img {
						margin-left: 14rpx;
						height: 20rpx;
						width: 12rpx;
					}
				}
			}
			.user-integral {
				margin: 0 70rpx;
				display: flex;
				justify-content: space-between;
				border-top: 2rpx solid #F5F5F5;
				.item {
					text-align: center;
					margin-top: 34rpx;
					.num {
						font-size: 36rpx;
						color: #333333;
						font-weight: bolder;
					}
					.bottom {
						margin-top: 16rpx;
						font-size: 24rpx;
						color: #666666;
					}
				}
			}
		}
	}
	.bottom-setting {
		margin: 30rpx 25rpx;
		border-radius: 16rpx;
		background-color: #FFFFFF;
		.last-item {
			border: none;
		}
		.item {
			display: flex;
			padding: 26rpx 30rpx;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid#F5F5F5;
			.left {
				display: flex;
				align-items: center;
				.left-img {
					height: 56rpx;
					width: 56rpx;
					display: block;
				}
				.title {
					margin-left: 30rpx;
					font-size: 30rpx;
					color: #333333;
				}
			}
			.right-arrow {
				height: 20rpx;
				width: 12rpx;
				display: block;
			}
		}
	}
}
</style>
