<template>
	<view class="box" v-if='isShow'>
		<view class="topBg">
			<view class="userInfoBox">
				<view class="headImg">
					<image mode="aspectFill" :src="avatarUrl"></image>
				</view>
				<view class="nameBox">
					{{ user.nickName }}
					<view>{{ user.phonenumber }}</view>
				</view>
			</view>
		</view>
		<view class="rMainBox">
			<uni-list :border="false" class="myList">
				<!-- 				<uni-list-item :border="false" title="个人信息" showArrow :to="`./myInfo`">
					<template v-slot:header>
						<view class="slot-box">
							<image class="slot-image" src="/static/user_icon03.png" mode="widthFix"></image>
						</view>
					</template>
				</uni-list-item>
				<uni-list-item :border="false" title="参赛队信息" showArrow :to="`./teamList`">
					<template v-slot:header>
						<view class="slot-box">
							<image class="slot-image" src="/static/user_icon06.png" mode="widthFix"></image>
						</view>
					</template>
				</uni-list-item>
				<uni-list-item :border="false" title="会员充值" showArrow :to="`./mycard/renew`">
					<template v-slot:header>
						<view class="slot-box">
							<image class="slot-image" src="/static/user_icon01.png" mode="widthFix"></image>
						</view>
					</template>
				</uni-list-item>

				<uni-list-item :border="false" title="场地订单" showArrow :to="`./bills`">
					<template v-slot:header>
						<view class="slot-box">
							<image class="slot-image" src="/static/user_icon02.png" mode="widthFix"></image>
						</view>
					</template>
				</uni-list-item> -->
				<uni-list-item :border="false" title="个人会员" showArrow clickable
					@click="goPath('/myCenter/personInfo/index')">
					<template v-slot:header>
						<view class="slot-box">
							<image class="slot-image" mode="widthFix"></image>
						</view>
					</template>
				</uni-list-item>
				<uni-list-item :border="false" title="我的培训" showArrow clickable
					@click="goPath('/myCenter/mytrain/mytrain')">
					<template v-slot:header>
						<view class="slot-box">
							<image class="slot-image" mode="widthFix"></image>
						</view>
					</template>
				</uni-list-item>

				<!-- 				<uni-list-item :border="false" title="我的赛事" showArrow :to="`./match`">
					<template v-slot:header>
						<view class="slot-box">
							<image class="slot-image" src="/static/user_icon04.png" mode="widthFix"></image>
						</view>
					</template>
				</uni-list-item> -->
			</uni-list>
		</view>

	</view>
	<view class="content content-bottom">
		<footer-menu :active="'center'" />
	</view>
</template>

<script setup>
	import * as my from '@/myCenter/center_api.js';
	import * as loginServer from '@/common/login.js';
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';

	const user = ref({});
	const app = getApp();
	const isShow = ref(false)

	onShow(() => {
		init()
	})
	onLoad(option => {
		uni.hideTabBar()
	})

	function init() {
		if (app.globalData.isLogin) {
			isShow.value = true
			if (app.globalData.userInfo) {
				const currUser = app.globalData.userInfo
				user.value = currUser;
			} else {
				loginServer.getInfo().then(res => {
					const currUser = app.globalData.userInfo
					user.value = currUser
				})
			}
		} else {
			uni.redirectTo({
				url: '/pages/index/login?path=' + encodeURIComponent(getCurrentPages()[0].$page.fullPath)
			})
		}
	}

	function goBack() {
		uni.navigateBack({});
	}
	// function goQcode() {
	// 	uni.scanCode({
	// 		onlyFromCamera: true,
	// 		success: function(res) {
	// 			console.log('条码类型：' + res.scanType);
	// 			console.log('条码内容：' + res.result);
	// 			api.scanQrCode(res.result).then(res => {
	// 				uni.showModal({
	// 					title: '提示',
	// 					content: res.msg,
	// 					success: function(res) {
	// 						if (res.confirm) {
	// 							console.log('确定');
	// 						} else if (res.cancel) {
	// 							console.log('取消');
	// 						}
	// 					}
	// 				});
	// 			});
	// 		}
	// 	});
	// }
	function building() {
		uni.showToast({
			title: '暂未开放，敬请期待。',
			icon: 'none',
			duration: 2000
		});
	}

	function goPath(path) {
		if (path)
			uni.navigateTo({
				url: path
			});
	}
