<template>
	<view class="challengeList">
		<custom-nav :title="pageTitle"></custom-nav>
		<custom-toast ref='toast'></custom-toast>
		<view class="content">
			<image class="getChallenge" src="../../static/icon/getChallenge.png" @click="getChallenge"></image>
			<!-- <view class="loading">
				<image src="https://image.weilanwl.com/gif/loading-white.gif"></image>
			</view> -->
			<view class="nav">
				<view class="nav-item" :class="{ active: active === 0 }" @click="active = 0">我的挑战</view>
				<view class="nav-item" :class="{ active: active === 1 }" @click="active = 1">围观竞猜</view>
				<view class="nav-item" :class="{ active: active === 2 }" @click="active = 2">挑战排行</view>
			</view>
			<view class="my-challenge">
				<scroll-view 
					v-if="showScrollView"
					scroll-y 
					:style="{ height: scrollViewHeight + 'px' }"
					:refresher-enabled="true"
					:refresher-triggered="requesting"
					@scroll="scroll"
					@refresherrefresh="refresherrefresh"
					@scrolltolower="scrolltolower"
				>
					<view class="my-challenge-item" v-for="(item, index) in list" :key="index">
						<view class="challenge-item-status" :class="{ end: item.status == 2 || item.status == 3 }">{{ item.status == 0 ? '未应战' : item.status == 1 ? '对战中' : '已结束' }}</view>
						<view v-if="active == 0" class="title">{{ item.type == 0 ? ('向' + item.accept_nickname.slice(0, 6) + '发起挑战') : (item.challenge_nickname.slice(0, 6) + '向你发起挑战')  }}</view>
						<view v-else class="title">{{ item.accept_nickname.slice(0, 6) + '与' + item.challenge_nickname.slice(0, 6) + '的PK'}}</view>
						<view class="detail">
							<view class="detail-l">
								<image v-if="item.status == 2 && item.challenge_id == item.successId" class="success" src="../../static/icon/pk-success.png" mode=""></image>
								<view class="avatar">
									<image :src="item.challenge_avatar" ></image>
									<image class="border" src="../../static/icon/challenge-avatar1.png"></image>
								</view>
								<view class="nickname">{{ item.challenge_nickname | getName }}</view>
							</view>
							<view class="detail-c">
								<view class="long2">
									<view class="long2-item">{{ item.challenge_total }}</view>
									<view class="long2-c">:</view>
									<view class="long2-item">{{ item.accept_total }}</view>
								</view>
								<!-- <view class="long">
									<view class="long-item">{{ item.day | getLong(0) }}</view>
									<view class="long-item">{{ item.day | getLong(1) }}</view>
								</view> -->
								<!-- <view class="time">{{ item.time }}</view> -->
								<view class="action" :class="{ end: item.status == 3 || item.guessing || Date.now() > item.guessing_endtime }" @click="toDetail(item)">{{ item | getAction(nowActive) }}</view>
							</view>
							<view class="detail-r">
								<image v-if="item.status == 2 && item.accept_id == item.successId" class="success" src="../../static/icon/pk-success.png" mode=""></image>
								<view class="avatar">
									<image :src="item.accept_avatar" ></image>
									<image class="border" src="../../static/icon/challenge-avatar2.png"></image>
								</view>
								<view class="nickname">{{ item.accept_nickname | getName }}</view>
							</view>
						</view>
					</view>
					<view class="my-challenge-item nomore">{{ page == 0 ? '暂无更多' : '加载中' }}</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import { api_Mychallenge_list, api_GuessingList, api_GuessingRanklList } from '@/api.js'
	export default {
		data() {
			return {
				pageTitle: '学分挑战',
				active: 1,
				nowActive: 0,
				list: [],
				page: 1,
				requesting: false,
				scrollViewHeight: 0,
				showScrollView: false,
				scrollTop: 0
			};
		},
		watch: {
			active() {
				this.refresherrefresh()
			}
				
		},
		filters: {
			getAction(item, nowActive) {
				if (nowActive == 0) {
					if (item.status == 1 || item.status == 2) {
						return '挑战详情'
					} else if (item.status == 0) {
						if (item.type == 0) {
							return '查看详情'
						} else if (item.type == 1) {
							return '应战'
						}
					} else if (item.status == 3) {
						return '已拒绝'
					}
				} else {
					if (item.guessing) {
						return '已预测'
					} else {
						if(Date.now() > item.guessing_endtime) {
							return '竞猜结束'
						} else {
							return '围观竞猜'
						}
					}
				}
				return ''
			},
			getLong(long, index) {
				return (Number(long) > 9 ? String(long) : '0' + long)[index]
			},
			getName(name) {
				if (name) {
					return name.length > 8 ? name.slice(0, 8) + '...' : name
				}
				return ''
			}
		},
		mounted() {
			this.$scrollViewHeight('.my-challenge')
			setTimeout(() => this.showScrollView = true, 567)
			this.request(true)
			uni.$on('RejectPK', id => this.list.find(e => e.id == id).status = 3)
			uni.$on('AcceptPK', id => this.list.find(e => e.id == id).status = 1)
			uni.$on('Guesst', id => this.list.find(e => e.id == id).guessing = true)
			uni.$on('REDRESH', () => this.refresherrefresh())
		},
		methods: {
			scroll({ detail: { scrollTop }}) {
				this.scrollTop = scrollTop
			},
			scrolltolower() {
				this.request()
			},
			refresherrefresh() {
				if (this.scrollTop < 100) {
					this.page = 1
					this.request(true)
				}
			},
			request(refresh) {
				if (!this.requesting && this.page > 0) {
					this.requesting = true
					uni.loading()
					this.$ajax.get((this.active == 0 ? api_Mychallenge_list + `?page=${this.page}` : (this.active === 1 ? api_GuessingList + `?page=${this.page}` : api_GuessingRanklList + `?page=${this.page}`))).then(([, { data: { data: { list, size }}}]) => {
						list.length < size ? this.page = 0 : this.page += 1
						this.list = refresh ? list : [...this.list, ...list],
						this.nowActive = this.active
						uni.hideLoading()
						this.requesting = false
					})
				}
			},
			getChallenge() { // 点击发起挑战
				uni.navigateTo({ url: '../challenge/challenge' })
			},
			toDetail(item) {
				const type = this.$options.filters.getAction(item, this.active)
				if (type == '查看详情' || type == '应战') {
					uni.pkInfo = {
						challenge_id: item.challenge_id,
						challenge_avatar: item.challenge_avatar,
						challenge_nickname: item.challenge_nickname,
						accept_id: item.accept_id,
						accept_avatar: item.accept_avatar,
						accept_nickname: item.accept_nickname,
						id: item.id
					}
				}
				if (type == '查看详情') {
					uni.navigateTo({ url: '../challenge/challenge?type=1' })
				} else if (type == '应战') {
					uni.navigateTo({ url: '../challenge/challenge?type=2' })
				} else if (type == '挑战详情' || type == '围观竞猜' || type == '已竞猜' || type == '竞猜结束') {
					uni.temp1 = item
					uni.navigateTo({ url: '../challenge-detail/challenge-detail' + (type == '挑战详情' ? '?from=1' : '') })
				}
			}
		}
	}
