<template>
	<!-- 商家订单列表 -->
	<view class="page1">
		<view class="shop-order-fixed">
			<view class="title">
				<view class="title-sreach">
					<view class="back-btn" @tap="back" :style="{'top': menuButtonInfo.top +'px'}">
						<uni-icons type="left" size="28"></uni-icons>
					</view>
					<view class="title-name" :style="{'padding-top': menuButtonInfo.top +'px'}">
						商家订单
					</view>
				</view>
			</view>
			<view class="title-tab">
				<scroll-view class="status-scroll-view" scroll-x enable-flex :show-scrollbar="false"
					:scroll-with-animation="true">
					<view class="status-list">
						<view v-for="(item, index) in statusList" :key="index" class="status-item"
							:class="{ 'active': currentIndex == item.value }"
							:style="{'width':item.name == '全部'?'14vw':'20vw'}"
							@click="handleStatusClick(item.value)"> 
							<text class="status-text">{{ item.name }}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="shop-order-fixed-holder"></view>
		<view class="box1" @tap="goDetail(item)" v-for="(item,index) in orderList" :key="index">
			<view class="order-head">
				<view class="order-main">
					<view class="order-code" v-if="item.numberCode">{{'#' + item.numberCode}}</view>
					<view class="order-time">{{item.createTime | formatISOTime}}</view>
				</view>
				<view class="order-status">
					{{item.status == 0?'待支付':item.status == 2?'待配送员接单':(item.status == 3 && item.deliveryType == 1 && item.shopMakeTime == null) || (item.status == 3 && item.deliveryType == 2 && item.userRequireMake == 1)?'待出餐':(item.status == 3 && item.deliveryType == 1 && item.shopMakeTime != null)?'待取货':(item.status == 3 && item.deliveryType == 1 && item.shopMakeTime != null) || (item.status == 3 && item.deliveryType == 2 && item.userRequireMake != 1)?'待消费':item.status == 4?'待送达':item.status == 5?'已完成':item.status == 7?'待同意退款':item.status == 8?'已退款':item.status == 6?'已取消':item.status == 11?'售后中':item.status == 12?'已售后':""}}
				</view>
			</view>
			<view class="goods-box">
				<view class="goods-title">
					<text>商品</text>
					<text class="goods-count" :class="{ 'goods-count-important': item.goodsNum > 1 }">共{{item.goodsNum}}件</text>
				</view>
				<view class="goods-row" v-for="(item1,index1) in item.goodsList" :key="index1">
					<view class="goods-name">
						{{item1.productName}}
					</view>
					<view class="goods-quantity" :class="{ 'goods-quantity-important': item1.quantity > 1 }">
						{{'X' + item1.quantity}}
					</view>
					<view class="goods-price">
						{{'￥'+ item1.price}}
					</view>
				</view>
			</view>
			<view class="remark-box" v-if="getOrderRemark(item)">
				<view class="remark-label">备注</view>
				<view class="remark-content">{{getOrderRemark(item)}}</view>
			</view>
			<view class="order-footer">
				<view class="delivery-tag" @tap.stop="tanchuang(item.deliveryType)">
					{{item.deliveryType == 1?'配送':item.isPack == 1?'自取-打包':item.isPack == 0?'自取-堂食':'自取'}}
				</view>
				<view v-if="item.orderType != 1" @tap.stop="getGroupOrders(item.id)" class="pinzi btn meal-btn">
					拼团详情
				</view>
				<view class="footer-space"></view>
				<view @tap.stop="mealServing(item)" v-if="currentIndex == 13" class="btn meal-btn">
					出餐
				</view>
			</view>
		</view>
		<view style="width:100%;height:60rpx;"></view>
		<!-- 拼团详情弹窗 -->
		<uni-popup ref="pintuanPopup" background-color="transparent">
			<view class="group-popup">
				<view class="group-popup-header">
					<view>
						<view class="group-popup-title">拼团详情</view>
						<view class="group-popup-subtitle">共{{tuanzhangOrder.length}}个订单，请核对出餐信息</view>
					</view>
					<view class="group-popup-close" @tap="$refs.pintuanPopup.close()">×</view>
				</view>
				<scroll-view scroll-y class="group-popup-scroll">
					<view class="group-order-card" v-for="(item,index) in tuanzhangOrder" :key="index">
						<view class="group-order-head">
							<view class="group-order-code">订单-{{item.numberCode || item.id}}</view>
							<view class="group-order-status">{{getStatusText(item)}}</view>
						</view>
						<view class="group-info-row">
							<text>订单号</text>
							<text>{{item.id}}</text>
						</view>
						<view class="group-info-row">
							<text>订单时间</text>
							<text>{{item.createTime | formatISOTime}}</text>
						</view>
						<view class="group-goods-list">
							<view class="group-goods-row" v-for="(item1,index1) in item.goodsList" :key="index1">
								<view class="group-goods-name">{{item1.productName}}</view>
								<view class="group-goods-num">X{{item1.quantity}}</view>
								<view class="group-goods-price">￥{{item1.price}}</view>
							</view>
						</view>
						<view class="group-fee-row">
							餐盒费：￥{{item.packageFee || 0}}　配送费：￥{{item.deliveryFee || 0}}
						</view>
						<view class="group-total-row">总计：￥{{item.totalAmount || 0}}</view>
					</view>
					<view class="group-popup-empty" v-if="tuanzhangOrder.length == 0">暂无拼团订单</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadStatus: 'more',
				searchForm: {
					pageNum: 1,
					pageSize: 10,
					shopName: '',
					searchStatus: 10,
					shopId: uni.getStorageSync('shopId'),
					regionId: JSON.parse(uni.getStorageSync('area')).id
				},
				totalPages: 1,
				tuanzhangOrder:[],
				orderList: [],
				currentIndex: 10,
				menuButtonInfo: {},
				statusList: [{
						name: '全部',
						value: 10,
						checked: true
					},
					{
						name: '待出餐',
						value: 13,
						checked: false
					},
					{
						name: '待取货',
						value: 4,
						checked: false
					},
					{
						name: '待送达',
						value: 5,
						checked: false
					},
					{
						name: '已完成',
						value: 6,
						checked: false
					},
					{
						name: '待消费',
						value: 2,
						checked: false
					},
					{
						name: '已退款',
						value: 8,
						checked: false
					},
					{
						name: '已取消',
						value: 9,
						checked: false
					}
				]
			}
		},
		onReachBottom() {
			if (this.searchForm.pageNum >= this.totalPages) return;
			// this.status = 'loading';
			this.searchForm.pageNum++;
			this.getList();
		},
		filters: {
			formatISOTime(isoString) {
				const date = new Date(isoString);
				const year = date.getFullYear();
				const month = (date.getMonth() + 1).toString().padStart(2, '0');
				const day = date.getDate().toString().padStart(2, '0');
				const hours = date.getHours().toString().padStart(2, '0');
				const minutes = date.getMinutes().toString().padStart(2, '0');
				const seconds = date.getSeconds().toString().padStart(2, '0');
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			}
		},
		onShow() {
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.searchForm.shopId = uni.getStorageSync('shopId')
			this.regionId = JSON.parse(uni.getStorageSync('area')).id
			if (uni.getStorageSync('refreshShopOrderList')) {
				uni.removeStorageSync('refreshShopOrderList')
				this.searchForm.pageNum = 1
				this.getList()
			}
		},
		onLoad(option) {
			if (option.index) {
				this.searchForm.searchStatus = option.index
				this.currentIndex = option.index
			}
			this.getList()
		},
		methods: {
			getList() {
				this.loadStatus = 'loading'
				let that = this
				let url = ''
				let data = {
					linkId: uni.getStorageSync('shopId'),
					pageNum: this.searchForm.pageNum,
					pageSize: 10,
					statusList: [0, 3],
					regionId: JSON.parse(uni.getStorageSync('area')).id
				}
				if (this.currentIndex == 7) {
					url = "/mall/refund/page"
				} else {
					url = "/mall/order/page"
				}
				that.tui.request(url, "POST", this.currentIndex == 7 ? data : this.searchForm, false, false).then((
				res) => {
					that.loadStatus = 'nomore';
					if (res.code == 200) {
						if (that.searchForm.pageNum == 1) {
							that.orderList = res.result.records;
						} else {
							that.orderList = [...that.orderList, ...res.result.records]
						}
						
						for (let i = 0; i < that.orderList.length; i++) {
							if (that.currentIndex == 7) {
								that.orderList[i].goodsList = that.orderList[i].items
							}
							that.orderList[i].goodsNum = 0
							for (let m = 0; m < that.orderList[i].goodsList.length; m++) {
								that.orderList[i].goodsNum += that.orderList[i].goodsList[m].quantity
							}
						}
						that.totalPages = res.result.pages; // pages = 总页数
						that.$forceUpdate();
					} else {
						that.tui.toast(res.message);
						return;
					}
					uni.hideLoading();
				}).catch((res) => {});
			},
			tanchuang(v){
				this.tui.toast('该订单为'+(v==1?'配送':'自取')+'单')
			},
			getGroupOrders(id){
				this.tui.request("/mall/order/selectAllOrderByOrderId/"+id, "GET", {}, false, true).then((res) => {
					if (res.code == 200) {
						this.tuanzhangOrder = res.result;
						this.$refs.pintuanPopup.open('center')
					} else {
						that.tui.toast(res.message)
						return
					}
					uni.hideLoading()
				}).catch((res) => {})
			},
			openPopup(){
				this.$refs.groupPopup.open()
			},
			getOrderRemark(item) {
				if (!item) return ''
				return item.remark || (item.mallOrder && item.mallOrder.remark) || ''
			},
			getOrderId(item) {
				if (!item) return ''
				if (item.mallOrder && item.mallOrder.id) return item.mallOrder.id
				return item.orderId || item.mallOrderId || item.id || ''
			},
			getStatusText(item) {
				if (!item) return ''
				return item.status == 0?'待支付':item.status == 2?'待配送员接单':(item.status == 3 && item.deliveryType == 1 && item.shopMakeTime == null) || (item.status == 3 && item.deliveryType == 2 && item.userRequireMake == 1)?'待出餐':(item.status == 3 && item.deliveryType == 1 && item.shopMakeTime != null)?'待取货':(item.status == 3 && item.deliveryType == 2)?'待消费':item.status == 4?'待送达':item.status == 5?'已完成':item.status == 7?'待同意退款':item.status == 8?'已退款':item.status == 6?'已取消':item.status == 11?'售后中':item.status == 12?'已售后':''
			},
			mealServing(item){
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定要出餐吗？',
					success: function (res) {
						if (res.confirm) {
							let data = {}
							let url = ''
							if(item.deliveryType == 2){ //自取单
								url = '/mall/order/complete'
							}else if(item.deliveryType == 1){ //外卖单
								url = '/mall/order/shopMakeTime'
							}
							that.tui.request(url, "post", {
								orderId:item.id
							}, false, true).then((res) => {
								if (res.code == 200) {
									that.getList()
								} else {
									that.tui.toast(res.message);
									return;
								}
								uni.hideLoading();
							}).catch((res) => {});
						}
					}
				});
			},
			goDetail(item) {
				let id = this.getOrderId(item)
				if (!id) {
					this.tui.toast('未找到订单信息')
					return
				}
				uni.navigateTo({
					url: '/package2/shop/orderDetail?id=' + id
				})
			},
			handleStatusClick(index) {
				this.searchForm.pageNum = 1
				if (this.currentIndex === index) return;
				this.currentIndex = index;
				this.searchForm.searchStatus = index
				this.getList()
			},
			back() {
				uni.navigateBack()
			},
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		background: #F5F8F5;
		color: #00231C;
	}

	.page1 {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		position: relative;
	}

	.shop-order-fixed {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
		background: #F5F8F5;
	}

	.shop-order-fixed-holder {
		height: 288rpx;
	}

	.title {
		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
		width: 100%;
		height: 200rpx;
		background-size: 100% 100%;
	}

	.title-sreach {
		width: 100%;
		display: flex;
		height: 200rpx;
		position: relative;
	}

	.back-btn {
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.title-name {
		padding-top: 110rpx;
		font-size: 36rpx;
		font-weight: 700;
		flex: 1;
		text-align: center;
	}

	.title-tab {
		display: flex;
		margin: 0 auto;
		background: #F5F8F5;
	}

	.status-scroll-view {
		width: 100%;
		white-space: nowrap;
		/* 辅助滚动，与 flex 配合确保不换行 */
		height: auto;
	}

	.status-list {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		padding: 0 0;
		/* 可根据设计添加左右留白，但会影响“一排5个”精准计算，故留白为0 */
		min-height: 88rpx;
		/* 保证内部项撑开高度 */
	}

	/* 每个状态项：宽度为屏幕宽度的1/5，保证一行正好显示5个，超出滚动 */
	.status-item {
		flex-shrink: 0;
		width: 20vw;
		/* 关键：屏幕宽度的1/5，正好一排5个 */
		text-align: center;
		padding: 20rpx 0;
		position: relative;
		box-sizing: border-box;
		transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
		/* 点击反馈 */
		-webkit-tap-highlight-color: transparent;
	}

	.status-text {
		font-size: 28rpx;
		color: #666666;
		font-weight: normal;
		line-height: 1.4;
		transition: color 0.2s, font-weight 0.2s;
	}

	/* 激活状态样式 */
	.status-item.active .status-text {
		color: #ff6b35;
		font-weight: 500;
	}

	/* 激活指示条（下划线） */
	.status-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 4rpx;
		background-color: #ff6b35;
		border-radius: 2rpx;
		transition: width 0.2s ease;
	}

	.box1 {
		width: 92%;
		margin: 20rpx auto;
		background: #fff;
		border-radius: 24rpx;
		padding: 24rpx 24rpx 0;
		box-shadow: 0 12rpx 32rpx rgba(0, 35, 28, 0.08);
		overflow: hidden;
	}

	.order-head {
		display: flex;
		align-items: flex-start;
		padding-bottom: 18rpx;
		border-bottom: 1px solid #eef2ef;
	}

	.order-main {
		flex: 1;
		min-width: 0;
	}

	.order-code {
		display: inline-block;
		height: 42rpx;
		line-height: 42rpx;
		padding: 0 16rpx;
		margin-bottom: 8rpx;
		border-radius: 999rpx;
		background: #00231C;
		color: #E3FF96;
		font-size: 28rpx;
		font-weight: 700;
	}

	.order-time {
		color: #7a8582;
		font-size: 24rpx;
	}

	.order-status {
		margin-left: 20rpx;
		padding: 8rpx 16rpx;
		border-radius: 999rpx;
		background: rgba(255, 107, 53, 0.1);
		color: #ff6b35;
		font-size: 26rpx;
		font-weight: 700;
		white-space: nowrap;
	}

	.goods-box {
		padding: 22rpx 0 16rpx;
	}

	.goods-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 12rpx;
		font-size: 30rpx;
		font-weight: 700;
	}

	.goods-count {
		padding: 4rpx 14rpx;
		border-radius: 999rpx;
		background: #f1f5f2;
		color: #52736b;
		font-size: 24rpx;
		font-weight: 700;
	}

	.goods-count-important {
		background: linear-gradient(90deg, #FFE8D6, #FFF5E9);
		color: #ff4d00;
	}

	.goods-row {
		display: flex;
		align-items: center;
		min-height: 46rpx;
		line-height: 1.35;
		color: #253b35;
	}

	.goods-name {
		flex: 1;
		padding-right: 16rpx;
		font-size: 26rpx;
	}

	.goods-quantity {
		width: 92rpx;
		text-align: center;
		color: #52736b;
		font-weight: 700;
	}

	.goods-quantity-important {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 42rpx;
		border-radius: 14rpx;
		background: linear-gradient(90deg, #FF4500, #FFA07A);
		color: #fff;
		font-size: 28rpx;
	}

	.goods-price {
		width: 120rpx;
		text-align: right;
		color: #00231C;
		font-weight: 700;
	}

	.remark-box {
		display: flex;
		margin: 0 0 18rpx;
		padding: 18rpx;
		border: 1px solid rgba(255, 107, 53, 0.22);
		border-radius: 18rpx;
		background: linear-gradient(90deg, rgba(255, 246, 235, 1), rgba(255, 251, 243, 1));
	}

	.remark-label {
		flex-shrink: 0;
		height: 40rpx;
		line-height: 40rpx;
		margin-right: 14rpx;
		padding: 0 12rpx;
		border-radius: 10rpx;
		background: #ff6b35;
		color: #fff;
		font-size: 24rpx;
		font-weight: 700;
	}

	.remark-content {
		flex: 1;
		color: #9a3d00;
		font-size: 28rpx;
		font-weight: 700;
		line-height: 40rpx;
		word-break: break-all;
	}

	.order-footer {
		display: flex;
		align-items: center;
		min-height: 80rpx;
		border-top: 1px solid #eef2ef;
	}

	.delivery-tag {
		width: auto;
		height: 44rpx;
		line-height: 44rpx;
		margin-right: 20rpx;
		padding: 0 14rpx;
		border-radius: 12rpx;
		background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
		color: #00231C;
		font-weight: 700;
	}

	.footer-space {
		flex: 1;
	}

	.meal-btn {
		margin: 0 0 0 20rpx;
	}
	.btn{
		background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
		padding:0 10rpx;
		height: 50rpx;
		border-radius: 14rpx;
		line-height: 50rpx;
		text-align: center;
		font-weight: 700;
		margin-top: 20rpx;
	}
	.pinzi{
		margin: 20rpx 0;
		background: linear-gradient(90deg, #FF4500, #FFA07A);
		width: 120rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		border-radius: 10rpx;
		color: #fff;
	}
	.group-popup {
		width: 660rpx;
		max-height: 880rpx;
		padding: 28rpx 24rpx 32rpx;
		box-sizing: border-box;
		border-radius: 32rpx;
		background: #f7faf8;
		box-shadow: 0 24rpx 60rpx rgba(0, 35, 28, 0.22);
	}
	.group-popup-header {
		display: flex;
		align-items: center;
		padding-bottom: 22rpx;
	}
	.group-popup-title {
		color: #00231C;
		font-size: 36rpx;
		font-weight: 900;
		line-height: 48rpx;
	}
	.group-popup-subtitle {
		margin-top: 6rpx;
		color: #7a8582;
		font-size: 24rpx;
	}
	.group-popup-close {
		width: 56rpx;
		height: 56rpx;
		margin-left: auto;
		border-radius: 56rpx;
		background: #fff;
		color: #7a8582;
		font-size: 42rpx;
		line-height: 50rpx;
		text-align: center;
	}
	.group-popup-scroll {
		max-height: 690rpx;
		height: 690rpx;
	}
	.group-order-card {
		margin-bottom: 18rpx;
		padding: 22rpx;
		border-radius: 24rpx;
		background: #fff;
		box-shadow: 0 10rpx 26rpx rgba(0, 35, 28, 0.08);
	}
	.group-order-head {
		display: flex;
		align-items: center;
		padding-bottom: 16rpx;
		border-bottom: 1px solid #eef2ef;
	}
	.group-order-code {
		flex: 1;
		color: #00231C;
		font-size: 32rpx;
		font-weight: 900;
	}
	.group-order-status {
		padding: 6rpx 14rpx;
		border-radius: 999rpx;
		background: rgba(255, 107, 53, 0.1);
		color: #ff6b35;
		font-size: 24rpx;
		font-weight: 800;
	}
	.group-info-row {
		display: flex;
		justify-content: space-between;
		padding-top: 14rpx;
		color: #6b7773;
		font-size: 24rpx;
		line-height: 34rpx;
	}
	.group-info-row text:last-child {
		color: #00231C;
		font-weight: 700;
	}
	.group-goods-list {
		margin-top: 16rpx;
		padding: 12rpx 0;
		border-top: 1px dashed #e4ebe7;
		border-bottom: 1px dashed #e4ebe7;
	}
	.group-goods-row {
		display: flex;
		align-items: center;
		min-height: 46rpx;
		color: #00231C;
		font-size: 26rpx;
		font-weight: 700;
	}
	.group-goods-name {
		flex: 1;
		padding-right: 12rpx;
	}
	.group-goods-num {
		width: 80rpx;
		text-align: center;
	}
	.group-goods-price {
		width: 120rpx;
		text-align: right;
	}
	.group-fee-row {
		margin-top: 14rpx;
		color: #7a8582;
		text-align: right;
	}
	.group-total-row {
		margin-top: 8rpx;
		color: red;
		font-size: 30rpx;
		font-weight: 900;
		text-align: right;
	}
	.group-popup-empty {
		padding: 80rpx 20rpx;
		color: #7a8582;
		text-align: center;
	}
	.pituan-text{
		flex:1;
		text-align:right;
		padding-right:20rpx;
		font-weight: 700;
	}
</style>