<template>
	<view class="active-detail">
		<!-- 背景图 -->
		<view class="active-detail-img">
			<image style="width: 100%; height: 720rpx;" :src="activeDeatil.banners" mode=""></image>
		</view>

		<!--投票数  -->
		<view class="vote">
			<view class="vote-detail">
				<view class="vote-detail-top">
					<text style="width: 80rpx; height: 2rpx; background-color: rgba(204, 204, 204, .7); "></text>
					<view class="vote-detail-top-main">
						<text>距活动结束：</text>
						<view class="time">
							<text>还剩</text>
							<view class="shijian">{{countdownh}}</view>
							<text>时</text>
							<view class="shijian">{{countdownm}}</view>
							<text>分</text>
							<view class="shijian">{{countdowns}}</view>
							<text>秒</text>
						</view>
					</view>
					<text style="width: 80rpx; height: 2rpx; background-color: rgba(204, 204, 204, .7); "></text>
				</view>

				<view class="vote-detail-btn">
					<view class="vote-detail-btn-item">
						<text class="vote-detail-btn-item-num">{{activeDeatil.project_num}}</text>
						<text class="vote-detail-btn-item-text">投票项</text>
					</view>
					<view style="width: 2rpx;height: 52rpx;background-color: #ccc;"></view>
					<view class="vote-detail-btn-item">
						<text class="vote-detail-btn-item-num">{{activeDeatil.vote_num}}</text>
						<text class="vote-detail-btn-item-text">累计投票</text>
					</view>
					<view style="width: 2rpx;height: 52rpx;background-color: #ccc;"></view>
					<view class="vote-detail-btn-item">
						<text class="vote-detail-btn-item-num">{{activeDeatil.view_num}}</text>
						<text class="vote-detail-btn-item-text">访问量</text>
					</view>
				</view>

			</view>

		</view>
		<!-- 分段栏 -->
		<view style="width: 100%;height: 16rpx;background-color:#F0F0F0 ;"></view>

		<!-- 排行榜 -->
		<view class="rank">
			<view class="tab_nav">
				<view class="navTitle" v-for="(item,index) in rankList" :key="index">
					<view class="navTitle-item">
						<view :class="{'active':isActive === index}" @click="checked(index)">
							{{item.title}}
						</view>
					</view>
				</view>
			</view>
			<view class="rank-search" v-if="isActive==0">
				<u-input placeholder="输入IHG酒店名称或编号" border='none' v-model="search" @input='searchText'>
					<template slot="suffix" style='margin-right:40rpx;'>
						<u-image :showLoading="true" :showError='true' src="/static/icon/search.png" width="40rpx"
							height="32rpx"></u-image>
					</template>
				</u-input>
			</view>

			<view class="tab_area" v-if="isActive==0">
				<view class="areaTitle" v-for="(item,index) in areaList" :key="index">
					<view class="areaTitle-item">
						<view :class="{'active-area':isActive === index}" @click="checked(index)">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>

			<!-- <view class="tab_area" v-if="isActive==0">
				<view class="areaTitle" v-for="(item,index) in areaList" :key="index">
					<view class="areaTitle-item">
						<view :class="{'active-area':isActive === index}" @click="checked(index)">
							{{item.name}}
						</view>
					</view>
				</view>
			</view> -->
		</view>

		<!-- 查询结果 -->
		<view class="List" v-if="isActive==0">
			<view class="ListItem" v-for="item in voteList" @click="activeDetail">
				<image src="http://t9.9026.com/imgs/Kudosbg.png" style="width: 640rpx;height:420rpx;"></image>
				<view class="kudosicon" :style="{backgroundImage:'url('+hotelImageUrl+')'}">
					<text
						style="width: 36rpx;height: 52rpx; display: flex;align-items: center;justify-content: center;color: #FFF;font-size: 24rpx;font-weight: bold; ">{{item.rank}}</text>
				</view>
				<view class="nav">
					<view class="events">
						<text>{{item.project_name}}</text>
					</view>
					<view class="voteStatus">
						<text>{{item.ticket_num}}票</text>
					</view>
				</view>
				<view class="foot" @click.stop="goVoteDetail(item.id)">
					<text>投票</text>
				</view>
			</view>
		</view>

		<view class="rank-detail" :style="{backgroundImage:'url('+backImageUrl+')'}" v-if="isActive==1">
			<view class="rank-detail-rank">
				<image style="width: 92rpx; height: 92rpx; border-radius: 50%; " src="/static/icon/avatar.png" mode="">
				</image>
				<text class="rank-detail-rank-text">成都环球中心天新中秋</text>
				<view class="rank-detail-rank-data">
					<image style="width: 26rpx;height: 24rpx; margin-right: 10rpx; " src="/static/icon/votes01.png"
						mode=""></image>
					<text>25330</text>
				</view>
			</view>
			<view class="rank-detail-rank rank-detail-rankS">
				<image style="width: 92rpx; height: 92rpx; border-radius: 50%; " src="/static/icon/avatar.png" mode="">
				</image>
				<text class="rank-detail-rank-text">成都环球中心天新中秋</text>
				<view class="rank-detail-rank-data">
					<image style="width: 26rpx;height: 24rpx; margin-right: 10rpx; " src="/static/icon/votes01.png"
						mode=""></image>
					<text>25330</text>
				</view>
			</view>
			<view class="rank-detail-rank rank-detail-rankT">
				<image style="width: 92rpx; height: 92rpx; border-radius: 50%; " src="/static/icon/avatar.png" mode="">
				</image>
				<text class="rank-detail-rank-text">成都环球中心天新中秋</text>
				<view class="rank-detail-rank-data">
					<image style="width: 26rpx;height: 24rpx; margin-right: 10rpx; " src="/static/icon/votes01.png"
						mode=""></image>
					<text>25330</text>
				</view>
			</view>
		</view>
		<!-- 具体排名(4-10) -->
		<view class="rank-other" v-if="isActive==1">
			<view class="rank-other-item" v-for="item in 6">
				<view class="rank-other-item-left">
					<text>4</text>
				</view>
				<view class="rank-other-item-main">
					<image style="width: 112rpx;height: 112rpx;margin-left: 24rpx; margin-right: 16rpx; "
						src="/static/icon/avatar.png" mode=""></image>
					<text class="rank-other-item-main-text">成都环球中心天新中秋接力活动</text>
				</view>
				<view class="rank-other-item-right">
					<image style="width: 26rpx;height: 24rpx; margin-right: 8rpx; " src="/static/icon/votes02.png"
						mode=""></image>
					<text>25530</text>
				</view>
			</view>
		</view>

		<view class="introduce" v-if="isActive==2">

			<view class="introduce-top">
				<text class="introduce-top-rule1"></text>
				<text style="margin-right:  8rpx; margin-left: 12rpx; ">活动规则</text>
				<text class="introduce-top-rule2"></text>
			</view>
			<view class="introduce-main">
				<view class="introduce-main-start">
					<text>开始时间:</text>
					<text style="display: inline-block;margin-left: 20rpx;">2022年10月28日 09:00</text>
				</view>
				<view class="introduce-main-start">
					<text>介绍时间:</text>
					<text style="display: inline-block;margin-left: 20rpx;">2022年10月28日 09:00</text>
				</view>
				<view class="introduce-main-start">
					<text>主办方:</text>
					<text style="display: inline-block;margin-left: 50rpx;">成都洲际天堂大饭店</text>
				</view>
				<view class="introduce-main-rule">
					<text>规则:</text>
					<view class="introduce-main-rule-left">
						<text>每人每天可投三次</text>
						<text style="margin: 24rpx 0;">可重复投同一人</text>
						<text>点击加入会员可多3次机会</text>
					</view>
				</view>

			</view>

			<!-- 分割线 -->
			<view
				style="width: 94%; height: 2rpx; background-color:rgba(240, 240, 240, .7);margin: 64rpx auto 80rpx;  ">
			</view>
			<view class=" introduce-top">
				<text class="introduce-top-rule1"></text>
				<text style="margin-right:  8rpx; margin-left: 12rpx; ">活动介绍</text>
				<text class="introduce-top-rule2"></text>
			</view>
			<view class="introduce-btn-text">
				<text>由中国最佳酒店评选委员会、洲际酒店共同打造的国内</text>
			</view>

			<!-- 声明 -->
			<view class="introduce-btn">
				<text>活动声明</text>
			</view>
		</view>
		<!-- 触底 -->
		<view class="home-bottom" v-if="isActive==0">
			<uni-load-more :status="status" color="#CCCCCC" :content-text="contentText" />
		</view>
	</view>
