<template>
		<view >
			<view class="head-bg padding-lr">
				<view class="user-info flex align-center justify-between">
					<view class="flex align-center" v-if="!isLogin">
						<image class="round head-img"
							:src="isLogin ? userInfo.avatarUrl : 'https://hy-qd-oss.oss-cn-qingdao.aliyuncs.com/chat/20230509/static/head.png'" mode="aspectFill">
						</image>
						<view class="mobile"  @click="wxLogin"> 请登录 </view>
						
					</view>
					<view class="flex align-center" v-else>
						<button  class="round head-img" style="padding: 0px !important;" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						  <image class="avatar-img" :src="userInfo.avatarUrl"></image>
						</button> 
						
						<view class="mobile" > {{userInfo.nickName}} </view>
					</view>
					
				</view>
				<view class="flex vip-bg justify-between align-center">
					<view class="taocan">
						<view class="title">我的权益</view>
						<view class="desc">{{ vipEndTime}} </view>
					</view>
					<button class="cu-btn">兑换码</button>
				</view>
			</view>
			<view class="mine-list padding-lr">
				<view class="flex item align-center">
					<view class="flex align-center justify-between solid-bottom margin-left-sm">
						<view class="title">使用指南</view>
						<view class="flex align-center">
							<view class="desc">提问的艺术</view>
							<u-icon name="arrow-right" color="#848B9E" size="24"></u-icon>
						</view>
					</view>
				</view>
				<view @click="toVip" class="flex item align-center" >
					<view class="flex align-center justify-between solid-bottom margin-left-sm">
						<view class="title">开通权益</view>
						<view class="flex align-center">
							<view class="desc">享专属特权</view>
							<u-icon name="arrow-right" color="#848B9E" size="24"></u-icon>
						</view>
					</view>
				</view>
				
				
				<!-- #ifdef MP-WEIXIN -->
				<button open-type="share" class="flex item align-center">
					<view class="flex align-center justify-between solid-bottom margin-left-sm">
						<view class="title">分享好友</view>
						<view class="flex align-center">
							
							<view class="desc">邀请新用户兑换 1 次
							</view>
							<u-icon name="arrow-right" color="#848B9E" size="24"></u-icon>
						</view>
					</view>
				</button>
				<button open-type="contact" class="flex item align-center">
					<view class="flex align-center justify-between solid-bottom margin-left-sm">
						<view class="title">联系客服</view>
						<view class="flex align-center">
							<view class="desc">朋友扫码使用可赚钱</view>
							<u-icon name="arrow-right" color="#848B9E" size="24"></u-icon>
						</view>
					</view>
				</button>
				<button open-type="feedback" class="flex item align-center">
					<view class="flex align-center justify-between solid-bottom margin-left-sm">
						<view class="title">问题反馈</view>
						<view class="flex align-center">
							<u-icon name="arrow-right" color="#848B9E" size="24"></u-icon>
						</view>
					</view>
				</button>
				<view @click="logout" class="flex item align-center">
					<view class="flex align-center justify-between solid-bottom margin-left-sm">
						<view class="title">退出登录</view>
						<view class="flex align-center">
							<!-- <view class="desc">提问的艺术</view> -->
							<u-icon name="error" color="#848B9E" size="24"></u-icon>
						</view>
					</view>
				</view>
				<!-- #endif -->
				<view class="flex align-center justify-center padding-tb text-blue">
					<navigator url="../content/content?content_id=1">
						<view class=" ">用户协议</view>
					</navigator>
					<view class="text-gray padding-lr-sm">
						|
					</view>
					<navigator url="../content/content?content_id=2">
						<view class=" ">隐私政策</view>
					</navigator>
				</view>
			</view>
			<uni-popup ref="popup" type="dialog">
				<uni-popup-dialog ref="inputClose" mode="input" title="兑换码" :value="rede_code" placeholder="请输入兑换码"
					@confirm="dialogInputConfirm"></uni-popup-dialog>
			</uni-popup>
			<daxiang-getUserProfile ref="getUserProfile"></daxiang-getUserProfile>
		</view>
</template>

