<template>
	<view class="content">
		<swiper class="swiper" :autoplay="true" :circular="true">
			<swiper-item class="swiper-item" v-for="(item,index) in bannerList" :key="index">
				<image :src="'https://xyb.wlkjwl.cn/'+item.imageUrl" mode="aspectFill"></image>
				<view class="text" v-if="item.title">
					<view class="title">{{item.title}}</view>
					<view class="name">{{item.remark}}</view>
				</view>
			</swiper-item>
			<!-- <swiper-item class="swiper-item">
				<ad unit-id="adunit-edf130ab482cfb31"></ad>
			</swiper-item> -->
		</swiper>
		<view class="input-wrap" @tap="goSearch">
			<input type="text" placeholder="输入爱豆全名搜索">
			<image src="../../static/r.png" mode="aspectFit"></image>
		</view>
		<view class="end-text">
			离{{endText}}结束还剩余：<uni-countdown :showColon="false" :splitorColor="'#5680E6'" :color="'#5680E6'" :day="time.days" :hour="time.hours" :minute="time.minutes" :second="time.seconds"></uni-countdown>
		</view>
		<view class="ranking">
			<view class="ranking-left-text">
				<view @tap="init(index+1)" :key="index" v-for="(item,index) in rankingText" :class="index == rankingZero?'active':''" class="text-item">{{item}}</view>
			</view>
			<view class="ranking-right-text">
				<view @tap="previewImage">{{endText}}规则</view>
			</view>
			<view class="ranking-top">
				<view class="ranking-top-left" v-if="ranklist.length>0">
					<image :src="'https://xyb.wlkjwl.cn/'+ranklist[1].head" mode="aspectFill"></image>
					<image class="h2" src="../../static/h2.png" mode="aspectFit"></image>
					<view class="bgv">{{ranklist[1].rankIngNum}}</view>
					<view class="center-bottom">
						<view class="tickname">{{ranklist[1].name}}</view>
						<view class="ticket">{{ranklist[1].much}}</view>
						<view @tap="goSupports(ranklist[1])" class="goSupport">去打榜</view>
					</view>
				</view>
				<view class="ranking-top-center" v-if="ranklist.length>0">
					<image :src="'https://xyb.wlkjwl.cn/'+ranklist[0].head" mode="aspectFill"></image>
					<image class="h1" src="../../static/h1.png" mode="aspectFit"></image>
					<view class="bgv">{{ranklist[0].rankIngNum}}</view>
					<view class="center-bottom">
						<view class="tickname">{{ranklist[0].name}}</view>
						<view class="ticket">{{ranklist[0].much}}</view>
						<view @tap="goSupports(ranklist[0])" class="goSupport">去打榜</view>
					</view>
				</view>
				<view class="ranking-top-right" v-if="ranklist.length>0">
					<image :src="'https://xyb.wlkjwl.cn/'+ranklist[2].head" mode="aspectFill"></image>
					<image class="h3" src="../../static/h3.png" mode="aspectFit"></image>
					<view class="bgv">{{ranklist[2].rankIngNum}}</view>
					<view class="center-bottom">
						<view class="tickname">{{ranklist[2].name}}</view>
						<view class="ticket">{{ranklist[2].much}}</view>
						<view @tap="goSupports(ranklist[2])" class="goSupport">去打榜</view>
					</view>
				</view>
			</view>
			<view class="ranking-list">
				<view class="ranking-list-item" v-for="(item,index) in nRanklist" :key="index">
					<view>{{(index+4)}}</view><!-- {{item.rankIngNum}} -->
					<view><image :src="'https://xyb.wlkjwl.cn/'+item.head" mode="aspectFill"></image></view>
					<view>{{item.name}}</view>
					<view>{{item.much}}</view>
					<view @tap="goSupports(item)">去打榜</view>
				</view>
			</view>
			<!-- <button class="getUserInfo" open-type="getUserInfo" @getuserinfo="wxGetUserInfo" withCredentials="true">微信登录</button> -->
		</view>
		<view class="show-wrap" v-if="isLogin">
			<view class="show-model">
				<view class="title">未登录</view>
				<view class="content">请允许微信授权登录</view>
				<view class="btn-group">
					<button @tap="hideIsLogin" class="button-default">取消</button>
					<button class="button-default button-blue getUserInfo" open-type="getUserInfo" @getuserinfo="wxGetUserInfo" withCredentials="true">确认</button>
				</view>
			</view>
			<view class="show-model-mask">
			</view>
		</view>
		<view class="show-mask-last show-wrap" v-if="isShow">
			<view class="mask-last-top">
				<image :src="'https://xyb.wlkjwl.cn/'+isShowObj.image" mode="scaleToFill"></image>
				<view class="text" v-if="isShowObj.remark">
					{{isShowObj.remark}}
				</view>
				<view @tap="hideIsShow" class="btn-bottom"><image src="../../static/cha.png" mode="scaleToFill"></image></view>
			</view>
			<view @tap="hideIsShow" class="show-model-mask">
			</view>
		</view>
	</view>