</template>

<script>
	import util from './../../../utils/util.js'
	export default {
		data() {
			return {
				//活动结束倒计时
				endTime:'',
				countdownh: '',
				countdownm: '',
				countdowns: '',
				timer: null, //重复执行

				// 搜索
				search: '',
				// 活动id
				id: '',
				// 活动详情
				activeDeatil: '',
				// 投票列表
				voteList: [],
				//酒店排名背景图片
				hotelImageUrl: require('../../../static/icon/tip01.png'),
				//排行榜背景图片
				backImageUrl: 'http://t9.9026.com/imgs/rank01.png',
				rankList: [{
						title: '投票'
					},
					{
						title: '排行榜'
					}, {
						title: '活动介绍'
					}
				],
				areaList: [{
					name: '全部'
				}, {
					name: '成都'
				}, {
					name: '重庆'
				}, {
					name: '绵阳'
				}, {
					name: '南充'
				}],
				//激活指定table菜单
				isActive: 0,
				status: 'noMore',
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '——  已经到底啦  ——'
				},
			}
		},
		onLoad(o) {
			this.id = o.id
			this.getList(o.id)
			this.getActiveDetail(o.id)
			this.getCategoryList(o.id)
		},
		methods: {
			showtime(time) {
				var nowtime = new Date(), //获取当前时间
					// endtime = new Date("2021/12/10"); //定义结束时间
					endtime = new Date(time); //定义结束时间
				var lefttime = endtime.getTime() - nowtime.getTime(), //距离结束时间的毫秒数
					leftd = Math.floor(lefttime / (1000 * 60 * 60 * 24)), //计算天数
					lefth = Math.floor((lefttime / (1000 * 60 * 60) % 24) + leftd * 24) < 10 ? "0" + Math.floor((lefttime /
						(1000 * 60 * 60) % 24) + leftd * 24) : Math.floor((lefttime / (1000 * 60 * 60) % 24) + leftd *
						24), //计算小时数
					leftm = Math.floor(lefttime / (1000 * 60) % 60) < 10 ? "0" + Math.floor(lefttime / (1000 * 60) % 60) :
					Math.floor(lefttime / (1000 * 60) % 60), //计算分钟数
					lefts = Math.floor(lefttime / 1000 % 60) < 10 ? "0" + Math.floor(lefttime / 1000 % 60) : Math.floor(
						lefttime / 1000 % 60); //计算秒数
				this.countdownh = lefth //返回倒计时的字符串
				this.countdownm = leftm //返回倒计时的字符串
				this.countdowns = lefts //返回倒计时的字符串
				// 倒计时结束时，显示00:00:00
				if (lefttime < 0) {
					this.countdownh = this.countdownm = this.countdowns = "00"
				}

			},
			// 获取活动项目列表
			getList(id) {
				this.$api.active.getActiveProjectList({
					activity_id: id,
					page: 1,
				}).then(res => {
					console.log(res, "活动项目列表")
					if (res.code == 0) {
						this.voteList = res.data.data
					}
				})
			},
			// 获取活动详情
			getActiveDetail(id) {
				this.$api.active.getActiveDetail({
					activity_id: id
				}).then(res => {
					console.log(res, "活动详情")
					if (res.code == 0) {
						this.activeDeatil = res.data
						this.endTime = res.data.end_time
						this.timer = setInterval(() => {
							this.showtime(this.endTime)
						})
					}
				})
			},
			// 获取活动投票项分类
			getCategoryList(id) {
				this.$api.category.getCategoryList({
					page: 1,
					type: 3,
					activity_id: id
				}).then(res => {
					console.log(res, "活动投票项分类")
					if (res.code == 0) {
						// this.areaList=res.data.data
					}
				})
			},
			//购票详情
			goVoteDetail(id) {
				console.log(id,'--->id')
				uni.navigateTo({
					url: '/pages/index/vote-detail/index?id=' + id
				})
			},
			// 搜索防抖
			searchText: util.debounce(function() {
				this.goSearch()
			}, 1000),
			// 搜索
			goSearch() {
				this.$api.active.getActiveProjectList({
					activity_id: this.id,
					page: 1,
					keyword: this.search
				}).then(res => {
					console.log(res, "搜索活动项目列表")
					if (res.code == 0) {
						this.voteList = res.data.data
					}
				})
			},
			//菜单index切换
			checked(index) {
				this.isActive = index
			},
			// 活动详情页
			// activeDetail() {
			// 	console.log(111);
			// },
		}
	}
