<template>
	<view class="page">
		<view class="lcon">
			
			<scroll-view class="scrolllist" scroll-with-animation>
				<view class="tabicl" v-for="(item, index) in list" :key="index" :class="index==tabCurrentIndex?'cur':''" @tap="tabSelect" :data-id="index">
					<view class="ptext">{{item.name}}</view>
					<view class="pline"></view>
				</view>
				<view class="bcon">
					<view class="bcell">
						<view class="btip">预计费用</view>
						<view class="btxt"><text style="font-size: 26rpx;">￥</text>{{list[tabCurrentIndex].venueFee}}</view>
					</view>
				</view>
				<view class="hcon">
					<view class="hcell">教室名称</view>
					<view class="hcell">使用日期</view>
					<view class="hcell">使用时间</view>
					<view class="hcell">使用天数</view>
					<view class="hcell">预计费用</view>
				</view>
			</scroll-view>
			
			<!-- 列表 -->
			<swiper class="swiper-box" :duration="300" :current="tabCurrentIndex"  @animationfinish="animationfinish">
				<swiper-item class="swiper-item" v-for="tabItem in list" :key="tabItem.id">
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						<view class="scell" v-if="tabItem.slist.length>0">
							<view v-for="(item, index) in tabItem.slist" :key="index" class="oitem">
								<view class="ocell">
									{{item.roomName}}
								</view>
								<view class="ocell">
									{{item.realClaDate}}
								</view>
								<view class="ocell">
								    {{item.realStartTime}}
									{{item.realEndTime}}
								</view>
								<view class="ocell">
									{{item.roomUsageTime}}
								</view>
								<view class="ocell">
									{{item.venueFee}}
								</view>
							</view>
						</view>
						<uni-load-more v-if="tabItem.slist.length<1" iconType="circle" :status="tabItem.loadStatus" />
					</scroll-view>
				</swiper-item>
			</swiper>
			
		</view>
		
		 
		
		<!-- 是否登录 -->
		<openlogin ref="loginId" @getPhoneNumber="getPhoneNumber"></openlogin>
		
	</view>
</template>

