<template>
	<view :data-theme='theme()' class="cg-order" :class="theme() || ''">
        <navbar bg="#F6F7F9">
			<template v-slot:content>
				<view class="search-wrap2 d-b-c" style="margin-left: 30rpx;">
					<view class="index-search t-c flex-1" style="border: none;background-color: #fff;border-radius: 36rpx;">
						<span class="icon iconfont icon-sousuo"></span>
						<input type="text" v-model="keyWord" class="flex-1 ml10 f30 gray3" value="" placeholder-class="f32 gray7"
						placeholder="搜索场馆订单" confirm-type="search" @confirm="search()"/>
					</view>
					<!--<button class="btn ml10" @click="search()" type="default">搜索</button>-->
				</view>
			</template>
		</navbar>

		<view class="top-tabbar">
			<!-- <view :class="state_active == 0 ? 'tab-item active' : 'tab-item'" @click="stateFunc('all')">全部订单</view>
			<view :class="state_active == 1 ? 'tab-item active' : 'tab-item'" @click="stateFunc(1)">待付款</view>
			<view :class="state_active == 2 ? 'tab-item active' : 'tab-item'" @click="stateFunc(2)">已预约</view>
			<view :class="state_active == 3 ? 'tab-item active' : 'tab-item'" @click="stateFunc(3)">已完成</view>
			<view :class="state_active == 4 ? 'tab-item active' : 'tab-item'" @click="stateFunc(4)">退订/退款</view> -->
			<view :class="state_active == 0 ? 'tab-item active' : 'tab-item'" @click="stateFunc(0)">全部订单</view>
			<view :class="state_active == 1 ? 'tab-item active' : 'tab-item'" @click="stateFunc(1)">待付款</view>
			<view :class="state_active == 2 ? 'tab-item active' : 'tab-item'" @click="stateFunc(2)">已预约</view>
			<view :class="state_active == 3 ? 'tab-item active' : 'tab-item'" @click="stateFunc(3)">进行中</view>
			<view :class="state_active == 4 ? 'tab-item active' : 'tab-item'" @click="stateFunc(4)">已完成</view>
			<view :class="state_active == 5 ? 'tab-item active' : 'tab-item'" @click="stateFunc(5)">退订/退款</view>
		</view>

		<view class="d-f a-i-c ball-type-box">
			<view class="ball" :class="ballType == 1 ? 'active' : ''" @click="changeBallType(1)">网球</view>
			<view class="ball" :class="ballType == 2 ? 'active' : ''" @click="changeBallType(2)">篮球</view>
		</view>
		<!--列表-->
		<scroll-view scroll-y="true" class="scroll-Y" :style="'height:' + scrollviewHigh + 'px;'" lower-threshold="50"
			@scrolltolower="scrolltolowerFunc">
			<view :class="topRefresh ? 'top-refresh open' : 'top-refresh'">
				<view class="circle" v-for="(circle, n) in 3" :key="n"></view>
			</view>
			<view class="order-list">
				<view class="item" v-for="(item, index) in listData" :key="index">
					<view class="order-head d-b-c">
						<view class="d-f a-i-c">
							<!-- <text class="state-text">{{ item.order_source_text }}</text> -->
							<text class="cg-name flex-1 fb" @click="toGround(item.ground_id)">{{ item.ground_name }}</text>
							<image style="width: 48rpx;height: 48rpx;" src="@/static/icon/right.png" mode=""></image>
						</view>
						<view class="state cg-state">
							<text class="red" v-if="item.order_status == 0">待付款</text>
							<text style="color: #365A9A;" v-if="item.order_status == 1">已预约</text>
							<text style="color: #606266;" v-if="item.order_status == 2">进行中</text>
							<text style="color: #C9C9C9;" v-if="item.order_status == 3">已完成</text>
							<text style="color: #C9C9C9;" v-if="item.order_status == 4">订单取消</text>
							<text style="color: #606266;" v-if="item.order_status == 5">退款成功</text>
						</view>
					</view>
					<!--一个商品显示-->
					<view class="one-product d-s-c" @click="gotoOrder(item.id)">
						<image :src="item.image" mode="aspectFill" style="width: 200rpx; height: 200rpx; border-radius: 10rpx;"></image>
						<view class="flex-1">
							<view class="pro-info cg-info2">订单号：{{ item.order_sn }}</view>
							<view class="pro-info cg-info3">预约时间：{{ ballType == 1 ? item.trade[0].day_title : item.times }}</view>
						</view>
		
						<!-- <view class="total-count">
							<view class="left-shadow"></view>
							<view class="price theme-price f22">
								¥
								<text class="f40 theme-price" v-if="item.order_source==80">
									{{ (item.pay_price*1 + item.advance.pay_price*1).toFixed(2) }}
								</text>
								<text class="f40 theme-price" v-else>{{ item.pay_price }}</text>
							</view>
							<view class="count">共{{ item.product[0].total_num }}件</view>
						</view> -->
					</view>
					<view class="order-bts presale" v-if="item.order_source==80">
						
						<template v-if="item.order_status.value != 21">
							<view class="d-e-c">
								<!-- 订单付款 -->
								<template v-if="item.advance.pay_status.value == 20&&item.pay_status.value == 10">
									<template v-if="nowOverTime(item.advance.end_time)&&item.order_status.value!=20">
										<view class="d-e-c mt10" v-if="item.advance.main_order_no!=item.order_no">
											<button class="pay-btn theme-btn"
												@click="gotoPage('/pages/order/cashier?order_id='+item.order_id)">支付尾款</button>
										</view>
										<view class="d-e-c mt10" v-else>
											<button class="pay-btn theme-btn"
												@click="depositPay(item.order_id)">支付尾款</button>
										</view>
									</template>
								</template>
								<view class="d-e-c mt10"
									v-if="item.pay_status.value == 10&&item.advance.order_status==10&&item.advance.money_return==1">
									<button class="pay-btn theme-borderbtn"
										@click="cancelAdvance(item.advance.order_advance_id)">取消定金</button>
								</view>
								<template v-if="item.order_status.value == 10&&item.pay_status.value == 20">
									<template v-if="item.delivery_status.value == 10">
										<button @click="cancelOrder(item.order_id)"
											class="theme-borderbtn">申请取消</button>
									</template>
								</template>
								<view class="d-e-c mt10"
									v-if="item.advance.pay_status.value == 10&&item.order_status.value!=20&&!nowOverTime(item.advance.pay_end_time)">
									<button class="pay-btn theme-btn"
										@click="gotoPage('/pages/order/cashier?order_type=40&order_id=' + item.advance.order_advance_id)">支付定金
									</button>
								</view>
								<view class="d-e-c mt10"
									v-if="item.delivery_status.value == 20 && item.receipt_status.value == 10">
									<button class="pay-btn theme-btn" @click="orderReceipt(item.order_id)">确认收货
									</button>
								</view>
								<view class="d-e-c mt10" v-if="item.order_status.value == 30 && item.is_comment == 0">
									<button class="pay-btn theme-btn" @click="gotoEvaluate(item.order_id)">评价
									</button>
								</view>
							</view>
						</template>
						<view v-else class="count d-e-c ww100 redF11">取消申请中</view>
					</view>
					<view class="order-bts" v-else>
						<block>
							<!-- 未支付取消订单 -->
							<button @click="showCancleOrderPopup(item.id)" class="theme-borderbtn cancel-btn"
								v-if="item.order_status == 0">取消订单</button>
							<!-- 订单付款 -->
							<block v-if="item.order_status == 0">
								<button class="theme-btn pay-btn" @click="onPayOrder(item.ground_id, item.id)">去支付</button>
							</block>

							<block v-if="item.order_status >= 2">
								<button class="theme-btn del-btn" @click="onDelOrder(item.id)">删除订单</button>
							</block>
						</block>
					</view>
				</view>
				<view class="d-c-c p30" v-if="listData.length == 0 && !loading">
					<text class="iconfont icon-wushuju"></text>
					<text class="cont">亲，暂无相关记录哦</text>
				</view>
				<uni-load-more v-else :loadingType="loadingType"></uni-load-more>
			</view>
		</scroll-view>
		<!--核销二维码-->
		<Popup :show="isCodeImg" type="middle" @hidePopup="hideCodePopupFunc">
			<view class="ww100 p20 box-s-b">
				<image class="ww100" :src="codeImg" mode="widthFix"></image>
			</view>
		</Popup>

		<!-- 取消订单 -->
		<Popup :show="cancelOrderPopup" radius="16rpx">
			<view class="notice-popup">
				<view class="title">确定取消订单？</view>
				<view class="desc">   
					取消订单后无法恢复，是否确认取消
				</view>
				<view class="btn">
					<view class="btn1" @click="cancelOrderPopup = false">取消</view>
					<view class="btn2" @click="cancelOrder">确定</view>
				</view>
			</view>
		</Popup>
		
		<!-- 删除订单 -->
		<Popup :show="delOrderPopup" radius="16rpx">
			<view class="notice-popup">
				<view class="title">确定删除订单？</view>
				<view class="desc">   
					删除订单后无法恢复，是否确认删除订单？
				</view>
				<view class="btn">
					<view class="btn1" @click="delOrderPopup = false">取消</view>
					<view class="btn2" @click="delOrder">确定</view>
				</view>
			</view>
		</Popup>

		<tabBar></tabBar>
	</view>
