<template>
	<view class="web_box">
		
		<view class="top vflex">
			<view class="hflex acenter" @click="toLogin" v-show="!login">
				<u-avatar :src="avatar" size="128rpx"></u-avatar>
				<view class="vflex" style="padding-left: 14rpx;">
					<view class="login_top">
						未登录/注册
					</view>
					<view class="text_style1">
						点击头像可登录/注册
					</view>
				</view>
			</view>
			<view class="hflex acenter jbetween" v-show="login">
				<view class="hflex acenter" @click="personalInfo">
					<u-avatar :src="user.headimg?user.headimg:avatar" size="128rpx"></u-avatar>
					<view class="text_style1" style="padding-left: 20rpx;">{{user.user_name}}</view>
				</view>
				<view @click="toInvite" class="invite hflex acenter jbetween">
					<image src="/static/images/mine/code.png" style="width: 32rpx;height: 32rpx;"></image>
					<view class="invite_text">邀请码</view>
					<!-- <image src="/static/images/mine/invite.png" mode="widthFix" style="width: 180rpx;"></image> -->
				</view>
			</view>
			<view class="hflex acenter jaround" style="margin: 40rpx 0 54rpx;">
				<view class="vflex acenter jcenter" @click="toDeail(3)">
					<view class="collect_num" v-if="login">{{user.collection_count}}</view>
					<view class="collect_num" v-else>0</view>
					<view class="text_style1">我的收藏</view>
				</view>
				<view class="vflex acenter jcenter">
					<view class="collect_num" v-if="login">{{user.integral}}</view>
					<view class="collect_num" v-else>0</view>
					<view class="text_style1">我的积分</view>
				</view>
			</view>
		</view>
		<!-- <view class="box">
			<view class="hflex acenter jbetween">
				<view class="title">当前学习</view>
				<view class="hflex acenter" @click="allCourse">
					<view class="text_style2">全部课程</view>
					<u-icon name="arrow-right" color="#666666" size="10"></u-icon>
				</view>
			</view>
			<view class="box_content hflex acenter jcenter" v-if="login" >
				<view class="hflex acenter" v-if="Object.keys(myCourse).length !== 0">
					<image :src="myCourse.img" mode="widthFix" style="width: 322rpx;border-radius: 16rpx;"></image>
					<view class="img_right vflex" @click="toCourse(myCourse.id)">
						<view class="img_title">
							{{myCourse.name}}
						</view>
						<view class="vflex aend">
							<view class="hours">总学时：{{myCourse.study_class_count}}/{{myCourse.class_count}}学时</view>
							<view class="progress">
								<u-line-progress class="line_progress" :percentage="myCourse.progress" :showText="false" height="8" activeColor="#2988FE"></u-line-progress>
							</view>
						</view>
					</view>	
				</view>
				<view class="login_see" v-else>暂无学习记录</view>
			</view>
			<view class="box_content hflex acenter jcenter" v-else>
				<view class="login_see" @click="toLogin">请登录后查看</view>
			</view>
		</view> -->
		<view class="box">
			<block v-for="(item,index) in list" :key="index">
				<view class="list_item hflex acenter jbetween" @click="toDeail(index)">
					<view class="hflex acenter">
						<image :src="item.src" mode="widthFix" style="width: 72rpx;padding-right: 20rpx;"></image>
						<view class="title">{{item.title}}</view>
					</view>
					<u-icon name="arrow-right" color="#666666" size="16"></u-icon>
				</view>
			</block>
		</view>
		<view class="bottom">
			<u-button v-if="login" @click="quit">退出登录</u-button>
		</view>
		<!-- 邀请码 -->
		<u-popup :show="showInvite" @close="closeInvite" :round="10" mode="center">
			<view class="popup">
				<view class="popup_top hflex acenter">
					<u-avatar :src="user.headimg" size="104rpx"></u-avatar>
					<view class="" style="padding-left: 18rpx;">
						<view class="text_style2" style="font-size: 32rpx;">{{user.user_name}}</view>
						<view class="text_style2" style="font-size: 24rpx;">邀请ID:{{user.invite_code}}</view>
					</view>
				</view>
				<view class="qrimg hflex acenter jcenter" style="width: 100%;height: 440rpx;">
					<image :src="user.invite_img" show-menu-by-longpress='1' @longpress="_saveCode" style="width: 440rpx; height: 440rpx;"></image>
				</view>
				<view class="vflex acenter jcenter" style="margin-top:50rpx">
					<view class="text_style3">扫一扫 加入拓新</view>
					<view class="text_style3">高效学习 首选拓新</view>
				</view>
				<view class="save">长按保存图片到相册</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js';
	export default {
		data() {
			return {
				login: false,
				user: {},
				avatar: '/static/images/logo.jpg',
				myCourse: {},
				list: [
					{
						src: '/static/images/mine/jifen.png',
						title: '积分商城'
					},
					{
						src: '/static/images/mine/icon1.png',
						title: '我的考试'
					},
					{
						src: '/static/images/mine/icon2.png',
						title: '我的订单'
					},
					{
						src: '/static/images/mine/icon3.png',
						title: '我的评论'
					},
					{
						src: '/static/images/mine/icon4.png',
						title: '我的收藏'
					},
					{
						src: '/static/images/mine/icon5.png',
						title: '修改密码'
					},
					{
						src: '/static/images/mine/icon6.png',
						title: '我的证书'
					}
				],
				showInvite: false,
				page: 1,
				limit: 1
			}
		},
		onLoad() {
			// this.getCourse()
			// this.totalProgress()
		},
		onShow() {
			this.getUser()
			// 判断是否登录
			this.isLogin()
			this.getCourse()
		},
		methods: {
			// 获取个人信息
			getUser() {
				var that = this
				$api.req({
					url: '/api/User/userinfo'
				}, function(res) {
					console.log("个人信息：",res);
					if (res.code == 1) {
						that.user = res.data
						let base64 = res.data.invite_img
						let times = new Date().getTime()
						that.user.invite_img = wx.env.USER_DATA_PATH + '/' +times + '.png'
						let imageData = base64.replace(/^data:image\/\w+;base64,/, "");
						let fs = wx.getFileSystemManager();
						fs.writeFileSync(that.user.invite_img, imageData, "base64");
					}else {
						if (res.is_disable == 1) {
							$api.info(res.msg)
							uni.removeStorageSync('token')
							that.login = false
							that.user = {}
							setTimeout(function(){
								$api.jump('/pages/login/login')
							},1000)
						}
					}
				})
			},
			// 获取课程信息
			getCourse() {
				var that = this
				$api.req({
					url: '/api/User/myCourseList',
					data: {
						page: that.page,
						limit: that.limit,
						type: 1
					}
				}, function(res) {
					console.log("我的课程",res);
					if (res.code == 1) {
						that.myCourse = res.data.list[0]
						if(res.data.count !== 0) {
							that.totalProgress()
						}
					} else {
						that.user = {}
						that.login = false
						uni.removeStorageSync("token")
					}
				})
			},
			// 去登录
			toLogin() {
				$api.jump('/pages/login/choose')
			},
			isLogin() {
				var that = this
				var token = uni.getStorageSync("token")
				console.log(token);
				if(token.token) {
					that.login = true
				} else {
					$api.info('请先登录')
				}
			},
			// 计算进度条
			totalProgress() {
				var myCourse = this.myCourse
				myCourse.progress = myCourse.study_class_count / (myCourse.class_count ) * 100
				this.myCourse = myCourse
			},
			// 长按保存图片
			_saveCode() {
				console.log("长按保存图片到相册")
			},
			// 去个人资料
			personalInfo() {
				$api.jump('/pages/mine/personal')
			},
			// 去邀请
			toInvite() {
				this.showInvite = true
			},
			// 关闭邀请
			closeInvite() {
				this.showInvite = false
			},
			// 全部课程
			allCourse() {
				$api.jump('/pages/mine/allCourse')
			},
			toCourse(id) {
				$api.jump('/pages/index/course/detail?id=' + id)
			},
			// 打开详情页
			toDeail(index) {
				var url = ''
				switch(index) {
					case 0:
						url = '/pages/integral/integral';
						break;
					case 1:
						url = '/pages/mine/exam/exam';
						break;
					case 2:
						url = '/pages/mine/order/order';
						break;
					case 3:
						url = '/pages/mine/comment';
						break;
					case 4:
						url = '/pages/mine/collect';
						break;
					case 5:
						url = '/pages/mine/password/editPassword';
						break;
					case 6:
						url = '/pages/mine/certificate';
						break;
				}
				if(!this.login) {
					$api.info('请先登录')
				} else {
					$api.jump(url)
				}
				
			},
			// 退出登录
			quit() {
				this.user = {}
				this.login = false
				uni.removeStorageSync("token")
				$api.jump('/pages/login/choose')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.web_box::v-deep {
		background: url('@/static/images/mine/bg.png') no-repeat;
		background-size: 100%;
		padding: 0 30rpx;
		
		.top {
			width: 100%;
			padding-top: 134rpx;
		}
		.login_top {
			font-size: 40rpx;
			font-weight: 500;
			color: #FFFFFF;
		}
		.text_style1 {
			font-size: 32rpx;
			font-weight: 400;
			color: #FFFFFF;
			padding-top: 8rpx;
		}
		.invite {
			width: 180rpx;
			height: 60rpx;
			background: rgba(43,94,182,0.4);
			border-radius: 40rpx;
			border: 1px solid rgba(151,151,151,0.2);
			box-sizing: border-box;
			padding: 0 24rpx;
		}
		.invite_text {
			font-size: 28rpx;
			color: #FFFFFF;
		}
		.collect_num {
			font-size: 40rpx;
			color: #FFFFFF;
		}
		.box {
			width: 100%;
			background-color: #fff;
			border-radius: 24rpx;
			box-sizing: border-box;
			padding: 20rpx 26rpx;
			margin-bottom: 20rpx;
			box-shadow: 0px 2px 6px 0px rgba(213,213,213,0.5);
		}
		.title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333333;
		}
		.text_style2 {
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
		}
		.box_content {
			width: 100%;
			padding: 12rpx;
		}
		.img_right {
			width: calc(100% - 322rpx);
			padding-left: 18rpx;
		}
		.img_title {
			font-size: 26rpx;
			font-weight: 600;
			color: #333333;
			padding-bottom: 46rpx;
		}
		.hours {
			font-size: 22rpx;
			font-weight: 400;
			color: #333333;
		}
		.progress {
			width: 100%;
			height: 28rpx;
			padding: 16rpx 0 28rpx;
		}
		.line_progress {
			width: 100% !important;
			height: 16rpx !important;
		}
		.login_see {
			padding: 68rpx 0;
			font-size: 32rpx;
			font-weight: 400;
			color: #333333;
		}
		.list_item {
			width: 100%;
			box-sizing: border-box;
			padding: 28rpx 0 24rpx;
			border-bottom: 1rpx solid #EEEEEE;
		}
		.list_item:nth-last-child(1) {
			border-bottom: none;
		}
		.popup {
			width: 550rpx;
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 48rpx 18rpx;
			position: relative;
			
		}
		.popup_top {
			width: 100%;
			padding-bottom: 40rpx;
		}
		.tki-qrcode-canvas {
			position: absolute !important;
			top: 0;
			left: 0;
			z-index: 9999 !important;
		}
		.text_style3 {
			font-size: 28rpx;
			font-weight: 400;
			color: #999999;
		}
		.save {
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
			position: absolute;
			bottom: -47rpx;
			left: 110rpx;
		}
		.bottom {
			width: 100%;
			margin: 52rpx 0 34rpx;
		}
		.u-button {
			width: 690rpx;
			height: 80rpx;
			background: #FFFFFF;
			box-shadow: 0px 2px 6px 0px rgba(213,213,213,0.5);
			border-radius: 38rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #999999;
		}
	}
</style>