<template>
	<view class="index">
		<tel-verify v-if="showVerify"></tel-verify>
		<custom-warn v-if="showWarn"></custom-warn>
		<custom-toast ref='toast'></custom-toast>
		<view class="header-bg"></view>
		<view class="title" v-if="userServerInfo.season">大卫博士学位争霸赛第{{ userServerInfo.season | numToZh }}季</view>
		<view class="userinfo">
			<view class="top" @tap="toself">
				<open-data class="user-pic" type="userAvatarUrl"></open-data>
				<image v-if="userServerInfo.score >= 600" class="hat" src="../../static/icon/hat.png" mode="scaleToFill"></image>
				<view class="user-info">
					<view class="name-grade-level">
						<open-data type="userNickName" class="name"></open-data>
						<view class="grade">{{ userServerInfo.grade === undefined ? '未验证' : userServerInfo.grade }}</view>
						<view class="level" v-if="userServerInfo.level_name">
							<image src="../../static/icon/level.png" mode="scaleToFill"></image>
							<text>{{ userServerInfo.level_name }}</text>
						</view>
					</view>
					<view class="progress" v-if="userServerInfo.score && userServerInfo.type === 1 && userServerInfo.signuped">
						<view v-if="userServerInfo.score === userServerInfo.max_score">
							您已达到历史最高学分，请继续加油
						</view>
						<view v-else>
							距离 {{ userServerInfo.score | willDeg(userServerInfo.max_score) }} 还差 {{ userServerInfo.score | lessScore(userServerInfo.max_score) }} 学分
						</view> 
					</view>
				</view>
			</view>
			<view class="user-status" v-if="userStatus" :class="(userStatus === '报名截止' || userStatus === '暂未开赛') ? 'end' : ''" @tap="tapUserStatus"> {{userStatus}} </view>
			<view class="score-rank">
				<view class="score">学分：{{ userServerInfo.score ? userServerInfo.score : '0' }}</view>
				<view class="rank">排名：{{ userServerInfo.rank ? userServerInfo.rank : '0' }}</view>
			</view>
		</view>
		
		<view class="entrance">
			<view class="left">
				<view class="left1 index-item" @tap="toranking">
					<text class="name">排行榜</text>
					<image class="index-ranking" src="../../static/icon/index-ranking.png" mode="aspectFit"></image>
					<view v-if="userServerInfo.rank" class="userranking">我的排名：{{ userServerInfo.rank ? userServerInfo.rank : '0' }}</view>
				</view>
				<view class="left2 index-item" @tap="toexchange">
					<text class="name">礼品兑换</text>
					<image class="index-exchange" src="../../static/icon/index-exchange.png" mode="aspectFit"></image>
					<view v-if="userServerInfo.bonus" class="usermonkey">奖学金：{{ userServerInfo.bonus ? userServerInfo.bonus : '0' }}</view>
				</view>
				<view class="left3 index-item" @tap="tosetting">
					<text class="name">设置</text>
					<image class="index-setting" src="../../static/icon/index-setting.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="right">
				<view class="right1 index-item" @tap="toupload">
					<text class="name">图片上传</text>
					<image class="index-upload" src="../../static/icon/index-upload.png" mode="aspectFit"></image>
				</view>
				<view class="right2 index-item" @tap="toChallenge">
					<text class="name">学分挑战</text>
					<image class="index-challenge" src="../../static/icon/index-challenge.png"></image>
				</view>
				<view class="right3 index-item" @tap="tostatistics">
					<text class="name">数据统计</text>
					<image class="index-statistics" src="../../static/icon/index-statistics.png" mode="aspectFit"></image>
				</view>
				<view class="right4 index-item" @tap="tohonour">
					<text class="name">荣耀殿堂</text>
					<image class="index-honour" src="../../static/icon/index-honour.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		
		<view class="rules" @tap="torules" @longpress="toLongTapIndex">查看赛季规则 <text class="cuIcon-question"></text></view>
		
		<button v-if="showGetUserInfoButton" class="getUserInfo" type="default" open-type="getUserInfo" @getuserinfo="getuserinfo"></button>

		<view v-if="userServerInfo.cha_nickname" class="hadChallenge">
			<view class="challenage" @click="toChallenge">
				<image src="../../static/icon/hadChallenge.png"></image>
				<view class="challengeName">{{ userServerInfo.cha_nickname | getName }}向你发起学分挑战</view>
			</view>
			<view class="closeChallenge" @click="closeChallenge">×</view>
		</view>
	</view>
