<template>
	<view class="back" @click="goGame">
		<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/back.png" mode="widthFix"></image>
	</view>
	<scroll-view scroll-y>
		<view class="top">
			<view class="balance">
				<view class="price-bck">
					<view class="logo-bck">
						<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/icon-橡果.png" mode="widthFix"></image>
					</view>
					{{userinfo.amount}}
				</view>
			</view>
			<view class="avatar-group">
				<view class="avatar">
					<!-- #ifdef H5 -->
					<image :src="avatar" mode="heightFix"></image>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<button open-type="chooseAvatar" @chooseavatar="avatarHandler" class="avatar-btn">
						<image :src="avatar" mode="heightFix"></image>
					</button>
					<!-- #endif -->
				</view>
			</view>
		</view>

		<view style="margin-top: -30px;" class="my-bck">
			<view class="center-circle">
				<view class="circle-left">
				</view>
				<view class="circle-center">
				</view>
				<view class="circle-right">
				</view>
			</view>
			<view class="center-content">
				<view class="nickname">
					{{userinfo.name}}
					<image v-if="JSON.stringify(userinfo) !== '{}'" @click="openPopupUseredit"
						src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/edit.png" mode="widthFix"></image>
				</view>
				<view v-if="JSON.stringify(userinfo) !== '{}'" class="userid">
					ID:{{userinfo.id}}
				</view>
				<view class="content-menu">
					<view @click="openPopupMycoin">
						<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/icon-我的硬币.png" mode="widthFix"></image>
						<text>我的硬币</text>
					</view>
					<view @click="openPopupRank">
						<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/icon-排行榜.png" mode="widthFix"></image>
						<text>排行榜</text>
					</view>
				</view>

				<view class="pd-25">
					<view class="menu-list">
						<view class="list-item" @click="openPopupLearning">
							<view class="item-left">
								<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/icon-新手教程.png" mode="widthFix"></image>
							</view>
							<view class="item-center">
								新手教程
							</view>
							<view class="item-right">
								<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/setsystem/icon-right.png" mode="widthFix"></image>
							</view>
						</view>
						<view class="list-item" @click="openPopupShare">
							<view class="item-left">
								<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/icon-邀请好友.png" mode="widthFix"></image>
							</view>
							<view class="item-center">
								邀请好友
							</view>
							<view class="item-right">
								<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/setsystem/icon-right.png" mode="widthFix"></image>
							</view>
						</view>
						<!-- #ifdef MP-WEIXIN -->
						<view class="list-item">
							<button open-type="contact" bindcontact="handleContact" hover-class="none" class="contact-kefu">
								<view class="item-left">
									<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/icon-联系客服.png" mode="widthFix"></image>
								</view>
								<view class="item-center">
									联系客服
								</view>
								<view class="item-right">
									<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/setsystem/icon-right.png" mode="widthFix"></image>
								</view>
							</button>
						</view>
						<!-- #endif -->
						<view class="list-item" @click="openPopupShequ">
							<view class="item-left">
								<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/icon社区号.png" mode="widthFix"></image>
							</view>
							<view class="item-center">
								社区号
							</view>
							<view class="item-center item-shequ">
								<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/logo-微信.png" mode="widthFix"></image>
								<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/logo-qq.png" mode="widthFix"></image>
								<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/logo-抖音.png" mode="widthFix"></image>
							</view>
							<view class="item-right">
								<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/setsystem/icon-right.png" mode="widthFix"></image>
							</view>
						</view>
						<view class="list-item" @click="openPopupSetSystem">
							<view class="item-left">
								<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/set.png" mode="widthFix"></image>
							</view>
							<view class="item-center">
								设置
							</view>
							<view class="item-right">
								<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/setsystem/icon-right.png" mode="widthFix"></image>
							</view>
						</view>
						<view class="list-item" @click="openPopupContactus">
							<view class="item-left">
								<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/icon-联系我们.png" mode="widthFix"></image>
							</view>
							<view class="item-center">
								联系我们
							</view>
							<view class="item-right">
								<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/setsystem/icon-right.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
					
					<!-- #ifdef H5 -->
					<view v-if="!proxy.$wx || !app.isWechat()" class="back-login">
						<view class="back-btn" @click="logout">
							退出登录
						</view>
					</view>
					<!-- #endif -->
				</view>
			</view>
		</view>

	</scroll-view>
	<!-- 弹窗：我的硬币 -->
	<popup-mycoin ref="pMycoin"></popup-mycoin>
	<!-- 弹窗：排行榜 -->
	<popup-rank ref="pRank"></popup-rank>

	<!-- 弹窗：新手教程 -->
	<popup-learning ref="pLearning"></popup-learning>
	<!-- 弹窗：邀请好友 -->
	<popup-share ref="pShare"></popup-share>
	<!-- 弹窗：社区号 -->
	<popup-shequ ref="pShequ"></popup-shequ>
	<!-- 弹窗：设置 -->
	<popup-setsystem ref="pSetsystem"></popup-setsystem>
	<!-- 弹窗：联系我们 -->
	<popup-contactus ref="pContactus"></popup-contactus>
	<!-- 弹窗：修改昵称 -->
	<popup-useredit ref="pUseredit" @closeEdit="closeEdit"></popup-useredit>