</template>

<script>
	import Popup from '@/components/uni-popup.vue';
	import uniLoadMore from '@/components/uni-load-more.vue';
    import navbar from '@/components/navbar.vue';
	import {
		pay
	} from '@/common/pay.js';
	export default {
		components: {
			Popup,
			uniLoadMore,
			navbar
		},
		data() {
			return {
				/*手机高度*/
				phoneHeight: 0,
				/*可滚动视图区域高度*/
				scrollviewHigh: 0,
				/*状态选中*/
				state_active: 0,
				/*顶部刷新*/
				topRefresh: false,
				/*数据*/
				listData: [],
				/*数据类别*/
				dataType: 'all',
				/*是否显示支付类别弹窗*/
				isPayPopup: false,
				/*支付方式*/
				pay_type: 20,
				/*订单id*/
				order_id: 0,
				/*最后一页码数*/
				last_page: 0,
				/*当前页面*/
				page: 1,
				/*每页条数*/
				list_rows: 10,
				/*有没有等多*/
				no_more: false,
				/*是否正在加载*/
				loading: true,
				/*是否显示核销二维码*/
				isCodeImg: false,
				codeImg: '',
				cancelOrderPopup: false,
				delOrderPopup: false,
				orderStatus: '',
				keyWord: '',
				ballType: 1, // 1网球 2篮球
			};
		},
		computed: {
			/*加载中状态*/
			loadingType() {
				if (this.loading) {
					return 1;
				} else {
					if (this.listData.length != 0 && this.no_more) {
						return 2;
					} else {
						return 0;
					}
				}
			}
		},
		onLoad(e) {
			if (typeof e.dataType != 'undefined') {
				this.dataType = e.dataType;
			}

			// state_active 是tab栏的下标，dataType是订单状态，两者不一致，需要转换
			if (this.dataType == 'all') {
				// 全部订单
				this.state_active = 0;
			} else if (this.dataType == 0) {
				// 待付款
				this.state_active = 1;
			} else if (this.dataType == 1) {
				// 已预约
				this.state_active = 2;
			} else if (this.dataType == 3) {
				// 已完成
				this.state_active = 4;
			} else if (this.dataType == 5) {
				// 退订/退款
				this.state_active = 5;
			}
		},
		mounted() {
			this.init();
		},
		onShow() {
			/*获取订单列表*/
			this.page = 1;
			this.listData = [];
			this.getData();
		},
		methods: {
			/*初始化*/
			init() {
				let self = this;
				uni.getSystemInfo({
					success(res) {
						self.phoneHeight = res.windowHeight;
						// 计算组件的高度
						let view = uni.createSelectorQuery().select('.top-tabbar');
						view.boundingClientRect(data => {
							let h = self.phoneHeight - data.height;
							self.scrollviewHigh = h;
						}).exec();
					}
				});
			},

			// 切换球类
			changeBallType(type) {
				let self = this;

				self.ballType = type;
				self.listData = [];
				self.getData();
			},

			/*状态切换*/
			stateFunc(e) {
				console.log("🚀 ~ e:", e)
				let self = this;
				console.log("🚀 ~ state_active:", self.state_active)

				if (self.state_active != e) {
					self.page = 1;
					self.loading = true;
					self.state_active = e;

					switch (e) {
						case 0: 
							// 全部订单
							self.listData = [];
							self.dataType = 'all';
							break;
						case 1:
							// 待付款
							self.listData = [];
							self.dataType = 0;
							break;
						case 2:
							// 已预约
							self.listData = [];
							self.dataType = 1;
							break;
						case 3:
							// 进行中
							self.listData = [];
							self.dataType = 2;
							break;
						case 4:
							// 已完成
							self.listData = [];
							self.dataType = 3;
							break;
						case 5:
							// 退订/退款
							self.listData = [];
							self.dataType = 5;
							break;
					}
					console.log("🚀 ~fff self.dataType:", self.dataType)

					self.getData();
				}
			},

			/*可滚动视图区域到底触发*/
			scrolltolowerFunc() {
				let self = this;
				if (self.no_more) {
					return;
				}
				self.page++;
				if (self.page <= self.last_page) {
					self.getData();
				} else {
					self.no_more = true;
				}
			},

			/*获取数据*/
			getData() {
				let self = this;
				self.loading = true;
				let dataType = self.dataType;
				console.log("🚀 ~ dataType:", dataType)
				if (dataType == 'all') {
					dataType = '';
				}
				self._post(
					'order.groundOrder/orderGroundList', {
						order_status: dataType,
						search: self.keyWord,
						page: self.page,
						size: self.list_rows,
						app_id: self.getAppId(),
						type: self.ballType
					},
					function(res) {
						self.loading = false;
						self.listData = self.listData.concat(res.data.lists.data);
						console.log("🚀 ~ self.listData:", self.listData)
						self.last_page = res.data.lists.last_page;
						if (res.data.lists.last_page <= 1) {
							self.no_more = true;
						} else {
							self.no_more = false;
						}
					}
				);
			},
			/*计算时分秒*/
			countDown(t) {
				let time = t - (Date.now() / 1000);
				//天数
				let day = Math.floor(time / (60 * 60 * 24));
				//取模（余数）
				let modulo = time % (60 * 60 * 24);
				//小时数
				let hour = Math.floor(modulo / (60 * 60));
				modulo = modulo % (60 * 60);
				//分钟
				let minute = Math.floor(modulo / 60);
				//秒
				let second = modulo % 60;
				day = this.convertTwo(day);
				hour = this.convertTwo(hour);
				minute = this.convertTwo(minute);
				second = this.convertTwo(second);
				let text = parseInt(day) > 0 ? (parseInt(day) + '天 ') : '' + parseInt(hour) + '时' + parseInt(minute) +
					'分' + parseInt(second) + '秒';
				return text
			},

			/*跳转页面*/
			gotoOrder(e) {
				this.gotoPage(`/pages/order/cg-order-detail?order_id=${e}&ballType=${this.ballType}`);
			},

			/*隐藏支付方式*/
			hidePopupFunc() {
				this.isPayPopup = false;
			},

			/*去支付*/
			payTypeFunc(payType) {
				let self = this;
				self.isPayPopup = false;
				uni.showLoading({
					title: '加载中'
				});
				self._post(
					'user.order/pay', {
						payType: payType,
						order_id: self.order_id,
						pay_source: self.getPlatform()
					},
					function(res) {
						pay(res, self);
					}
				);
			},
			depositPay(e) {
				this.gotoPage('/pages/order/confirm-order?order_type=retainage&order_id=' + e)
			},

			// 跳转支付页面
			onPayOrder(groundId = 0, orderId = 0) {
				let self = this;
				if (self.ballType == 1) {
					// 网球场
					self.gotoPage(`/bundle/reserve/confirm?orderId=${orderId}&venueId=${groundId}&typeId=1`);
					return
				}
			},

			
			cancelAdvance(e) {
				let self = this;
				let order_id = e;
				uni.showModal({
					title: '提示',
					content: '您确定要取消吗?',
					success: function(o) {
						if (o.confirm) {
							uni.showLoading({
								title: '正在处理'
							});
							self._get(
								'plus.advance.Order/cancelFront', {
									order_id: order_id
								},
								function(res) {
									uni.hideLoading();
									uni.showToast({
										title: '操作成功',
										duration: 2000,
										icon: 'success'
									});
									self.listData = [];
									self.getData();
								}
							);
						}
					}
				});
			},

			// 取消订单弹窗
			showCancleOrderPopup(order_id) {
				this.cancelOrderPopup = true;
				this.order_id = order_id;
			},

			/*取消订单*/
			cancelOrder(e) {
				let self = this;
				uni.showLoading({
					title: '正在处理'
				});
				self._post(
					'order.groundOrder/cancelGroundOrder', {
						order_id: self.order_id
					},
					function(res) {
						self.cancelOrderPopup = false;
						uni.hideLoading();
						uni.showToast({
							title: '操作成功',
							duration: 2000,
							icon: 'success'
						});
						self.listData = [];
						self.getData();
					}
				);
			},
			nowOverTime(t) {

				let now = new Date().getTime();
				let time = new Date(t * 1000).getTime();
				return now >= time

			},
		
			// 删除订单
			onDelOrder(order_id) {
				this.delOrderPopup = true;
				this.order_id = order_id;
			},

			delOrder() {
				let self = this;
				uni.showLoading({
					title: '正在处理'
				});
				self._post(
					'order.groundOrder/delGroundOrder',
					{
						order_id: self.order_id
					},
					function(res) {
						self.delOrderPopup = false;

						uni.hideLoading();
						uni.showToast({
							title: '操作成功',
							duration: 2000,
							icon: 'success'
						});
						self.listData = [];
						self.getData();
					}
				);
			},

			// 跳转场馆
			toGround(ground_id) {
				uni.navigateTo({
					url: `/bundle/reserve/details?id=${ground_id}&typeId=${this.ballType}`
				});
			}
		}
	};