<script>
	const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
	export default {
		data() {
			return {
				isLogin: false,
				userInfo:{
					
				},
				vipEndTime:'2099-12-31',
			}
		},
		computed:{
			
		},
		onShareAppMessage(res) {
			if(res.from == 'button'){
				console.log('页面转发')
			}else{
				console.log('右上角 转发')
			}
			return {
			      title: 'LPCAI',
			      path: '/pages/index/index',
			      imageUrl: "https://hy-qd-oss.oss-cn-qingdao.aliyuncs.com/chat/20230509/static/gpt.png",
			      success: (res) => {
			        console.log("转发成功", res);
			      },
			      fail: (res) => {
			        console.log("转发失败", res);
			      }
			    }
		},
		onShareTimeline(res) {
			if(res.from == 'button'){
				console.log('页面转发')
			}else{
				console.log('右上角 转发')
			}
			return {
			      title: 'LPCAI',
			      path: '/pages/index/index',
			      imageUrl: "https://hy-qd-oss.oss-cn-qingdao.aliyuncs.com/chat/20230509/static/gpt.png",
			      success: (res) => {
			        console.log("转发成功", res);
			      },
			      fail: (res) => {
			        console.log("转发失败", res);
			      }
			    }
		},
		onLoad() {
			
			const token = this.getAccessToken()
			
			if (!token) {
				removeAll()
				this.isLogin = false
			} else {
				this.isLogin = true
				this.userInfo = this.getUserInfo()
			}
		},
		onShow() {
		  // this.vipEndTime = this.vipEndTime ? '会员到期日：' + this.vipEndTime : '普通会员'
		  this.vipEndTime  = '会员到期日：2099-12-31'
		},
		methods: {
			getAccessToken(){
					return 'mock'
			},
			logout(){
				var _this  = this
				uni.showLoading({
					title: '退出中...'
				});
				removeAll()
				setTimeout(function(){
					uni.hideLoading();
					_this.onLoadPage()
				},2000)
			},
			onChooseAvatar(e){
				uni.showLoading({
					title: '图片上传中...'
				});
				upLoadImg(e.detail.avatarUrl).then(res=>{
					this.userInfo.avatarUrl = res.data
					updateUser(this.userInfo)
					.then(res=>{
						setUser(this.userInfo)
						uni.hideLoading();
					})
					.catch(error=>{
						uni.hideLoading();
						uni.showToast({
							title: '头像上传失败!',
							icon: 'error',
							duration: 2000
						});
					})
				}).catch(error=>{
					uni.hideLoading();
					uni.showToast({
						title: '头像上传失败!',
						icon: 'error',
						duration: 2000
					});
				})
			},
			toVip() {
				uni.navigateTo({
					url: '../vip/vip'
				})
			},
			onLoadPage(){
				const pages = getCurrentPages()
				// 声明一个pages使用getCurrentPages方法
				const curPage = pages[pages.length - 1]
				// 声明一个当前页面
				curPage.onLoad(curPage.options) // 传入参数
				curPage.onShow()
				curPage.onReady()
			},
			wxLogin() {
				uni.showLoading({
					title: '登录中...'
				});
				this.isLogin = true
				this.userInfo = this.getUserInfo()
				uni.hideLoading();
				
				this.onLoadPage()
			}
			,
			getUserInfo(){
				return {
					"nickName":"LP"
				}
			}
		
		}
	}
</script>
<style>
	/*每个页面公共css */
	@import url("@/static/style/color-ui.css");
</style>
<style lang="scss">
	.login-btn {
		background-color: #62b900;
		width: 80%;
		border-radius: 15px;
		margin-top: 45%;
	}

	.head-bg {
		padding-top: var(--status-bar-height);
		margin-top: 60rpx;
		background-image: url('data:image/png;base64,[encoded data, 151940 characters]');
		background-repeat: no-repeat;
		background-size: 100%;
		height: 574rpx;

		.user-info {
			padding-top: 60rpx;
			padding-top: 30rpx;

			.head-img {
				width: 120rpx;
				height: 120rpx;
			}

			.mobile {
				padding-left: 23rpx;
				font-size: 36rpx;
				font-weight: bold;
				color: #222222;
			}

			.info-edit {
				font-size: 24rpx;
				font-weight: 500;
				color: #848b9e;
				line-height: 18rpx;
				padding-right: 12rpx;
			}
		}

		.vip-bg {
			background-image: url("https://hy-qd-oss.oss-cn-qingdao.aliyuncs.com/chat/20230509/mine-vip-bg.png");
			background-repeat: no-repeat;
			background-size: 100%;
			// width: calc(100% - 60rpx);
			height: 133rpx;
			padding: 30rpx 24rpx 30rpx 30rpx;
			margin-top: 50rpx;

			.taocan {
				color: #ffffff;

				.title {
					font-size: 30rpx;
					font-weight: bold;
					line-height: 33rpx;
				}

				.desc {
					font-size: 24rpx;
					font-weight: 500;
					line-height: 33rpx;
					padding-top: 19rpx;
				}
			}

			.cu-btn {
				height: 48rpx;
				background: linear-gradient(90deg, #ffefc9 0%, #e9c98d 100%);
				border-radius: 24rpx;
				font-size: 24rpx;
				font-weight: bold;
				color: #863f18;
				line-height: 35rpx;
			}
		}
	}

	.mine-list {
		margin-top: -181rpx;

		button {
			border: none;
			margin: 0;
			padding: 0;
			background-color: inherit;
		}

		button::after {
			border: none;
		}

		.item {
			.solid-bottom {
				width: 100%;
			}

			.title {
				padding-top: 50rpx;
				padding-bottom: 50rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #141e34;
				line-height: 56rpx;
			}

			.desc {
				padding-right: 13rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #848b9e;
				line-height: 40rpx;
			}
		}
	}
	.avatar-img{
		width: 100%;
		height: 100%;
		object-fit:cover;
	}
</style>