<template>
	<view class="page flex-col">
		<view style="width: 100%;background: #f4f5f6;box-sizing: border-box;padding-top: 88px;">
			<headers titles="预约训练">
				<uni-icons type="left" color="#000000" size="22px"></uni-icons>
			</headers>
		</view>
		<view style="padding: 10rpx 30rpx">
			<u-subsection :list="list" :current="curNow" @change="sectionChange"></u-subsection>
		</view>
		<scroll-view :style="{ height: scrollHeight + 'px' }" scroll-y="true" class="scroll-view"
			@scrolltolower="onReachBottomCus" refresher-enabled @refresherrefresh="onRefresherrefresh"
			:refresher-triggered="isTriggered" v-if="appointmentList.length > 0">
			<!-- 新增内容容器 -->
			<view class="box_2 flex-col" v-if="curNow === 0">
				<view class="box_4 flex-col" v-for="item in appointmentList" @click="goDetail(item,'')" :key="item.id">
					<view class="group_5 flex-row justify-between">
						<view class="block_3 flex-col justify-between">
							<text class="text_2">{{ item.reservDay }}</text>
							<view class="group_6 flex-row justify-between">
								<view class="text-wrapper_1 flex-col">
									<text class="text_3">{{ item.subjectStr }}</text>
								</view>
								<view class="text-wrapper_2 flex-col">
									<text class="text_4">{{ item.courseType }}</text>
								</view>
							</view>
						</view>
						<view :class="item.status === true ? 'ytg' : 'text-wrapper_3'" class=" flex-col">
							<text class="text_5">{{ item.statusStr }}</text>
						</view>
					</view>
					<view class="text-wrapper_4 flex-row justify-between">
						<text class="text_6">时间范围：</text>
						<text class="text_7">{{ item.reservTime }}</text>
					</view>
					<view class="text-wrapper_5 flex-row justify-between">
						<text class="text_8">教练名称：</text>
						<text class="text_9">{{ item.coachName }}</text>
					</view>
				</view>
			</view>
			<!-- 新增内容容器 -->
			<view class="box_2 flex-col" v-if="curNow === 1">
				<view class="box_4 flex-col" v-for="item in appointmentList" :key="item.id">
					<view @click="goDetail(item,'train')">
						<view class="group_5 flex-row justify-between">
							<view class="block_3 flex-col justify-between">
								<text class="text_2">{{ item.trainDay }}</text>
								<view class="group_6 flex-row justify-between">
									<view class="text-wrapper_1 flex-col">
										<text class="text_3">{{ subjectArr[item.subject - 1] }}</text>
									</view>
									<view class="text-wrapper_2 flex-col">
										<text class="text_4">{{ item.courseType }}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="text-wrapper_4 flex-row justify-between">
							<text class="text_6">交通方式：</text>
							<text class="text_7">{{ item.transWay == null ? '' : item.transWay}}</text>
						</view>
						<view class="text-wrapper_4 flex-row justify-between">
							<text class="text_6">训练地址：</text>
							<text class="text_7">{{ item.addr == null ? '' : item.addr }}</text>
						</view>
						<view class="text-wrapper_4 flex-row justify-between">
							<text class="text_6">训练时长：</text>
							<text class="text_7">{{ item.trainTime }}分钟</text>
						</view>
						<view class="text-wrapper_5 flex-row justify-between">
							<text class="text_8">教练名称：</text>
							<text class="text_9">{{ item.coachName }}</text>
						</view>
					</view>
					<view class="block_5 box_10 flex-row" style="justify-content: flex-end; margin: 0 20rpx 15rpx 0;"
						v-if="!item.ifEvaluate" @click="goEvaluateAdd(item)">
						<view
							style="border: 1px solid rgba(44, 120, 245, 1); padding: 7rpx 30rpx; border-radius: 50rpx;color: rgba(44, 120, 245, 1)">
							<text class="text_18">开始评价</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="empty-container" v-else>
			<u-empty mode="data" />
		</view>


		<view class="box_6 flex-col bottom_">
			<view class="text-wrapper_12 flex-col " @click="goAppointment()">
				<text class="text_19">预约</text>
			</view>
		</view>
	</view>
