<template>
	<view class="">
		<u-sticky :enable="enableIos">
			<view class="search-box-ios">
				<u-search bg-color="#f2f2f2" style="width: 100%;" placeholder="搜索更多资源" v-model="keyword"
					:show-action="false" :animation="true" @search="getCourseList()"></u-search>
			</view>
		</u-sticky>
		<view class="swiper flex align-center justify-center">
			<view class="swiper-box">
				<swiper :indicator-dots="true" class="swiper " :autoplay="true" interval="5000" duration="500"
					:circular="true" style="width: 100%;height: 350rpx;">
					<swiper-item v-for="(item,index) in swiperListIos" :key='index' @tap="goPage(item.url)">
						<image :src="item.imageUrl" mode="scaleToFill"
							style="width: 100%;height: 100%;border-radius: 24rpx;"></image>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="padding-lr">
			<view class="" v-if="courseListIos.length">
				<videoList @success="posterSuccess" :list="courseListIos" />
			</view>
			<empty title="暂无视频" :isShow='false' v-else></empty>
			<u-loadmore v-if="courseListIos.length > 0" :status="statusIos" />
		</view>

	</view>
</template>

<script>
	import videoList from '../../../components/videoList/videoList.vue'
	import empty from '@/components/empty.vue'
	export default {
		components: {
			empty,
			videoList
		},
		data() {
			return {
				enableIos: true,
				statusIos: 'loadmore',
				swiperListIos: [], //轮播图列表
				courseListIos: [], //资源列表
				pageIos: 1,
				limitIos: 10,
				
				sortIos: '',
				count: 0,
				keyword: '',
				isPrice: '', //是否免费 2:免费
			}
		},
		onShow() {
			this.enableIos = true
			this.getCourseList()
		},
		onHide() {
			this.enableIos = false
		},
		onLoad(option) {
			uni.setNavigationBarTitle({
				title: option.title
			})
			this.getBannerList()
			if (option.sort) {
				this.sortIos = option.sort
			}
			if (option.isPrice) {
				this.isPrice = option.isPrice
			}

		},
		methods: {
			goPage(url) {
				uni.navigateTo({
					url: url
				})
			},
			//点击回调
			posterSuccess(item) {
				uni.navigateTo({
					url: '/me/detail/detail?id=' + item.courseId + '&courseDetailsId=' + item.courseDetailsId
				})
			},
			//最新热播
			getCourseList() {
				let data = {
					limit: this.limitIos,
					page: this.pageIos,
					sort: this.sortIos ? this.sortIos : '',
					title: this.keyword,
				}
				// #ifdef MP-WEIXIN
				data.wxShow = 1
				// #endif
				// #ifdef MP-TOUTIAO
				data.dyShow = 1
				// #endif
				if (this.isPrice) {
					data.isPrice = this.isPrice
				}
				this.$u.api.courseList(data).then(res => {
					if (res.code == 0) {
						this.pages = res.data.totalPage
						if (this.pageIos < this.pages) {
							this.statusIos = 'loadmore'
						} else {
							this.statusIos = 'nomore'
						}
						// res.data.list.forEach(ret => {
						// 	ret.courseLabel = ret.courseLabel ? ret.courseLabel.split(',') : []
						// })
						if (this.pageIos == 1) {
							this.courseListIos = res.data.list
						} else {
							this.courseListIos = [...this.courseListIos, ...res.data.list]
						}
					} else {
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						});
					}
					uni.stopPullDownRefresh();

				})
			},
			// 获取轮播图列表
			getBannerList() {
				this.$u.api.bannerList({
					classify: '1'
				}).then(res => {
					if (res.code == 0) {
						res.data.forEach(d => {
							if (d.state == 1) {
								this.swiperListIos.push(d)
							}
						})

					} else {
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						});
					}
				})
			},

		},
		onReachBottom: function() {
			if (this.pageIos < this.pages) {
				this.pageIos += 1
				this.statusIos = 'loading'
				this.getCourseList()

			} else {
				this.statusIos = 'nomore'
			}

		},
		onPullDownRefresh: function() {
			this.pageIos = 1;
			this.getCourseList()
		},
	}
</script>

<style lang="scss" scoped>
	.search-box-ios {
		width: 100%;
		padding: 15upx 2.5%;
		display: flex;
		justify-content: space-between;
		background-color: #ffffff;
	}

	

	.swiper {
		width: 100%;
		height: auto;
		margin-bottom: 10rpx;
		margin-top: 10rpx;

		.swiper-box {
			width: 686rpx;
			height: 100%;
		}
	}

	.active {
		color: #5074FF;
	}

	.btn {
		width: 150upx;
		height: 60upx;
		background: #5074FF;
		border-radius: 30upx;
		color: #FFFFFF;
		text-align: center;
		line-height: 60rpx;
		font-size: 26rpx;
	}
</style>