<template>
  <BaseContainer class="course-container">
		<view class="course-box">
			<NavBar :title="specialCate" />
			<template v-for="(item, index) in specialMenu">
				<view v-if="specialData[item.key] && specialData[item.key].length > 0" :key="index" class="special-content">
					<view class="special-content-title">
						{{ item.menuName }}
					</view>
					<square-style-course v-if="item.menuName === '录播课程' || item.menuName === '热门课程'" :specialList="specialData[item.key]" @detail="handleSpecialClick"></square-style-course>
					<offline-style-course v-if="item.menuName === '线下课堂'" :specialList="specialData[item.key]" @detail="handleSpecialClick"></offline-style-course>
					<view class="showMore flex" @click="loadMore(item.key)">加载更多<text class="more"></text> </view>
				</view>
			</template>
		</view>
  </BaseContainer>
</template>

<script>
	import { getSpecialCateData } from "@/api/special";
	import LineStyleCourse from '@/components/Course/lineStyleCourse.vue';
	import SquareStyleCourse from '@/components/Course/squareStyleCourse.vue';
	import OfflineStyleCourse from '@/components/Course/offlineStyleCourse.vue';
	
	export default {
		components: {
			LineStyleCourse,
			SquareStyleCourse,
			OfflineStyleCourse,
		},
		data() {
			return {
				specialCate: '',
				gradeId: '',
				subjectId: '',
				specialMenu: [
					{ menuName: '录播课程', key: 'video_list' },
					{ menuName: '热门课程', key: 'hot_course' },
					{ menuName: '线下课堂', key: 'offline_courses' },
				],
				specialData: [],
			};
		},
		onLoad(options) {
			this.specialCate = options.name;
			this.gradeId = options.gradeId;
			this.subjectId = options.subjectId;
			this.getSpecialCateData();
		},
		methods: {
			loadMore(key) {
				if (key === 'offline_courses') {
					uni.navigateTo({
					  url: `/pages/activity/activity_list?gradeId=${this.gradeId}&subjectId=${this.subjectId}`
					});
				} else {
					uni.navigateTo({
						url: `/pages/special/search?gradeId=${this.gradeId}&subjectId=${this.subjectId}&specialCate=0`
					})
				}
			},
			handleSpecialClick(item) {
			  const url = item.is_light
			    ? '/pages/special/single_details?id=' + item.id
			    : '/pages/special/details?id=' + item.id;
			
			  // this.$util.checkLogin(() => {
			  uni.navigateTo({
			    url,
			  });
			  // }, this.showLoginPage);
			},
			async getSpecialCateData() {
				try {
				  const { data, code, msg } = await getSpecialCateData({
						grade_id: this.gradeId,
						subject_id: this.subjectId,
					});
				
				  this.loading = false;
				  if (code != 200) {
				    uni.showToast({
				      title: msg,
				    });
				  } else {
						console.log(data, 646);
						this.specialData = { ...data };
						this.specialMenu.forEach(v => {
							 console.log(this.specialData, this.specialData[v.key]);
						})
				  }
				} catch (err) {
				  this.loading = false;
				  console.log(err);
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.course-container {
		background: #f4f4f4;
	}
	.course-box {
		padding-bottom: 40rpx;
	}
	.special-content {
		padding: 40rpx 30rpx 0;
		.special-content-title {
			padding-left: 23rpx;
			position: relative;
			color: #333;
			font-size: 34rpx;
			line-height: 34rpx;
			margin-bottom: 33rpx;
			&:before {
				content: '';
				background: linear-gradient(0deg, #24a9e1, #0f74bb);
				position: absolute;
				top: 50%;
				left: 0;
				transform: translateY(-50%);
				width: 8rpx;
				height: 26rpx;
				border-radius: 4rpx;
			}
		}
		.showMore {
			justify-content: center;
			color: #666;
			font-size: 24rpx;
			line-height: 24rpx;
			margin-top: 30rpx;
			text {
				transform: rotate(135deg);
				margin-left: 15rpx;
			}
		}
	}
</style>