</script>

<style lang="scss" scoped>
	$pageColor:#F9F9F9;
	$bgColor:#FFFFFF;

	@mixin flexlayout {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.active-detail {
		height: 100%;
		background: #F9F9F9;
	}

	.home-bottom {
		background-color: #fff;
		padding-bottom: 84rpx;
	}

	.rank-search {
		margin-top: 80rpx;

		::v-deep .u-input {
			width: 690rpx !important;
			height: 68rpx !important;
			background: #F1F1F1;
			border-radius: 74rpx;
		}

		::v-deep .u-input__content__field-wrapper {
			padding-left: 36rpx;
		}

		::v-deep .u-input__content__field-wrapper__field {
			color: #999999 !important;
			font-size: 28rpx !important;
		}
	}


	.introduce {
		width: 100%;
		background-color: #fff;
		position: relative;
		top: -176rpx;
		padding-bottom: 50rpx;
		position: relative;

		.introduce-top {
			height: 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			font-weight: bold;
			letter-spacing: 2rpx;

			.introduce-top-rule1 {
				width: 56rpx;
				height: 4rpx;
				background: linear-gradient(90deg, #FFFFFF 0%, #D9A94D 100%);
			}

			.introduce-top-rule2 {
				width: 56rpx;
				height: 4rpx;
				background: linear-gradient(-90deg, #FFFFFF 0%, #D9A94D 100%);
			}
		}

		.introduce-main {
			margin-top: 46rpx;
			padding: 0 30rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: #333;

			.introduce-main-start {
				margin-bottom: 24rpx;
			}

			.introduce-main-rule {
				display: flex;
				align-items: flex-start;
				justify-content: flex-start;

				.introduce-main-rule-left {
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: flex-start;
					margin-left: 75rpx;
				}
			}
		}

		.introduce-btn-text {
			padding: 0 30rpx;
			margin-top: 40rpx;
			text-indent: 2em;
			font-size: 28rpx;
			color: #333;
			font-weight: bold;
			line-height: 56rpx;
		}

		.introduce-btn {
			margin-top: 72rpx;
			padding-bottom: 80rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			color: #101010;
			font-weight: bold;
		}
	}


	//地区切换
	.tab_area {
		margin-top: 48rpx;
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		font-family: PingFang-SC-Heavy, PingFang-SC;
	}

	.area_nav .areaTitle {
		width: 140rpx;
		height: 52rpx;
		background-color: #F1F1F1;
		border-radius: 26rpx;
		flex: none;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.areaTitle-item {
		width: 140rpx;
		height: 52rpx;
		background-color: #F1F1F1;
		border-radius: 26rpx;
		font-size: 24rpx;
		color: #999;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.active-area {
		width: 124rpx;
		height: 52rpx;
		border-radius: 26rpx;
		background-color: #FF6200;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}


	.rank {
		height: 340rpx;
		background-color: #fff;
		padding: 40rpx 30rpx 0;

		//菜单切换
		.tab_nav {
			width: 100%;
			display: flex;
			justify-content: space-around;
			align-items: center;
			font-family: PingFang-SC-Heavy, PingFang-SC;
		}

		.tab_nav .navTitle {
			width: 30%;
			flex: none;
			font-size: 32rpx;
			color: #666;
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.navTitle-item {
			height: 40rpx;
		}

		.active {
			color: #333333;
			font-weight: bold;
			font-size: 40rpx;

			&::after {
				display: inline-block;
				content: '';
				width: 156rpx;
				height: 24rpx;
				background: linear-gradient(180deg, rgba(249, 231, 219, 0) 0%, #F3C063 100%);
				border-radius: 12rpx;
				position: absolute;
				bottom: -22rpx;
				left: 25rpx;
			}
		}
	}

	.vote {
		height: 322rpx;
		background-color: #fcfcfd;

		.vote-detail {
			position: relative;
			top: -40rpx;
			margin: 0 auto;
			width: 690rpx;
			height: 310rpx;
			background: #FFFFFF;
			box-shadow: 0px 20rpx 40rpx 0px rgba(220, 222, 229, 0.4);
			border-radius: 16rpx;
			padding: 40rpx 26rpx 0;

			.vote-detail-top {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.vote-detail-top-main {
					flex: 1;
					margin-left: 20rpx;
					color: #333;
					font-size: 28rpx;
					display: flex;
					align-items: center;
					justify-content: flex-start;

					.time {
						display: flex;
						align-items: center;
						justify-content: flex-start;
					}
				}
			}

			.vote-detail-btn {
				margin-top: 75rpx;
				padding: 0 38rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.vote-detail-btn-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;
					font-size: 28rpx;
					color: #333;

					.vote-detail-btn-item-num {
						font-size: 44rpx;
						font-weight: bold;
					}

					.vote-detail-btn-item-text {
						margin-top: 20rpx;
					}
				}
			}
		}
	}

	.active-detail-img {
		width: 100%;
		height: 720rpx;
	}

	.rank-detail {
		width: 100%;
		height: 592rpx;
		position: relative;
		top: -176rpx;
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;

		.rank-detail-rank {
			position: relative;
			top: 80rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.rank-detail-rank-text {
				width: 182rpx;
				height: 76rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
				font-size: 26rpx;
				color: #333;
				margin: 16rpx 0 52rpx;
			}

			.rank-detail-rank-data {
				width: 136rpx;
				height: 56rpx;
				background: #141414;
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				font-weight: bold;
				color: #fff;
			}
		}

		.rank-detail-rankS {
			position: relative;
			top: -155rpx;
			left: -230rpx;
		}

		.rank-detail-rankT {
			position: relative;
			top: -390rpx;
			left: 230rpx;
		}
	}

	.rank-other {
		position: relative;
		top: -204rpx;
		width: 100%;
		padding: 48rpx 30rpx 80rpx;
		background-color: #fff;
		border-radius: 32rpx 32rpx 0px 0px;

		.rank-other-item {
			margin-bottom: 24rpx;
			padding: 0 24rpx;
			height: 176rpx;
			background: #FFFFFF;
			box-shadow: 0px 4rpx 24rpx -10rpx rgba(101, 95, 90, 0.3);
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.rank-other-item-left {
				width: 48rpx;
				height: 48rpx;
				border: 3rpx solid #E6E6E6;
				border-radius: 50%;
				font-size: 24rpx;
				color: #858494;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.rank-other-item-main {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: flex-start;

				.rank-other-item-main-text {
					width: 282rpx;
					height: 80rpx;
					font-size: 28rpx;
					color: #333;
					line-height: 40rpx;
				}
			}

			.rank-other-item-right {
				width: 132rpx;
				height: 48rpx;
				background: rgba(255, 98, 0, 0.22);
				border-radius: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				color: #FF6200;
				font-weight: bold;
			}
		}
	}




	.List {
		padding: 0 30rpx;
		padding-top: 20rpx;
		padding-bottom: 32rpx;

		.ListItem {
			position: relative;
			margin-bottom: 40rpx;
			width: 100%;
			height: 665rpx;
			background: $bgColor;
			box-shadow: 0rpx 12rpx 40rpx 0rpx rgba(220, 222, 229, 0.4);
			border-radius: 24rpx;
			padding: 20rpx 26rpx 26rpx 24rpx;

			.kudosicon {
				background-repeat: no-repeat;
				background-size: 36rpx 52rpx;
				position: absolute;
				top: 20rpx;
				left: 60rpx;

				@include flexlayout() image {
					width: 32rpx;
					height: 28rpx;
				}
			}

			.nav {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.events {
					text {
						margin-top: 10rpx;
						font-size: 30rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #333333;
					}
				}

				.voteStatus {
					width: 126rpx;
					height: 48rpx;
					background: #FFFFFF;
					border-radius: 6rpx;
					border: 2rpx solid #A18353;
					font-size: 30rpx;
					color: #A18353;
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.foot {
				margin-top: 24rpx;
				width: 100%;
				height: 84rpx;
				background: linear-gradient(338deg, #FF6200 0%, #FF9D4F 100%);
				border-radius: 12rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: bold;
				color: #fff;
			}

		}
	}
</style>
