<template>
	<view>
		<view class="storeInformation_middleNav">
			<view class="storeInformation_middle_navBar">
				<ul class="storeInformation_middle_navBar_ul">
					<li :class="{'navActive':navActive === index}" v-for="(item,index) in dishNav"
						@click="onDish(item,index)">{{item.name}}</li>
				</ul>
			</view>
		</view>
		<!-- 内容切换 -->
		<!-- 全部状态 -->
		<view v-if="navActive==0" ref="scrollContainer">
			<view v-if="goodsList == ''" style="text-align: center;">
				<text>暂无订单</text>
			</view>
			<view class="content" v-for="item in goodsList" :key="item">
				<view class="content_all" @click="goTOdetail(item.id)">
					<view style="display: flex;">
						<view class="content_lef">
							<img :src="item.businessVO.businessAvatar" class="content_biaoti_img">
						</view>
						<view class="content_zhonjia">
							<view class="content_content">
								{{item.businessVO.businessName}}
							</view>
							<view class="content-tag" v-if="item.pickupMethod == 0">
								堂食
							</view>
							<view class="content-tag" v-if="item.pickupMethod == 1">
								自提
							</view>
						</view>
					</view>

					<view class="content_right" v-if="item.state == 0">
						未支付
					</view>
					<view class="content_right" v-if="item.state == 1">
						已完成
					</view>
					<view class="content_right" v-if="item.state == 2">
						已退款
					</view>
				</view>
				<view class="on_all" @click="goTOdetail(item.id)">
					<view class="on_left">
						<view>
							<view class="on_left_top">
								<uni-icons type="notification-filled" size="21" color="#2493F1"></uni-icons>
								<text>取餐号</text>
							</view>
							<view class="on_left_numbers" v-if="item.pickupCode == null">
								无取餐号
							</view>
							<view class="on_left_number">
								{{item.pickupCode}}
							</view>
							<!-- 							<view class="on_left_under">
								排在第{{item.pickupCode}}位
							</view> -->
						</view>
					</view>
					<scroll-view scroll-x="true" class="scroll" scroll-with-animation="true">
						<view class="on_zhonjia" v-for="s in item.orderDetailsVOList" :key="s">
							<view class="on_zhonjia_kuai">
								<img :src="s.dishesVO.dishesImage" class="on_zhonjia_img">
								<view class="on_zhonjia_text">
									{{s.dishesVO.dishesName}}
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="on_right">
						<view class="on_right_money">
							￥{{item.totalPrice}}
						</view>
						<view class="on_right_number">
							共{{item.orderDetailsVOList[0].quantity}}件
						</view>
					</view>
				</view>
				<view class="under" v-if="item.state===0">
					<button class="under_btn" @click="goPay(item.id)">去支付</button>
					<button class="under_btns" @click="goCancel(item.id)">取消订单</button>
				</view>
				<view class="under" v-if="item.state===1">
					<button class="under_btn" @click="goToEvaluate(item.id)">去评价</button>
				</view>
			</view>
		</view>
		<!-- 未支付状态 -->
		<view v-if="navActive==1">
			<view v-if="goodsList == ''" style="text-align: center;">
				<text>暂无订单</text>
			</view>
			<view class="content" v-for="item in goodsList" :key="item">
				<view>
					<view class="content_all" @click="goTOdetail(item.id)">
						<view style="display: flex;">
							<view class="content_lef">
								<img :src="item.businessVO.businessAvatar" class="content_biaoti_img">
							</view>
							<view class="content_zhonjia">
								<view class="content_content">
									{{item.businessVO.businessName}}
								</view>
								<view class="content-tag" v-if="item.pickupMethod ==0">
									堂食
								</view>
								<view class="content-tag" v-if="item.pickupMethod ==1">
									自提
								</view>
							</view>
						</view>
						<view class="content_right" v-if="item.state == 0">
							未支付
						</view>
					</view>
					<view class="on_all" @click="goTOdetail(item.id)">
						<view class="on_left">
							<view>
								<view class="on_left_top">
									<uni-icons type="notification-filled" size="21" color="#2493F1"></uni-icons>
									<text>取餐号</text>
								</view>
								<view class="on_left_numbers" v-if="item.pickupCode == null">
									无取餐号
								</view>
								<view class="on_left_number">
									{{item.pickupCode}}
								</view>
								<!-- 							<view class="on_left_under">
												排在第{{item.pickupCode}}位
											</view> -->
							</view>
						</view>
						<scroll-view scroll-x="true" class="scroll" scroll-with-animation="true">
							<view class="on_zhonjia" v-for="s in item.orderDetailsVOList" :key="s">
								<view class="on_zhonjia_kuai">
									<img :src="s.dishesVO.dishesImage" class="on_zhonjia_img">
									<view class="on_zhonjia_text">
										{{s.dishesVO.dishesName}}
									</view>
								</view>
							</view>
						</scroll-view>
						<view class="on_right">
							<view class="on_right_money">
								￥{{item.totalPrice}}
							</view>
							<view class="on_right_number">
								共{{item.orderDetailsVOList[0].quantity}}件
							</view>
						</view>
					</view>
					<view class="under" v-if="item.state===0">
						<button class="under_btn" @click="goPay(item.id)">去支付</button>
						<button class="under_btns" @click="goCancel(item.id)">取消订单</button>
					</view>
				</view>

			</view>
		</view>
		<!-- 已完成状态 -->
		<view v-if="navActive==2">
			<view v-if="goodsList == ''" style="text-align: center;">
				<text>暂无订单</text>
			</view>
			<view class="content" v-for="item in goodsList" :key="item">
				<view class="content_all" @click="goTOdetail(item.id)">
					<view style="display: flex;">
						<view class="content_lef">
							<img :src="item.businessVO.businessAvatar" class="content_biaoti_img">
						</view>
						<view class="content_zhonjia">
							<view class="content_content">
								{{item.businessVO.businessName}}
							</view>
							<view class="content-tag" v-if="item.pickupMethod ==0">
								堂食
							</view>
							<view class="content-tag" v-if="item.pickupMethod ==1">
								自提
							</view>
						</view>
					</view>
					<view class="content_right" v-if="item.state == 1">
						已完成
					</view>
				</view>
				<view class="on_all" @click="goTOdetail(item.id)">
					<view class="on_left">
						<view>
							<view class="on_left_top">
								<uni-icons type="notification-filled" size="21" color="#2493F1"></uni-icons>
								<text>取餐号</text>
							</view>
							<view class="on_left_number">
								{{item.pickupCode}}
							</view>
							<!-- 							<view class="on_left_under">
											排在第{{item.pickupCode}}位
										</view> -->
						</view>
					</view>
					<scroll-view scroll-x="true" class="scroll" scroll-with-animation="true">
						<view class="on_zhonjia" v-for="s in item.orderDetailsVOList" :key="s">
							<view class="on_zhonjia_kuai">
								<img :src="s.dishesVO.dishesImage" class="on_zhonjia_img">
								<view class="on_zhonjia_text">
									{{s.dishesVO.dishesName}}
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="on_right">
						<view class="on_right_money">
							￥{{item.totalPrice}}
						</view>
						<view class="on_right_number">
							共{{item.orderDetailsVOList[0].quantity}}件
						</view>
					</view>
				</view>
				<view class="under" v-if="item.state===1">
					<button class="under_btn" @click="goToEvaluate(item.id)">去评价</button>
				</view>
			</view>
		</view>
		<!-- 已取消的状态 -->
		<view v-if="navActive==3">
			<view v-if="goodsList == ''" style="text-align: center;">
				<text>暂无订单</text>
			</view>
			<view class="content" v-for="item in goodsList" :key="item">
				<view class="content_all" @click="goTOdetail(item.id)">
					<view style="display: flex;">
						<view class="content_lef">
							<img :src="item.businessVO.businessAvatar" class="content_biaoti_img">
						</view>
						<view class="content_zhonjia">
							<view class="content_content">
								{{item.businessVO.businessName}}
							</view>
							<view class="content-tag" v-if="item.pickupMethod == 0">
								堂食
							</view>
							<view class="content-tag" v-if="item.pickupMethod ==1">
								自提
							</view>
						</view>
					</view>
					<view class="content_right" v-if="item.state == 3">
						已取消
					</view>
				</view>
				<view class="on_all" @click="goTOdetail(item.id)">
					<view class="on_left">
						<view>
							<view class="on_left_top">
								<uni-icons type="notification-filled" size="21" color="#2493F1"></uni-icons>
								<text>取餐号</text>
							</view>
							<view class="on_left_number">
								{{item.pickupCode}}
							</view>
						</view>
					</view>
					<scroll-view scroll-x="true" class="scroll" scroll-with-animation="true">
						<view class="on_zhonjia" v-for="s in item.orderDetailsVOList" :key="s">
							<view class="on_zhonjia_kuai">
								<img :src="s.dishesVO.dishesImage" class="on_zhonjia_img">
								<view class="on_zhonjia_text">
									{{s.dishesVO.dishesName}}
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="on_right">
						<view class="on_right_money">
							￥{{item.totalPrice}}
						</view>
						<view class="on_right_number">
							共{{item.orderDetailsVOList[0].quantity}}件
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 退款状态 -->
		<view v-if="navActive==4">
			<view v-if="goodsList == ''" style="text-align: center;">
				<text>暂无订单</text>
			</view>
			<view class="content" v-for="item in goodsList" :key="item">
				<view class="content_all" @click="goTOdetail(item.id)">
					<view style="display: flex;">
						<view class="content_lef">
							<img :src="item.businessVO.businessAvatar" class="content_biaoti_img">
						</view>
						<view class="content_zhonjia">
							<view class="content_content">
								{{item.businessVO.businessName}}
							</view>
							<view class="content-tag" v-if="item.pickupMethod ==0">
								堂食
							</view>
							<view class="content-tag" v-if="item.pickupMethod ==1">
								自提
							</view>
						</view>
					</view>
					<view class="content_right" v-if="item.state == 2">
						已退款
					</view>
				</view>
				<view class="on_all" @click="goTOdetail(item.id)">
					<view class="on_left">
						<view>
							<view class="on_left_top">
								<uni-icons type="notification-filled" size="21" color="#2493F1"></uni-icons>
								<text>取餐号</text>
							</view>
							<view class="on_left_number">
								{{item.pickupCode}}
							</view>
							<!-- 							<view class="on_left_under">
											排在第{{item.pickupCode}}位
										</view> -->
						</view>
					</view>
					<scroll-view scroll-x="true" class="scroll" scroll-with-animation="true">
						<view class="on_zhonjia" v-for="s in item.orderDetailsVOList" :key="s">
							<view class="on_zhonjia_kuai">
								<img :src="s.dishesVO.dishesImage" class="on_zhonjia_img">
								<view class="on_zhonjia_text">
									{{s.dishesVO.dishesName}}
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="on_right">
						<view class="on_right_money">
							￥{{item.totalPrice}}
						</view>
						<view class="on_right_number">
							共{{item.orderDetailsVOList[0].quantity}}件
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted,ref } from 'vue'
	import { apiImageUrl } from '../../api/api';
	import { onReachBottom,onPullDownRefresh } from '@dcloudio/uni-app'
	import { number } from 'echarts';
	onMounted(() => {
		getGoodsList(currentPage.value, '')
		console.log(currentPage.value, "生命周期的")
		wx.removeStorageSync('businessId')
		// if(!isPaid.value){
		// 	staratCountDown()
		// }
	})
	const navActive = ref(0)
	const orderId = ref()
	// 下拉刷新
	onPullDownRefresh(()=>{
		currentPage.value = 1;
		navActive.value = 0
		getGoodsList(currentPage.value, '')
		uni.stopPullDownRefresh();//处理完逻辑停止刷新
	})
	// 导航
	const dishNav : any = ref([
		{ id: 1, name: '全部' },
		{ id: 2, name: '未支付' },
		{ id: 3, name: '已完成' },
		{ id: 4, name: '已取消' },
		{ id: 5, name: '退款' }
	])
	const states : any = ref(['', 0, 1, 3, 2])
	/**
	 * 
	 * 全部 待支付 餐品完成 导航切换
	*/
	let n = 10
	const goodsList = ref([])
	const currentPage = ref(1)
	const onDish = (res : any, index : number) => {
		navActive.value = index
		currentPage.value = 1
		getGoodsList(currentPage.value, states.value[navActive.value])
	}
	const getGoodsList = (page : number, state : any) => {
		console.log(state)
		uni.request({
			url: apiImageUrl + 'orders/my/page',
			method: 'POST',
			header: {
				// 读取JSESSIONID
				'cookie': wx.getStorageSync("cookie")
			},
			data: {
				current: page,
				pageSize: 10,
				state: state,
				sortField: "createTime",//倒序
				sortOrder: "descend"//倒序
			},
			success: (res : any) => {
				console.log(res.data.data.records, 111111111)
				if (page === 1) {
					goodsList.value = res.data.data?.records
				} else {
					goodsList.value = goodsList.value.concat(res.data.data.records);
				}
			}
		})
	}
	// 监听页面滚动到底部事件，触发加载更多数据
	onReachBottom(() => {
		n = n + 1
		currentPage.value += 1; // 加载下一页
		getGoodsList(currentPage.value, states.value[navActive.value]);
		console.log(currentPage.value, "底部触底的")
	});
	// 支付的逻辑
	const appid = ref()
	const nonceStr = ref()
	const packageVal = ref()
	const paySign = ref()
	const signType = ref()
	const timeStamp = ref()
	
	// const countdown = ref(15*60)
	// const timer = ref(null)
	// const isPaid = ref(false)
	const goPay = (s : number) => {
		   console.log(s, 2222);
				uni.showModal({
					title: '提示',
					content: '是否支付订单',
					success: (res : any) => {
						console.log(res, "成功之后的信息")
						if (res.confirm) {
							uni.request({
								url: apiImageUrl + 'wechat/payment/create',
								method: 'POST',
								header: {
									'cookie': wx.getStorageSync('cookie')
								},
								data: {
									id: s
								},
								success: (res : any) => {
									console.log(res, "0000000")
									if (res.data.code === 1) {
										appid.value = res.data.data.appId
										nonceStr.value = res.data.data.nonceStr
										packageVal.value = res.data.data.packageVal
										paySign.value = res.data.data.paySign
										signType.value = res.data.data.signType
										timeStamp.value = res.data.data.timeStamp
										wx.requestPayment({
											timeStamp: timeStamp.value,
											nonceStr: nonceStr.value,
											package: packageVal.value,
											signType: signType.value,
											paySign: paySign.value,
											success: function (res) {
												 // isPaid.value = true;
												uni.navigateTo({
													url: `/pages/waitOrder/waitOrder?id=${orderId.value}`
												})
											},
											fail: function (err) {
												console.log(err)
												uni.showToast({
													title: '支付失败'
												})
											}
										})
									}else{
										uni.showToast({
											icon: 'none',
											title: '订单已超时，无法支付'
										})
									}
								},
								fail: (res : any) => {
									console.log(res, 11111111111111)
								}
							})
						} else if (res.cancel) {
							uni.showToast({
								icon: 'error',
								title: '支付失败'
							})
						}
				
					}
				})
			}
			// const staratCountDown = ()=>{
			// 	timer.value = setInterval(()=>{
			// 		countdown.value -= 1
			// 		if(countdown.value <= 0){
			// 			clearInterval(timer.value)
			// 			const goCancels = (id) => {
			// 							uni.request({
			// 								url: apiImageUrl + 'orders/cancel',
			// 								method: 'POST',
			// 								header: {
			// 									'cookie': wx.getStorageSync('cookie')
			// 								},
			// 								data: {
			// 									id: id
			// 								},
			// 								success: (res : any) => {
			// 									console.log(res, "取消订单的res")
			// 									currentPage.value = 1
			// 									navActive.value = 3
			// 									getGoodsList(currentPage.value, 3);
			// 								},
			// 								fail: (res : any) => {
			// 									console.log(res, 11111111111111)
			// 								}
			// 							})
			// 						}
			// 		}
			// 		},1000)
			// 		}
	// 取消订单
	const goCancel = (id) => {
		uni.showModal({
			title: '提示',
			content: '是否取消订单',
			success: (res : any) => {
				console.log(res, "成功之后的信息")
				if (res.confirm) {
					uni.request({
						url: apiImageUrl + 'orders/cancel',
						method: 'POST',
						header: {
							'cookie': wx.getStorageSync('cookie')
						},
						data: {
							id: id
						},
						success: (res : any) => {
							console.log(res, "取消订单的res")
							currentPage.value = 1
							navActive.value = 3
							getGoodsList(currentPage.value, 3);
						},
						fail: (res : any) => {
							console.log(res, 11111111111111)
						}
					})
				} else if (res.cancel) {
					uni.showToast({
						icon: 'error',
						title: '请去支付'
					})
				}

			}
		})
	}
	// 点击跳转到订单详情
	const goTOdetail = (id : any) => {
		uni.navigateTo({
			url: `/pages/waitOrder/waitOrder?id=${id}`
		})
	}
	// 点击跳转的评价页面
	const goToEvaluate =(id:number) =>{
		console.log(id)
		uni.navigateTo({
			url:`/subpkg/goodsEvaluate/goodsEvaluate?id=${id}`
		})
	}