</template>
<script>
	import headers from "@/components/header/headers.vue";
	import request from "@/utils/request";

	export default {
		components: {
			headers
		},
		data() {
			return {
				isTriggered: false,
				pageNo: 1,
				pageSize: 10,
				total: 0,
				appointmentList: [],
				constants: {},
				list: ['预约记录', '训练记录'],
				curNow: 0,
				subjectArr: ['科目一', '科目二', '科目三', '科目四'],
				scrollHeight: 0,
			};
		},
		onLoad() {
			this.getList()
			uni.$on('refresh', (data) => {
				this.pageNo = 1
				this.appointmentList = []
				if (this.curNow === 0) {
					this.getList()
				} else {
					this.getTrainList()
				}
			})
		},
		onReady() {
			// 动态计算滚动区域高度
			this.calculateScrollHeight();
		},
		methods: {
			goback() {
				uni.navigateBack()
			},
			sectionChange(index) {
				this.curNow = index;
				this.pageNo = 1
				this.appointmentList = []
				if (this.curNow === 0) {
					this.getList()
				} else {
					this.getTrainList()
				}
			},
			getList() {
				request({
					url: '/app-api/reservation-course/page',
					method: 'GET',
					params: {
						pageNo: this.pageNo,
						pageSize: this.pageSize,
						ifCancel: false
					},
					tenantIdFlag: false
				}).then(res => {
					if (this.pageNo === 1) {
						this.total = res.data.total
						this.appointmentList = []
						this.appointmentList = res.data.records
					} else {
						this.appointmentList = this.appointmentList.concat(res.data.records)
					}
					this.isTriggered = false
				})
			},
			getTrainList() {
				request({
					url: '/app-api/train/page',
					method: 'GET',
					params: {
						pageNum: this.pageNo,
						pageSize: this.pageSize,
						selectType: 'my'
					},
					tenantIdFlag: false
				}).then(res => {
					if (this.pageNo === 1) {
						this.total = res.data.total
						this.appointmentList = []
						this.appointmentList = res.data.records
					} else {
						this.appointmentList = this.appointmentList.concat(res.data.records)
					}
					this.isTriggered = false
				})
			},
			goDetail(data, str) {
				//将data转为字符串
				uni.navigateTo({
					url: `/pagesA/appointmentDetail/index?data=${JSON.stringify(data)}&type=${str}`
				})
			},
			calculateScrollHeight() {
				// 获取屏幕高度
				const screenHeight = uni.getSystemInfoSync().windowHeight;
				// 获取顶部区域高度（头部+分段选择器）
				const topHeight = 138; // 140rpx转换为px
				// 获取底部按钮高度（假设约100rpx）
				const bottomHeight = uni.upx2px(120);
				// 计算滚动区域高度
				this.scrollHeight = screenHeight - topHeight - bottomHeight;
			},
			/**
			 * 上滑加载数据
			 */
			onReachBottomCus() {
				//判断 如果页码*页容量大于等于总条数，提示该页数据加载完毕
				if (this.pageNo * this.pageSize >= this.total) {
					uni.$u.toast('没有更多数据了')
					return
				}
				//页码+1,调用获取数据的方法获取第二页数据
				this.pageNo++
				//此处调用自己获取数据列表的方法
				if (this.curNow === 1) {
					this.getTrainList()
				} else {
					this.getList()
				}
			},
			/**
			 * 下拉刷新数据
			 */
			onRefresherrefresh() {
				this.isTriggered = true
				this.pageNo = 1
				this.total = 0
				this.appointmentList = []
				if (this.curNow === 1) {
					this.getTrainList()
				} else {
					this.getList()
				}
			},
			goAppointment() {
				uni.navigateTo({
					url: '/pagesA/appointmentAdd/index'
				})
			},
			goEvaluateAdd(data) {
				data = JSON.stringify(data)
				uni.navigateTo({
					url: `/pagesA/evaluateAdd/index?data=${data}&type=xunlian&controls=add`
				})
			},
		}
	};
</script>
<style lang='scss'>
	@import '../common/common.scss';
	@import './assets/style/index.rpx.scss';

	// 新增样式
	.content-box {
		margin-top: 88rpx;
		/* 根据头部高度调整 */
		padding: 20rpx;
		overflow-y: auto;
		height: calc(100vh - 88rpx);
		/* 确保内容区域高度正确 */
	}

	.header {
		width: 100%;
		background: #f4f5f6;
		box-sizing: border-box;
		padding-top: 88px;
	}

	.bottom_ {
		position: fixed;
		bottom: 0;
	}

	.ytg {
		background-color: #cfe2ff;
		border-radius: 4px;
		height: 40rpx;
		margin-top: 22rpx;
		width: 96rpx;

		.text_5 {
			width: 72rpx;
			height: 24rpx;
			overflow-wrap: break-word;
			color: rgba(4, 78, 242, 1);
			font-size: 24rpx;
			font-family: PingFang SC-Regular;
			font-weight: NaN;
			text-align: left;
			white-space: nowrap;
			line-height: 24rpx;
			margin: 8rpx 0 0 12rpx;
		}
	}

	.empty-container {
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		height: 100vh;
		/* 或者你需要撑满的高度 */
	}
</style>