<template>
	<view class="fast-order-list">
		<navbar
			title="快捷订单"
			leftClick 
			@leftClick="$utils.navigateBack"
		/>
		
		<!-- 状态筛选tabs -->
		<uv-tabs 
			:list="statusTabs" 
			:activeStyle="{ color: '#FD5100', fontWeight: 600 }" 
			lineColor="#FD5100" 
			lineHeight="8rpx"
			lineWidth="50rpx" 
			:scrollable="false" 
			@click="clickTabs">
		</uv-tabs>
		
		<!-- 订单列表 -->
		<view class="order-list">
			<view 
				class="order-item" 
				v-for="(order, index) in orderList" 
				:key="order.id"
			>
				<!-- 订单头部信息 -->
				<view class="order-header">
					<view class="order-info">
						<text class="order-number">订单号: {{order.orderNumber || order.id}}</text>
						<text class="order-time">{{formatTime(order.createTime)}}</text>
					</view>
					<view class="order-status" :class="{
						'pending': order.status === '0',
						'approved': order.status === '1', 
						'cancelled': order.status === '2'
					}">
						<text>{{getStatusText(order.status)}}</text>
					</view>
				</view>
				
				<!-- 订单内容 -->
				<view class="order-content">
					<!-- 下单方式标识 -->
					<view class="order-type">
						<view class="type-icon" :class="{
							'photo-type': order.type === '0',
							'voice-type': order.type === '2',
							'normal-type': order.type !== '0' && order.type !== '2'
						}">
							<uv-icon :name="getTypeIcon(order.type)" size="40rpx" color="#ffffff"></uv-icon>
						</view>
						<view class="type-info">
							<text class="type-name">{{getTypeName(order.type)}}</text>
							<text class="type-desc">{{getTypeDesc(order.type)}}</text>
						</view>
					</view>
					
					<!-- 订单详情 -->
					<view class="order-detail">
						<!-- 拍照订单显示图片 -->
						<view class="photo-content" v-if="order.type === '0' && order.imageUrl">
							<image :src="order.imageUrl" mode="aspectFill" class="order-image"></image>
							<text class="image-desc">通过图片识别下单</text>
						</view>
						
						<!-- 语音订单显示语音信息 -->
						<view class="voice-content" v-else-if="order.type === '2' && order.voiceUrl">
							<view class="voice-item">
								<view class="voice-icon">
									<uv-icon name="mic" size="30rpx" color="#D03F25"></uv-icon>
								</view>
								<text class="voice-desc">通过语音识别下单</text>
								<view class="voice-play" @click.stop="playVoice(order.voiceUrl)">
									<uv-icon name="play-circle" size="40rpx" color="#D03F25"></uv-icon>
								</view>
							</view>
						</view>
						
						<!-- 订单备注信息 -->
						<view class="order-remark" v-if="order.remark">
							<text class="remark-label">备注:</text>
							<text class="remark-content">{{order.remark}}</text>
						</view>
					</view>
				</view>
				
				<!-- 订单底部操作 -->
				<view class="order-footer">
					<view class="order-price" v-if="order.totalPrice">
						<text class="price-label">订单金额:</text>
						<text class="price-value">¥{{order.totalPrice}}</text>
					</view>
					<view class="order-actions">
						<view 
							class="action-btn cancel" 
							v-if="order.status === '0'"
							@click.stop="cancelOrder(order)"
						>
							<text>取消订单</text>
						</view>
						<view 
							class="action-btn pay" 
							v-if="order.status === '1'"
							@click.stop="goToConfirmOrder(order)"
						>
							<text>查看详情</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 空状态 -->
			<view class="empty-state" v-if="!orderList.length && !loading">
				<text class="empty-text">暂无{{currentTabName}}订单</text>
			</view>
			
			<!-- 加载更多 -->
			<view class="load-more" v-if="orderList.length && hasMore">
				<text>{{loading ? '加载中...' : '上拉加载更多'}}</text>
			</view>
			
			<!-- 没有更多了 -->
			<view class="no-more" v-if="orderList.length && !hasMore">
				<text>没有更多订单了</text>
			</view>
		</view>
		
		<kefu/>
	</view>
</template>

