<template>
	<view class="container">
		<!-- <view class="top">
			普及培训
		</view> -->
		<swiper class="swiper-box" duration="300" @change="changeTab">
			<swiper-item class="tab-content">
				<scroll-view class="list-scroll-content" scroll-y>
					<!-- 空白页 -->
					<empty v-if="loaded && list.length === 0"></empty>
					<!-- 订单列表 -->
					<view class="order-item" @click="ToDetail(item)" v-for="(item, index) in list" :key="index">
						<view class="list-cell">
							<image class="image" :src="baseURL + item.image"></image>
							<view class="list-tpl">{{ item.title }}</view>
							<view class="list-tip">{{ item.info }}</view>
							<view class="info-box">
								<view class="list-info">
									<image src="../../static/img/time.png" mode=""></image>
									<view class="list-font">
										开始时间：{{ item.reg_start }}
									</view>
								</view>
								<view class="list-info">
									<image src="../../static/img/time.png" mode=""></image>
									<view class="list-font">
										结束时间：{{ item.reg_end }}
									</view>
								</view>
								<view class="flex">
									<view class="list-info" style="width: 50%;">
										<image src="../../static/img/people.png" mode=""></image>
										<view class="list-font">
											当前报名人数：{{ item.number }}
										</view>
									</view>
									<view class="list-info" style="width: 50%;">
										<image src="../../static/img/people.png" mode=""></image>
										<view class="list-font">
											最大报名人数：{{ item.max_number || 0 }}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import empty from '@/components/empty';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import { training } from '@/api/index.js';
import { mapState, mapMutations } from 'vuex';
export default {
	components: {
		uniLoadMore,
		empty,
		uniPopup
	},
	data() {
		return {
			page: 1, //当前页数
			limit: 6, //每次信息条数
			list: [],
			loadingType: 'more' ,//加载更多状态
			loaded: false
		};
	},
	computed: {
		...mapState(['baseURL'])
	},
	onLoad() {
		console.log(22);
		this.loadData();
	},
	onReachBottom() {
		this.loadData();
	},
	methods: {
		//获取订单列表
		loadData(type) {
			let obj = this;
			if(obj.loadingType == 'loading' || obj.loadingType == 'noMore') {
				return 
			}
			obj.loadingType = 'loading'
			training({
				page: obj.page,
				limit: obj.limit,
			})
				.then(data => {
					data.data.forEach(item => {});
					let arr = data.data;
					obj.list = obj.list.concat(arr);
					obj.page++;
					if (obj.limit == arr.length) {
						
						obj.loadingType = 'more';
					} else {
						obj.loadingType = 'noMore';
					}
					obj.loaded = true
				})
				.catch(e => {
					obj.loadingType = 'noMore';
				});
		},
		//跳转到详情
		ToDetail(e) {
			let type = e.type;
			let id = e.id;
			// console.log(e.)
			if(e.is_create) {
				uni.showModal({
					title: '提示',
					content: '您已报名，无需再次报名'
				})
				return
			}
			uni.navigateTo({
				url: '/pages/train/sign?id=' + id
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background: #f2f2f2;
	height: 100%;
	padding-bottom: 25rpx;
}
.container {
	height: 100%;
	.top {
		background-color: #ffffff;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		font-weight: 500;
		color: #333333;
	}
	.swiper-box {
		height: 100%;
		.list-scroll-content {
			height: 100%;
		}
	}
}
.scroll-list {
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	background-color: #ffffff;
	font-size: 32rpx;
	.scoll-box {
		text-align: center;
		display: inline-block;
		margin: 0rpx 38rpx;
		padding: 15rpx 0rpx;
		.scoll-img {
			width: 130rpx;
			height: 85rpx;
			border-radius: 100%;
			image {
				width: 85rpx;
				height: 100%;
				border-radius: 100%;
			}
		}
		.scoll-name {
			padding-top: 15rpx;
		}
		&.active {
			color: #ef3d28;
			border-bottom: 6rpx solid #ef3d28;
		}
	}
}

.order-item {
	width: 100%;
	padding: 0rpx 25rpx;
	padding-top: 25rpx !important;
	.list-cell {
		background-color: #ffffff;
		border-radius: 20rpx;
		width: 100%;
		box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.06);
		.image {
			width: 100%;
			height: 300rpx;
			border-top-left-radius: 25rpx;
			border-top-right-radius: 25rpx;
		}
		.list-tpl {
			padding: 25rpx 25rpx;
			padding-bottom: 0rpx !important;
			font-size: 34rpx;
			color: #222222;
			font-weight: 500;
		}
		.list-tip {
			padding: 10rpx 25rpx 35rpx;
			font-size: 24rpx;
			color: #b4b4b4;
		}
		.info-box {
			padding: 0 25rpx 35rpx;
			.list-info {
				margin-top: 10rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				image{
					width: 24rpx;
					height: 24rpx;
				}
				.list-font {
					margin-left: 6rpx;
					font-size: 24rpx;
				}
			}
		}
		
	}
}
</style>