<template>
	<view class="web_box">
		<u-navbar height="44" @rightClick="rightClick" :fixed="false" :autoBack="true" bgColor="rgba(0,0,0,0)">
			<view class="u-nav-slot" slot="left">
				<u--image src="/static/images/index/search.png" width="27px" height="28px" @click="search"></u--image>
			</view>
		</u-navbar>
		<view class="u-demo-block top_swiper">
			<u-swiper :list="swiperList" @click="toDetail" previousMargin="30" nextMargin="30" circular :autoplay="true" radius="5" bgColor="rgba(0,0,0,0)"></u-swiper>
		</view>
		<!-- <view class="banner">
			<image :src="banner" mode="widthFix" style="width: 100%;border-radius: 12px;" @click="declare"></image>
		</view> -->
		<view class="fenlei hflex acenter jbetween">
			<block v-for="(item,index) in fenlei" :key="index">
				<view class="vflex acenter jcenter" @click="toFenlei(item.id)">
					<image :src="item.img" class="fenlei_img"></image>
					<view class="fenlei_text">{{item.text}}</view>
				</view>
			</block>
		</view>
		<!-- <view class="tabs hflex acenter jaround">
			<scroll-view scroll-x="true" style="white-space: nowrap;height:100rpx;">
				<block v-for="(item,index) in tabs" :key="index">
					<view class="tabs_item" :class="index == active ? 'active' : ''" @click="changeTabs(index)"> 
						{{item.name}}
					</view>
				</block>
			</scroll-view>
			
		</view> -->
		<view class="list">
			<block v-for="(item,index) in tabs" :key="index">
				<view class="list_item">
					<view class="tabs_title">{{item.name}}</view>
					<scroll-view scroll-x="true" style="white-space: nowrap;height:100rpx;">
						<block v-for="(item2,index2) in item.children" :key="index2">
							<view class="tabs_item" :class="index2 == item.checked ? 'active' : ''" @click="changeTabs(index,index2)"> 
								{{item2.name}}
							</view>
						</block>
					</scroll-view>
					<view class="hflex acenter fwrap">
						<block v-for="(item3,index3) in item.pageList" :key="index3">
							<view class="item" @click="detail(item3.id)">
								<u--image :src="item3.img" width="325rpx" height="182rpx" radius="12"></u--image>
								<view class="title u-line-1">{{item3.name}}</view>
								<view class="hflex acenter" style="padding: 5px 0 2px;">
									<view class="text_style1">
										讲师：{{item3.lecturer}}
									</view>
									<view class="text_style1">
										学时：{{item3.period}}
									</view>
								</view>
								<view class="price">￥{{item3.price}}</view>
							</view>
						</block>
					</view>
				</view>
			</block>
		</view>
		<!-- <view class="list vflex acenter jcenter" v-if="product.length == 0">
			<image src="/static/images/index/empty-list.png" mode="aspectFill"></image>
			<view class="no_data">
				暂无数据
			</view>
		</view>
		<view class="list hflex acenter fwrap" v-else>
			<block v-for="(item,index) in product" :key="index">
				<view class="item" @click="detail(item.id)">
					<u--image :src="item.img" width="325rpx" height="182rpx" radius="12"></u--image>
					<view class="title u-line-1">{{item.name}}</view>
					<view class="hflex acenter" style="padding: 5px 0 2px;">
						<view class="text_style1">
							讲师：{{item.lecturer}}
						</view>
						<view class="text_style1">
							学时：{{item.period}}
						</view>
					</view>
					<view class="price">￥{{item.price}}</view>
				</view>
			</block>
		</view> -->
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	export default {
		data() {
			return {
				swiperList: [],
				swiperListId: [],
				banner: '/static/images/index/banner.png',
				tabs: [],
				active: 0,
				product: [],
				page: 1,
				pageSize: 100,
				total: 0,
				fenlei: [
					{
						id: 0,
						url: '',
						img: '/static/images/index/fenlei1.png',
						text: '继续教育',
					},
					{
						id: 1,
						url: '/pages/index/declare/declare',
						img: '/static/images/index/fenlei2.png',
						text: '职称申报',
					},
					{
						id: 2,
						url: '',
						img: '/static/images/index/fenlei3.png',
						text: '知识产权',
					},
					{
						id: 3,
						url: '',
						img: '/static/images/index/fenlei4.png',
						text: '联系客服',
					}
				],
				
			}
		},
		onLoad() {
			var that = this
			that.getBanner()
			that.coursecate()
			// 
		},
		methods: {
			// 切换tabs
			changeTabs(index,i) {
				// this.acti,e = index
				// this.getCourseTabsList(this.tabs[index].id)
				console.log('二级分类id',i)
				this.tabs[index].checked = i
				this.getCourseList(index)
			},
			// 点击搜索
			search() {
				uni.navigateTo({
					url: '/pages/index/search/search'
				})
			},
			// 点击进入申报专区
			declare() {
				$api.jump('/pages/index/declare/declare')
			},
			// 点击四个小分类
			toFenlei(id) {
				var url = this.fenlei[id].url;
				var login = uni.getStorageSync('token')
				if (login) {
					$api.jump(url)
				}else {
					$api.info('请先登录')
				}
				
			},
			// 点击进入课程详情
			detail(id) {
				var login = uni.getStorageSync('token')
				if (login) {
					$api.jump('/pages/index/course/detail?id=' + id)
				}else {
					$api.info('请先登录')
				}
				
			},
			// 获取首页banner 
			getBanner() {
				var that = this
				$api.req({
					url: '/api/Index/banner_list',
					data: {
						type: 2
					}
				}, function(res) {
					if (res.code == 1) {
						for (var i=0;i<res.data.length;i++){
							that.swiperList.push(res.data[i].img)
							that.swiperListId.push(res.data[i].course_id)
						}
					}
				})
			},
			// 点击banner跳转
			toDetail(e) {
				console.log(e)
				var id = this.swiperListId[e]
				this.detail(id)
			},
			// 获取课程分类
			coursecate() {
				var that = this
				$api.req({
					url: '/api/Index/courseCateList',
					data: {
						is_home: 2
					}
				}, function(res) {
					console.log(res);
					if(res.code == 1) {
						that.tabs = res.data
						for(var i=0;i<res.data.length;i++) {
							that.$set(that.tabs[i],'checked','0')
							// that.activeList[i].active = 0
							// that.pageList[i].pageList = []
							// console.log(that.tabs);
							that.getCourseList(i)
						}
						console.log(that.tabs);
						
					}
				})
			},
			// 获取首页课程列表
			getCourseList(i) {
				var that = this
				$api.req({
					url: '/api/Index/courselistByCate',
					data: {
						page: that.page,
						limit: that.pageSize,
						cate_id: that.tabs[i].children[Number(that.tabs[i].checked)].id
					}
				}, function(res) {
					console.log(res);
					if(res.code == 1) {
						that.$set(that.tabs[i],'pageList',res.data.list)
						// if (that.page == 1) {
						// 	that.total = res.data.count
						// 	that.pageList = res.data.list
						// } else {
						// 	that.total = res.data.count
						// 	that.pageList = that.product.concat(res.data.list)
						// }
						console.log(that.tabs);
					}
				})
			},
			getCourseTabsList(index) {
				var that = this
				that.page = 1
				$api.req({
					url: '/api/Index/courselist',
					data: {
						page: that.page,
						limit: that.pageSize,
						cate_id: index
					}
				}, function(res) {
					console.log(res);
					if(res.code == 1) {
						that.total = res.data.count
						that.product = res.data.list
					}
				})
			},
			// 触底事件
			onReachBottom() {
				console.log("到底了");
				console.log(typeof(this.page) , Number(this.pageSize));
				if (Number(this.page) * Number(this.pageSize) >= Number(this.total)) {
					$api.info("没有更多了")
				} else {
					this.page++
					this.getCourseList()
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.web_box::v-deep {
		background: url('@/static/images/index/bg.png') no-repeat;
		background-size: 100%;
		// height: 110vh;
		
		.u-navbar {
			width: 100%;
			box-sizing: border-box;
			padding: 0 16px 0 0;
		}
		.top_swiper {
			padding-top: 25px;
		}
		.banner {
			width: 100%;
			box-sizing: border-box;
			padding: 24px 15px 19px;
		}
		.fenlei {
			width: 100%;
			box-sizing: border-box;
			padding: 40rpx 60rpx;
			.fenlei_img {
				width: 84rpx;
				height: 84rpx;
			}
			.fenlei_text {
				font-size: 24rpx;
				font-weight: 400;
				color: #333333;
				margin-top: 10rpx;
			}
		}
		.tabs {
			width: 100%;
			box-sizing: border-box;
			padding: 0 15px;
		}
		.tabs_item {
			width: 200rpx;
			font-size: 18px;
			color: #4097F8;
			line-height: 25px;
			display:inline-block;
			text-align: center;
		}
		.active {
			font-size: 20px;
			position: relative;
		}
		.active::after {
			content: url('@/static/images/index/tab_active.png');
			position: absolute;
			bottom: -12px;
			left: 25%;
		}
		.list {
			width: 100%;
			box-sizing: border-box;
			padding: 12px 15px;
			.list_item {
				
				.tabs_title {
					font-size: 36rpx;
					font-weight: 500;
					color: #333333;
					padding-left: 8rpx;
					position: relative;
					margin: 0 0 24rpx;
				}
				.tabs_title::before {
					content: '';
					position: absolute;
					top: 8rpx;
					left: -4rpx;
					width: 8rpx;
					height: 34rpx;
					background: #44AAFE;
					border-radius: 0px 4rpx 4rpx 0px;
				}
			}
		}
		.item {
			width: 337rpx;
			height: auto;
			background: #FFFFFF;
			box-shadow: 0px 2px 6px 0px rgba(213,213,213,0.5);
			border-radius: 12px;
			box-sizing: border-box;
			padding: 3px;
			margin: 0 8px 12px 0;
		}
		.item:nth-child(2n) {
			margin-right: 0;
		}
		.title {
			font-size: 13px;
			font-weight: 600;
			color: #333333;
			line-height: 18px;
		}
		.text_style1 {
			font-size: 10px;
			font-weight: 400;
			color: #999999;
			line-height: 14px;
			padding-right: 13px;
		}
		.price {
			font-size: 16px;
			font-weight: 600;
			color: #FA6400;
			line-height: 22px;
		}
		.no_data {
			
		}
	}
</style>