</script>

<style lang="scss">

.search-wrap2 .index-serch {
	border: none !important;
	background-color: #fff !important;
	border-radius: 36rpx !important;
}

@import url("css/cg-order.css");


.notice-popup {
	padding: 20rpx 0;
	width: 100%;

	.title {
		font-size: 36rpx;
		color: #303133;
		line-height: 50rpx;
		text-align: center;
	}

	.desc {
		margin-top: 48rpx;
		font-weight: 400;
		font-size: 32rpx;
		color: #303133;
		line-height: 52rpx;
		text-align: center;
	}

	.btn {
		font-size: 32rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 44rpx;

		.btn1 {
			width: 240rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: #F6F7F8;
			border-radius: 8rpx;
			margin-right: 30rpx;
		}

		.btn2 {
			width: 240rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: #365A9A;
			color: #FFFFFF;
			border-radius: 8rpx;
		}
	}
}

.ball-type-box {
	margin-left: 40rpx;
	margin-bottom: 24rpx;
	.ball {
		width: 108rpx;
		height: 52rpx;
		text-align: center;
		line-height: 52rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		font-size: 26rpx;
		color: #606266;
		margin-right: 10rpx;
	}

	.ball.active {
		background: #365A9A;
		color: #FFFFFF;
	}
}


.tab-item {
	font-size: 26rpx;
}

.tab-item.active {
	color: #365A9A;
	font-size: 30rpx;
}
</style>
