<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 v-if="banner_list.length>0" :banner_list="banner_list"></topBanner>
			<view v-if="hasData" style="padding-bottom: 200rpx;">
				<!-- 10进行中 40已结束 -->
				<view class="list-item" :class="{'list-end':item.sign_status===40}" v-for="item in course_list">
					<view class="list-item-wrap">
						<view class="list-item-wrap-time">
							<view>
								<view class="list-item-wrap-time-date" v-if="item.start_date">
									<!-- 没有结束时间 或开始结束相等 -->
									<block v-if="convertToChineseMonth(item.start_date,item.end_date).noend">
										<view>{{convertToChineseMonth(item.start_date,item.end_date).month}}</view>
										<view class="bigFont">
											{{convertToChineseMonth(item.start_date,item.end_date).day}}</view>
										<view>{{convertToChineseMonth(item.start_date,item.end_date).year}}</view>
									</block>
									<block v-else>
										<view class="flexbetween">
											<text>{{convertToChineseMonth(item.start_date,item.end_date).month}}</text>
											<text>{{convertToChineseMonth(item.start_date,item.end_date).endmonth}}</text>
										</view>
										<view class="bigFont flexbetween">
											<text>{{convertToChineseMonth(item.start_date,item.end_date).day}}</text>
											<text>-</text>
											<text>{{convertToChineseMonth(item.start_date,item.end_date).endday}}</text>
										</view>
										<view>
											<text>{{convertToChineseMonth(item.start_date,item.end_date).year}}</text>
											<!-- <text>{{convertToChineseMonth(item.start_date,item.end_date).endyear}}</text> -->
										</view>

									</block>
								</view>
								<view class="list-item-wrap-time-date" v-else>
									<view class="bigFont" style="font-size: 36rpx;">开课</view>
									<view class="bigFont" style="font-size: 36rpx;">待定</view>
								</view>
								<view class="list-item-wrap-time-status">报名{{item.sign_date_status}}</view>
							</view>
						</view>
						<view class="list-item-wrap-status">
							<view class="list-item-wrap-status-type">
								<text>{{item.is_fee===1?'付费':'公益'}}</text>
							</view>
							<view class="list-item-wrap-status-title">
								<text v-if="item.type">{{item.type_detail?item.type_detail.name+' | ':''}}</text>
								{{item.name}}
							</view>
							<view class="list-item-wrap-status-label">
								<text v-if="item.sign_status===10" @click="toDetail(item)">我要报名</text>
								<text v-else @click="toDetail(item)">查看详情</text>
							</view>
						</view>
					</view>
				</view>

			</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("stbc1_lifeData") ? uni.getStorageSync("stbc1_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(startDate, endDate) {
				// 解析日期字符串
				const dateParts = startDate.split('-');
				const year = parseInt(dateParts[0], 10);
				const monthNumber = parseInt(dateParts[1], 10);
				const day = parseInt(dateParts[2], 10);

				// 定义中文月份
				let chineseMonths = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
				// 获取中文月份
				const chineseMonth = chineseMonths[monthNumber - 1];
				// 结束时间为空 只显示开始时间
				if (this.base.isNull(endDate)) {
					return {
						year: year,
						month: chineseMonth,
						day: day,
						noend: true
					}
				} else {
					// 开始结束时间相等 只显示开始时间
					if (startDate == endDate) {
						return {
							year: year,
							month: chineseMonth,
							day: day,
							noend: true
						}
					} else {

						const enddateParts = endDate.split('-');
						const endyear = parseInt(enddateParts[0], 10);
						const endmonthNumber = parseInt(enddateParts[1], 10);
						const endday = parseInt(enddateParts[2], 10);
						// console.log(endmonthNumber, chineseMonths)
						const endchineseMonth = chineseMonths[endmonthNumber - 1];
						return {
							year: year,
							month: chineseMonth,
							day: day,
							noend: false,
							endyear: endyear,
							endmonth: endchineseMonth,
							endday: endday,
						}
					}
				}
			},
			// 报名
			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: 2,
				})
				if (res.length > 0) {
					this.banner_list = res.sort((a, b) => {
						a.sort - b.sort
					})

				}
			},
		}

	}
</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: 100%;
					display: flex;

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

						&>view {
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							width: 100%;
							padding: 25rpx;

							>view {
								font-size: 24rpx;
							}
						}

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

						.flexbetween {
							display: flex;
							justify-content: space-between;
							align-items: center;
						}

						&-date {
							padding-bottom: 15rpx;
							border-bottom: 1rpx solid #fff;

						}

						&-status {
							padding-top: 10rpx;
						}
					}

					&-status {
						// border-right: 1px solid #ddd;
						width: calc(100% - 170rpx);
						padding: 30rpx;
						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 {
							text-align: right;

							text {
								display: inline-block;
								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%;
								}
							}

						}
					}
				}


			}

			// 已结束
			&-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 {
							text {
								&:before {
									content: " ";
									background: #efa36e;
								}
							}

						}
					}

				}

				.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>