<template>
  <BaseContainer>
		<view class="course-box">
			<NavBar :title="specialCate" />
			<template v-if="specialData.length > 0">
				<view v-for="(item, index) in specialData" :key="index" class="special-content">
					<view class="special-content-title">
						{{ item.title }}
					</view>
					<line-style-course v-if="item.type === 1" :specialList="item.list" @detail="handleSpecialClick"></line-style-course>
					<square-style-course v-if="item.type === 2" :specialList="item.list" @detail="handleSpecialClick"></square-style-course>
					<offline-style-course v-if="item.type === 3" :specialList="item.list" @detail="handleSpecialClick"></offline-style-course>
					<view v-if="item.total > item.list.length" class="showMore flex" @click="loadMore(item.title)">加载更多<text>></text> </view>
				</view>
			</template>
		</view>
  </BaseContainer>
</template>

<script>
	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: '四六级考试',
				specialData: [
					{
						title: '我的课程',
						type: 1,
						total: 6,
						list: [
							{
								"is_pink": 0,
								"pink_money": "49.00",
								"label": [
									"满分数学"
								],
								"id": 92,
								"title": "用编程语言探索科学奥秘，数据科学与机器学习详细攻略",
								"abstract": "重视这件事，满分数学赢中考",
								"image": "http://cremb-zsff.oss-cn-beijing.aliyuncs.com/4a002202102051439139927.jpg?x-oss-process=image/resize,m_lfit,h_254,w_690",
								"type": 4,
								"money": "0.00",
								"is_light": 0,
								"light_type": 0,
								"pay_type": 0,
								"count": 19,
								"progress": '第三节课程第三节课程第三节课程第三节课程'
							},
							{
								"is_pink": 0,
								"pink_money": "0.01",
								"label": [
									"阅读方法"
								],
								"id": 132,
								"title": "高中语文词汇成语古诗阅读",
								"abstract": "高中语文词汇词根",
								"image": "http://cremb-zsff.oss-cn-beijing.aliyuncs.com/ed3ba202103301511237923.jpg?x-oss-process=image/resize,m_lfit,h_254,w_690",
								"type": 1,
								"money": "0.00",
								"is_light": 0,
								"light_type": 0,
								"pay_type": 0,
								"count": 6,
								"progress": '第三节课程第三节课程第三节课程第三节课程'
							},
							{
								"is_pink": 0,
								"pink_money": "2.00",
								"label": [
									"女神七宝茶"
								],
								"id": 129,
								"title": "轻松掌握多国语言，托福雅思助你完成出国留学梦",
								"abstract": "托福雅思助你完成出国梦",
								"image": "http://cremb-zsff.oss-cn-beijing.aliyuncs.com/b3f4c202102051439113750.jpg?x-oss-process=image/resize,m_lfit,h_254,w_690",
								"type": 3,
								"money": "28880.00",
								"is_light": 0,
								"light_type": 0,
								"pay_type": 1,
								"count": 3,
								"progress": '第三节课程第三节课程第三节课程第三节课程'
							}
						]
					},
					{
						title: '热门课程',
						type: 2,
						total: 10,
						list: [
							{
								"is_pink": 0,
								"pink_money": "49.00",
								"label": [
									"满分数学"
								],
								"id": 92,
								"title": "用编程语言探索科学奥秘，数据科学与机器学习详细攻略",
								"abstract": "重视这件事，满分数学赢中考",
								"image": "http://cremb-zsff.oss-cn-beijing.aliyuncs.com/4a002202102051439139927.jpg?x-oss-process=image/resize,m_lfit,h_254,w_690",
								"type": 4,
								"money": "0.00",
								"is_light": 0,
								"light_type": 0,
								"pay_type": 0,
								"count": 19
							},
							{
								"is_pink": 0,
								"pink_money": "0.01",
								"label": [
									"阅读方法"
								],
								"id": 132,
								"title": "高中语文词汇成语古诗阅读",
								"abstract": "高中语文词汇词根",
								"image": "http://cremb-zsff.oss-cn-beijing.aliyuncs.com/ed3ba202103301511237923.jpg?x-oss-process=image/resize,m_lfit,h_254,w_690",
								"type": 1,
								"money": "0.00",
								"is_light": 0,
								"light_type": 0,
								"pay_type": 0,
								"count": 6
							},
							{
								"is_pink": 0,
								"pink_money": "2.00",
								"label": [
									"女神七宝茶"
								],
								"id": 129,
								"title": "轻松掌握多国语言，托福雅思助你完成出国留学梦",
								"abstract": "托福雅思助你完成出国梦",
								"image": "http://cremb-zsff.oss-cn-beijing.aliyuncs.com/b3f4c202102051439113750.jpg?x-oss-process=image/resize,m_lfit,h_254,w_690",
								"type": 3,
								"money": "28880.00",
								"is_light": 0,
								"light_type": 0,
								"pay_type": 1,
								"count": 3
							}
						]
					},
					{
						title: '线下课堂',
						type: 3,
						total: 3,
						list: [
							{
								"is_pink": 0,
								"label": [
									"满分数学"
								],
								"id": 92,
								"title": "用编程语言探索科学奥秘，数据科学与机器学习详细攻略",
								"image": "http://cremb-zsff.oss-cn-beijing.aliyuncs.com/4a002202102051439139927.jpg?x-oss-process=image/resize,m_lfit,h_254,w_690",
								"enrollTime": '6月21日-6月22日',
								"advertTime": '6月21日-6月22日',
								"advertAddress": '江苏省南京市新世纪广场',
							},
							{
								"is_pink": 0,
								"pink_money": "0.01",
								"label": [
									"阅读方法"
								],
								"id": 132,
								"title": "高中语文词汇成语古诗阅读",
								"abstract": "高中语文词汇词根",
								"image": "http://cremb-zsff.oss-cn-beijing.aliyuncs.com/ed3ba202103301511237923.jpg?x-oss-process=image/resize,m_lfit,h_254,w_690",
								"type": 1,
								"money": "0.00",
								"is_light": 0,
								"light_type": 0,
								"pay_type": 0,
								"count": 6,
								"enrollTime": '6月21日-6月22日',
								"advertTime": '6月21日-6月22日',
								"advertAddress": '江苏省南京市新世纪广场',
							},
							{
								"is_pink": 0,
								"pink_money": "2.00",
								"label": [
									"女神七宝茶"
								],
								"id": 129,
								"title": "轻松掌握多国语言，托福雅思助你完成出国留学梦",
								"abstract": "托福雅思助你完成出国梦",
								"image": "http://cremb-zsff.oss-cn-beijing.aliyuncs.com/b3f4c202102051439113750.jpg?x-oss-process=image/resize,m_lfit,h_254,w_690",
								"type": 3,
								"money": "28880.00",
								"is_light": 0,
								"light_type": 0,
								"pay_type": 1,
								"count": 3,
								"enrollTime": '6月21日-6月22日',
								"advertTime": '6月21日-6月22日',
								"advertAddress": '江苏省南京市新世纪广场',
							}
						]
					},
				],
			};
		},
		onLoad(options) {
			this.specialCate = options.name;
		},
		methods: {
			loadMore(title) {
				this.specialData.forEach(v => {
					if (v.title === title) {
						const arr = [
							{
								"is_pink": 0,
								"pink_money": "49.00",
								"label": [
									"满分数学"
								],
								"id": 93,
								"title": "用编程语言探索科学奥秘，数据科学与机器学习详细攻略",
								"abstract": "重视这件事，满分数学赢中考",
								"image": "http://cremb-zsff.oss-cn-beijing.aliyuncs.com/4a002202102051439139927.jpg?x-oss-process=image/resize,m_lfit,h_254,w_690",
								"type": 4,
								"money": "0.00",
								"is_light": 0,
								"light_type": 0,
								"pay_type": 0,
								"count": 19,
								"progress": '第三节课程第三节课程第三节课程第三节课程'
							},
							{
								"is_pink": 0,
								"pink_money": "0.01",
								"label": [
									"阅读方法"
								],
								"id": 133,
								"title": "高中语文词汇成语古诗阅读",
								"abstract": "高中语文词汇词根",
								"image": "http://cremb-zsff.oss-cn-beijing.aliyuncs.com/ed3ba202103301511237923.jpg?x-oss-process=image/resize,m_lfit,h_254,w_690",
								"type": 1,
								"money": "0.00",
								"is_light": 0,
								"light_type": 0,
								"pay_type": 0,
								"count": 6,
								"progress": '第三节课程第三节课程第三节课程第三节课程'
							},
							{
								"is_pink": 0,
								"pink_money": "2.00",
								"label": [
									"女神七宝茶"
								],
								"id": 120,
								"title": "轻松掌握多国语言，托福雅思助你完成出国留学梦",
								"abstract": "托福雅思助你完成出国梦",
								"image": "http://cremb-zsff.oss-cn-beijing.aliyuncs.com/b3f4c202102051439113750.jpg?x-oss-process=image/resize,m_lfit,h_254,w_690",
								"type": 3,
								"money": "28880.00",
								"is_light": 0,
								"light_type": 0,
								"pay_type": 1,
								"count": 3,
								"progress": '第三节课程第三节课程第三节课程第三节课程'
							}
						];
						v.list = [...v.list, ...arr];
					}
				})
			},
			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);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.course-box {
		padding-bottom: 40rpx;
		background: #f4f4f4;
	}
	.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(90deg);
				margin-left: 15rpx;
			}
		}
	}
</style>