</template>
<script>
	import { mapState,mapMutations } from 'vuex';
	import uniCountdown from '@/components/uni-countdown/uni-countdown.vue'
	export default {
		components:{
			uniCountdown
		},
		computed: {
			...mapState(['hasLogin','userInfo']),
			nRanklist(){
				let list = this.ranklist;
				return list.slice(3,list.length-1)
			}
			// newRankList(){
			// 	let list = this.ranklist;
			// 	return list.splice(3,list.length-1)
			// }
		},
		data() {
			return {
				endText:"周榜",
				rankingText:['周榜','月榜'],
				rankingZero:0,
				isLogin:false,
				isShow:false,
				isShowObj:'',
				bannerList:'',//banner
				time:'',//time
				// maskUrl:'../../static/head.png',
				rulesImgs:'',
				page:1,
				ranklist:[],
				isLoad:true,
				imgPath:'',
				// nRanklist:[]
			}
		},
		onLoad() {
			this.imgPath = this.path;
			this.getKeep();
			let userInfo = uni.getStorageSync('userInfo') || '';
			if (userInfo.token) {
				this.getContent();
			}
		},
		onShow() {
			this.init(1);
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(()=>{
				this.init(this.rankingZero + 1)
				uni.stopPullDownRefresh();
			}, 1500);
		},
		onReachBottom(){
			console.log('到底了')
			if(this.isLoad){
				this.getDataList(this.rankingZero + 1)
			}
		},
		methods: {
			...mapMutations(['login']),
			getContent(){
				uni.getClipboardData({
				    success: (res)=> {
				        console.log(res.data);
						try{
							let str = res.data.match(/邀请码(\S*)进入/)[1];
							this.request({
								url:this.path+'/api/xyb/banner/addChoujiangOrderByYqm',
								data:{
									yaoqingma:str
								},
								success:(res)=>{
									let d = res.data;
									if(d.code == 0){
										uni.showToast({
											title:'奖励抽奖次数+1',
											icon:"none"
										})
										this.request({
											url:this.path + "/api/xyb/star/getMuch",
											data:{
												typeId: 5,
												much: 20
											},
											success:(res)=>{
												let d = res.data;
												if(d.code == 0){
													uni.showModal({
													    title: '恭喜',
													    content: '领取到来自好友 赠送的20票',
													    success: function (res) {
													        if (res.confirm) {
													            console.log('用户点击确定');
													        } else if (res.cancel) {
													            console.log('用户点击取消');
													        }
													    }
													});
												}
											}
										})
									}
								}
							})
							
						}catch(e){
							//TODO handle the exception
						}
						
				    }
				});
				
			},
			init(type){
				this.defaultDataList();
				//周榜
				if(type == 1){
					this.rankingZero = 0;
					this.getBanner(1);
					this.getLeaveTime(1);
					// this.getRulesImgs(1);
					this.getDataList(1);
					this.endText = this.rankingText[this.rankingZero];
					this.getKeepWeekAndMoth(3)
				}else{
				//月榜
					this.rankingZero = 1;
					this.getBanner(2)
					this.getLeaveTime(2);
					// this.getRulesImgs(2)
					this.getDataList(2);
					this.endText = this.rankingText[this.rankingZero];
					this.getKeepWeekAndMoth(4)
				}
			},
			getKeepWeekAndMoth(id){
				this.request({
					url:this.path+'/api/xyb/banner/list',
					data:{
						typeId:id
					},
					success:(res)=>{
						let d = res.data;
						console.log(d)
						if(d.code == 0){
							let url = d.rows[0].imageUrl;
							this.rulesImgs = 'https://xyb.wlkjwl.cn/'+url
						}
					}
				});
			},
			defaultDataList(){
				this.page = 1;
				this.ranklist = [];
				this.isLoad = true;
			},
			previewImage: function(e) {
				var current = this.rulesImgs;
				console.log(current)
				uni.previewImage({
					current: current,
					urls: [this.rulesImgs]
				})
			},
			getKeep(){
				this.request({
					url:this.path+'/api/xyb/banner/lockping',
					success:(res)=>{
						let d = res.data;
						if(d.data && d.data.image){
							this.isShow = true;
							this.isShowObj = d.data;
						}
					}
				})
			},
			getDataList(type){
				//api/xyb/star/weekRankingList
				if(!this.isLoad) return
				let path = type == 1?this.path+'/api/xyb/banner/weekRankingList':this.path+'/api/xyb/banner/monthRankingList';
				
				this.request({
					url:path,
					data:{
						typeId:1,
						pageNum:this.page,
						pageSize:20
					},
					success:(res)=>{
						let d = res.data;
						if(d.rows.length>0){
							this.page++;
							this.ranklist = this.ranklist.concat(d.rows);
							if(d.rows.length<20){
								this.isLoad = false;
							}
						}else{
							this.isLoad = false;
						}
					}
				})
			},
			getLeaveTime(type){
				this.request({
					url:this.path+'/api/xyb/banner/timeLeave',
					data:{
						typeId:type
					},
					success:(res)=>{
						let d = res.data;
						let t = this.timeSaveChange(d.data/1000)
						this.time = t;
					}
				})
			},
			getBanner(type){
				this.request({
					url:this.path+'/api/xyb/banner/list',
					data:{
						typeId:type
					},
					success:(res)=>{
						let d = res.data;
						this.bannerList = d.rows;
					}
				})
			},
			getRulesImgs(type){
				if(type == 1){
					this.rulesImgs = '/static/z.png'
				}else{
					this.rulesImgs = '/static/y.png'
				}
			},
			timeSaveChange(shijiancha){
				var days = Math.floor(shijiancha / 60 / 60 / 24);
				var daysRound = Math.floor(days);
				var hours = Math.floor(shijiancha / 60 / 60 - (24 * daysRound));
				var hoursRound = Math.floor(hours);
				var minutes = Math.floor(shijiancha /60 - (24 * 60 * daysRound) - (60 * hoursRound));
				var minutesRound = Math.floor(minutes);
				var seconds = Math.floor(shijiancha - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound));
				return {
					days:days,
					hours:hours,
					minutes:minutes,
					seconds:seconds
				}
			},
			wxGetUserInfo(){
				//api/xyb/wechat/wxLogin
				let that = this;
				uni.showLoading({
				    title: '加载中'
				});
				uni.login({
					provider: 'weixin',
					success: loginRes => {//获取用户code
						// if(!that.hasLogin){
							//授权获取用户信息
							uni.getUserInfo({
								provider: 'weixin',
								success: function(infoRes) {
									console.log(infoRes)
									that.request({
										url: that.path + '/api/xyb/wechat/wxLogin',
										data: {
											code: loginRes.code,
											sex:infoRes.userInfo.gender,
											head:infoRes.userInfo.avatarUrl,
											nick:infoRes.userInfo.nickName,
											encryptedData:infoRes.encryptedData,
											iv:infoRes.iv
										},
										success: function(res) {
											let d = res.data;
											if(d.code == 0){
												uni.hideLoading()
												infoRes.userInfo.token = d.data.openid;
												that.login(infoRes.userInfo)
												that.isLogin = false;
												that.getContent();
											}else{
												uni.showToast({
												    title: '登录失败！服务器状态码'+d.code,
												    duration: 2000,
													icon: 'none'
												});
											}
										}
									});
									
								}
							});
							
						// }
					}
				});
			},
			hideIsShow(){
				this.isShow = false;
			},
			hideIsLogin(){
				this.isLogin = false;
			},
			goSupports(item){
				if(!this.hasLogin){
					this.isLogin = true;
				}else{
					uni.navigateTo({
					    url: '/pages/support/support?id='+item.id
					});
				}
			},
			goAdd(){
				uni.navigateTo({
				    url: '/pages/ad/ad'
				});
			},
			goSearch(){
				uni.navigateTo({
				    url: '/pages/search/search'
				});
			}
		}
	}
