<template>
	<view class="max_page ">
		<nav-bar :is_seat="false" :backgroundColor="bgOpacity"></nav-bar>
		<scroll-view :scroll-y="tabAct!=4" class="scroll detail-main" @scroll="scroll_fun">
			<view class="bg_div">
				<image-preview class="img_100 " :imgId="form.imgId" mode="widthFix"></image-preview>
				<!-- <image :src="form.imgId" mode="widthFix" class="back-image"></image> -->
			</view>
			<view class="back_div" @click="common.navigateBack()">
				<view class="back-icon"></view>
			</view>
			<view class="detail-body">
				<view class="head-title font_pf">
					<view class="title-text">{{ form.crsName || '' }}</view>
					<view class="title-num">
						<view class="num-item">
							<image class="title-icon" src="/src/static/images/courseDetail/zhishidian.png"
								mode="widthFix"></image>
							<view class="mr-10">知识点</view>
							<view class="c-000">{{ form.pgrphNum || 0 }}</view>
						</view>
						<view class="num-item">
							<image class="title-icon" src="/src/static/images/courseDetail/yixue.png"
								mode="widthFix"></image>
							<view class="mr-10">已学</view>
							<view class="c-000">{{ form.styParaGraphNum || 0 }}</view>
						</view>
					</view>
				</view>
				<view class="body-box">
					<view class="body-tab">
						<uv-tabs class="font_pf" :current="tabAct" :list="tabList" @change="tabSwitch"
							:scrollable="false" line-color="#0066FF"
							:active-style="{ color: '#323E57', 'font-weight': 600, 'font-size': '30rpx' }"
							:inactive-style="{ color: '#666666', 'font-size': '30rpx' }"></uv-tabs>
					</view>

					<view class="course-info" v-if="tabAct == 0">
						<introduceVue v-model="form"></introduceVue>
					</view>
					<view class="point" v-if="tabAct == 1">
						<knowledge v-model="form" @toStudyPrgh="toStudyPrgh"></knowledge>
					</view>
					<view class="evaluate" v-if="tabAct == 2">
						<comment ref="commentRef" :crsNum="form.crsNum" :imgId="form.imgId"></comment>
					</view>

				</view>
			</view>

		</scroll-view>
		<view class="btn-box btn-box-height font_pf" v-if="[0,1].includes(tabAct)">

			<uv-button type="primary"
				@click="common.navigateTo('/pages/course/study?crsNum='+crsNum+'&crsId='+form.crsId + '&imgId=' + form.imgId)">去学习</uv-button>
			<uv-button type="primary">去练习</uv-button>
			<uv-button type="primary">去考试</uv-button>

			<!-- 	<template v-if="tabAct == 2">
			<uv-button type="primary" class="send_evaluate"
				@click="common.navigateTo('/pages/courseDetail/submit?crsNum='+crsNum)">发布评价</uv-button>
		</template> -->

		</view>
	</view>


</template>

<script setup>
	import {
		reactive,
		ref,
		computed, 
		onMounted
	} from 'vue';
	
	import {
		onShow,
		onLoad,
		onUnload
	} from '@dcloudio/uni-app'
	import {
		getCourseDetailApi
	} from '@/api/courseDetail.js';
	
	import common from '@/common/common';
	import introduceVue from './components/introduce.vue';
	import knowledge from './components/knowledge.vue';
	import comment from './components/comment.vue';

	// tab栏
	const tabList = ref([{
		name: '课程介绍'
	}, {
		name: '知识点'
	}, {
		name: '评价'
	}]);
	
	const commentRef = ref(null);
	const form = ref({});
	const crsNum = ref('');
	const tabAct = ref(0);
	const scrollTop = ref(0);
	const tabSwitch = (item) => {
		tabAct.value = item.index;
	};
	const getData = async () => {
		const {
			body
		} = await getCourseDetailApi({
			crsNum: crsNum.value
		});
		form.value = body;
	};
	const toStudyPrgh = (info) => {
		common.navigateTo('/pages/course/study?crsNum=' + crsNum.value + '&crsId=' + form.value.crsId + '&pgrphId=' +
			info.pgrphId+ '&imgId=' + form.imgId)
	}
	
	const bgOpacity = computed(() => {
		if (scrollTop.value <= 20) return `rgba(255,255,255,0)`;
		const opacity =  Math.min(1, (scrollTop.value - 20) / 80);
		return `rgba(255,255,255,${opacity})`;
	});
	const scroll_fun = (e) => {
		scrollTop.value = e.detail.scrollTop
	}
	onMounted(() => {
		uni.$on('refresh_comment_data', () => {
			commentRef.value?.getData();
			tabAct.value = 2
		})
	})
	onLoad((params) => {
		crsNum.value = params.crsNum;
	});
	onShow(()=>{
		getData();
	})
	onUnload(() => {
		uni.$off('refresh_comment_data')
	});
