<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.productId!=-999"></u-image>
									<u-image width="112" height="112" radius="20"
										: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">共{{item.goods.length}}件</text>
							</view>
						</view>
					</view>
					<!-- 	<view class="footer-wrap">
						<view class="btn" @click.stop="$u.debounce(isRemoveOrder(item,index),1000)"
							v-if="item.status != 'unpaid' &&  item.status != 'paying'"> 删除订单 </view>
						<view class="btn s" @click.stop="$u.debounce(showpopupclick(item),1000)"
							v-if="item.status == 'unpaid' ||  item.status == 'paying'"> 去付款 </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
	} from '@/common/api/order/index.js'
	// pinia管理
	import {
		useNavbarStore
	} from '@/stores/navbarStore';
	const store = useNavbarStore();

	// 导航栏
	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) => {
		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: 16rpx 18rpx;
				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 18rpx 18rpx 18rpx;

				.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 {
					width: 128rpx;
					height: 48rpx;
					line-height: 43rpx;
					text-align: center;
					background: #FFFFFF;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					border: 2rpx solid #EDEDED;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					margin-left: 32rpx;
				}

				.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;
	}
</style>