</template>

<script>
	import telVerify from '../../components/tel-verify.vue'
	import customWarn from '../../components/custom-warn.vue'
	export default {
		onShareAppMessage () {  //分享荣誉证书
			uni.showLoading({ title: '加载中', mask: true })  //显示loading
			return {  //如果点击右上角分享按钮，则分享页面为小程序主页
				title: '大卫博士商学院卖货争霸',
				path: '/pages/index/index'
			}
		},
		onPullDownRefresh() {
			this.routing = false
			if ('wifi2g3g4g'.indexOf(this.networkType) !== -1) {  //有网络连接时才进行下一步
				this.$store.commit('HIDEVERIFY')
				uni.showLoading({ title: '加载中', mask: true })  //显示loading
				this.$store.dispatch('onLaunch').then(() => {
					this.$refs.toast.hover('刷新成功')
					uni.stopPullDownRefresh()
				}).catch(e => { //触发初始化方法
					this.$refs.toast.hover('服务器繁忙，请下拉刷新试试', 'center')
				})
			} else {
				uni.showToast({ title: '似乎已经断开网络连接', icon: 'none' })
			}
		},
		components: {
			telVerify,
			customWarn
		},
		filters: {
			getName(name) {
				if (name) {
					return name.length > 6 ? name.slice(0, 6) + '...' : name
				}
				return ''
			}
		},
		computed: {
			showVerify () {  //是否弹出手机验证框
				return this.$store.state.showVerify
			},
			showWarn () {
				return this.$store.state.showWarn
			},
			userWeixinInfo () {  //用户微信信息
				return this.$store.state.userWeixinInfo
			},
			userServerInfo () {  //用户服务器信息
				return this.$store.state.userServerInfo
			},
			networkType () {  //网络类型
				return this.$store.state.networkType
			},
			showGetUserInfoButton () {  //是否显示获取用户信息的透明按钮
				return this.$store.state.showGetUserInfoButton
			},
			userStatus () {  //根据赛季阶段和用户类型，显示不同可操作项
				if (this.$verified()) {  //如果用户已经登录，进行下一步判断
					if (this.userServerInfo.status) {  //如果赛季已经开赛
						if (this.userServerInfo.status === 1) {  //如果赛季正处于报名阶段
							if (this.userServerInfo.signuped) {  //如果用户已报名
								return '已报名'
							} else {  //如果用户未报名,那么可能是 1 用户真没报名  2 代理公司 3 政委
								if (this.userServerInfo.type === 1) {
									return '报名参赛'
								} else if (this.userServerInfo.type === 2) {
									return '报名参赛'
								} else if (this.userServerInfo.type === 3) {
									return ''
								}
							}
						} else if (this.userServerInfo.status === 2 || this.userServerInfo.status === 3 || this.userServerInfo.status === 5) {  //如果赛季正处于比赛或兑奖阶段
							if (this.userServerInfo.signuped) {  //如果用户已报名
								return '学分账单'
							} else {  //如果用户未报名，那么可能是 1 用户真没报名  2 代理公司 3 政委
								if (this.userServerInfo.type === 1) {
									return '报名截止'
								} else if (this.userServerInfo.type === 2) {
									return '学分账单'
								} else if (this.userServerInfo.type === 3) {
									return ''
								}
							}
						} else if (this.userServerInfo.status === 4) { // 如果赛季正处于报名结束的空档期
							if (this.userServerInfo.signuped) {  //如果用户已报名
								return '已报名'
							} else {  //如果用户未报名，那么可能是 1 用户真没报名  2 代理公司 3 政委
								if (this.userServerInfo.type === 1) {
									return '报名截止'
								} else if (this.userServerInfo.type === 2) {
									return '学分账单'
								} else if (this.userServerInfo.type === 3) {
									return ''
								}
							}
						}
					} else {  //如果赛季暂未开赛
						return '暂未开赛'
					}
				} else {  //如果用户未登录
					return '绑定账号'
				}
			}
		},
		created () {  //加载完成后开启监听全局 MESSAGE 事件
			uni.$on('MESSAGE', (m, d, p) => {  //m 要提示的文字信息  d 文字信息出现的时常  p 文字信息出现的位置
				this.$refs.toast.hover(m, d, p)
			})
			uni.$on('HIDEMESSAGE', () => {  // 隐藏 文字提示
				this.$refs.toast.hide()
			})
			if ('wifi2g3g4g'.indexOf(this.networkType) !== -1) {  //有网络连接时才进行下一步
				this.$store.dispatch('onLaunch').then(() => {
					uni.stopPullDownRefresh()
				}).catch(e => { //触发初始化方法
					this.$refs.toast.hover('网络可能出了点问题，请下拉刷新试试')
				})
			} else {
				uni.showToast({ title: '似乎已经断开网络连接', icon: 'none' })
			}
		},
		onLoad() {
			// uni.navigateTo({
			// 	url: '../challengeList/challengeList'
			// })
		},
		onShow() {  //每次展示首页时都初始化一次，达到实时更新数据的功能
			this.routing = false
			if ('wifi2g3g4g'.indexOf(this.networkType) !== -1) {  //有网络连接时才进行下一步
				if (uni.fromUpload) {
					uni.fromUpload = false
					if (uni.toRank) {
						uni.toRank = false
						uni.navigateTo({ url: '../ranking/ranking' })
					}
					this.$store.dispatch('onLaunch').then(() => {
						uni.stopPullDownRefresh()
						
					}).catch(e => { //触发初始化方法
						this.$refs.toast.hover('网络可能出了点问题，请下拉刷新试试')
					})
				}
			} else {
				uni.showToast({ title: '似乎已经断开网络连接', icon: 'none' })
			}
		},
		methods: {
			getuserinfo () {  //获取用户信息
				uni.getUserInfo().then(([getUserWeixinInfoErr, userWeixinInfo]) => {  //获取完成后
					if (getUserWeixinInfoErr) {
						return
					}
					this.$store.commit('HIDEGETUSERINFOBUTTON')  //隐藏透明按钮
					this.$store.dispatch('onLaunch')  //触发初始化方法
				})
			},
			toself () {  //点击用户信息
				if (this.$verified()) {  //用户是否已登录
					if (this.userServerInfo.type === 1 || this.userServerInfo.type === 2) {  //只有普通代理和代理公司个人主页
						if (this.routing) { return }
						this.routing = true
						uni.navigateTo({ url: `../self/self?from=index&id=${this.userServerInfo.id}` }) //已登录跳转到用户中心
					}
				} else {  //未登录弹出登录框
					this.$store.commit('SHOWVERIFY')
				}
			},
			tapUserStatus () {  //点击用户状态
				if (this.userStatus === '绑定账号') {
					this.$store.commit('SHOWVERIFY')
				} else if (this.userStatus === '报名参赛') {
					if (this.routing) { return }
					this.routing = true
					uni.navigateTo({ url: '../signup/signup' })
				} else if (this.userStatus === '学分账单') {
					if (this.routing) { return }
					this.routing = true
					uni.navigateTo({ url: '../score/score' })
				} else if (this.userStatus === '报名截止') { 
					this.$refs.toast.hover('报名时间已过，非常感谢您的关注。')
				} else if (this.userStatus === '暂未开赛') {
					this.$refs.toast.hover('暂未开赛，非常感谢您的关注。')
				} else if (this.userStatus === '已报名') {
					if (this.routing) { return }
					this.routing = true
					uni.navigateTo({ url: '../countdown/countdown' })
				}
			},
			toranking () {  //点击排行榜
				if (this.$verified()) {  //用户是否已登录
					if (this.userServerInfo.type === 1) {  //判断用户类型，普通用户需要报名后才可以查看排行榜
						if (this.userServerInfo.signuped) {  //如果用户已报名，就跳转
							if (this.routing) { return }
							this.routing = true
							uni.navigateTo({ url: '../ranking/ranking' })
							
						} else {  ////如果用户已报名，就提示用户没有报名
							this.$refs.toast.hover('您还没有报名参赛')
						}	
					} else {  //代理公司和政委可以直接查看排行榜页
						if (this.routing) { return }
						this.routing = true
						uni.navigateTo({ url: '../ranking/ranking' })
					}
				} else {  //未登录弹出登录框
					this.$store.commit('SHOWVERIFY')
				}
			},
			tohonour () {  //点击荣誉殿堂
				if (this.$verified()) {  //用户是否已登录
					if (this.userServerInfo.type === 1 || this.userServerInfo.type === 2) {  //普通用户直接跳转到荣誉殿堂页面
						if (this.routing) { return }
						this.routing = true
						uni.navigateTo({ url: '../honour/honour' })
					} else {  //代理公司和政委不可参赛，所以提示无参赛记录
						this.$refs.toast.hover('无参赛记录')
					}
				} else {  //未登录弹出登录框
					this.$store.commit('SHOWVERIFY')
				}
			},
			toupload () {  //点击上传图片
				if (this.$verified()) {  //用户是否已登录
					if (this.userServerInfo.signuped) {
						if (this.userServerInfo.status === 1 || this.userServerInfo.status === 4) {
							this.$refs.toast.hover('比赛还没有开始')
						} else if (this.userServerInfo.status === 2) {
							if (this.routing) { return }
							this.routing = true
							uni.navigateTo({ url: '../upload/upload' })
							uni.fromUpload = true
						} else if (this.userServerInfo.status === 3 || this.userServerInfo.status === 5) {
							this.$refs.toast.hover('比赛已经结束了')
						}
					} else {
						this.$refs.toast.hover('您还没有报名参赛')
					}
				} else {  //未登录弹出登录框
					this.$store.commit('SHOWVERIFY')
				}
			},
			toChallenge() { // 点击学分挑战
				if (this.$verified()) {  //用户是否已登录
					if (this.userServerInfo.signuped) { // 用户是否已经报名
						if (this.userServerInfo.type === 2) { // 只有代理公司能够参加学分竞赛
							if (this.routing) { return }
							this.routing = true
							this.closeChallenge()
							uni.navigateTo({ url: '../challengeList/challengeList' })
						} else {  //代理公司和政委不可参赛，所以提示无参赛记录
							this.$refs.toast.hover('只有代理公司可以参与挑战')
						}
					} else {
						this.$refs.toast.hover('您还没有报名参赛')
					}
				} else {  //未登录弹出登录框
					this.$store.commit('SHOWVERIFY')
				}
			},
			toexchange () {  //点击兑换奖品
				if (this.$verified()) {  //用户是否已登录
					if (this.userServerInfo.status === 3) {
						if (this.routing) { return }
						this.routing = true
						uni.navigateTo({ url: '../exchange/exchange' })
					} else {
						this.$refs.toast.hover('礼品兑换还未开始')
					}
				} else {  //未登录弹出登录框
					this.$store.commit('SHOWVERIFY')
				}
			},
			tosetting () {  //点击设置
				if (this.routing) { return }
				this.routing = true
				uni.navigateTo({ url: '../setting/setting' })
			},
			tostatistics () {  //点击数据统计
				if (this.$verified()) {  //用户是否已登录
					if (this.routing) { return }
					this.routing = true
					uni.navigateTo({ url: '../statistics/statistics' })
				} else {  //未登录弹出登录框
					this.$store.commit('SHOWVERIFY')
				}
			},
			torules () {  //点击赛季规则
				if (this.routing) { return }
				this.routing = true
				uni.navigateTo({ url: '../rules/rules' })
			},
			// 长按赛季规则跳转
			toLongTapIndex() {
				uni.navigateTo({ url: '../longTapIndex/longTapIndex' })
			},
			closeChallenge() {
				this.$store.commit('READCHALLENGE')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		width: 100%;
		height: 100%;
		position: relative;
		box-sizing: border-box;
		padding: 161rpx 30rpx 0;
		display: flex;
		flex-direction: column;
		.getUserInfo {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 9999;
			background: rgba(1, 1, 1, 0);
		}
		.header-bg {
			position: absolute;
			z-index: -1;
			top: 0;
			left: 0;
			width: 100%;
			height: 286rpx;
			background: linear-gradient(-2deg, rgba(255,68,54,1) 0%, rgba(254,132,72,1) 100%);
			border-bottom-right-radius: 350rpx 30rpx;
			border-bottom-left-radius: 350rpx 30rpx;
		}
		.title {
			position: absolute;
			top: 70rpx;
			left: 30rpx;
			@include text(34rpx);
			color: #FFFFFF;
		}
		.userinfo {
			position: relative;
			width: 100%;
			height: 225rpx;
			background: linear-gradient(184deg,rgba(255,207,130,1) 0%,rgba(255,156,0,1) 100%);
			box-shadow: 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.2);
			border-radius:10px;
			box-sizing: border-box;
			padding: 22rpx;
			.top {
				height: 80rpx;
				display: flex;
				align-items: center;
				position: relative;
				.user-pic {
					height: 100%;
					width: 80rpx;
					border-radius: 50%;
					overflow: hidden;
				}
				.hat {
					position: absolute;
					top: -40rpx;
					left: 0px;
					width: 80rpx;
					height: 69.873rpx;
				}
				.user-info {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: 100%;
					margin-left: 16rpx;
					overflow: hidden;
					.progress {
						font-size: 26rpx;
						color: #FFFFFF;
					}
					.name-grade-level {
						height: 50%;
						width: 100%;
						display: flex;
						align-items: flex-end;
						.name {
							font-size: 32rpx;
							color: #FFFFFF;
							max-width: 38%;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
						.grade {
							font-size: 26rpx;
							color: rgba(255,255,255,1);
							margin-left: 16rpx;
							vertical-align: baseline;
						}
						.level {
							margin-left: 18rpx;
							height: 30rpx;
							border-radius: 15rpx;
							font-size: 26rpx;
							background: #FFFFFF;
							color: rgba(250,99,66,1);
							text {
								float: right;
								line-height: 35rpx;
								margin: 0 12rpx;
							}
							image {
								width: 30rpx;
								height: 30rpx;
								float: left;
							}
						}
					}
				}
			}
			.user-status {
				position: absolute;
				width: 170rpx;
				height: 60rpx;
				top: 111rpx;
				right: 0;
				line-height: 62rpx;
				background: #FFFFFF;
				text-align: center;
				border-radius: 30rpx 0 0 30rpx;
				font-size: 32rpx;
				color: rgba(250,99,66,1);
				&.end {
					background: #999999;
					color: #FFFFFF;
				}
			}
			.countdown {
				position: absolute;
				right: 12rpx;
				top: 171rpx;
				display: flex;
				color: #FFFFFF;
			}
			.score, .rank {
				position: absolute;
				left: 32rpx;
				bottom: 35rpx;
				font-size: 24rpx;
				color: rgba(255,255,255,1);
				&.rank {
					left: 294rpx;
				} 
			}
		}
		.entrance {
			flex: 1;
			z-index: 1;
			display: flex;
			margin: 10rpx 0;
			position: relative;
			justify-content: space-between;
			view {
				width: 340rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.index-item {
					position: relative;
					width: 100%;
					overflow: hidden;
					border-radius:10px;
					box-shadow:0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.2);
					font-size: 30rpx;
					color: #FFFFFF;
					.name {
						z-index: 1;
						top: 38rpx;
						left: 30rpx;
						color: #FFFFFF;
						font-size: 40rpx;
						position: absolute;
					}
					image {
						position: absolute;
						right: 0;
						bottom: 0;
						&.index-ranking {
							width: 240rpx;
							height: 240rpx;
						}
						&.index-honour {
							width: 170rpx;
							height: 170rpx;
							bottom: -15rpx;
						}
						&.index-setting {
							width: 157rpx;
							height: 167rpx;
							right: -10rpx;
						}
						&.index-upload {
							width: 189rpx;
							height: 147rpx;
							right: 19rpx;
						}
						&.index-exchange {
							width: 108rpx;
							height: 123rpx;
							right: 17rpx;
						}
						&.index-challenge {
							width: 100%;
							height: 100%;
							left: 0;
							top: 0;
						}
						&.index-statistics {
							width: 134rpx;
							height: 166rpx;
							right: 19rpx;
						}
					}
					view {
						position: absolute;
						left: 30rpx;
						top: 87rpx;
						font-size: 24rpx;
						color: #FFFFFF;
					}
					&.left1 {
						height: 41.76904176904177%;
						background:linear-gradient(0deg,rgba(121,169,253,1) 0%,rgba(146,158,242,1) 100%);
					}
					&.left2 {
						height: 36.855036855036855%;
						background:linear-gradient(0deg,rgba(212,134,249,1) 0%,rgba(176,99,248,1) 100%);
					}
					&.left3 {
						height: 18.427518427518427%;
						background:linear-gradient(0deg,rgba(255,255,255,1) 0%,rgba(255,156,0,1) 0%,rgba(255,207,131,1) 100%);
					}
					&.right1 {
						height: 36.855036855036855%;
						background:linear-gradient(0deg,rgba(255,99,76,1) 0%,rgba(255,149,135,1) 100%);
					}
					&.right2 {
						height: 22.113022113022113%;
						background:linear-gradient(0deg,rgba(253,173,41,1) 0%,rgba(255,207,75,1) 100%);
					}
					&.right3 {
						height: 18.427518427518427%;
						background:linear-gradient(0deg,rgba(77,186,89,1) 0%,rgba(108,229,126,1) 100%);
					}
					&.right4 {
						height: 18.427518427518427%;
						background:linear-gradient(0deg,rgba(255,99,76,1) 0%,rgba(255,149,135,1) 100%);
					}
				}
			}
		}
		.rules {
			font-size: 24rpx;
			line-height: 110rpx;
			text-align: center;
			font-weight: bold;
			color:rgba(243,67,54,1);
			text {
				margin-left: 9rpx;
			}
		}
		.hadChallenge {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.3);
			@include flex(column);
			z-index: 2;
			.challenage {
				width: 574rpx;
				height: 596rpx;
				image {
					width: 100%;
					height: 100%;
				}
				.challengeName {
					left: 0;
					width: 100%;
					top: 590rpx;
					color: #F76454;
					font-size: 36rpx;
					position: absolute;
					text-align: center;
				}
			}
			.closeChallenge {
				width: 62rpx;
				height: 62rpx;
				@include flex();
				font-size: 56rpx;
				margin-top: 30rpx;
				border-radius: 50%;
				background: #FFFFFF;
			}
		}
	}
</style>
