<template>
	<view class="venue-navbar">
		<view class="navbar-list" v-for="(item,index) in navbarList" :key="index" @click="select_nav(index)">
			<view class="list-text">{{item.text}}</view>
			<image :src="sel_index==index?'/static/notsel-icon.png':'/static/select-icon.png'" mode=""></image>
		</view>
	</view>
	<view style="height: 70rpx;"></view>
	<view class="content">
		<view class="select-btn">
			<view :class="sel_btn===index?'distance':'score'" v-for="(item,index) in selectList" :key="index" @click="select_btn(index)">{{item}}</view>
		</view>
		<view class="venue-card" v-for="item in 10" @click="gotoDetail">
			<view class="venues-image">
				<image src="https://img.keaitupian.cn/newupload/08/1629449018344288.jpg" mode=""></image>
				<view class="e-badge">
					<image src="/src/static/events-icon1.png" mode="widthFix"></image>
					<view class="text">今日有票</view>
				</view>
			</view>
			<view class="venues-info">
				<view class="venues-name">体育综合训练馆(观山湖店)</view>
				<view class="venues-comments">
					<view class="star">
						<zzx-icon name="star" size="12"></zzx-icon>
						<text>4.8</text>
					</view>
					<view class="comment">
						37条评论
					</view>
				</view>
				<view class="venues-address">
					观山湖区万达广场 | 2.2km
				</view>
				<view class="venues-type">
					<view class="type-tags" v-for="item in 4">
						羽毛球
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	const navbarList = ref([{
		text: '全部'
	}, {
		text: '学校'
	}, {
		text: '体育馆'
	}]);
	const selectList=ref(['距离','评分'])
	const sel_index = ref(0);
	const sel_btn=ref(0);
	
	const select_btn=(i)=>{
		sel_btn.value=i
	}
	const select_nav = (i) => {
		sel_index.value = i
	}
	
	const gotoDetail=()=>{
		if(sel_index.value===0||sel_index.value===1){
			console.log(sel_index.value);
			uni.navigateTo({
				url:'/pages/index/detail/index'
			})
		}else{
			console.log(sel_index.value);
			uni.navigateTo({
				url:'/pages/index/gymDetail/index'
			})
		}
	}
</script>

<style lang="less" scoped>
	.venue-navbar {
		box-sizing: border-box;
		padding: 0rpx 20rpx;
		padding-bottom: 30rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-around;
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 1000;
		.navbar-list {
			display: flex;
			align-items: center;
			gap: 10rpx;

			.list-text {
				font-weight: bold;
				font-size: 28rpx;
				color: #222222;
			}

			&>image {
				width: 30rpx;
				height: 30rpx;
			}
		}
	}
.select-btn{
	display: flex;
	align-items: center;
	gap: 20rpx;
	margin-top: 20rpx;
	.distance{
		width: 92rpx;
		height: 48rpx;
		background: #222222;
		border-radius: 8rpx;
		font-size: 28rpx;
		color: #C8FF0C;
		line-height:48rpx;
		text-align: center;
	}
	.score{
		width: 92rpx;
		height: 48rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		font-size: 28rpx;
		color: #AAAAAA;
		height: 48rpx;
		line-height:48rpx;
		text-align: center;
	}
}
	.venue-card {
		margin-top: 20rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		padding: 20rpx;
		display: flex;
		align-items: center;
		gap: 20rpx;

		.venues-image {
			position: relative;

			&>image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 32rpx;
			}

				.e-badge {
					position: absolute;
					top: -4rpx;
					left: -20rpx;
					&>image {
						width: 114rpx;
					}

					.text {
						position: absolute;
						top: 14rpx;
						left: 20rpx;
						font-size: 20rpx;
						color: #222222;
					}
				}
		}

		.venues-info {
			.venues-name {
				font-weight: 800;
				font-size: 32rpx;
				color: #222222;
			}

			.venues-comments {
				margin-top: 16rpx;
				display: flex;
				align-items: center;
				gap: 10px;

				.star {
					display: flex;
					align-items: center;
					gap: 8rpx;
					font-size: 24rpx;
					color: rgb(253, 209, 67);
				}

				.comment {
					font-size: 24rpx;
					color: #AAAAAA;
				}
			}

			.venues-address {
				margin-top: 16rpx;
				font-size: 24rpx;
				color: #222222;
			}

			.venues-type {
				display: flex;
				align-items: center;
				gap: 10rpx;
				margin-top: 16rpx;

				.type-tags {
					width: 92rpx;
					height: 36rpx;
					background: #F5F5F5;
					border-radius: 8rpx;
					font-size: 22rpx;
					color: #AAAAAA;
					text-align: center;
					line-height: 36rpx;
				}
			}
		}
	}
</style>
