<template>
	<view class="challenge-detail">
		<custom-nav :title="pageTitle"></custom-nav>
		<custom-toast ref='toast'></custom-toast>
		<view v-if="item.challenge_nickname" class="content">
			<view class="challenge-item">
				<view class="challenge-item-status" :class="{ end: item.status == 2 }">{{ item.status == 1 ? '对战中' : '已结束' }}</view>
				<view class="title">{{ item.challenge_nickname | getName }}与 {{ item.accept_nickname | getName }}的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="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">{{ item | getAction(self) }}</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="score">
				<view class="title">【{{ item.challenge_nickname | getName }}VS{{ item.accept_nickname | getName }}】当前学分情况</view>
				<view class="scores">
					<view class="scores-item">
						<text class="name">{{ item.challenge_nickname | getName }}</text>
						<text class="score-num" style="color: #FFA231;">学分：{{ item.challenge_total }}</text>
					</view>
					<view class="scores-item">
						<text class="name">{{ item.accept_nickname | getName }}</text>
						<text class="score-num" style="color: #C55AAE;">学分：{{ item.accept_total }}</text>
					</view>
				</view>
			</view>
			<!-- <view class="until">截止时间：220.05.21</view> -->
			<view class="timecountDown">
				<text v-if="n">距竞猜结束还有：</text>
				<text v-else>竞猜已结束</text>
				<view v-if="n" class="black">{{ countDown }}</view>
			</view>
			<view class="actions">
				<view class="percent">
					<text style="color: #FFA231;">支持率 {{ (item.challenge_num + item.accept_num) ? Math.floor(item.challenge_num / (item.challenge_num + item.accept_num) * 100) : 0 }}%</text>
					<text style="color: #C55AAE;">支持率 {{ (item.challenge_num + item.accept_num) ? Math.floor(item.accept_num / (item.challenge_num + item.accept_num) * 100) : 0 }}%</text>
				</view>
				<view class="progress">
					<view class="left" :style="{ width: ((item.challenge_num + item.accept_num) ? Math.floor(item.challenge_num / (item.challenge_num + item.accept_num) * 100) : 50) + '%' }"></view>
					<view class="right" :style="{ width: ((item.challenge_num + item.accept_num) ? Math.floor(item.accept_num / (item.challenge_num + item.accept_num) * 100) : 50) + '%' }"></view>
				</view>
				<view v-if="!self && n" class="actionss">
					<view v-if="!item.guessing || (item.support_id && item.support_id == item.challenge_id)" class="actions-btn" style="color: #FFA231; border-color: #FFA231;" @click="action(item.challenge_nickname, item.challenge_id, 0)"><text v-if="item.support_id == item.challenge_id">已</text>预测他/她赢</view>
					<view v-if="!item.guessing || (item.support_id && item.support_id == item.accept_id)" class="actions-btn float-right" style="color: #C55AAE; border-color: #C55AAE;" @click="action(item.accept_nickname, item.accept_id, 1)"><text v-if="item.support_id == item.accept_id">已</text>预测他/她赢</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { api_challengeGuessing } from '@/api.js'
	export default {
		data() {
			return {
				pageTitle: '挑战详情',
				item: {},
				self: true,
				n: 0
			}
		},
		computed: {
			countDown() {
				const add0 = num => num < 10 ? '0' + num : num
				const sec = Math.floor((this.item.guessing_endtime - this.n) / 1000)
				const day = Math.floor(sec / 86400)
				const hour = Math.floor((sec % 86400) / 3600)
				const minite = Math.floor((sec - 86400 * day - hour * 3600) / 60)
				const second = Math.floor(sec - 86400 * day - hour * 3600 - minite * 60)
				return `${add0(hour +  + day * 24)}时${add0(minite)}分${add0(second)}秒`
			}
		},
		filters: {
			getAction(item, self) {
				if (self) {
					if (item.status == 1) {
						return 'PK中'
					} else {
						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, len) {
				if (name) {
					return name.length > 6 ? name.slice(0, 6) + '...' : name
				}
				return ''
			},
		},
		beforeDestroy() {
			clearInterval(this.timer)
		},
		onLoad({ from }) {
			this.item = uni.temp1
			if (Date.now() <= this.item.guessing_endtime) {
				this.n = Date.now()
				this.timer = setInterval(() => {
					if (this.n + 1000 > this.item.guessing_endtime) {
						clearInterval(this.timer)
						this.n = 0
						return
					}
					this.n = Date.now()
				}, 1000)
			}
			if (!from) {
				this.self = false
			}
		},
		methods: {
			action(nickname, userid, type) {
				if (!this.item.guessing) {
					if (this.n != 0) {
						if (this.item.accept_id != this.$store.state.userServerInfo.id && this.item.challenge_id != this.$store.state.userServerInfo.id) {
							uni.showModal({ title: '提示', content: `确定要预测${nickname}赢？` }).then(([, { confirm }]) => {
								if (confirm) {
									uni.loading()
									this.$ajax.get(`${api_challengeGuessing}?challenge_id=${this.item.id}&user_id=${userid}&type=${type}`).then(([, { data: { code, msg }}]) => {
										uni.hideLoading()
										if (code == 200) {
											uni.fromUpload = true
											this.item.guessing = true
											this.item.support_id = userid
											uni.$emit('Guesst', this.item.id)
										} else {
											this.$refs.toast.hover(msg)
										}
									})
								}
							})
						} else {
							this.$refs.toast.hover('当前竞猜不可参与', 2345, 'center')
						}
					} else {
						this.$refs.toast.hover('竞猜已结束', 2345, 'center')
					}
				} else {
					this.$refs.toast.hover('您已参与此次竞猜', 2345, 'center')
				}
			}
		}
	}
</script>

<style lang="scss">
	.challenge-detail {
		@include page();
		.content {
			background: $custom-nav-borderbot-color;
			.challenge-item {
				height: 240rpx;
				padding: 0 30rpx;
				border-radius:6rpx;
				position: relative;
				background: #FFFFFF;
				margin: 0 auto 12rpx;
				@include flex(column);
				box-sizing: border-box;
				box-shadow:0px 6rpx 20rpx 4rpx rgba(241,164,164,0.1);
				.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 {
						flex: 1;
						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;
						}
						.success {
							left: 50%;
							z-index: 1;
							top: -28rpx;
							width: 145rpx;
							height: 148rpx;
							position: absolute;
							transform: translateX(-50%);
						}
						&.detail-c {
							.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;
								}
							}
						}
					}
				}
			}
			.score {
				height: 220rpx;
				background: #FFFFFF;
				margin-bottom: 12rpx;
				@include flex(column);
				box-sizing: border-box;
				padding: 0 40rpx 36rpx;
				.title {
					width: 100%;
					height: 76rpx;
					@include flex();
					justify-content: flex-start;
					
				}
				.scores {
					flex: 1;
					width: 100%;
					@include flex();
					justify-content: space-between;
					.scores-item {
						width:320rpx;
						height:108rpx;
						border-radius:6rpx;
						@include flex(column);
						border:1rpx solid rgba(204, 204, 204, 1);
						.name {
							font-size: 24rpx;
						}
						.score-num {
							font-size: 26rpx;
							margin-top: 18rpx;
						}
					}
				}
			}
			.actions {
				height: 220rpx;
				padding: 0 30rpx;
				background: #FFFFFF;
				box-sizing: border-box;
				@include flex(column);
				justify-content: flex-start;
				.percent {
					width: 100%;
					font-size: 24rpx;
					@include flex();
					line-height: 3;
					justify-content: space-between;
				}
				.progress {
					width: 100%;
					height: 20rpx;
					position: relative;
					.left {
						top: 0;
						left: 0;
						z-index: 1;
						height: 100%;
						position: absolute;
						background: #FFA231;
					}
					.right {
						top: 0;
						right: 0;
						height: 100%;
						position: absolute;
						background: #C55AAE;
					}
					// .left::after {
					// 	top: 0;
					// 	content: "";
					// 	width: 8rpx;
					// 	height: 200%;
					// 	right: -4rpx;
					// 	position: absolute;
					// 	background: #FFFFFF;
					// 	transform-origin: center center;
					// 	transform: translate(0, -25%) rotate(20deg);
					// }
				}
				.actionss {
					width: 640rpx;
					height: 64rpx;
					margin-top: 36rpx;
					.actions-btn {
						width:240rpx;
						height:64rpx;
						float: left;
						@include flex();
						font-size: 24rpx;
						border-radius:32rpx;
						background:rgba(254,250,249,1);
						border:1rpx solid rgba(255,162,49,1);
						&.float-right {
							float: right;
						}
					}
					
				}
			}
			.timecountDown {
				font-size: 32rpx;
				color: #333333;
				background: #FFFFFF;
				margin-bottom: 2rpx;
				height: 90rpx;
				line-height: 90rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				
				.black {
					font-size: 48rpx;
					background: #424141;
					color: #FFFFFF;
					height: 64rpx;
					line-height: 64rpx;
					padding: 0 20rpx;
					letter-spacing: 10rpx;
				}
			}
		}
	}
</style>
