<template>
	<view class="me">
		<view class="top">
			<img v-if="userinfo" class="avatar" :src="this.userinfo.avatarUrl">
			<img v-else class="avatar" src="../../static/avatar.png">
			<view class="userinfo" v-if="userinfo" @click="removeStorage">
				<view class="name">{{userinfo.nickName}}</view>
				<view class="phone">{{userinfo.phonenumber }}</view>
			</view>
			<!-- <button v-else class="phone login" @click="toLogin()">点击此处登录</button> -->
			<button v-else class="phone login" open-type="getPhoneNumber" @getphonenumber="getUserInfo">点击此处登录</button>
		</view>
		
		<view class="wrap">
			<view class="option" @click="go(0,'../task/todo')">
				<view class="count">{{count}}</view>
				<view>待办任务</view>
			</view>
			<view class="option" @click="go(1,'../task/done')">
				<view class="icon" />
				<view>已办任务</view>
			</view>
		</view>
		<!-- 
		<view class="box">
			<view class="item" v-for="(item, index) in pageList" :key="index" @click="go(item.path)">
				<img class="icon" :src="item.icon">
				<view class="title">{{item.title}}</view>
				<view class="right">
					<view class="i i-xiangyou1"></view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import WXBizDataCrypt from "@/utils/WXBizDataCrypt.js"
	export default {
		data() {
			return {
				// 用户信息
				userinfo: '',
				avatar: '',
				count: 0,
				// 跳转页面配置项
				pageList: [
					{
						title: '延期申请',
						path: '../task/statistics',
						icon: '../../static/delay.png'
					},
					{
						title: '资讯公告',
						path: '../task/statistics',
						icon: '../../static/notice.png'
					},
					{
						title: '服务指南',
						path: '../task/statistics',
						icon: '../../static/consult.png'
					}
				]
			}
		},
		
		created() {
		},
		onShow:function(){
			this.userinfo = uni.getStorageSync('userinfo')
			this.isLogion();
		},
		filters: {
			
		},
		
		methods: {
			isLogion(){
				
				if(!uni.getStorageSync("userinfo")){
					this.wxLogin();
				}
			},
			wxLogin(){
				console.log(123123);
				uni.login({
					provider: 'weixin',
					success: res => {
						if(res.code) {
							console.log(res.code)
							this.getOpenId(res.code)
						} else {
							console.log('登录失败！' + res.errMsg)
						}
					}
				})
			},
			
			async getOpenId(code) {
				const { data:res } = await this.$http('/app/getOpenId',{code:code})
				if(res.code === 0){
					console.log(res)
					uni.setStorageSync("sessionKey", res.sessionKey)
					uni.setStorageSync("openId", res.openId);
				}
			},
			getUserInfo(e) {
				if (e.detail.errMsg == "getPhoneNumber:fail user deny") { //用户决绝授权
					//拒绝授权后弹出一些提示
					wx.showToast({
						title: '用户未授权',
						icon: 'error',
					});
					return
				} else {
			    var _this = this
			    wx.showModal({
			      title: '温馨提示',
			      content: '亲，授权微信登录后才能正常使用小程序功能',
			      success(res) {
			        //如果用户点击了确定按钮
			        if (res.confirm) {
			          wx.getUserProfile({
			            desc: '获取你的昵称、头像、地区及性别',
			            success: res => {
							//允许授权
							var token = uni.getStorageSync("sessionKey");
							console.log("token=" + token)
							//允许授权
							let pc = new WXBizDataCrypt('wxde02f5b39c3d9441', token); //wxXXXXXXX为你的小程序APPID
							let data = pc.decryptData(e.detail.encryptedData, e.detail.iv);
							console.log(data) //data就是最终解密的用户信息
							if (data.phoneNumber) {
								wx.setStorageSync("phone", data.phoneNumber);
								_this.login();
								
							} else {
								console.log("获取失败")
							}
			            },
			            fail: res => {
			              console.log(res)
			              //拒绝授权
			              wx.showToast({
			                title: '您拒绝了请求,不能正常使用小程序',
			                icon: 'error',
			                duration: 2000
			              });
			              return;
			            }
			          });
			        } else if (res.cancel) {
			          //如果用户点击了取消按钮
			          wx.showToast({
			            title: '您拒绝了请求,不能正常使用小程序',
			            icon: 'error',
			            duration: 2000
			          });
			          return;
			        }
			      }
			    })
			  }
			},
			toLogin(){
				// 跳转到登录页面
				uni.navigateTo({
					url: '../login/login',
				})
			},
			removeStorage(){
				uni.setStorageSync("token","1223333");
				uni.removeStorageSync("userinfo")
				// uni.navigateTo({
				// 	url: './me',
				// })
			},
			// 登录
			async login() {
				var obj = {
					code: wx.getStorageSync("phone"),
					keyword: wx.getStorageSync("openId"),
				}
				const {
					data: res
				} = await this.$http('/app/login', obj)
				if (res.code === 0) {
					uni.showToast({
						title: '登录成功',
						icon: 'success'
					})
					
					this.userinfo = res.data
					
					this.loginShow = false
					uni.setStorageSync("userinfo", res.data)
					uni.setStorageSync("token", res.token)
					uni.setStorageSync("avatar", this.avatar)
				} else {
					uni.showToast({
						title: '未登记权限',
						icon: 'error'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.me {
		background: #f5f5ff;
		min-height: 100vh;
	
		.top {
			box-sizing: border-box;
			top: 0;
			background: #3C9CFF;
			width: 100%;
			height: 50vw;
			padding: 8vw 5vw;
			border-bottom-left-radius: 16%;
			border-bottom-right-radius: 16%;
			display: flex;
			.login{
				color: #3C9CFF;
				height: 12vw;
				margin-top: 4vw;
			}
			.avatar {
				display: block;
				width: 20vw;
				height: 20vw;
				border-radius: 50%;
				margin-right: 5vw;
				background: #f5f5ff;
			}
	
			.userinfo {
				color: #fff;
				font-size: 6vw;
				.phone {
					background: none;
					margin-left: 0;
					padding-left: 0;
					color: white;
					padding-top: 2.5vw;
				}
				.phone::after {
					border: none;
				}
			}
		}
		
		.wrap {
			width: 90%;
			height: 24vw;
			background: hsla(0, 0, 100%, .97);
			margin: -10vw auto 6vw auto;
			padding: 2vw;
			border-radius: 3vw;
			display: flex;
			justify-content: space-around;
			box-shadow: 0 2px 2vw #ccc;
			position: relative;
			.option {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 1.2em;
				color: #777;
				.count {
					width: 16vw;
					height: 16vw;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #3C9CFF;
					font-size: 1.5em;
				}
				.icon {
					width: 16vw;
					height: 16vw;
					background: url('../../static/done.png') center center/contain no-repeat;
				}
			}
			&::before {
				content: '';
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translateY(-50%);
				width: 1px;
				height: 80%;
				background: #eee;
				box-shadow: 0 0 1px #eee;
			}
		}
		
		.box {
			width: 90%;
			margin: 0 auto;
			background: #fff;
			padding: 2vw;
			border-radius: 3vw;
			font-size: 1.2em;
			
			.item {
				padding: 4vw 0;
				display: flex;
				justify-content: space-around;
				align-items: center;
				position: relative;
				.icon {
					width: 10vw;
					height: 10vw;
				}
				.title {
					color: #777;
					padding-right: 40vw;
				}
				.right {
					color: hsl(44, 96%, 55%);
				}
				&::before {
					content: '';
					width: 90%;
					height: 1px;
					position: absolute;
					left: 5%;
					bottom: 0;
					background: linear-gradient(90deg, hsl(200, 96%, 55%), hsl(200, 96%, 99%));
				}
				&:last-child::before{
					background: none;
				}
			}
		}
	}
</style>