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

		<!--投票数  -->
		<view class="vote">
			<view class="vote-detail">
				<view class="vote-detail-top">
					<text style="width: 80rpx; height: 2rpx; background-color: #ccc; "></text>
					<view class="vote-detail-top-main">
						<text>距活动结束：</text>
					</view>
					<text style="width: 80rpx; height: 2rpx; background-color: #ccc; "></text>
				</view>

				<view class="vote-detail-btn">
					<view class="vote-detail-btn-item">
						<text class="vote-detail-btn-item-num">45</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">2287</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">2938</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="输入活动名称或参赛项目" border='none'>
					<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.title}}
						</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.title}}
						</view>
					</view>
				</view>
			</view>
			
			
			
			
		</view>
		
		<!-- 查询结果 -->
		<view class="List" v-if="isActive==0">
			<view class="ListItem" v-for="item in 2" @click="activeDetail">
				<image src="/static/icon/Kudosbg.png" style="width: 640rpx;height:420rpx;"></image>
				<view class="kudosicon">
					<image src="/static/icon/Kudos.png" v-if="false"></image>
					<image src="/static/icon/Kudos(1).png"></image>
				</view>
				<view class="nav">
					<view class="events">
						<text>IHG最受欢迎的酒店</text>
					</view>
					<view class="voteStatus">
							<text>1258票</text>
					</view>
				</view>
				<view class="foot">
					<text>投票</text>
				</view>
			</view>
		</view>
		
		<view class="rank-detail" v-if="isActive==1">

		</view>
		
		
		
		<uni-load-more :status="status" color="#CCCCCC" :content-text="contentText" />
		<view style="height:168rpx; background-color: #FFF; "></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rankList: [{
						title: '投票'
					},
					{
						title: '排行榜'
					}, {
						title: '活动介绍'
					}
				],
				areaList: [{
						title: '全部'
					},{
						title: '成都'
					}, {
						title: '重庆'
					} ,{
						title: '绵阳'
					},{
						title: '南充'
					}
				],
				//激活指定table菜单
				isActive: 0,
				status: 'noMore',
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '——  已经到底啦  ——'
				},
			}
		},
		methods: {
			//菜单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;
	}
	
	
	.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;
		}
	}
	
	//地区切换
	.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: 124rpx;
		height: 52rpx;
		background-color: #F1F1F1;
		border-radius: 26rpx;
		flex: none;
		display: flex;
		justify-content: center;
		align-items: center;
		
	}
	.areaTitle-item{
		width: 124rpx;
		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: -35rpx;
				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;
				}
			}

			.vote-detail-btn {
				margin-top: 88rpx;
				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;
		background-image: url('../../../static/icon/Kudosbg.png');
	}
	
	

	.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 {
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				top: 52rpx;
				right: 58rpx;
				border-radius: 50%;
				background: #FFFFFF;
				opacity: 0.84;

				@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: 4rpx;
					border: 2rpx solid #A18353;
					font-size: 30rpx;
					color:#A18353 ;
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.foot {
				margin-top: 20rpx;
				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>
