<template>
	<zzx-navbar :scrollable="true" :back="true" title="详情"></zzx-navbar>
	<view class="detail-header">
		<image class="header-bg"
			src="https://ts1.tc.mm.bing.net/th/id/R-C.a8553f142638e741396e386b43c2bca7?rik=dzSGk6XRsxAAsQ&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50062%2f5890.jpg_wh1200.jpg&ehk=BgxiqxvzoNQd0pZHWV4VPOMbYgqM76WDMt8RDzCjoYY%3d&risl=&pid=ImgRaw&r=0"
			mode="widthFix"></image>
		<view class="back-icon" :style="{paddingTop:(statusBarHeight+10)+'px'}" @click="RouterUtils.back()">
			<zzx-icon name="back"></zzx-icon>
		</view>
		<view :style="{height:(statusBarHeight+70)+'px'}"></view>
		<scroll-view class="header-swiper content" scroll-x="true" :show-scrollbar="false">
			<view class="swiper-inner">
				<video src="https://vod.v.jstv.com/2025/05/09/JSTV_JSGGNEW_1746791056693_2lBi96K_114.mp4"></video>
				<image v-for="item in 4"
					src="https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650"
					mode=""></image>
			</view>
		</scroll-view>
	</view>
	<view :style="{height:(statusBarHeight+34)+'px'}"></view>
	<view class="header-info">
		<view class="venue-name">
			<view class="name">观山湖区第十二小学</view>
			<view class="star">
				<zzx-icon name="star" size="12"></zzx-icon>
				<text>4.8</text>
			</view>
		</view>
		<view class="open-time">
			<view class="open-status">开放中</view>
			<view class="time">
				<view class="">教学日 10：00-22：00</view>
				<view class="">非教学日 10：00-22：00</view>
			</view>
		</view>
		<view class="venues-tags">
			<view class="tags-box">
				<view class="tags" v-for="item in 4">无烟环境</view>
			</view>
			<view class="more-info">
				<text>信息/设备设施</text>
				<zzx-icon name="ashRight" size="10"></zzx-icon>
			</view>
		</view>
		<view class="venues-address">
			<view class="address">
				<zzx-icon name="location" size="14"></zzx-icon>
				<text>印象城购物中心6楼</text>
			</view>
			<view class="nav-phone">
				<view class="nav">
					<zzx-icon name="navigation" size="14"></zzx-icon>
					<view class="">导航</view>
				</view>
				<view class="phone">
					<zzx-icon name="phone" size="14"></zzx-icon>
					<view class="">电话</view>
				</view>
			</view>
		</view>
	</view>
	<view class="content">
		<uv-sticky offset-top="74">
			<view class="detail-select">
				<view :class="sel_index===index?'select-text':'notsel-text'" v-for="(item,index) in selectList" :key="index"
					@click="sel_tab(index)">
					<text>{{item}}</text>
				</view>
			</view>
		</uv-sticky>
			<view class="toggle" v-if="sel_index===0">
				<venue/>
			</view>
			<view class="toggle" v-else-if="sel_index===1">
				<course/>
			</view>
			<view class="toggle" v-else-if="sel_index===2">
				<instructor/>
			</view>
			<view class="toggle" v-else>
				<appraise/>
			</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, onMounted } from 'vue';
	import { RouterUtils } from '@/utils/util';
	import zzxNavbar from '@/components/zzx-navbar/zzx-navbar.vue';
	import venue from './components/venue.vue';
	import course from './components/course.vue';
	import instructor from './components/instructor.vue';
	import appraise from './components/appraise.vue';
	import { onLoad, onPageScroll } from '@dcloudio/uni-app';
	const statusBarHeight = ref(0);
	const selectList = ref(['场地', '课程', '教练', '评价']);
	const sel_index = ref(0)
	onMounted(() => {
		get_navheight()
	})
	const get_navheight = () => {
		const systemInfo = uni.getSystemInfoSync();
		statusBarHeight.value = systemInfo.statusBarHeight || 0;
	}

	const sel_tab = (i) => {
		sel_index.value = i
	}
</script>

<style lang="less" scoped>
	.detail-header {
		position: relative;

		.header-bg {
			position: absolute;
			width: 100%;
			z-index: -100;
		}

		.back-icon {
			position: absolute;
			left: 20rpx;
			z-index: 9999;
		}

		.header-swiper {
			position: absolute;
			width: 740rpx;
			white-space: nowrap;
			overflow: hidden;

			/* 隐藏滚动条 */
			/deep/ ::-webkit-scrollbar {
				display: none;
				width: 0 !important;
				height: 0 !important;
				background: transparent;
			}

			.swiper-inner {
				display: inline-flex;
				align-items: center;
				gap: 14rpx;
				height: 100%;

				&>video,
				&>image {
					width: 220rpx;
					height: 126rpx;
					border-radius: 16rpx;
					flex-shrink: 0;
				}
			}
		}
	}

	.header-info {
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 0rpx 0rpx;

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

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

			.star {
				display: flex;
				align-items: center;
				gap: 10rpx;
				font-size: 28rpx;
				color: #FDD143;
			}
		}

		.open-time {
			display: flex;
			align-items: center;
			gap: 20rpx;
			margin-top: 20rpx;

			.open-status {
				font-size: 24rpx;
				color: #4DD951;
			}

			.time {
				display: flex;
				align-items: center;
				gap: 20rpx;
				font-size: 24rpx;
				color: #AAAAAA;
			}
		}

		.venues-tags {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20rpx;

			.tags-box {
				display: flex;
				flex-wrap: wrap;
				gap: 10rpx;

				.tags {
					padding: 8rpx 16rpx;
					font-size: 24rpx;
					color: #222222;
					background: #F5F5F5;
					border-radius: 8rpx;
				}
			}

			.more-info {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				gap: 6rpx;
				color: #AAAAAA;
			}
		}

		.venues-address {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20rpx;
			background: #F9F9F9;
			border-radius: 16rpx;
			padding: 20rpx;

			.address {
				display: flex;
				align-items: center;
				gap: 10rpx;
				font-weight: bold;
				font-size: 24rpx;
				color: #222222;
			}

			.nav-phone {
				display: flex;
				align-items: center;
				gap: 20rpx;
				text-align: center;

				.nav,
				.phone {
					font-size: 22rpx;
					color: #222222;
				}
			}
		}
	}

	.detail-select {
		display: flex;
		align-items: center;
		gap: 60rpx;
		margin-top: 20rpx;
		height: 80rpx;
		background-color:#F6F6F6;
		.select-text,
		.notsel-text {
			position: relative;
			transition: all 0.3s ease;
		}

		.select-text {
			font-weight: 800;
			font-size: 32rpx;
			color: #222222;
			position: relative;
		}

		.notsel-text {
			font-size: 32rpx;
			color: #AAAAAA;
		}

		.select-text::after {
			position: absolute;
			content: '';
			width: 40rpx;
			height: 20rpx;
			background-color: #C8FF0C;
			border-radius: 4rpx;
			left: 050%;
			transform: translateX(-50%);
			bottom: -16rpx;
			transition: all 0.3s ease;
			opacity: 1;
		}

		.notsel-text::after {
			content: '';
			position: absolute;
			left: 50%;
			bottom: -16rpx;
			width: 0;
			height: 20rpx;
			background-color: #C8FF0C;
			border-radius: 4rpx;
			transform: translateX(-50%);
			opacity: 0;
			transition: all 0.3s ease;
		}
	}
</style>