<template>
	<view class="page">
		<u-navbar :is-back="false"  title="订单管理" :border-bottom="false" back-icon-color="000" :background="bgc" title-color='#000' title-size='36'
			height='40'	id="navbar">
		</u-navbar>
        <image class="imgbj" src="https://api.ccttiot.com/smartmeter/img/static/u3lZnmhqSqkMd7gHKtMD" mode=""></image>
        <view class="tab">
        	<view :class="tabindex == index ? 'active' : ''" @click="btntab(index,item)" v-for="(item,index) in tablist" :key="index">
        		{{item.name}}
        	</view>
        </view>
		<view class="dingdantab">
			<view :class="dingdanindex == index ? 'actives' : ''" @click="btndingdan(index,item)" v-for="(item,index) in dingdanlist" :key="index">
				{{item.name}}
			</view>
		</view>
		<view class="list" @touchstart="touchStart" @touchend="touchEnd">
			<view class="list_item" v-for="(item,index) in orderlist" :key="index" @click="btnxq(item.orderNo)">
				<view class="rts" v-if="item.status == 0"><text>订单状态</text> <text class="ones">待支付</text></view>
				<view class="rts" v-if="item.status == 1"><text>订单状态</text> <text class="ones">支付中</text></view>
				<view class="rts" v-if="item.status == 2"><text>订单状态</text> <text class="ones">待使用</text></view>
				<view class="rts" v-if="item.status == 3"><text>订单状态</text> <text class="ones">使用中</text></view>
				<view class="rts" v-if="item.status == 4"><text>订单状态</text> <text class="ones">已完成</text></view>
				<view class="rts" v-if="item.status == 5"><text>订单状态</text> <text class="ones">超时自动取消</text></view>
				<view class="rts" v-if="item.status == 6"><text>订单状态</text> <text class="ones">用户取消订单</text></view>
				<view class="rts" v-if="item.status == 7"><text>订单状态</text> <text class="ones">退款中</text></view>
				<view class="rts" v-if="item.status == 8"><text>订单状态</text> <text class="ones">已退款</text></view>
				<view class="zt" v-if="item.status == 9">用户结束订单</view>
				<view class="top">
					<view class="lt">
						<image src="https://api.ccttiot.com/smartmeter/img/static/uHTgf2Yc0BZOrRa2hmeO" mode=""></image>
						<text>{{item.reserveStartTime == null ? '--' : item.reserveStartTime.slice(0, -3)}} 至 {{item.reserveEndTime == null ? '--' : item.reserveEndTime.slice(0, -3)}}</text>
					</view>
				</view>
				<view class="one">
					<view class="lt">
						<text>{{item.storeName == null ? '--' : item.storeName}}</text>
						<image src="https://api.ccttiot.com/smartmeter/img/static/u352aUHWOyVljMQpAjqT" mode=""></image>
					</view>
					<view class="rt">
						订单号：{{item.orderNo == null ? '--' : item.orderNo}}
					</view>
				</view>
				<view class="two">
					<view class="lt">
						<image src="https://api.ccttiot.com/smartmeter/img/static/ulun23wQhiiETNXRlAu4" mode=""></image>
						<view class="shuo">
							<view class="">
								预定包厢
							</view>
							<view class="" style="margin: 28rpx 0;">
								预定时长
							</view>
							<view class="">
								订单费用
							</view>
						</view>
					</view>
					<view class="rt">
						<view class="">
							{{item.roomName == null ? '--' : item.roomName}}
						</view>
						<view class="" style="margin: 28rpx 0;">
							{{item.hours}}小时
						</view>
						<view class="">
							￥{{(item.price / item.hours).toFixed(2)}}/小时
						</view>
					</view>
				</view>
				<view class="thr">
					实际支付：<text>￥{{item.price}}</text>
				</view>
				<view class="fou">
					<view class=""></view>
					<view class="quxiao" v-if="item.status == 0 || item.status == 1 || item.status == 2 || item.status == 3">
					   <text v-if="item.status == 3" @click.stop="btnjies(item.orderNo)">结束订单</text>
					   <text v-else @click.stop="btnqux(item.orderNo)">取消订单</text>
					</view>
					<view class="lianxi" @click.stop="btntelshop(item.managerPhone)" v-if="item.status == 0 || item.status == 1 || item.status == 2 || item.status == 3">
						<image src="https://api.ccttiot.com/smartmeter/img/static/uoER3VKO0LjcbyaViX9P" mode=""></image>
						联系店长
					</view>
					<view class="chaxq">
						查看详情
					</view>
				</view>
			</view>
			<view class="" style="width: 100%;text-align: center;margin-top: 100rpx;font-size: 34rpx;color: #ccc;">
				没有更多订单啦，快去下单吧...
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "",
				},
                tablist:[
					{name:'全部',value:''},
					{name:'待使用',value:'1,2'},
					{name:'使用中',value:'3'},
					{name:'已完成',value:'4,7,8'},
					{name:'已取消',value:'5,6'},
				],
                tabindex:0,
				dingdanindex:0,
				dingdanlist:[
					{name:'茶室订单',value:'1'},
					{name:'棋牌订单',value:'2'},
					{name:'台球订单',value:'3'},
					{name:'货柜订单',value:'4'},
				],
				orderlist:[],
				type:'1',
				statusarr:'',
				pagesum:1,
				pagesize:10,
				touchStartX: 0, // 触屏起始点x
				touchStartY: 0, // 触屏起始点y  
				xiaflag:true,
				total:'',
				qingqiuflag:true
			}
		},
		onLoad() {

		},
		onShow() {
			this.pagesum = 1
			this.orderlist = []
			this.getlist()
		},
		methods: {
			// 按下上拉到底部进行请求
			touchStart(e) {
				this.touchStartX = e.touches[0].clientX;
				this.touchStartY = e.touches[0].clientY;
			},
			// 松开
			touchEnd(e) {
				let deltaX = e.changedTouches[0].clientX - this.touchStartX;
				let deltaY = e.changedTouches[0].clientY - this.touchStartY;
				if (Math.abs(deltaX) > 50 && Math.abs(deltaX) > Math.abs(deltaY)) {
					if (deltaX >= 0) {
						// console.log("左滑")  
					} else {
						// console.log("右滑")  
					}
				} else if (Math.abs(deltaY) > 50 && Math.abs(deltaX) < Math.abs(deltaY)) {
					if (deltaY < 100) {
						if(this.qingqiuflag == true){
							let sum = (this.pagesum - 1) * this.pagesize
							console.log(sum,this.total);
							if (this.total > sum) {
								this.qingqiuflag = false
								this.getlist() 
							}
						}
					} else {
						console.log("下滑") 
					}
				}
			},
			
			// 请求订单列表
			getlist(){
				this.$u.get(`/app/order/myOrderList?type=${this.type}&statusList=${this.statusarr}&pageNum=${this.pagesum}&pageSize=${this.pagesize}`).then(res => {
					if (res.code == 200) {
						this.xiaflag = true
						this.total = res.total
						if (this.pagesum > 1) {
							this.pagesum++
							this.orderlist = this.orderlist.concat(res.rows)
							this.qingqiuflag = true
						} else {
							this.pagesum++
							this.orderlist = res.rows  
							this.qingqiuflag = true
						} 
						console.log(this.orderlist);
					}else if(res.code == 401){
						uni.showModal({
							    title: '温馨提示',  
							    content: '您该操作需登录，是否前去登录？',  
							    success: function (res) {  
							        if (res.confirm) {
										uni.navigateTo({
											url:'/pages/login/index'
										})
							        } else if (res.cancel) {
							        
							    }  
							}  
						})
					}
				})
			},
			
            // 切换tab
			btntab(index,item){
				this.pagesum = 1
				this.orderlist = []
				this.tabindex = index
				this.statusarr = item.value
				this.getlist()
			},
			// 切换订单筛选
			btndingdan(index,item){
				this.pagesum = 1
				this.orderlist = []
				this.dingdanindex = index
				this.type = item.value
				this.getlist()
			},
			// 点击跳转到详情页
			btnxq(orderNo){
				uni.navigateTo({
					url:'/page_user/dingdanxq?orderNo=' + orderNo
				})
			},
			// 点击结束订单
			btnjies(orderNo){
				let orderNos = orderNo
				let that = this
				uni.showModal({
					    title: '温馨提示',  
					    content: '您确定要结束该订单吗?',  
					    success: function (res) {  
					        if (res.confirm) {
								let data = {
									orderNo:orderNos,
									type:2
								}
							     that.$u.post(`/app/order/orderEnd?orderNo=${orderNos}`,data).then(res => {
							   	 if (res.code == 200) {
							   		uni.showToast({
							   		       title: '结束成功',
							   		       icon: 'success',
							   		       duration:2000
							   		})
									that.getlist()
							   	 }else{
									 uni.showToast({
									     title: res.msg,
									     icon: 'success',
									     duration:2000
									 })
								 }
							   })
					        } else if (res.cancel) {
					          
					    }  
					}  
				})
			},
			// 点击取消订单
			btnqux(orderNo){
				let orderNos = orderNo 
				let that = this
				uni.showModal({
					    title: '温馨提示',  
					    content: '您确定要取消该订单吗?',  
					    success: function (res) {  
					        if (res.confirm) {
								let data = {
									orderNo:orderNos,
									type:1
								}
							     that.$u.post(`/app/order/orderCancel?orderNo=${orderNos}`,data).then(res => {
							   	 if (res.code == 200) {
							   		uni.showToast({
							   		       title: '取消成功',
							   		       icon: 'success',
							   		       duration:2000
							   		})
									that.getlist()
							   	 }else{
									 uni.showToast({
									     title: res.msg,
									     icon: 'success',
									     duration:2000
									 })
								 }
							   })
					        } else if (res.cancel) {
					          
					    }  
					}  
				})
			},
			// 点击联系店长拨打电话
			btntelshop(managerPhone){
				uni.makePhoneCall({
					phoneNumber: managerPhone,
					success: function(res) {
						console.log('拨打电话成功', res)
					},
					fail: function(err) {
						console.error('拨打电话失败', err)
						uni.showToast({
							title: '取消拨打电话',
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.active{
		border-bottom: 8rpx solid #48893B;
		font-weight: 600 !important;
		font-size: 32rpx !important;
		color: #3D3D3D !important;
	}
	.actives{
		background: #DEF1DA;
		color: #48893B !important;
	}
	page {
		background-color: #fff;
		.list{
			padding: 0 38rpx;
			box-sizing: border-box;
			width: 100%;
			max-height: 1020rpx;
			overflow: scroll;
			padding-bottom: 50rpx;
			.list_item{
				padding: 20rpx 18rpx;
				box-sizing: border-box;
				width: 674rpx;
				max-height: 690rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(0,0,0,0.15);
				border-radius: 18rpx 18rpx 18rpx 18rpx;
				margin-top: 24rpx;
				.fou{
					display: flex;
					margin-top: 36rpx;
					justify-content: space-between;
					padding-left: 72rpx;
					box-sizing: border-box;
					.chaxq{
						width: 172rpx;
						height: 50rpx;
						background: #48893B;
						border-radius: 29rpx 29rpx 29rpx 29rpx;
						border: 1rpx solid #48893B;
						font-size: 28rpx;
						color: #FFFFFF;
						line-height: 50rpx;
						text-align: center;
					}
					.quxiao{
						width: 172rpx;
						height: 50rpx;
						border-radius: 29rpx 29rpx 29rpx 29rpx;
						border: 1rpx solid #48893B;
						text-align: center;
						line-height: 50rpx;
						font-size: 28rpx;
						color: #48893B;
					}
					.lianxi{
						display: flex;
						align-items: center;
						text-align: center;
						width: 189rpx;
						height: 50rpx;
						line-height: 50rpx;
						border-radius: 29rpx 29rpx 29rpx 29rpx;
						border: 1rpx solid #48893B;
						font-size: 28rpx;
						color: #48893B;
						image{
							width: 50rpx;
							height: 50rpx;
							margin-right: 14rpx;
						}
					}
				}
				.thr{
					text-align: right;
					font-size: 32rpx;
					color: #3D3D3D;
					margin-top: 26rpx;
					text{
						font-weight: 600;
						font-size: 44rpx;
					}
				}
				.two{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 30rpx;
					border-bottom: 1rpx solid #D8D8D8;
					padding-bottom: 30rpx;
					box-sizing: border-box;
					.lt{
						display: flex;
						image{
							width: 160rpx;
							height: 160rpx;
							margin-right: 40rpx;
							border-radius: 10rpx;
						}
						.shuo{
							view{
								font-size: 28rpx;
								color: #3D3D3D;
							}
						}
					}
					.rt{
						text-align: right;
						view{
							font-size: 28rpx;
							color: #3D3D3D;
						}
					}
				}
				.one{
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 22rpx;
					border-bottom: 1rpx solid #D8D8D8;
					padding-bottom: 24rpx;
					box-sizing: border-box;
					.lt{
						display: flex;
						align-items: center;
						font-weight: 600;
						font-size: 28rpx;
						color: #3D3D3D;
						image{
							width: 14rpx;
							height: 36rpx;
							margin-left: 10rpx;
						}
					}
					.rt{
						font-size: 24rpx;
						color: #7C7C7C;
					}
				}
				.rts{
					width: 100%;
					text-align: right;
					display: flex;
					justify-content: space-between;
					font-weight: 600;
					.ones{
						font-weight: 600;
						font-size: 28rpx;
						color: #48893B;
					}
				}
				.top{
					width: 634rpx;
					height: 90rpx;
					background: #DEF1DA;
					border-radius: 10rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 20rpx;
					box-sizing: border-box;
					margin-top: 20rpx;
					.lt{
						display: flex;
						align-items: center;
						font-size: 28rpx;
						color: #3D3D3D;
						image{
							width: 46rpx;
							height: 46rpx;
							margin-right: 14rpx;
						}
					}
				}
			}
		}
		.dingdantab{
			width: 674rpx;
			height: 112rpx;
			padding: 24rpx 30rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(0,0,0,0.15);
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			display: flex;
			justify-content: space-between;
			margin: auto;
			margin-top: 34rpx;
			view{
				width: 198rpx;
				height: 64rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				text-align: center;
				line-height: 64rpx;
				font-weight: 600;
				font-size: 32rpx;
				color: #7C7C7C;
			}
		}
		.tab{
			width: 100%;
			padding: 0 54rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			font-size: 32rpx;
			color: #3D3D3D;
			margin-top: 42rpx;
			view{
				padding-bottom: 10rpx;
				box-sizing: border-box;
				border-radius: 4rpx;
			}
		}
		.imgbj{
			width: 750rpx;
			height: 346rpx;
			position: fixed;
			top: 0;
			left: 0;
			z-index: -1;
		}
	}

	
</style>