</template>
<script>
// #ifdef MP-WEIXIN
export default {
  onShareAppMessage() {
	let user = getApp().globalData.userinfo,
		path = '/pages/game/game'
	if ('code' in user) {
		path += '?scene=' + user.code
	}
    return {
		title: '快来一起寻宝吧～',
		path: path
	}
  }
}
// #endif
</script>
<script setup>
	import {
		nextTick
	} from 'vue';
	const app = getApp()
	import {
		ref,
		onMounted,
		getCurrentInstance
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance() // 全局对象
	/* 一系列窗口对象 */
	const pMycoin = ref() // 我的硬币
	const pRank = ref() // 排行榜
	const pLearning = ref() // 新手教程
	const pShare = ref() // 邀请好友
	const pShequ = ref() // 社区
	const pSetsystem = ref() // 系统设置
	const pContactus = ref() // 联系我们
	const pUseredit = ref()

	const userinfo = ref(app.globalData.userinfo)
	const avatar = ref(app.globalData.userinfo.avatar)
	// #ifdef MP-WEIXIN
	const avatarHandler = (e) => {
		console.log(e);
		uni.uploadFile({
			url: app.globalData.requestUrl + '/api/file/upload',
			filePath: e.detail.avatarUrl,
			name: 'file',
			success(res) {
				let data = JSON.parse(res.data)
				if (data.code !== 200) {
					uni.showToast({
						title: '上传失败，请重试',
						icon: 'none'
					});
					return;
				}
				uni.request({
					url: app.globalData.requestUrl + '/api/user/save/avatar',
					data: {
						avatar: data.data[0]
					},
					method: 'POST',
					header: {
						'Authorization': 'Bearer ' + app.globalData.token
					},
					success: (res) => {
						if (res.data.code === 200) {
							uni.showToast({
								title: '头像修改成功',
								icon: 'none'
							});
							app.globalData.userinfo.avatar = data.data[0];
							avatar.value = data.data[0];
						} else {
							uni.showToast({
								title: '上传失败，请重试',
								icon: 'none'
							});
						}
					},
					complete: () => {
						uni.hideLoading()
					}
				})
				console.log('上传完成', res);
			},
			fail(err) {
				console.log('err', err)
			}
		})
	}
	// #endif
	const closeEdit = (e) => {
		if (!e) return
		uni.request({
			url: app.globalData.requestUrl + '/api/user',
			header: {
				'Authorization': 'Bearer ' + app.globalData.token
			},
			success: (res) => {
				if (res.data.code === 200) {
					app.globalData.userinfo = res.data.data
					userinfo.value = res.data.data
				} else {
					uni.showToast({
						title: '获取用户信息失败，请重试',
						icon: 'none'
					})
				}
			}
		})
	}
	const logout = () => {
		// #ifdef H5
		if (proxy.$wx && app.isWechat()) return
		uni.showModal({
			title: '确认退出登录吗？',
			success: function(res) {
				if (res.confirm) {
					uni.removeStorageSync('jinxiangguo_login_token') // 移除token，刷新页面
					location.reload()
				}
			}
		})
		// #endif
	}
	const openPopupUseredit = () => {
		app.playAudio()
		pUseredit.value.open()
	}
	// 打开我的硬币弹窗
	const openPopupMycoin = () => {
		app.playAudio()
		pMycoin.value.open()
	}
	// 打开排行榜弹窗
	const openPopupRank = () => {
		app.playAudio()
		pRank.value.open()
	}
	// 打开新手教程弹窗
	const openPopupLearning = () => {
		app.playAudio()
		pLearning.value.open()
	}
	// 打开邀请好友弹窗
	const openPopupShare = () => {
		app.playAudio()
		pShare.value.open()
	}
	// 打开社区号弹窗
	const openPopupShequ = () => {
		app.playAudio()
		pShequ.value.open()
	}
	// 打开系统设置弹窗
	const openPopupSetSystem = () => {
		app.playAudio()
		pSetsystem.value.open()
	}
	// 打开联系我们弹窗
	const openPopupContactus = () => {
		app.playAudio()
		pContactus.value.open()
	}

	const goGame = () => {
		app.playAudio()
		uni.navigateBack()
	}
	const getUser = () => {
		uni.showLoading()
		uni.request({
			url: app.globalData.requestUrl + '/api/user',
			header: {
				'Authorization': 'Bearer ' + app.globalData.token
			},
			success: (res) => {
				if (res.data.code === 200) {
					app.globalData.userinfo = res.data.data
					userinfo.value = res.data.data
				} else {
					uni.showToast({
						title: '获取用户信息失败，请重试',
						icon: 'none'
					})
				}
			},
			complete: () => {
				uni.hideLoading()
			}
		})
	}
	onMounted(() => {
		// #ifdef H5
		if (!app.globalData.token) {
			uni.redirectTo({
				url: '/pages/index/index'
			})
			return
		}
		if (JSON.stringify(app.globalData.userinfo) !== '{}') return
		getUser()
		// #endif
		// #ifdef MP-WEIXIN
		// await app.globalData.loginPromise // 等待登录完毕
		if (app.globalData.unionid) {
			if (JSON.stringify(app.globalData.userinfo) !== '{}') return
			getUser()
		} else {
			app.callback = res => {
				if (JSON.stringify(app.globalData.userinfo) !== '{}') return
				getUser()
			}
		}
		// #endif
		
	})
</script>

<style scoped>
	.contact-kefu {
		width: 100%;
		display: flex;
		padding: 0;
		line-height: 1;
		font-size: 16px;
		background-color: transparent;
	}
	.contact-kefu::after {
		border: none;
	}
	.avatar-btn {
		width: 100px;
		height: 100px;
		padding: 0;
	}
	.balance {
		padding: 10px;
	}
	.price-bck image {
		width: 18px;
	}
	
	.logo-bck {
		height: 26px;
		width: 26px;
		background: #C4FF46;
		border-radius: 13px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 5px;
	}
	
	.price-bck {
		height: 26px;
		background: rgba(255, 255, 255, .8);
		border-radius: 13px;
		display: flex;
		align-items: center;
		padding-right: 10px;
		font-size: 12px;
		font-weight: 700;
		font-family: Noto Sans S Chinese;
	}
	.back-btn {
		background: linear-gradient(137.8deg, #C2FF8F 0%, #0DFFB9 99.99%);
		border-radius: 25px;
		height: 50px;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 15px;
	}

	.back-login {
		display: flex;
		padding: 10px;
	}

	.item-shequ image:first-child {
		width: 24px;
		height: auto;
	}

	.item-shequ image:last-child {
		width: 22px;
		height: auto;
	}

	.item-shequ image {
		margin: 0 4px;
	}

	.item-shequ {
		justify-content: flex-end;
	}

	.item-right image {
		width: 10px !important;
		height: auto;
	}

	.item-right {
		padding: 5px;
	}

	.item-center {
		flex: 1;
		padding: 0 10px;
	}

	.list-item view {
		display: flex;
		align-items: center;
	}

	.list-item image {
		width: 20px;
		height: auto;
	}

	.list-item {
		display: flex;
		padding: 15px;
	}

	.menu-list {
		border-radius: 15px;
		background-color: rgba(255, 255, 255, 0.5);
		margin: 10px;
	}

	.pd-25 {
		width: 100%;
	}

	.content-menu image {
		width: 18px;
		height: auto;
	}

	.content-menu view text {
		padding-left: 5px;
	}

	.content-menu view {
		height: 78px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		border-radius: 15px;
		margin: 10px;
		font-size: 14px;
	}

	.content-menu view:first-child {
		background: linear-gradient(137.8deg, #C2FF8F 0%, #0DFFB9 99.99%);

	}

	.content-menu view:last-child {
		background-color: #000;
		color: #fff;
	}

	.content-menu {
		display: flex;
		width: 100%;
	}

	.userid {
		font-size: 13px;
		font-weight: 400;
		padding: 5px;
	}

	.nickname image {
		width: 20px;
		height: auto;
	}

	.nickname {
		font-family: Noto Sans S Chinese;
		font-size: 28px;
		font-weight: 700;
		line-height: 42px;
		text-align: end;
	}
	
	.center-content {
		background: linear-gradient(182.09deg, #FFFDD8 -0.23%, #FFFFFF 91.61%);
		height: calc(100vh - 235px);
		display: flex;
		align-items: center;
		flex-direction: column;
		padding: 15px;
	}




	.circle-left {
		width: calc(100% / 2 - 43px);
		background: #FFFDD8;
		height: calc(100% + 2px);
		top: -1px;
		border-radius: 15px 22px 0 0;
		position: absolute;
	}
	.circle-center {
		width: 92px;
		height: 36px;
		position: absolute;
		left: calc(50% - 46px);
		background: radial-gradient(circle at 50% -22px, transparent, transparent 56px, #FFFDD8 56px);
	}
	.center-circle {
		display: flex;
		position: relative;
		height: 35px;
	}
	.circle-right {
		position: absolute;
		height: 100%;
		right: 0;
		height: calc(100% + 2px);
		top: -1px;
		width: calc(100% / 2 - 43px);
		border-radius: 22px 15px 0 0;
		background: #FFFDD8;
	}
	
	
	
	
	
	.avatar image {
		height: 100%;
	}

	.avatar {
		border-radius: 50px;
		border: 3px solid #000;
		box-sizing: border-box;
		background-color: #fff;
		overflow: hidden;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.avatar-group {
		border-radius: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 3px solid transparent;
		width: 100px;
		height: 100px;
	}

	.top {
		display: flex;
		width: 100%;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		height: 200px;
		background: url('https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/star1.png') no-repeat top 60px left calc(50% + 80px),
					url('https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/star2.png') no-repeat top 107px left 83px;
		background-size: 40px auto,
						 20px auto;
	}

	.back image {
		width: 12px;
		height: auto;
	}

	.back {
		position: absolute;
		z-index: 99999999;
		left: 0;
		/* #ifdef H5 */
		top: 0;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		top: 34px;
		/* #endif */
		padding: 20px 10px 10px 20px;
	}

	scroll-view {
		height: calc(100vh);
	}

</style>
<style>
	page {
		background: linear-gradient(180deg, #FBC379 0%, #FFF500 40.82%) !important;
	}
</style>