<template>
	<!-- 商家订单列表 -->
	<view class="page1">
		<view class="title">
			<view class="title-sreach">
				<view class="title-name" >
					商家订单
				</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 }" @click="handleStatusClick(item.value,item.value)">
						<text class="status-text">{{ item.name }}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="box1" @tap="goDetail(item.id)" v-for="(item,index) in orderList" :key="index">
			<view style="display: flex;height: 50rpx;border-bottom: 1px solid #eee;">
				<view>
					{{'#' + item.numberCode}}
				</view>
				<view style="flex: 1;display: flex;padding-left: 20rpx;">
					{{item.createTime | formatISOTime}} 
					<!-- <text>已退款</text> -->
				</view>
				<view>
					{{item.status == 0?'待支付':item.status == 1?' 待成团':item.status == 2?'待消费':item.status == 3?'待接单':item.status == 4?'待取货':item.status == 5?'待送达':item.status == 6?'已完成':item.status == 7?'待退款':item.status == 8?'已退款':item.status == 9?'已取消':item.status == 11?'售后中':item.status == 12?'已售后':""}}
				</view>
			</view>
			<view style="height: 120rpx;padding-top: 20rpx;">
				<view style="height: 50rpx;line-height: 50rpx;font-size: 28rpx;font-weight: 700;display: flex;">
					商品 <text>共<text>{{item.goodsNum}}</text>件</text> <text style="color: red;flex: 1;text-align: right;">已出餐</text>
				</view>
				<view style="display: flex;" v-for="(item1,index1) in item.goodsList" :key="index">
					<view style="flex: 1;">
						{{item1.productName}}
					</view>
					<view style="width: 100rpx;">
						{{'X' + item1.quantity}}
					</view>
					<view>
						{{'￥'+ item1.price}}
					</view>
				</view>
			</view>
		</view>
	</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')).regionId
				},
				totalPages: 1,
				orderList:[],
				currentIndex: 10,
				statusList: [{
						name: '全部',
						value: 10,
						checked: true
					},
					
					{
						name: '待消费',
						value: 2,
						checked: false
					},
					{
						name: '待接单',
						value: 3,
						checked: false
					},
					{
						name: '待发货',
						value: 4,
						checked: false
					},
					{
						name: '已发货',
						value: 5,
						checked: false
					},
					{
						name: '已完成',
						value: 6,
						checked: false
					},
					{
						name: '待退款',
						value: 7,
						checked: false
					},
					{
						name: '已取消',
						value: 9,
						checked: false
					},
					{
						name: '售后中',
						value: 11,
						checked: false
					},
					{
						name: '已售后',
						value: 12,
						checked: false
					}
				]
			}
		},
		onReachBottom() {
			if (this.searchForm.pageNum >= this.totalPages) return;
			// this.status = 'loading';
			this.searchForm.pageNum++;
			this.getOrderList();
		},
		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}`;
			}
		},
		methods: {
			init(){
				// if(option.index){
				// 	this.searchForm.searchStatus = option.index
				// 	this.currentIndex = option.index
				// }
				this.getList()
			},
			getList(){
				this.loadStatus = 'loading'
				let that = this
				
				that.NB.sendRequest("/mall/order/page", this.searchForm, true, 'POST', 'application/json').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++){
							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) => {});
			},
			goDetail(id){
				uni.navigateTo({
					url:'/pages/shop/orderDetail?id=' + id
				})
			},
			handleStatusClick(index,value) {
				if (this.currentIndex === index) return;
				this.currentIndex = index;
				this.searchForm.searchStatus = value
				this.getList()
			}
		}
	}
</script>

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

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

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

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

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

	.title-tab {
		display: flex;
		margin: -200rpx auto 0;
	}

	.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: 95%;
		margin: 20rpx auto;
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
	}
</style>