<template>
	<view class="container">
		<image class="cbg" :src="base.imgHost('common_bg.png')"></image>
		<!-- <view> -->
		<scroll-view :scroll-y="true" @scrolltolower="scrollGet" class="list">
			<topBanner :banner_list="banner_list"></topBanner>
			<view v-if="hasData" style="padding-bottom: 200rpx;">
				<view class="list-item"
					:class="{'list-end':item.sign_date_status==='已结束','list-start':item.sign_date_status==='未开始'||item.sign_date_status==='待定'}"
					v-for="item in course_list">
					<view class="list-item-wrap">
						<view class="list-item-wrap-time">
							<view v-if="!item.sign_start_date || item.sign_date_status==='待定'">
								<view class="bigFont" style="border-bottom: none;font-size: 36rpx;">
									{{convertToChineseMonth(item.sign_start_date,item.sign_date_status).month}}</view>
								<view class="bigFont" style="border-bottom: none;font-size: 36rpx;">
									{{convertToChineseMonth(item.sign_start_date,item.sign_date_status).year}}</view>
							</view>
							<view v-else>
								<view>{{convertToChineseMonth(item.sign_start_date).month}}</view>
								<view class="bigFont">{{convertToChineseMonth(item.sign_start_date).day}}</view>
								<view>{{convertToChineseMonth(item.sign_start_date).year}}</view>
							</view>
						</view>
						<view class="list-item-wrap-status">
							<view class="list-item-wrap-status-type">
								<text>{{item.type_detail.name}}</text>
							</view>
							<view class="list-item-wrap-status-title">{{item.name}}</view>
							<view class="list-item-wrap-status-label">
								报名{{item.sign_date_status}}
							</view>
						</view>

					</view>
					<view class="list-item-btn">
						<view @click="toDetail(item)">我要报名</view>
					</view>
				</view>

				<!-- <u-loadmore v-if="load_status" :status="load_status" /> -->
			</view>
			<view class="nodata" v-else>
				<u-empty mode="data"></u-empty>
			</view>
		</scroll-view>

		<tabbar :currentPage="1"></tabbar>
		<view class="modal">
			<u-popup v-model="showRegister" mode="bottom">
				<view>
					<view class="modal-tip">提示</view>
					<view class="modal-content">
						<view>如您已是我方校友，请先绑定账号</view>
						<view @click="goBind" class="modal-bind">
							去绑定
						</view>
						<view>如您还不是我方校友，请先注册</view>
						<view @click="toRegister" class="modal-register">
							去注册
						</view>
					</view>

					<!-- 					<view class="modal-btn">
						<view @click="goBind" class="modal-btn-bind">
							去绑定
						</view>
						<view @click="toRegister" class="modal-btn-register">
							去注册
						</view>
					</view> -->
				</view>

			</u-popup>
		</view>
	</view>
</template>