</script>

<style lang="scss">
	page,.content{
		background-color: #F6F6F6;
	}
	.show-mask-last{
		.mask-last-top{
			z-index: 11;
			position: fixed;
			top: 7.5vh;
			left: 10vw;
			box-sizing: border-box;
			background-color: #FFFFFF;
			.text{
				width: 50rpx;
				margin: 0 10rpx;
				font-size: 50rpx;
				height: 100%;
				position: absolute;
				top: 0;
				right: 0;
				color: #FFFFFF;
				font-family: "楷体";
				display: flex;
				align-items: center;
				text-align: center;
			}
			.btn-bottom{
				position: absolute;
				bottom: -100rpx;
				left: 50%;
				width: 78rpx;
				height: 78rpx;
				background-color: #FFFFFF;
				border-radius: 50%;
				margin-left: -40rpx;
				image{
					width: 82rpx;
					height: 82rpx;
					margin: -1rpx;
				}
			}
			&>image{
				width: 80vw;
				height: calc(85vh - 80rpx);
				float: left;
			}
		}
	}
	.show-wrap{
		border-radius: 10rpx;
		.show-model-mask{
			width: 100vw;
			height: 100vh;
			z-index: 10;
			background-color: rgba(0,0,0,0.3);
			position: fixed;
			top: 0;
			left: 0;
		}
		.show-model{
			z-index: 11;
			position: fixed;
			top: 50%;
			left: 50%;
			width: 80vw;
			height: auto;
			margin:-150rpx -40vw ;
			box-sizing: border-box;
			background-color: #FFFFFF;
			.title{
				background-color: #4A67D6;
				color: #FFFFFF;
				text-align: center;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 30rpx;
			}
			.content{
				background-color: #FFFFFF;
				font-size: 28rpx;
				padding: 15rpx;
				box-sizing: border-box;
				text-align: center;
				height: 100rpx;
				line-height: 70rpx;
			}
			.btn-group{
				display: flex;
				align-items: center;
				text-align: center;
				box-shadow: 0 -4rpx 4rpx #F2F2F2;
				padding: 0 30rpx;
				.button-blue{
					color: #4A67D6;
				}
				.button-default{
					background-color: #FFFFFF;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					padding: 0 30rpx;
					font-size: 28rpx;
					flex: 1;
				}
				button{
					width: auto;
					height: auto;
					border: none;
					padding: 0;
					margin: 0;
					border-radius: 0;
					line-height: inherit;
					background-color: #FFFFFF;
					display: inline-block;
				}
				button::after{display: none;}
				button + button{
					border-left: 1px solid #F2F2F2;
				}
			}
		}
	}
	.content{
		.ranking{
			position: relative;
			.ranking-right-text{
				position: absolute;
				right: 0;
				top: -80rpx;
				font-size: 30rpx;
				padding: 0 30rpx;
				color: #5680E6;
				margin: 10rpx;
			}
			.ranking-left-text{
				position: absolute;
				left: 0;
				top: -80rpx;
				font-size: 30rpx;
				color: grey;
				display: flex;
				padding: 0 30rpx;
				.text-item{
					margin: 10rpx;
					padding-right: 20rpx;
				}
				.text-item:nth-child(1){
					border-right: 1px solid grey;
				}
				.active{
					color: #5680E6;
					font-weight: 700;
				}
			}
			.ranking-list{
				background-color: #FFFFFF;
				margin: 0 20rpx 30rpx;
				box-shadow: 0 10rpx 10rpx #F1E2D5;
				padding:50rpx 30rpx 15rpx;
				border-bottom-left-radius: 30rpx;
				border-bottom-right-radius: 30rpx;
				.ranking-list-item{
					display: flex;
					justify-content: space-around;
					align-items: center;
					margin-bottom: 20rpx;
					view:nth-child(1){
						font-size: 28rpx;
					}
					view:nth-child(2){
						image{
							width: 100rpx;
							height: 100rpx;
							border-radius: 50%;
						}
					}
					view:nth-child(3){
						font-size: 28rpx;
						width: 160rpx;
					}
					view:nth-child(4){
						font-size: 30rpx;
						color: #FF8802;
					}
					view:nth-child(5){
						height: 50rpx;
						line-height: 50rpx;
						border-radius: 30rpx;
						color: #FFFFFF;
						font-size: 26rpx;
						font-weight: 500;
						width: 120rpx;
						text-align: center;
						background-color: #5680E6;
						box-shadow: 0 5rpx 5rpx #9599B5;
					}
				}
			}
			.ranking-top{
				background-color: #5680E6;
				margin: 100rpx 30rpx 0;
				padding: 50rpx 30rpx;
				min-height: 430rpx;
				border-top-left-radius: 18rpx;
				border-top-right-radius: 18rpx;
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
				.ranking-top-right,.ranking-top-center,.ranking-top-left{
					text-align: center;
					position: relative;
					box-sizing: border-box;
					font-size: 26rpx;
					margin-bottom: 100rpx;
					flex: 1;
					.center-bottom{
						position: absolute;
						bottom: -100rpx;
						left: 0;
						width: 100%;
					}
					.tickname{
						font-size: 28rpx;
						color: #FFFFFF;
						margin-top: 20rpx;
					}
					.ticket{
						color: #FFF100;
						font-size: 28rpx;
						margin: 10rpx 0;
					}
					.goSupport{
						width: 120rpx;
						height: 50rpx;
						margin: 0 auto;
						line-height: 50rpx;
						border-radius: 30rpx;
						border: 1px solid #8D6BE1;
						color: #844B13;
						background-color: #FFFFFF;
						font-size: 22rpx;
						box-shadow: 0 10rpx 10rpx #9599B5;
					}
					.h1,.h2,.h3{
						position: absolute;
						top: -18rpx;
						right: 0;
						width: 50rpx;
						height: 50rpx;
						border: 0;
						transform:rotate(40deg);
					}
					.bgv{
						width: 40rpx;
						height: 40rpx;
						line-height: 40rpx;
						border-radius: 50%;
						font-size: 24rpx;
						position: absolute;
						color: #854B07;
					}
					image{
						width: 160rpx;
						height: 160rpx;
						border-radius: 50%;
					}
					
				}
				.ranking-top-left{
					image{
						border: 6rpx solid #CCFEFF;
					}
					.bgv{
						top: 170rpx;
						left: 50%;
						background-color: #CCFEFF;
						margin: -20rpx;
					}
				}
				.ranking-top-center{
					top: -120rpx;
					border: 18rpx solid;
					border-color: #5680E6;
					background-color: #5680E6;
					border-radius: 50%;
					.center-bottom{
						bottom: -160rpx;
					}
					.h1{
						top: -22rpx;
						right: 0;
					}
					image{
						border: 6rpx solid #FFEB44;
						width: 180rpx;
						height: 180rpx;
					}
					.bgv{
						top: 190rpx;
						left: 50%;
						margin:-20rpx;
						background-color: #FFEB44;
					}
				}
				.ranking-top-right{
					image{
						border: 6rpx solid #D7FFCC;
					}
					.bgv{
						background-color: #D7FFCC;
						top: 170rpx;
						left: 50%;
						background-color: #D7FFCC;
						margin: -20rpx;
					}
				}
			}
		}
		.swiper{
			width: 100%;
			height:340rpx;
			.swiper-item{
				position: relative;
				ad{
					height: 340rpx!important;
				}
				image{
					width: 100%;
					height: 340rpx;
				}
				.text{
					position: absolute;
					top: 30rpx;
					left: 30rpx;
					.title{
						color: #FF558A;
						font-size: 36rpx;
						font-family: "楷体";
						font-weight: 700;
						margin-bottom: 20rpx;
					}
					.name{
						color: #FFFFFF;
						padding:8rpx 15rpx;
						font-size: 32rpx;
						font-weight: 700;
						font-family: '楷体';
						background-color: #5680E6;
						text-align: center;
						// border-radius: 30rpx;
					}
				}
			}
		}
		.end-text{
			display: flex;
			font-size: 26rpx;
			height: 50rpx;
			line-height: 50rpx;
			margin: 0 30rpx;
			color: #5680E6;
		}
		.input-wrap{
			font-size: 28rpx;
			background: #fff;
			border: 1px solid #5680E6;
			border-radius: 30px;
			position: relative;
			display: flex;
			padding: 10rpx 20rpx;
			margin: 30rpx 30rpx 15rpx;
			input{
				height: 40rpx;
				line-height: 40rpx;
				flex: 1;
				font-size: 28rpx;
			}
			image{
				width: 40rpx;
				height: 40rpx;
			}
		}
		.input-wrap::after{
			content:'';
			position: absolute;
			top: -2px; bottom: -2px;
			left: -2px; right: -2px;
			background: linear-gradient(135deg,#E7DCA1, #0AA6E0);
			border-radius: 30px;
			content: '';
			z-index: -1;
		}
	}
</style>