</script>

<style lang="scss" scoped>
	.back_div {
		margin-right: 10rpx;
		position: fixed;
		left: 46rpx;
		top: 64rpx;

		.back-icon {
			position: relative;
			width: 40rpx;
			height: 40rpx;
			cursor: pointer;
		}

		.back-icon::before,
		.back-icon::after {
			content: '';
			position: absolute;
			transition: all 0.3s ease;
		}

		.back-icon::after {
			top: 25%;
			left: 25%;
			width: 40%;
			height: 40%;
			border-top: 4rpx solid #FFFFFF;
			border-left: 4rpx solid #FFFFFF;
			transform: rotate(-45deg);
		}
	}

	.detail-main {
		background-color: #f5f5f5;
		position: relative;
		height: 100%;
		overflow: hidden;
	}

	.scroll {
		height: 100vh;
	}

	.detail-body {
		box-sizing: border-box;
		// min-height: calc(100vh - 256rpx);
		position: absolute;
		top: 256rpx;
		border-radius: 23rpx 23rpx 0rpx 0rpx;
		width: 100%;
		display: flex;
		flex-direction: column;

	}

	.body-head {
		height: 460rpx;
		background-color: red;
	}

	.bg_div {
		position: fixed;
		width: 100%;
		width: calc(100% + 4rpx);
		left: -4rpx;
		.back-image {

			width: 100%;
		}
	}


	.head-title {
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		// height: 162rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		padding-top: 36rpx;
		padding-left: 42rpx;
		padding-bottom: 24rpx;
	}

	.title-text {
		font-size: 34rpx;
		color: #333333;
		font-weight: 600;
		margin-bottom: 20rpx;
	}

	.title-icon {
		width: 22rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.title-num {
		display: flex;
	}

	.body-box {
		background-color: #f5f5f5;
		flex: 1;
		padding-left: 16rpx;
		padding-right: 16rpx;
		padding-top: 20rpx;
		padding-bottom: 245rpx;
	}

	.body-tab {
		background-color: #ffffff;
		border-radius: 22rpx;
		height: 92rpx;
		// padding-top: 22rpx;
		padding-bottom: 22rpx;
		margin-bottom: 24rpx;
		// :deep(.uv-tabs__wrapper__nav__line) {
		// 	bottom: 10rpx;
		// }
	}

	.btn-box-height {
		height: 187rpx;
	}

	.btn-box {
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		padding-top: 37rpx;
		justify-content: space-around;
		background-color: #ffffff;
		// background-color: red;
		border: 2rpx solid #E5E5E5;

		:deep(.uv-button-wrapper) {
			flex: 1;

			&.send_evaluate {
				margin: 0 60rpx;
			}

			&:not(.send_evaluate) {
				margin: 0 30rpx;
			}

			.uv-button {
				border-radius: 14rpx;
				width: 100%;
				height: 92rpx;
			}
		}
	}

	.num-item {
		display: flex;
		align-items: center;
		font-size: 30rpx;
		margin-right: 30rpx;
		color: #666666;
	}

	.point {
		width: 100%;
	}

	.learn {
		color: #1dd17a;
	}

	.unlearn {
		color: #666666;
	}

	.c-000 {
		font-weight: 600;
		color: #000000;
	}
</style>