<template>
	<view>
		<view>
			<!-- 		<view class="navtab flex-center">
				<view class="navtabpost flex-center">
					<view :class="navtabindex == 0 ? 'navtabone':'navtabtow'" @click="navtabclick(0)">
						到店订单
					</view>
					<view :class="navtabindex == 1 ?  'navtabone':'navtabtow'" @click="navtabclick(1)">
						团购订单
					</view>
				</view>
			</view> -->
			<up-sticky>
				<view class="tab-wrap">
					<view class="item" :class="{'active':orderForm.active == index}" v-for="(item, index) in tabs"
						:key="index" @click="orderswitch(item,index)">
						<text>{{ item.name }}</text>
					</view>
				</view>
			</up-sticky>
			<view class="list-wrap" v-if="!orderForm.is_end">
				<view class="item" v-for="(item,index) in orderForm.list" :key="index" @click="orderinfo(item)">
					<view class="header-wrap">
						<view class="header-wrap-left">
							<text class="sendType" v-if="item.dineMode == 'dine-in'">堂食</text>
							<text class="sendType" v-if="item.dineMode == 'take-out'">外带</text>
							<text class="sendType" v-if="item.dineMode == 'take-away'">外卖</text>
							<text class="shopName"> {{ item.shopName || ''}} </text>
						</view>

						<text class="status" v-if="item.status == 'unpaid'">
							<text style="color: #333;">待支付</text>
						</text>
						<text class="status" v-if="item.status == 'in-production'">
							<text>制作中</text>
						</text>
						<text class="status" v-if="item.status == 'wait-out'">
							<text>待取餐</text>
						</text>
						<text class="status" v-if="item.status == 'done'">
							<text> 订单完成</text>
						</text>
						<text class="status" v-if="item.status == 'refunding'">
							<text>申请退单</text>
						</text>
						<text class="status" v-if="item.status == 'refund'">
							<text>退单</text>
						</text>
						<text class="status" v-if="item.status == 'part-refund'">
							<text>部分退单</text>
						</text>
						<text class="status" v-if="item.status == 'cancelled'">
							<text>取消订单</text>
						</text>
					</view>
					<view class="content">
						<view></view>
						<view class="intro-wrap">
							下单日期：{{item.createTime}}
						</view>
						<view class="shop-info">
							<view class="shop-item">
								<view class="cover" v-for="(item1,index1) in item.goods" :key="index1">

									<u-image width="56" height="56" radius="10" :src="item1.productImg"
										v-if="!item1.isTemporary"></u-image>

									<u-image width="56" height="56" radius="10"
										v-else-if="item1.isTemporary &&item1.productName=='签子'"
										src="https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/5/b97054debd83486ab7ad8e20ca6a360a.png"></u-image>
									<u-image width="56" height="56" radius="10"
										:src="'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/table.png'"
										mode="heightFix" v-else></u-image>
									<text class="productName"> {{ item1.productName }} </text>
								</view>
							</view>
							<view class="shop-amount">
								<text
									class="orderAmount">￥{{item.status == 'unpaid'?item.originAmount:item.orderAmount}}</text>
								<text class="totalNumber">共{{totalGoodsNum(item.goods) }}件</text>
							</view>
						</view>
					</view>
					<view class="take_food_number u-m-b-16" v-if="item.takeCode">
						<text class="u-font-24 color-333"> 取餐号：</text>
						<text class="u-font-32 font-700 color-333">{{item.takeCode}}</text>

					</view>
					<view class="footer-wrap">
						<view class="btn" @click.stop="$u.debounce(isRemoveOrder(item,index),1000)"
							v-if="item.status == 'done' ||  item.status == 'cancelled'"> 删除订单 </view>
						<template v-if="shopInfo&&shopInfo.id">
							<template v-if="shopInfo.id==item.shopId">
								<template v-if="shopInfo.isUserPay">
									<view class="btn s" @click.stop="$u.debounce(orderinfo(item),1000)"
										v-if="item.status == 'unpaid' ||  item.status == 'paying'"> 去付款 </view>
								</template>
								<template v-else>
									<view class="btn s disabled" @click.stop="()=>{}"
										v-if="item.status == 'unpaid' ||  item.status == 'paying'"> 请前往吧台支付 </view>
								</template>
							</template>
							<template v-else>
								<view class="btn s" @click.stop="$u.debounce(orderinfo(item),1000)"
									v-if="item.status == 'unpaid' ||  item.status == 'paying'"> 去付款 </view>
							</template>

						</template>
						<template v-else>
							<view class="btn s" @click.stop="$u.debounce(orderinfo(item),1000)"
								v-if="item.status == 'unpaid' ||  item.status == 'paying'"> 去付款 </view>
						</template>

						<view class="btn s" @click.stop="agignOrder(item)" v-if="item.status != 'unpaid'"> 再来一单 </view>
					</view>
				</view>
			</view>
			<view class="flex-colum" v-if="orderForm.list.length <= 0">
				<image style="width: 402rpx;height: 442rpx;margin:240rpx auto 32rpx;"
					src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/nomore.png" mode="aspectFill"></image>
				<text
					style="font-weight: bold;font-size: 32rpx;color: #FFFFFF;text-align: center;width: 426rpx;line-height: 84rpx; height: 84rpx;background: #E8AD7B;border-radius: 49rpx 49rpx 49rpx 49rpx;"
					@click="scanCodehandle">
					去点餐
				</text>
			</view>
			<view style="padding-bottom: 30rpx;">
				<up-loadmore :status="orderForm.form.status" fontSize="14" color="#999" iconSize="14" />
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
	} from "vue";
	import {
		onLoad,
		onReady,
		onShow,
		onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app'
	import Nav from '@/components/CustomNavbar.vue'; //导航栏
	import {
		APIuserorder,
		APIputuserorder
	} from '@/common/api/order/index.js'
	// pinia管理
	import {
		useNavbarStore
	} from '@/stores/navbarStore';
	import {
		APIshopUserInfo
	} from '@/common/api/member.js'
	const store = useNavbarStore();

	async function agignOrder(item) {
		await APIshopUserInfo({
			shopId: item.shopId
		}).then(shopUserInfo => {
			if (shopUserInfo) {
				uni.cache.set("dinersNum", 1);
				uni.cache.set("tableCode", shopUserInfo.id);
				uni.cache.set("shopId", item.shopId);
				uni.navigateTo({
					url: "/pages/product/index?type=beforehand&order_id=" + item.id +
						'&one_more_order=1&shopId=' + item.shopId,
				});
			}
		})

	}

	function totalGoodsNum(arr) {
		if (!arr) {
			return 0
		}
		return arr.reduce((prve, cur) => {
			return prve + cur.num
		}, 0)
	}

	const shopInfo = uni.cache.get('shopInfo')

	function isRemoveOrder(item) {
		uni.showModal({
			title: '提示',
			content: '订单一旦删除不可恢复，确认删除该订单吗？',
			showCancel: true,
			success(res) {
				if (res.confirm) {
					APIputuserorder(item.id).then(res => {
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						})
						setTimeout(() => {
							init_fn()
						}, 1000)
					})
				}
			}
		})
	}

	// 导航栏
	const tabs = [{
			name: '全部',
			status: ''
		},
		{
			name: '待支付',
			status: 'unpaid'
		},
		{
			name: '订单完成',
			status: 'done'
		},
		{
			name: '取消订单',
			status: 'cancelled'
		},
	]

	import {
		productStore
	} from '@/stores/user.js';

	// 初始化是单店还是团购店
	const navtabindex = ref('2')
	// 总数据列表
	const orderForm = reactive({
		list: [],
		groupList: [],
		is_end: false,
		status: '',
		active: 0,
		form: {
			page: 1,
			size: 10,
			status: 'loadmore',
		}
	})

	// 点击扫码
	const scanCodehandle = async (i) => {
		const store = productStore();
		await store.scanCodeactions()
	}

	// 单店团购
	const userorderList = async () => {
		let res = await APIuserorder({
			page: orderForm.form.page,
			size: orderForm.form.size,
			status: orderForm.status
		})
		if (res.totalPage == 0 || res.totalPage == 1 && res.totalRow <= 10) {
			orderForm.form.status = 'nomore'
			orderForm.list = res.records
			if (orderForm.form.page == 1 && res.records.length == 0) {
				orderForm.records = []
				orderForm.is_end = true
			}
			return false;
		} else {
			orderForm.form.status = 'loading';
			if (orderForm.form.page == 1) {
				orderForm.list = res.records
			} else {
				orderForm.list = [...orderForm.list, ...res.records];
			}
			orderForm.form.page = ++orderForm.form.page;
			if (orderForm.form.page > res.totalPage) {
				orderForm.form.status = 'nomore';
			} else {
				orderForm.form.status = 'loading';
			}
		}
	}

	const orderswitch = (item, index) => {
		orderForm.active = index
		orderForm.status = item.status
		init_fn()
	}

	// 初始化
	const init_fn = () => {
		orderForm.groupList = []
		orderForm.is_end = false
		orderForm.form.page = 1
		orderForm.form.size = 10
		orderForm.form.status = 'loadmore'
		// navtabindex.value == '1' ? getorderList() : userorderList()
		userorderList()
	}

	const orderinfo = (e) => {
		if (e.status == 'unpaid') {
			uni.cache.set('shopId', e.shopId)
			uni.pro.navigateTo('order/confirm-order', {
				orderId: e.id,
				shopId: e.shopId,
			})
			return
		}

		uni.pro.navigateTo('order/detail', {
			orderId: e.id,
			shopId: e.shopId
		})
	}

	onReachBottom(() => {
		if (orderForm.form.status != 'nomore') {
			console.log('页面滚动到底部');
			userorderList()
		}
	})
	onShow(() => {
		init_fn()
	})
	// onMounted(() => {})