<script>
	import { myCache,getRemoteFile } from '../../utils/utils.js';
	import openlogin from "../components/openlogin.vue";
	export default {
		components: {
			openlogin
		},
		data() {
			return {
				openId:"",
				phone:"",
				userid:"",
				tabCurrentIndex: 0,
				scrollLeft: 0,//tabs
				//  1：本周，3：本月 ，4：上月 
				list:[
					{
						id:1,
						order_state:1,
						value:"thisMonth",
						venueFee: 0,
						loadStatus:'noMore', // 'more',
						name:'本周',
						slist:[
							{
								id:1,
								name1:"公共A",
								name2:"2025年03月02日",
								name3:"2025年03月05日",
								name4:"2",
								name5:"200.00",
							},
							{
								id:1,
								name1:"公共B",
								name2:"2025年03月02日",
								name3:"2025年03月05日",
								name4:"2",
								name5:"200.00",
							},
						],
						
					},
					{
						id:2,
						order_state:2,
						value:"thisMonth",
						venueFee: 0,
						loadStatus:'noMore', // 'more',
						name:'本月',
						slist:[
							{
								id:1,
								name1:"公共A",
								name2:"2025年03月02日",
								name3:"2025年03月05日",
								name4:"2",
								name5:"200.00",
							},
							{
								id:1,
								name1:"公共B",
								name2:"2025年03月02日",
								name3:"2025年03月05日",
								name4:"2",
								name5:"200.00",
							},
						],
						
					},
					{
						id:3,
						order_state:3,
						value:"lastMonth",
						venueFee: 0,
						loadStatus:'noMore', // 'more',
						name:'上月',
						slist:[
							{
								id:1,
								name1:"公共A",
								name2:"2025年03月02日",
								name3:"2025年03月05日",
								name4:"2",
								name5:"200.00",
							},
							{
								id:1,
								name1:"公共B",
								name2:"2025年03月02日",
								name3:"2025年03月05日",
								name4:"2",
								name5:"200.00",
							},
						],
					},
					
				],
			};
		},
		onLoad(option) {
			if(option.id||option.id==0){
				if(parseInt(option.id)==0){
					this.tabCurrentIndex=0;
				}
				else{
					this.tabCurrentIndex=parseInt(option.id);
				}
				this.scrollLeft = (this.tabCurrentIndex - 1) * 60;
			}
		},
		onShow(option){
			this.reset();
		},
		onReady(){
			this.openId = myCache('openId');
			var user = myCache('user');
			this.userid = user.userid? user.userid:'';
			this.phone = user.userphone;
			if(this.userid==""||this.userid=="0"){
				uni.navigateTo({
					url: `/pages/login/login`
				});
			}
		},
		onPullDownRefresh() {
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},100);
		},
		methods: {
			getPhoneNumber(e){
				if(e.phone){
					this.phone = e.phone
				}
				if(e.userid){
					this.userid = e.userid
				}
			},
			async getOrderList() {
				if(this.list[this.tabCurrentIndex].loadStatus!=="noMore")
				{
					uni.showLoading({
						title: '数据加载中...'
					});
					var para={
						time: this.list[this.tabCurrentIndex].value
						// time: "thisMonth"
					}
					const {data: res} = await uni.$http.post('/api/my/claRoomFee', para);
					console.log(res)
					if(res&&res.data){
						var data=res.data;
						this.list[this.tabCurrentIndex].loadStatus="noMore";
						this.list[this.tabCurrentIndex].slist=data.claTimeList;
						this.list[this.tabCurrentIndex].venueFee=data.venueFee;
						this.$forceUpdate();
					}
					else{
						this.list[this.tabCurrentIndex].loadStatus="noMore";
						this.list[this.tabCurrentIndex].slist=[];
						this.list[this.tabCurrentIndex].venueFee=0;
						this.$forceUpdate();
						uni.showModal({
							title: '提示',
							content: res.message? res.message : '当前信息不存在..',
							cancelText: '取消',
							confirmText: '确定',
							success: ress => {
								// 返回
								uni.navigateBack({
									delta: 1
								});
							}
						});
					}
				}
			},
			loadData(){
				console.log('loadData');
				// 加载
				if(this.list[this.tabCurrentIndex].loadStatus=="more") {
					this.list[this.tabCurrentIndex].loadStatus="loading";
					setTimeout(() => {
						this.getOrderList();
					}, 300);
				}
			},
			tabSelect(e) {
				console.log(e)
				this.tabCurrentIndex = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				// 重新加载 暂不需要加载
				// this.list[this.tabCurrentIndex].loadStatus="more";
				// this.list[this.tabCurrentIndex].slist=[];
				this.loadData();
			},
			animationfinish({ detail: { current } }) {
				this.tabCurrentIndex = current;
				this.loadData();
			},
			orderdo(id){
				console.log(id);
				// 商品详情
				uni.navigateTo({
					url: `/pages/product/detail?id=${id}`
				});
			},
			gotoInfo(id){
				// 订单详情
				uni.navigateTo({
					url: `/pages/book/bookinfo?id=${id}`
				});
			},
			// 联系教练
			gototeacher(item){
				var data={
					id:item.id,
					name:"教练A"
				}
				// 联系教练
				var data=encodeURIComponent(JSON.stringify(data));
				uni.navigateTo({
					url: `/pages/teacher/chat?data=${data}`
				})
			},
			// 去评价
			gotoevaluate(info){
				var data=encodeURIComponent(JSON.stringify(info));
				uni.navigateTo({
					url: `/pages/book/bookpj?data=${data}`
				});
			},
			iflogin(){
				this.openId = myCache('openId');
				var user = myCache('user');
				this.userid = user.userid? user.userid:'';
				this.phone = user.userphone;
				if(this.userid==""||this.userid=="0"||this.phone==""){
					uni.navigateTo({
						url: `/pages/login/login`
					});
					return false;
				}
				else{
					return true;
				}
			},
			checkdo(e){
				console.log(e);
				var id= e.currentTarget.dataset.id;
				var that = this;
				// 确认上课
				uni.showModal({
					title: '提示',
					content: '确定上课吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: ress => {
						if (ress.confirm) {
							that.checkdodo(id);
						}
					}
				});
			},
			async checkdodo(id){
				var param={
					"userid":myCache('userid'),
					"order_id":id,
					"order_state":5,
				};
				uni.showToast({
					title: '确定上课中...',
					icon: 'success',
					duration: 2000
				});
				const {data: res} = await uni.$http.post('/alipay/api/order/state', param);
				if(res.msg=="successed"){
					uni.showToast({
						title: '上课已确认！',
						icon: 'success',
						duration: 2000
					});
					// 重新加载
					this.reset();
				}
				else{
					uni.showToast({
						title: res.msg? res.msg:'上课确认失败！',
						icon: 'error',
						duration: 2000
					});
				}
			},
			cancelyydo(e){
				console.log(e);
				var id= e.currentTarget.dataset.id;
				var that = this;
				//取消预约
				uni.showModal({
					title: '提示',
					content: '确定要取消预约吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: ress => {
						if (ress.confirm) {
							that.delyydo(id);
						}
					}
				});
			},
			async delyydo(id){
				var param={
					"userid":myCache('userid'),
					"order_id":id,
					"order_state":5,
				};
				uni.showToast({
					title: '取消中...',
					icon: 'success',
					duration: 2000
				});
				const {data: res} = await uni.$http.post('/alipay/api/order/state', param);
				if(res.msg=="successed"){
					uni.showToast({
						title: '预约已取消！',
						icon: 'success',
						duration: 2000
					});
					// 重新加载
					this.reset();
				}
				else{
					uni.showToast({
						title: res.msg? res.msg:'预约取消失败！',
						icon: 'error',
						duration: 2000
					});
				}
			},
			cancelkcdo(e){
				console.log(e);
				var id= e.currentTarget.dataset.id;
				var that = this;
				//取消课程
				uni.showModal({
					title: '提示',
					content: '确定要取消课程吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: ress => {
						if (ress.confirm) {
							that.delkcdo(id);
						}
					}
				});
			},
			async delkcdo(id){
				var param={
					"userid":myCache('userid'),
					"order_id":id,
					"order_state":5,
				};
				uni.showToast({
					title: '取消中...',
					icon: 'success',
					duration: 2000
				});
				const {data: res} = await uni.$http.post('/alipay/api/order/state', param);
				if(res.msg=="successed"){
					uni.showToast({
						title: '课程已取消！',
						icon: 'success',
						duration: 2000
					});
					// 重新加载
					this.reset();
				}
				else{
					uni.showToast({
						title: res.msg? res.msg:'课程取消失败！',
						icon: 'error',
						duration: 2000
					});
				}
			},
			reset(){
				this.orderlists=[];
				// 重新加载数据
				this.list.forEach((cell,idx)=>{
					this.list[idx].loadStatus='more';
					this.list[idx].slist=[];
				});
				this.$forceUpdate();
				this.loadData();
			}
		}
	}