</script>

<style scoped lang="scss">
	.box {
		width: 100vw;
		overflow: hidden;
	}

	.rMainBox {
		box-sizing: border-box;
		padding: 20rpx 25rpx 0;
		margin: 25rpx;
	}

	.userInfoBox {
		height: 200rpx;
	}

	.nameBox {
		position: absolute;
		left: 180rpx;
		top: 70rpx;
		font-size: 30rpx;
	}

	.nameBox view {
		color: #7b7f83;
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.goback {
		position: absolute;
		color: #fff;
		top: 100rpx;
		left: 35rpx;
	}

	.forAdmin {
		padding: 25rpx;
		box-sizing: border-box;
	}

	.topBg {}

	.onlyCardBottom {
		position: relative;
		width: 660rpx;
		margin: auto;
		height: 90rpx;

		.bbg {
			height: 90rpx;
			width: 660rpx;
		}

		.cardBottom {
			width: 660rpx;
			background: transparent;
			height: 90rpx;

			text {
				font-size: 28rpx;
				color: #925921;
			}

			.renewBtn {
				background: #874f02;
				color: #fff;
			}
		}
	}

	.headImg {
		border-radius: 50%;
		position: relative;
		top: 50rpx;
		overflow: hidden;
		width: 100rpx;
		height: 100rpx;
		border: 4px solid #ffffff;
		background: #c4f9cb;
		left: 40rpx;

		button {
			display: block;
			padding: 0;
		}

		image {
			width: 100rpx;
			height: 100rpx;
			display: block;
		}
	}

	.slot-image {
		width: 50rpx;
		position: relative;
		top: -8rpx;
		height: 50rpx;
		margin-right: 30rpx;
	}

	.myList {}

	.funcBar {
		display: flex;
		background: #fff;
		width: 700rpx;
		height: 140rpx;
		justify-content: space-around;
	}

	.funcBar view {
		display: flex;
		align-items: center;
		font-size: 36rpx;
	}

	.funcBar image {
		width: 80rpx;
		height: 80rpx;
	}

	.topbgimg {
		width: 100vw;
		position: absolute;
		z-index: -1;
	}

	.reportItembox {
		overflow: hidden;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.reportItem {
		background: #fff;
		border-radius: 15rpx;
		width: 340rpx;
		margin-top: 25rpx;

		.t {
			border-bottom: 1px solid #e5e5e5;
			height: 70rpx;
			line-height: 70rpx;
			color: #2b3133;
			font-size: 30rpx;
			padding-left: 36rpx;
		}

		.rbody {
			display: flex;
			padding: 36rpx;
			box-sizing: border-box;

			view {
				font-size: 26rpx;
				color: #888;
				width: 40%;
			}

			text {
				color: #00c176;
				font-weight: bold;
				font-size: 36rpx;
				display: block;
				margin-bottom: 20rpx;
			}
		}
	}

	.changephonepop {
		width: 100%;
	}

	.changephonepop view {
		width: 100%;
		margin: 0 0 30rpx;
	}

	.changephonepop view input {
		width: 100%;
		background: #f4f4f4;
		font-size: 30rpx;
		height: 80rpx;
		padding: 0 15rpx;
		box-sizing: border-box;
		line-height: 80rpx;
	}

	.changephonepop view.ffff {
		display: flex;
	}

	.changephonepop view button {
		font-size: 24rpx;
		margin-left: 10rpx;
		white-space: nowrap;
		width: 260rpx;
		line-height: 80rpx;
		background: linear-gradient(90deg, #00c176, #3ed89b);
		color: #fff;
		padding: 0;
		border: none;
	}
</style>