</script>
<style lang="scss">
	page {
		background: #f6f6f6;
	}

	.navtab {
		width: 100%;
		height: 56rpx;
		background: #ffd158;

		.navtabpost {
			position: relative;
			background: #FFFFFF;
			border-radius: 12rpx;
			padding: 0 10rpx;

			.navtabone {
				// margin-left: -10rpx;
				width: 166rpx;
				height: 36rpx;
				background: #FFEAB1;
				border-radius: 12rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				line-height: 36rpx;
				text-align: center;
				z-index: 10;
			}

			.navtabtow {
				// margin-left: -10rpx;
				z-index: 9;
				width: 146rpx;
				height: 56rpx;
				line-height: 56rpx;
				text-align: center;
				// border-radius: 0 12rpx 12rpx 0;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
			}
		}
	}

	.tab-wrap {
		display: flex;
		position: relative;
		background: #fff;
		padding: 40rpx 46rpx;
		border-radius: 0rpx 0rpx 34rpx 34rpx;

		.item {
			flex: auto;
			display: flex;
			flex-shrink: 0;
			align-items: center;
			justify-content: center;
			position: relative;
			z-index: 2;

			text {
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
			}
		}

		.item.active {
			text {
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
			}
		}


	}

	.list-wrap {
		padding: 0 28rpx 48rpx 28rpx;
		position: relative;
		margin-top: 48rpx;
		border-radius: 24rpx 24rpx 0rpx 0rpx;

		.item {
			border-radius: 20upx;
			background-color: #fff;

			&:not(:first-child) {
				margin-top: 48rpx;
			}

			.header-wrap {
				padding: 32rpx 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.header-wrap-left {
					display: flex;
					align-items: center;
				}

				.sendType {
					height: 48rpx;
					line-height: 48rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #E3AD7F;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					border: 2rpx solid #E3AD7F;
					margin-right: 24rpx;
					padding: 0 20rpx;
				}

				.shopName {
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
				}

				.status {
					text {
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
					}
				}
			}

			.content {
				padding: 0 24rpx 16rpx 30rpx;

				.shop-info {
					display: flex;

					.shop-item {
						width: 100%;
						display: flex;
						overflow: hidden;
						overflow-x: scroll;

						.cover:nth-child(1) {
							margin-left: 0rpx;
						}

						.cover {
							margin-left: 20rpx;
							display: flex;
							flex-direction: column;
							align-items: center;
							flex-shrink: 0;

							.productName {
								width: 120rpx;
								text-align: center;
								overflow: hidden; //超出的文本隐藏
								text-overflow: ellipsis; //溢出用省略号显示
								white-space: nowrap; //溢出不换行
								flex-shrink: 0;
								margin-top: 16rpx;
							}
						}

					}

					.shop-amount {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: flex-end;
						flex-shrink: 0;
						padding-left: 20rpx;

						.orderAmount {
							font-weight: bold;
							font-size: 28rpx;
							color: #333333;
							margin-bottom: 22rpx;
						}

						.totalNumber {
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
						}
					}
				}

				.intro-wrap {
					font-weight: 400;
					color: #666;
					font-size: 24upx;
					margin-bottom: 16rpx;
				}
			}

			.footer-wrap {
				display: flex;
				justify-content: flex-end;
				padding: 0 18rpx 32rpx 18rpx;

				.btn {
					text-align: center;
					background: #FFFFFF;
					padding: 6rpx 14rpx;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					border: 2rpx solid #EDEDED;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					margin-left: 32rpx;

					&.disabled {
						background-color: #eee;
						color: #999;
						text-align: center;
					}
				}

				.s {
					background: #343030;
					border: 2rpx solid #EDEDED;
					color: #fff;
				}
			}
		}
	}

	.orderList {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		.listBox {
			padding: 16rpx 18rpx;
			margin-top: 48rpx;
			font-size: 32rpx;
			width: 694rpx;
			height: 248rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			position: relative;

			.buttonStyle {
				position: absolute;
				right: 20rpx;
				bottom: 50rpx;
				font-size: 28rpx;
				width: 170rpx;
				height: 64rpx;
				background: #FFD100;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				border: none;
				color: #000;
			}

			.state {
				color: #FF4C11;
			}

			.state2 {
				color: #999;
			}

			.fontStyle {
				font-size: 28rpx;
				font-weight: 400;
				color: #666666;
			}
		}

	}

	.df {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.ml-20 {
		margin-left: 20rpx;
	}

	.take_food_number {
		padding: 20rpx;
		background-color: #F8F8F8;
		margin-left: 36rpx;
		margin-right: 24rpx;
	}
</style>