</script>

<style lang="scss">
	page {
		background-color: #F4F4F4;
	}

	.changenav {
		width: 100%;
		height: 80rpx;
		display: flex;
		background-color: #fff;

		.text {
			width: 300rpx;
			height: 70rpx;
			font-size: 30rpx;
			text-align: center;
			line-height: 75rpx;

			text {
				padding: 0 0 10rpx 0;
				border-bottom: 6rpx solid #2493F1;
			}

		}
	}

	.content {
		background-color: #fff;
		// background-color: salmon;
		width: 700rpx;
		margin: 30rpx auto;
		border-radius: 20rpx;
		padding: 1rpx 0 30rpx 0;
		box-sizing: border-box;
	}

	.content_all {
		width: 700rpx;
		height: 120rpx;
		// margin: 40rpx 0 0 50rpx;
		border-radius: 20rpx 20rpx 0 0;
		display: flex;
		justify-content: space-between;

		// background-color: #2493F1;
		.content_lef {
			margin-left: 20rpx;
			width: 100rpx;
			height: 120rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			// background-color: darkcyan;
		}

		.content_biaoti_img {
			width: 70rpx;
			height: 70rpx;

		}

		.content_zhonjia {
			width: 200rpx;
			height: 120rpx;
			margin: 7rpx 0 0 6rpx;

			.content_content {
				margin-top: 10rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: #333333;
			}

			.content-tag {
				width: 100rpx;
				height: 32rpx;
				margin-top: 10rpx;
				background-color: #F0F8FF;
				font-size: 20rpx;
				border: 1rpx solid #2493F1;
				border-radius: 4rpx;
				text-align: center;
				color: #2493F1;
				line-height: 32rpx;
			}
		}

		.content_right {
			// background-color: deeppink;
			width: 124rpx;
			height: 100rpx;
			font-size: 28rpx;
			color: #2493F1;
			font-weight: 500;
			display: flex;
			justify-content: center;
			align-content: center;
			line-height: 100rpx;
			margin-left: 100rpx;
		}
	}

	.on_all {
		display: flex;
		border-top: 1rpx solid #F4F4F4;
	}

	.on_left {
		width: 200rpx;
		height: 150rpx;
		margin: 30rpx 0 0 40rpx;
		border: 1rpx solid #2493F1;
		border-radius: 10rpx;

		.on_left_top {
			display: flex;
			justify-content: center;
			align-content: center;

			text {
				height: 40rpx;
				font-size: 26rpx;
				color: #2493F1;
				font-weight: 600;
				line-height: 50rpx;
			}
		}

		.on_left_number {
			font-size: 52rpx;
			text-align: center;
		}

		.on_left_numbers {
			font-size: 30rpx;
			text-align: center;
		}

		.on_left_under {
			font-size: 20rpx;
			color: #999;
			text-align: center;
		}
	}

	.scroll {
		white-space: nowrap;
		width: 50%;
		height: 220rpx;
	}

	.on_zhonjia {
		display: flex;
		margin: 30rpx 0 0 20rpx;
		display: inline-flex;
		/* item的外层定义成行内元素才可进行滚动 inline-block / inline-flex 均可 */
		flex-direction: column;
		align-items: center;

		.on_zhonjia_kuai {
			width: 150upx;
			height: 150upx;
			margin-right: 10rpx;

			.on_zhonjia_img {
				width: 150upx;
				height: 150upx;
				border-radius: 8upx;
			}

			.on_zhonjia_text {
				font-size: 24rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				/* 在文本溢出时显示省略号 */
			}
		}
	}

	.on_right {
		width: 200rpx;
		height: 150rpx;
		margin-top: 30rpx;

		.on_right_money {
			text-align: center;
			font-size: 40rpx;
			font-weight: 500;
			line-height: 100rpx;
		}

		.on_right_number {
			text-align: center;
			font-size: 30rpx;
			font-weight: 500;
			color: #999999;
			align-content: center;
		}
	}

	.under {
		margin-bottom: 40rpx;
	}

	.under_btn {
		width: 180rpx;
		height: 56rpx;
		background-color: #2493F1;
		font-size: 28rpx;
		border-radius: 28rpx;
		color: #fff;
		float: right;
		line-height: 56rpx;
		margin: 4rpx 6rpx 0 0;
	}

	.under_btns {
		width: 180rpx;
		height: 56rpx;
		background-color: #bdb9b8;
		font-size: 28rpx;
		border-radius: 28rpx;
		color: #fff;
		float: right;
		line-height: 56rpx;
		margin: 4rpx 10rpx 0 0;
	}

	.navActive {
		border-bottom: 4px solid rgba(37, 136, 255, 1);
	}

	.storeInformation_middleNav {
		display: flex;
		justify-content: space-around;
		background-color: #fff;
		height: 80rpx;
		width: 760rpx;
		padding: 10rpx;
		box-sizing: border-box;
		align-items: center;

		.storeInformation_middle_navBar_ul {
			width: 760rpx;
			display: flex;
			justify-content: space-around;
			// gap: 60px;

			.li {
				width: 150rpx;
				line-height: 40px;
			}

			.li:hover {
				width: 150rpx;
				border-bottom: 1px solid black;
			}
		}
	}
</style>