<script>
	import tabbar from '@/components/tabbar/tabbar.vue';
	import topBanner from '@/components/topBanner.vue'
	export default {
		components: {
			tabbar,
			topBanner
		},
		data() {
			return {
				showRegister: false,
				banner_list: [],
				hasMobile: false,
				go_course_id: '',
				hasData: true,
				current_page: 1,
				total_page: 0,
				load_status: '',
				course_list: [],
			}
		},
		onShareAppMessage() {
			return{
				title:"苏州科技商学院",
				imageUrl:"/static/share.jpg"
			}
		},
		onShareTimeline() {
			return{
				title:"苏州科技商学院",
				imageUrl:"/static/share.jpg"
			}
		},
		onLoad() {
			this.getBannerList()

			this.getCourseList()
		},
		onShow() {
			this.showRegister = false
			let user = uni.getStorageSync("stbc_lifeData") ? uni.getStorageSync("stbc_lifeData").vuex_user : {}
			if (!this.base.isNull(user.mobile)) {
				this.hasMobile = true
			} else {
				this.hasMobile = false
			}
		},
		onReachBottom() {
			// console.log("this.onReachBottom", this.current_page, this.total_page)

		},

		methods: {
			scrollGet() {
				if (!this.hasData) {
					return
				}

				if (this.current_page > this.total_page) {
					this.base.toast('没有更多了')
					return
				}
				this.current_page = this.current_page + 1
				this.getCourseList()
			},
			async getCourseList() {
				this.load_status = 'loading'
				const res = await this.$u.api.courseIndex({
					page: this.current_page,
					page_size: 10,
					status:1
				})
				this.total_page = res.last_page
				if (res.data.length === 0 && this.current_page === 1) {
					this.hasData = false
				}
				this.course_list.push(...res.data)
			},
			convertToChineseMonth(dateString, dateStatus) {
				if (this.base.isNull(dateString) || dateStatus === '待定') {
					return {
						month: '预告',
						year: "课程"
					}
				} else {
					// 解析日期字符串
					const dateParts = dateString.split('-');
					const year = parseInt(dateParts[0], 10);
					const monthNumber = parseInt(dateParts[1], 10);
					const day = parseInt(dateParts[2], 10);

					// 定义中文月份
					const chineseMonths = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];

					// 获取中文月份
					const chineseMonth = chineseMonths[monthNumber - 1];

					return {
						year: year,
						month: chineseMonth,
						day: day
					}
				}

			},
			// 报名
			toDetail(item) {
				uni.navigateTo({
					url: '/packages/course/detail?id=' + item.id
				})
				return


				this.go_course_id = item.id

				// 收费的不限制报名人数 total没值也不限制

				// 免费的限制报名人数
				if (!item.is_fee && (item.total && item.total > 0)) {
					// 报名人数已满
					if (item.course_signs_count >= item.total) {
						this.base.toast("当前报名人数已满")
						return
					}
				}
				if (!this.hasMobile) {
					this.showRegister = true
					return
				} else {
					uni.navigateTo({
						url: '/packages/apply/index?id=' + this.go_course_id
					})
				}
			},
			// 去绑定登录
			goBind() {
				console.log("qwe")
				uni.navigateTo({
					url: '/packages/register/login?id=' + this.go_course_id
				})
			},
			// 去注册
			toRegister() {
				uni.navigateTo({
					url: '/packages/register/index?id=' + this.go_course_id
				})
			},
			async getBannerList() {
				const res = await this.$u.api.otherBanner({
					position: 1,
				})
				this.banner_list = res
			},
		}

	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100vh;
		overflow: hidden;

		.cbg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
		}



		.list {
			height: 100vh;
			position: relative;
			top: 0;
			left: 0;
			overflow: scroll;

			.nodata {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			&-item {
				margin: 30rpx;
				background-color: #fff;
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-shadow: 0 -1rpx 20rpx #bed2ec;
				border-radius: 10rpx;

				&-wrap {
					width: calc(100% - 150rpx);
					display: flex;

					&-time {
						padding: 30rpx;
						background: linear-gradient(to bottom, #5e5fbc, #0d0398);
						border-radius: 10rpx 0 0 10rpx;
						color: #fff;
						width: 120rpx;
						text-align: center;
						font-size: 24rpx;
						position: relative;

						&>view {
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
						}

						.bigFont {
							font-size: 50rpx;
							border-bottom: 1rpx solid #ddd;
						}
					}

					&-status {
						margin: 20rpx;
						border-right: 1px solid #ddd;
						width: calc(100% - 120rpx);
						margin-right: 0;
						padding-right: 20rpx;
						position: relative;

						&-type {
							text-align: right;
							margin-bottom: 20rpx;

							&>text {
								border-radius: 28rpx 0 28rpx 28rpx;
								color: #fff;
								padding: 5rpx 15rpx;
								background: linear-gradient(to right, #5e5fbc, #0d0398, );
							}

						}

						&-title {
							height: 80rpx;
							overflow: hidden;
							margin-bottom: 20rpx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							/* 定义文本的行数 */
							overflow: hidden;
							text-overflow: ellipsis;
						}

						&-label {
							padding: 5rpx 20rpx;
							border: 1px solid #cfcfcf;
							border-radius: 30rpx;
							display: inline-block;
							position: relative;

							&:before {
								content: " ";
								background: #00b318;
								display: inline-block;
								width: 10rpx;
								height: 10rpx;
								top: -5rpx;
								position: relative;
								// top: -2rpx;
								margin-right: 14rpx;
								border-radius: 50%;
							}
						}
					}
				}

				&-btn {
					width: 150rpx;
					font-size: 24rpx;
					background: linear-gradient(to right, #5e5fbc, #0d0398);
					color: #fff;
					padding: 10rpx 20rpx;
					border-radius: 30rpx;
					margin: 20rpx;
					text-align: center;
				}
			}

			// 未开始
			&-start {
				.list-item-wrap {
					width: 100%;

					&-time {
						background: linear-gradient(to bottom, #cf847d, #b00d10);
					}

					&-status {
						border-right: none;

						&-type {
							&>text {
								background: linear-gradient(to right, #cf847d, #b00d10);
							}
						}

						&-label {
							&:before {
								content: " ";
								background: #cfcfcf;
							}
						}
					}

				}

				.list-item-btn {
					display: none;
				}

			}

			// 已结束
			&-end {
				.list-item-wrap {
					width: 100%;

					&-time {
						background: linear-gradient(to bottom, #e4cdb4, #c69c6d);
					}

					&-status {
						border-right: none;

						&-type {
							&>text {
								background: linear-gradient(to right, #e4cdb4, #c69c6d);
							}
						}

						&-label {
							&:before {
								content: " ";
								background: #cfcfcf;
							}
						}
					}

				}

				.list-item-btn {
					display: none;
				}
			}

		}

		.modal {
			::v-deep .u-drawer-bottom {
				border-radius: 40rpx;
			}

			&-tip {
				text-align: center;
				padding: 30rpx;
				font-size: 32rpx;
			}

			&-content {
				height: 450rpx;
				padding: 0 30rpx;
				font-size: 32rpx;
				text-align: center;

				&>view {
					margin: 30rpx auto;
				}
			}

			&-bind {
				width: 45%;
				text-align: center;
				margin: 0 auto;
				color: #fff;
				border-radius: 30rpx;
				padding: 20rpx;
				background: linear-gradient(to right, #e4cdb4, #c69c6d);
			}

			&-register {
				width: 45%;
				text-align: center;
				margin: 0 auto;
				color: #fff;
				border-radius: 30rpx;
				padding: 20rpx;
				background: linear-gradient(to right, #5e5fbc, #0d0398);
			}

			&-btn {
				display: flex;
				justify-content: space-between;
				padding: 30rpx;

				&>view {
					width: 45%;
					text-align: center;
					margin: 0 auto;
					color: #fff;
					border-radius: 30rpx;
					padding: 20rpx;
				}

				&-bind {
					background: linear-gradient(to right, #e4cdb4, #c69c6d);
				}

				&-register {
					background: linear-gradient(to right, #5e5fbc, #0d0398);
				}
			}
		}
	}
</style>