<script>
	export default {
		computed: {
			currentTabName() {
				return this.statusTabs[this.currentTab] ? this.statusTabs[this.currentTab].name : '';
			}
		},
		data() {
			return {
				currentTab: 0, // 当前选中的tab
				statusTabs: [
					{ name: '全部', state: '' },
					{ name: '待审核', state: '0' },
					{ name: '已审核', state: '1' },
					// { name: '已取消', state: '2' }
				],
				orderList: [], // 订单列表
				pageNo: 1, // 当前页码
				pageSize: 10, // 每页数量
				hasMore: true, // 是否还有更多数据
				loading: false, // 是否正在加载
				innerAudioContext: null, // 音频播放器
			};
		},
		onLoad() {
			// 初始化音频播放器
			this.innerAudioContext = uni.createInnerAudioContext();
			this.innerAudioContext.onError((err) => {
				console.error('音频播放错误', err);
				uni.showToast({
					title: '音频播放失败',
					icon: 'none'
				});
			});
			
			// 加载订单列表
			this.loadOrderList();
		},
		onUnload() {
			// 销毁音频播放器
			if (this.innerAudioContext) {
				this.innerAudioContext.destroy();
			}
		},
		onReachBottom() {
			// 上拉加载更多
			if (this.hasMore && !this.loading) {
				this.loadMore();
			}
		},
		onPullDownRefresh() {
			// 下拉刷新
			this.refreshList();
		},
		methods: {
			// 切换tab - 使用uv-tabs的点击事件
			clickTabs({ index }) {
				if (this.currentTab === index) return;
				this.currentTab = index;
				this.refreshList();
			},
			
			// 刷新列表
			refreshList() {
				this.pageNo = 1;
				this.hasMore = true;
				this.orderList = [];
				this.loadOrderList();
			},
			
			// 加载更多
			loadMore() {
				if (!this.hasMore || this.loading) return;
				this.pageNo++;
				this.loadOrderList();
			},
			
			// 加载订单列表
			loadOrderList() {
				if (this.loading) return;
				
				this.loading = true;
				
				const params = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
				};
				
				if(this.statusTabs[this.currentTab].state){
					params.state = this.statusTabs[this.currentTab].state
				}
				
				this.$api('getAddOrderPageBean', params)
				.then(res => {
					this.loading = false;
					uni.stopPullDownRefresh();
					
					if (res.code === 200 && res.result) {
						const newList = res.result.records || [];
						
						if (this.pageNo === 1) {
							this.orderList = newList;
						} else {
							this.orderList = [...this.orderList, ...newList];
						}
						
						// 判断是否还有更多数据
						this.hasMore = newList.length >= this.pageSize;
					} else {
						uni.showToast({
							title: res.message || '加载失败',
							icon: 'none'
						});
					}
				})
			},
			
			// 获取状态文本
			getStatusText(state) {
				const statusMap = {
					'0': '待审核',
					'1': '已审核',
					'2': '已取消'
				};
				return statusMap[state] || '未知状态';
			},
			
			// 获取订单类型名称
			getTypeName(type) {
				const typeMap = {
					'0': '拍照下单',
					'2': '语音下单'
				};
				return typeMap[type] || '普通下单';
			},
			
			// 获取订单类型描述
			getTypeDesc(type) {
				const descMap = {
					'0': '通过拍照识别商品',
					'2': '通过语音识别商品'
				};
				return descMap[type] || '快捷下单方式';
			},
			
			// 获取订单类型图标
			getTypeIcon(type) {
				const iconMap = {
					'0': 'camera-fill',
					'2': 'mic'
				};
				return iconMap[type] || 'list';
			},
			
			// 播放语音
			playVoice(voiceUrl) {
				if (!voiceUrl) {
					uni.showToast({
						title: '语音文件不存在',
						icon: 'none'
					});
					return;
				}
				
				// 设置音频源并播放
				this.innerAudioContext.src = voiceUrl;
				this.innerAudioContext.play();
				
				uni.showToast({
					title: '正在播放语音',
					icon: 'none'
				});
			},
			
			// 取消订单
			cancelOrder(order) {
				uni.showModal({
					title: '确认取消',
					content: '确定要取消这个快捷订单吗？',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '取消中...'
							});
							
							this.$api('cancelOrderFast', {
								orderId: order.id
							}, res => {
								uni.hideLoading();
								if (res.code === 200) {
									uni.showToast({
										title: '取消成功',
										icon: 'success'
									});
									// 刷新列表
									this.refreshList();
								} else {
									uni.showToast({
										title: res.message || '取消失败',
										icon: 'none'
									});
								}
							}, err => {
								uni.hideLoading();
								console.error('取消订单失败', err);
								uni.showToast({
									title: '网络错误，请重试',
									icon: 'none'
								});
							});
						}
					}
				});
			},
			
			// 跳转到确认订单页面
			goToConfirmOrder(order) {
				this.$utils.navigateTo(`/pages_order/order/firmOrder?orderId=${order.id}`);
			},
			
			// 格式化时间
			formatTime(time) {
				if (!time) return '';
				
				const date = new Date(time);
				const now = new Date();
				const diff = now.getTime() - date.getTime();
				
				// 一分钟内
				if (diff < 60 * 1000) {
					return '刚刚';
				}
				
				// 一小时内
				if (diff < 60 * 60 * 1000) {
					return Math.floor(diff / (60 * 1000)) + '分钟前';
				}
				
				// 一天内
				if (diff < 24 * 60 * 60 * 1000) {
					return Math.floor(diff / (60 * 60 * 1000)) + '小时前';
				}
				
				// 超过一天，显示具体日期
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hour = String(date.getHours()).padStart(2, '0');
				const minute = String(date.getMinutes()).padStart(2, '0');
				
				// 今年内不显示年份
				if (year === now.getFullYear()) {
					return `${month}-${day} ${hour}:${minute}`;
				} else {
					return `${year}-${month}-${day} ${hour}:${minute}`;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
.fast-order-list {
	min-height: 100vh;
	background-color: #f6f6f6;
	

	
	.order-list {
		padding: 20rpx;
		
		.order-item {
			background-color: #fff;
			border-radius: 12rpx;
			margin-bottom: 20rpx;
			overflow: hidden;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
			
			.order-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx;
				border-bottom: 1rpx solid #f0f0f0;
				
				.order-info {
					flex: 1;
					
					.order-number {
						display: block;
						font-size: 28rpx;
						color: #333;
						margin-bottom: 10rpx;
					}
					
					.order-time {
						font-size: 24rpx;
						color: #999;
					}
				}
				
				.order-status {
					padding: 8rpx 20rpx;
					border-radius: 20rpx;
					font-size: 24rpx;
					
					&.pending {
						background-color: rgba(255, 193, 7, 0.1);
						color: #ffc107;
					}
					
					&.approved {
						background-color: rgba(40, 167, 69, 0.1);
						color: #28a745;
					}
					
					&.cancelled {
						background-color: rgba(220, 53, 69, 0.1);
						color: #dc3545;
					}
				}
			}
			
			.order-content {
				padding: 30rpx;
				
				.order-type {
					display: flex;
					align-items: center;
					margin-bottom: 30rpx;
					
					.type-icon {
						width: 80rpx;
						height: 80rpx;
						border-radius: 40rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 20rpx;
						
						&.photo-type {
							background-color: #D03F25;
						}
						
						&.voice-type {
							background-color: #17a2b8;
						}
						
						&.normal-type {
							background-color: #6c757d;
						}
					}
					
					.type-info {
						flex: 1;
						
						.type-name {
							display: block;
							font-size: 30rpx;
							font-weight: 500;
							color: #333;
							margin-bottom: 6rpx;
						}
						
						.type-desc {
							font-size: 24rpx;
							color: #999;
						}
					}
				}
				
				.order-detail {
					.photo-content {
						display: flex;
						align-items: center;
						
						.order-image {
							width: 120rpx;
							height: 120rpx;
							border-radius: 8rpx;
							margin-right: 20rpx;
							background-color: #f9f9f9;
						}
						
						.image-desc {
							font-size: 26rpx;
							color: #666;
						}
					}
					
					.voice-content {
						.voice-item {
							display: flex;
							align-items: center;
							padding: 20rpx;
							background-color: #f9f9f9;
							border-radius: 8rpx;
							
							.voice-icon {
								width: 60rpx;
								height: 60rpx;
								background-color: rgba(208, 63, 37, 0.1);
								border-radius: 30rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								margin-right: 20rpx;
							}
							
							.voice-desc {
								flex: 1;
								font-size: 26rpx;
								color: #666;
							}
							
							.voice-play {
								width: 60rpx;
								height: 60rpx;
								display: flex;
								align-items: center;
								justify-content: center;
							}
						}
					}
					
					.order-remark {
						margin-top: 20rpx;
						padding: 20rpx;
						background-color: #f9f9f9;
						border-radius: 8rpx;
						
						.remark-label {
							font-size: 26rpx;
							color: #999;
							margin-right: 10rpx;
						}
						
						.remark-content {
							font-size: 26rpx;
							color: #666;
						}
					}
				}
			}
			
			.order-footer {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx;
				border-top: 1rpx solid #f0f0f0;
				
				.order-price {
					.price-label {
						font-size: 26rpx;
						color: #999;
						margin-right: 10rpx;
					}
					
					.price-value {
						font-size: 30rpx;
						font-weight: 600;
						color: #D03F25;
					}
				}
				
				.order-actions {
					display: flex;
					gap: 20rpx;
					
					.action-btn {
						padding: 12rpx 30rpx;
						border-radius: 30rpx;
						font-size: 26rpx;
						border: 1rpx solid;
						
						&.cancel {
							border-color: #dc3545;
							color: #dc3545;
							background-color: rgba(220, 53, 69, 0.05);
						}
						
						&.pay {
							border-color: #D03F25;
							color: #ffffff;
							background-color: #D03F25;
							font-weight: 500;
						}
					}
				}
			}
		}
		
		.empty-state {
			text-align: center;
			padding: 100rpx 0;
			
			.empty-image {
				width: 200rpx;
				height: 200rpx;
				margin-bottom: 30rpx;
			}
			
			.empty-text {
				font-size: 28rpx;
				color: #999;
			}
		}
		
		.load-more,
		.no-more {
			text-align: center;
			padding: 30rpx 0;
			font-size: 26rpx;
			color: #999;
		}
	}
}
</style> 