</script>

<style lang="scss">
	.challengeList {
		@include page();
		.content {
			position: relative;
			@include flex(column);
			justify-content: flex-start;
			background: $custom-nav-borderbot-color;
			.getChallenge {
				right: 0;
				z-index: 1;
				height: 80rpx;
				width: 200rpx;
				bottom: 200rpx;
				position: fixed;
			}
			.nav {
				z-index: 1;
				width: 100%;
				height: 80rpx;
				@include flex();
				background: #FFFFFF;
				border-top: 1rpx solid #EEEEEE;
				.nav-item {
					flex: 1;
					height: 100%;
					@include flex();
					font-size: 32rpx;
					position: relative;
					&.active {
						color: $app-base-color;
					}
					&.active::after {
						left: 50%;
						bottom: 0;
						content: "";
						width: 128rpx;
						height: 4rpx;
						margin-left: -64rpx;
						position: absolute;
						background: $app-base-color;
					}
				}
			}
			.my-challenge {
				flex: 1;
				width: 100%;
				margin-top: 16rpx;
				.my-challenge-item {
					width: 690rpx;
					height: 240rpx;
					border-radius:6rpx;
					position: relative;
					background: #FFFFFF;
					margin: 0 auto 16rpx;
					@include flex(column);
					box-shadow:0px 6rpx 20rpx 4rpx rgba(241,164,164,0.1);
					&.nomore {
						height: 98rpx;
					}
					.challenge-item-status {
						top: 0;
						right: 0;
						width:128rpx;
						height:48rpx;
						color: #FFFFFF;
						@include flex();
						font-size: 26rpx;
						position: absolute;
						padding-right: 19rpx;
						box-sizing: border-box;
						justify-content: flex-end;
						background:rgba(247,100,84,1);
						border-radius:0rpx 6rpx 0rpx 48rpx;
						&.end {
							background: #999999;
						}
					}
					.title {
						width: 100%;
						height: 50rpx;
						@include flex();
						color: #666666;
						font-size: 26rpx;
					}
					.detail {
						flex: 1;
						width: 100%;
						padding: 14rpx;
						@include flex();
						box-sizing: border-box;
						> view {
							height: 100%;
							position: relative;
							@include flex(column);
							justify-content: space-between;
							.avatar {
								width: 92rpx;
								height: 107rpx;
								position: relative;
								> image {
									width: 100%;
									height: 100%;
									&.border {
										top: 0;
										left: 0;
										position: absolute;
									}
								}
							}
							.nickname {
								color: #333333;
								font-size: 26rpx;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
								width: 100%;
								text-align: center;
							}
							.success {
								left: 50%;
								z-index: 1;
								top: -28rpx;
								width: 145rpx;
								height: 148rpx;
								position: absolute;
								transform: translateX(-50%);
							}
							&.detail-r, &.detail-l {
								width: calc((100% - 290rpx) / 2);
							}
							
							&.detail-c{
								width: 290rpx;
								.long2 {
									flex: 1;
									display: flex;
									align-items: center;
									justify-content: space-between;
									
									.long2-c {
										font-size: 50rpx;
										color: #333333;
										margin: 0 9rpx;
									}
									
									.long2-item {
										width: 120rpx;
										height: 72rpx;
										text-align: center;
										line-height: 72rpx;
										font-size: 26rpx;
										color: #FFA231;
										border: 1px solid #CCCCCC;
										border-radius: 6rpx;
										
										&:last-of-type{
											color: #C55AAE;
										}
									}
								}
								.long {
									width: 100rpx;
									height: 64rpx;
									@include flex();
									justify-content: space-between;
									.long-item {
										width: 48rpx;
										height: 100%;
										@include flex();
										color: #FFFFFF;
										font-size: 54rpx;
										background: #333333;
									}
								}
								.time {
									color: #666666;
									font-size: 20rpx;
								}
								.action {
									width:128rpx;
									height:44rpx;
									@include flex();
									font-size: 24rpx;
									border-radius:22rpx;
									color: $app-base-color;
									background:rgba(255,255,255,1);
									border:1rpx solid rgba(250,99,66,1);
									&.end {
										color: #999999;
										border-color: #999999;
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>
