<template>
	<view class="honor">
		<custom-nav title="荣耀殿堂"></custom-nav>
		<custom-toast ref='toast'></custom-toast>
		<view class="season_container">
			<view>学位争霸赛第{{ season_id ? season_id : userInfo.season }}季</view>
			<picker class="toggle" :range="seasonList" range-key="name" :value="season_index" @change="changeSeason">
				<text>切换赛季</text>
				<image src="../../static/icon/arrow.png" class="arrow"></image>
			</picker>
		</view>
		<view class="honor_list">
			<view class="item" v-for="(item, index) in certificateList" :key="index" @click="toDetail(item)">
				<view class="honor_img">
					<image v-if="index === 0" class="bg" src="https://api.jiuweiyun.cn/public/uploads/weapp/icon/honor_bg.png"></image>
					<image v-else class="bg" src="https://api.jiuweiyun.cn/public/uploads/weapp/icon/honor_bg2.png"></image>
					<view class="mask" v-if="item.is">差{{item.is}}学分</view>
				</view>
				<view class="name">{{item.name}}</view>
			</view>
			<view class="item" @click="toNotice">
				<view class="honor_img">
					<image class="bg" src="https://api.jiuweiyun.cn/public/uploads/icon/new_tzs.png"></image>
					<view class="mask" v-if="!userInfo.signuped">暂未获取</view>
				</view>
				<view class="name">通知书</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { get_season_list, api_getHistoryHonourList } from '../../api.js'
	import { numToZh } from '../../common/js/filters.js'
 	export default {
		data() {
			return {
				certificateList: [],
				seasonList: [],
				season_index: 0,
				season_id: '',
				userInfo: this.$store.state.userServerInfo,
				seasonInfo: {}
			}
		},
		watch: {
			seasonInfo:{
				handler(a) {
					this.certificateList = this.getCertificateList(a.integral)
				}
			}
		},
		onLoad() {
			this.getSeasonList()
			this.certificateList = this.getCertificateList(this.userInfo.score)
		},
		methods: {
			toNotice() {
				if(this.userInfo.signuped){
					uni.navigateTo({
						url:"../certificate/notice"
					})
				} else {
					uni.showModal({
						content:"未获得",
						showCancel: false
					})
				}
				
			},
			getSeasonList() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.$ajax.get(`${get_season_list}`).then(([, { data: res }]) => {
					uni.hideLoading()
					if(res.code === 200) {
						this.seasonList = res.data.list.map(item => ({
							season: item.season,
							name: `大卫博士学位争霸赛第${item.season}季`
						}))
					}
				})
			},
			changeSeason(e) {
				this.season_id =this.seasonList[e.target.value].season
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.$ajax.get(`${api_getHistoryHonourList}?season=${this.season_id}`).then(([, { data: res }]) => {
					uni.hideLoading()
					if(res.code === 200) {
						this.seasonInfo = res.data
					}
					
				})
			},
			toDetail(item) {
				if(item.is) {
					uni.showModal({
						content: `还差${item.is}学分,即可获得证书`,
						showCancel: false,
						confirmText: '确定'
					})
				} else {
					let time = this.seasonInfo && this.seasonInfo.time ? `&time=${this.seasonInfo.time}` : ''
					uni.navigateTo({ url: `../honour/honour?score=${item.is}&grade=${item.name.slice(0,4)}${time}` })
				}
			},
			getCertificateList(score) {
				if(!score && score !==0) return []
				try {
					let arr = [{
						name: '大学毕业证书',
						score: 200
					},{
						name: '学士学位证书', 
						score: 1500
					},{
						name: '硕士学位证书',
						score: 2000
					}, {
						name: '博士学位证书',
						score: 3000
					}]
					let index = -1
					let len = arr.length
					for(let i=0; i<len;i++) {
						let max = arr[i].score
						if (i < len - 1) {
							let nextScore = arr[i + 1].score
							if(score >= max && score < nextScore) {
								index = i
								break
							}
						} else if (i === len - 1) {
							index = score >= arr[len - 1].score ? len - 1 : -1
						}
					}
					return arr.map((item, i) => ({
						name: item.name,
						is: i <= index ? 0 : item.score - score,
					}))
				} catch(e) {
					console.log(e)
					return []
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.honor {
		min-height: 100%;
		background-color: #EEEEEE;
		border-top: 128rpx solid #FFFFFF;
		.season_container {
			position: fixed;
			z-index: 999;
			top: 120rpx;
			left: 0;
			right: 0;
			flex: 1;
			height: 72rpx;
			line-height: 72rpx;
			color: #F96341;
			font-size: 32rpx;
			padding: 0 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #FFFFFF;
			border-top: 1px solid #EEEEEE;
			.toggle {
				color: #656565;
				font-size: 26rpx;
				display: flex;
				align-items: center;
				.arrow {
					width: 30rpx;
					height: 30rpx;
				}
			}
		}
		.honor_list {
			padding: 30rpx;
			padding-top: 102rpx;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			.item {
				width: calc(100% / 2);
				margin-bottom: 50rpx;
				&:nth-of-type(3n) {
					margin-right: 0;
					font-size: 28rpx;
					color: #333333;
				}
				.name{
					width: 100%;
					overflow: hidden;
					text-align: center;
				}
				.honor_img {
					width: 301rpx;
					height: 470rpx;
					display: block;
					margin: 0 auto;
					margin-bottom: 20rpx;
					position: relative;
					.mask {
						position: absolute;
						top: 0;
						left: 0;
						bottom: 0;
						right: 0;
						background: rgba(0,0,0,.6);
						width: 100%;
						height: 100%;
						color: #FFFFFF;
						font-size: 40rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.bg{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>
