<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+100)+'px'}"></view>
	</view>
	<view class="content">
		<view class="i-info-card">
			<view class="i-userinfo">
				<view class="user-header">
					<image class="header-img" src="https://img.keaitupian.cn/newupload/08/1629449018344288.jpg" mode=""></image>
					<image class="header-badge" src="/src/static/badge.png" mode=""></image>
				</view>
				<view style="width: 220rpx;"></view>
				<view class="user-name">
					<view class="name-box">
						<view class="name">詹姆四</view>
						<view class="type">篮球</view>
					</view>
					<view class="sign" @click="to_certifying">
						<text class="textHidden">已实名，无犯罪记录，健康证，足球裁判...</text>
						<zzx-icon name="ashRight" size="12"></zzx-icon>
					</view>
				</view>
			</view>
			<view class="i-sign">
				运动执教，点燃每一个篮球梦
			</view>
			<view class="i-skill">
				擅长：体适能、足球、其他运动培训。体适能、足球、其他
				运动培训。体适能、足球、其他运动培训。
			</view>
			<view class="i-data-card">
				<view class="item-data">
					<view class="text">好评率</view>
					<view class="num">99%</view>
				</view>
				<view class="item-data">
					<view class="text">订单率</view>
					<view class="num">1659</view>
				</view>
				<view class="item-data">
					<view class="text">授课人数</view>
					<view class="num">9568</view>
				</view>
			</view>
		</view>
		<view class="i-course-list">
			<view class="i-title">课程</view>
			<view class="i-course-card">
				<view class="card-tips">
					<view class="tips-icon">!</view>
					<view class="tips-text">全平台每种类型的运动课程只可免费试听一次</view>
				</view>
				<view class="card-list" v-for="item in 4">
					<image class="card-img" src="https://img.keaitupian.cn/newupload/08/1629449018344288.jpg" mode=""></image>
					<view class="i-list">
						<view class="list-name">
							<view class="name textHidden">1对1篮球30分钟室内钟室内</view>
							<view class="num">年售20</view>
						</view>
						<view class="address">上课地点：观山湖区第十二小学 | 2.2km</view>
						<view class="list-price">
							<view class="left-price">￥58.9</view>
							<view class="right-price">￥80.9</view>
						</view>
						<view class="sale-data">已售33 98%好评</view>
						<view class="course-num">
							<view class="number">6课时 05.28-08.18</view>
							<view class="i-btn">抢购</view>
						</view>
						<view style="height: 24rpx;"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="appraise-card">
			<view class="appraise-title">
				<view class="title">评价</view>
				<view class="comments">
					<view class="a-star">
						<zzx-icon name="star" size="10"></zzx-icon>
						<text>4.8</text>
					</view>
					<view class="a-text">| 37人评论</view>
				</view>
			</view>
			<view class="appraise-info" v-for="item in 5">
				<view class="a-user-info">
					<view class="info">
						<image src="https://img.keaitupian.cn/newupload/08/1629449018344288.jpg" mode=""></image>
						<view class="name">詹姆斯</view>
					</view>
					<view class="time">03-20</view>
				</view>
				<view class="a-score">
					<text>4.0</text>
					<uni-rate :readonly="true" size="16" :value="2" />
				</view>
				<view class="a-content">
					詹姆四对孩子很有耐心，也非常照顾小朋友的情绪，
					值得推荐！
				</view>
				<scroll-view class="scroll-view_H" scroll-x="true" :show-scrollbar="false">
					<view class="scroll-view-item_H uni-bg-red" v-for="item in 5">
						<image src="https://img.keaitupian.cn/newupload/08/1629449018344288.jpg" mode=""></image>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, onMounted } from 'vue';
	import { onLoad, onPageScroll } from '@dcloudio/uni-app';
	import { RouterUtils } from '@/utils/util';
	import zzxNavbar from '@/components/zzx-navbar/zzx-navbar.vue';
	const statusBarHeight = ref(0);
	onMounted(() => {
		get_navheight()
	})
	const get_navheight = () => {
		const systemInfo = uni.getSystemInfoSync();
		statusBarHeight.value = systemInfo.statusBarHeight || 0;
	}
	
	const to_certifying=()=>{
		uni.navigateTo({
			url:'/pages/index/certifyingDetail/index'
		})
	}