</script>

<style lang="less" scoped>
	.page {
		padding: 0;
		position: relative;
		background-image: url('@/static/image/bg.jpg');
		background-attachment: fixed;
		background-size: cover;
		background-position: center center;
		min-height: calc(100vh - var(--window-top) - var(--window-bottom));
	}
	.zcon{
		padding: 0;
		position: relative;
		background: #6f8c6e;
		padding: 30rpx;
		margin: 30rpx;
		height: 160rpx;
		display: flex;
		flex-direction: column;
		border-radius: 20rpx;
		.ztip{
			font-size: 26rpx;
			color: #fff;
			margin-bottom: 5rpx;
		}
		.ztxt{
			font-size: 40rpx;
			color: #fff;
			font-weight: 600;
		}
	}
	.scrolllist{
		height: 280rpx; 
		background: #fff;
		white-space: nowrap;
		width: 100%;
	}
	.bcon{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 100%;
		.bcell{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 50%;
			.btip{
				color: #888;
				font-size: 26rpx;
			}
			.btxt{
				font-size: 40rpx;
				font-weight: 600;
				color:#000;
			}
		}
	}
	.tabicl{
		width: 33%;
		height: 80rpx;
		line-height: 80rpx;
		position: relative;
		display: inline-block;
		overflow: hidden;
		margin-right: 20rpx;
	}
	.ptext{
		font-size: 30rpx;
		text-align: center;
		color: #000;
		font-weight: 600;
		height: 75rpx;
	}
	.cur .ptext{
		color: #00a89b;
		font-size: 33rpx;
		font-weight: 600;
	}
	.cur .pline{
		width: 40%;
		height: 9rpx;
		background: #00a89b;
		border-radius: 6rpx;
		opacity: 1;
		margin-left: 30%;
	}
	.hcon{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin-top: 10rpx;
		border-top: 1rpx solid #e5e5e5;
		border-bottom: 1rpx solid #e5e5e5;
		padding: 20rpx 0;
	}
	.hcell{
		width: 20%;
		font-size: 24rpx;
		font-weight: 600;
		color: #000;
		padding: 2rpx;
		text-align: center;
	}
	.swiper-box {
		flex: 1;
		height: calc(100vh - var(--window-top) - 400rpx) !important;
	}
	.swiper-item {
		height: 100%;
	}
	.lcon{
		background: #fff;
		padding: 20rpx;
		margin: 20rpx;
		border-radius: 20rpx;
	}
	.scell{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		.oitem{
			display: flex;
			flex-direction: row;
			background-color: #FFFFFF;
			width: 100%;
			border-bottom: 1rpx solid #e5e5e5;
			align-items: center;
			justify-content: center;
			.ocell{
				width: 20%;
				font-size: 24rpx;
				color: #333;
				padding: 10rpx 2rpx 15rpx;
				text-align: center;
				word-wrap: break-word;
			}
		}
	}
	
	
	
	
</style>