</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;
		}
	}
	.i-info-card{
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		.i-userinfo{
			display: flex;
			align-items: center;
			.user-header{
				position: relative;
				.header-img{
					position: absolute;
					top: -110rpx;
					width: 160rpx;
					height: 160rpx;
					border-radius:50%;
				}
				.header-badge{
					position: absolute;
					left:120rpx;
					width: 36rpx;
					height: 36rpx;
				}
			}
			.user-name{
				.name-box{
					display: flex;
					align-items: center;
					gap: 20rpx;
					.name{
						font-weight: bold;
						font-size: 32rpx;
						color: #222222;
					}
					.type{
						font-size: 28rpx;
						color: #AAAAAA;
					}
				}
				.sign{
					margin-top: 20rpx;
					width: 430rpx;
					display: flex;
					align-items: center;
					gap: 10rpx;
					font-size: 24rpx;
					color: #AAAAAA;
				}
			}
		}
		.i-sign{
			margin-top: 24rpx;
			font-weight: bold;
			font-size: 28rpx;
			color: #222222;
		}
		.i-skill{
			margin-top: 24rpx;
			font-size: 24rpx;
			color: #222222;
		}
		.i-data-card{
			padding: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			background: #F9F9F9;
			border-radius: 32rpx;
			margin-top: 20rpx;
			.item-data{
				.text{
					font-size: 24rpx;
					color: #AAAAAA;
				}
				.num{
					margin-top: 16rpx;
					font-weight: bold;
					font-size: 32rpx;
					color: #222222;
				}
			}
		}
	}
	.i-course-list{
		margin-top: 20rpx;
		.i-title{
			font-weight: 800;
			font-size: 32rpx;
			color: #222222;
		}
		.i-course-card{
			background: #FFFFFF;
			border-radius: 32rpx;
			padding: 20rpx;
			margin-top: 20rpx;
			.card-tips{
				display: flex;
				align-items: center;
				gap: 12rpx;
				font-size: 24rpx;
				color: #AAAAAA;
				.tips-icon{
					width: 24rpx;
					height: 24rpx;
					border-radius: 50%;
					background: #FFA347;
					font-size: 18rpx;
					color: #fff;
					text-align: center;
					line-height: 24rpx;
				}
			}
			.card-list{
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				gap: 20rpx;
				.card-img{
					width: 200rpx;
					height: 200rpx;
					border-radius: 32rpx;
				}
				.i-list{
					border-bottom: 1rpx solid #F0F0F0;
					.list-name{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.name{
							width: 360rpx;
							font-weight: 800;
							font-size: 32rpx;
							color: #222222;
						}
						.num{
							font-size: 22rpx;
							color: #AAAAAA;
						}
					}
					.address{
						width:440rpx;
						margin-top: 10rpx;
						font-size: 22rpx;
						color: #AAAAAA;
					}
					.list-price{
						display: flex;
						align-items: center;
						gap: 20rpx;
						margin-top: 10rpx;
						.left-price{
							font-weight: bold;
							font-size: 28rpx;
							color: #FB5B5B;
						}
						.right-price{
							font-size: 22rpx;
							color: #AAAAAA;
						}
					}
					.sale-data{
						margin-top: 10rpx;
						font-size: 24rpx;
						color: #AAAAAA;
					}
					.course-num{
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 10rpx;
						.number{
							font-size: 24rpx;
							color: #AAAAAA;
						}
						.i-btn{
							width: 152rpx;
							height: 48rpx;
							background: #C8FF0C;
							border-radius: 8rpx;
							font-weight: bold;
							font-size: 28rpx;
							color: #222222;
							text-align: center;
							line-height: 48rpx;
						}
					}
				}
			}
		}
	}
	.appraise-card {
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		margin-top: 20rpx;
	
		.appraise-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
	
			.title {
				font-weight: 800;
				font-size: 32rpx;
				color: #222222;
			}
	
			.comments {
				display: flex;
				align-items: center;
				gap: 16rpx;
	
				.a-star {
					font-size: 24rpx;
					color: #FDD143;
				}
	
				.a-text {
					font-size: 24rpx;
					color: #AAAAAA;
				}
			}
		}
	
		.appraise-info {
			margin-top: 20rpx;
	
			.a-user-info {
				display: flex;
				align-items: center;
				justify-content: space-between;
	
				.info {
					display: flex;
					align-items: center;
					gap: 20rpx;
	
					&>image {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
					}
	
					.name {
						font-weight: bold;
						font-size: 24rpx;
						color: #222222;
					}
				}
	
				.time {
					font-size: 24rpx;
					color: #AAAAAA;
				}
			}
	
			.a-score {
				font-size: 24rpx;
				color: #AAAAAA;
				display: flex;
				align-items: center;
				gap: 20rpx;
				margin-top: 20rpx;
			}
	
			.a-content {
				margin-top: 20rpx;
				font-size: 28rpx;
				color: #222222;
			}
	
			.scroll-view_H {
				white-space: nowrap;
				width: 100%;
				height: 220rpx;
				margin-top: 20rpx;
				border-bottom: 1rpx solid #F0F0F0;
					.scroll-view-item_H {
						display: inline-block;
						text-align: center;
						margin-right: 14rpx;
						&>image{
							width: 202rpx;
							height: 200rpx;
							background: #D8D8D8;
							border-radius: 32rpx;
						}
					}
			}
		}
	}
</style>