<template>
	<view class="order-container">
		<view class="tabs">
			<view class="tab-item" v-for="(tab, index) in tabs" :key="index" :class="{active: currentTab === index}"
				@click="switchTab(index)">
				<text class="tab-text">{{tab.name}}</text>
				<view class="tab-indicator" v-if="currentTab === index"></view>
			</view>
		</view>

		<scroll-view class="order-list" scroll-y :refresher-enabled="true" :refresher-triggered="refreshing"
			@refresherrefresh="onRefresh" @scrolltolower="loadMore">
			<view class="order-card" v-for="order in orderList" :key="order.id">
				<view class="order-header">
					<view class="order-no">订单号：{{order.order_id}}</view>
					<view class="order-status">
						{{getStatusText(order.status)}}
					</view>
				</view>

				<view class="order-items">
					<view class="order-item" v-for="(item, idx) in order.cart_info" :key="idx">
						<image :src="item.image" mode="aspectFill" class="item-image"></image>
						<view class="item-info">
							<text class="item-name">{{item.product_name}}</text>
							<text class="item-spec">{{item.unique || ''}}</text>
							<view class="item-bottom">
								<!-- <text class="item-price">¥{{item.total_price}}</text> -->
								<text class="item-count">×{{item.cart_num}}</text>
							</view>
						</view>
					</view>
				</view>

				<view class="order-footer">
					<view class="order-total">
						<text class="total-label">合计：</text>
						<text class="total-price">{{order.pay_price}}积分</text>
					</view>
					<view class="order-actions">
						<view class="action-btn btn-outline" v-if="order.status === 1"
							@click="cancelOrder(order.order_id)">
							<text>取消订单</text>
						</view>
						<view 
							class="action-btn btn-primary" 
							v-if="order.status === 0" 
							@click="payOrder(order.order_id)"
						>
							<text>立即兑换</text>
						</view>
						<view class="action-btn btn-primary" v-if="order.status === 2"
							@click="confirmReceipt(order.order_id)">
							<text>确认收货</text>
						</view>
						<view class="action-btn btn-outline" @click="viewDetail(order.order_id)">
							<text>查看详情</text>
						</view>
					</view>
				</view>
			</view>

			<view class="empty-state" v-if="orderList.length === 0">
				<image src="/static/icon/empty.png" mode="aspectFit" class="empty-icon"></image>
				<text class="empty-text">暂无订单</text>
			</view>

			<view class="load-more" v-if="orderList.length > 0">
				<text v-if="loading">加载中...</text>
				<text v-else-if="!hasMore">没有更多了</text>
				<text v-else>下拉加载更多</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		getOrderList,
		cancelOrder,
		confirmOrder
	} from '@/api/user.js'
	export default {
		data() {
			return {
				// -1订单取消,0待发货,1待发货,2待收货,3已完成
				tabs: [
					// {name: '全部', status: 0},
					{
						name: '待发货',
						status: 1
					},
					{
						name: '待收货',
						status: 2
					},
					{
						name: '已完成',
						status: 3
					}
				],
				currentTab: 0,
				orderList: [],
				page: 1,
				pageSize: 10,
				status:1,
				loading: false,
				refreshing: false,
				hasMore: true
			}
		},
		computed: {
			...mapState('user', ['userInfo'])
		},
		methods: {
			switchTab(index) {
				this.currentTab = index
				this.status = this.tabs[index].status
				this.page = 1
				this.orderList = []
				this.hasMore = true
				this.getOrderList()
			},
			getOrderList() {
				if (this.loading) return
				this.loading = true
				getOrderList({
					page: this.page,
					pageSize: this.pageSize,
					status: this.status,
					uid: this.userInfo.uid
				}).then(res => {
					if (res.data && res.data.list) {
						if (this.page === 1) {
							this.orderList = res.data.list
						} else {
							this.orderList = [...this.orderList, ...res.data.list]
						}
						this.hasMore = res.data.list.length >= this.pageSize
					} else {
						this.hasMore = false
					}
					console.log(this.orderList, 'this.orderList');
					this.loading = false
					this.refreshing = false
				}).catch(() => {
					this.loading = false
					this.refreshing = false
				})
			},
			getStatusText(status) {
				// -1订单取消,0待发货,1待发货,2待收货,3已完成
				const statusMap = {
					0: '待发货',
					1: '待发货',
					2: '待收货',
					3: '已完成',
					// 4: '已取消'
				}
				return statusMap[status] || '未知状态'
			},
			getStatusClass(status) {
				const classMap = {
					0: 'status-pending',
					1: 'status-unpaid',
					2: 'status-shipping',
					3: 'status-completed',
					4: 'status-canceled'
				}
				return classMap[status] || ''
			},
			onRefresh() {
				this.page = 1
				this.orderList = []
				this.hasMore = true
				this.getOrderList()
			},
			loadMore() {
				if (!this.hasMore || this.loading) return
				this.page++
				this.getOrderList()
			},
			cancelOrder(orderId) {
				uni.showModal({
					title: '提示',
					content: '确定要取消该订单吗？',
					success: (res) => {
						if (res.confirm) {
							console.log('取消订单:', orderId)
							cancelOrder(orderId).then(res => {
								if (res.code === 200) {
									uni.showToast({
										title: '订单已成功取消',
										icon: 'success'
									})
									this.getOrderList()
								}
							})
						}
					}
				})
			},
			payOrder(orderId,pay) {
				console.log('支付订单:', orderId)
				// 
				uni.showModal({
					title: '提示',
					content: '确定花费' + pay +'积分兑换该商品吗？',
					success: (res) => {
						if (res.confirm) {
							scorePay(orderId).then(res => {
								uni.showToast({
									title: '兑换成功',
									icon: 'success',
									duration: 2000
								})
								this.getOrderList()
							})
						}
					}
				})
				
			},
			confirmReceipt(orderId) {
				uni.showModal({
					title: '提示',
					content: '确定已收到商品吗？',
					success: (res) => {
						if (res.confirm) {
							console.log('确认收货:', orderId)
							confirmOrder(orderId).then(res => {
								if (res.code === 200) {
									uni.showToast({
										title: '订单已成功确认收货',
										icon: 'success'
									})
									this.getOrderList()
								}
							})
						}
					}
				})
			},
			viewDetail(orderId) {
				uni.navigateTo({
					url: `/pages/user/jf/orderDetail?id=${orderId}`
				})
			}
		},
		onLoad() {
			this.getOrderList()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
		min-height: 100vh;
	}

	.order-container {
		min-height: 100vh;
		background-color: #F5F5F5;
	}

	.tabs {
		display: flex;
		background-color: #FFFFFF;
		position: sticky;
		top: 0;
		z-index: 100;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.tab-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 25rpx 0;
		position: relative;

		.tab-text {
			font-size: 28rpx;
			color: #666666;
			transition: color 0.3s;
		}

		.tab-indicator {
			position: absolute;
			bottom: 0;
			width: 40rpx;
			height: 4rpx;
			background-color: #FF4444;
			border-radius: 2rpx;
		}

		&.active {
			.tab-text {
				color: #FF4444;
				font-weight: bold;
			}
		}
	}

	.order-list {
		height: calc(100vh - 88rpx);
		padding: 20rpx;
	}

	.order-card {

		background-color: #FFFFFF;
		border-radius: 15rpx;
		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: 25rpx 30rpx;
		border-bottom: 1rpx solid #F0F0F0;

		.order-no {
			font-size: 24rpx;
			color: #999999;
		}

		.order-status {
			font-size: 26rpx;
			font-weight: bold;

			&.status-pending {
				color: #FF9900;
			}

			&.status-unpaid {
				color: #FF4444;
			}

			&.status-shipping {
				color: #0099FF;
			}

			&.status-completed {
				color: #52C41A;
			}

			&.status-canceled {
				color: #999999;
			}
		}
	}

	.order-items {
		padding: 20rpx 30rpx;
	}

	.order-item {
		display: flex;
		margin-bottom: 20rpx;

		&:last-child {
			margin-bottom: 0;
		}

		.item-image {
			width: 160rpx;
			height: 160rpx;
			border-radius: 10rpx;
			background-color: #F5F5F5;
		}

		.item-info {
			flex: 1;
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.item-name {
				font-size: 28rpx;
				color: #333333;
				line-height: 36rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}

			.item-spec {
				font-size: 24rpx;
				color: #999999;
			}

			.item-bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.item-price {
					font-size: 28rpx;
					font-weight: bold;
					color: #FF4444;
				}

				.item-count {
					font-size: 24rpx;
					color: #999999;
				}
			}
		}
	}

	.order-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 25rpx 30rpx;
		border-top: 1rpx solid #F0F0F0;
		background-color: #FAFAFA;

		.order-total {
			display: flex;
			align-items: baseline;

			.total-label {
				font-size: 24rpx;
				color: #666666;
			}

			.total-price {
				font-size: 32rpx;
				font-weight: bold;
				color: #FF4444;
				margin-left: 5rpx;
			}
		}

		.order-actions {
			display: flex;
			gap: 15rpx;
		}
	}

	.action-btn {
		padding: 15rpx 30rpx;
		border-radius: 30rpx;
		font-size: 24rpx;

		&.btn-outline {
			border: 1rpx solid #DDDDDD;
			color: #666666;

			&:active {
				background-color: #F5F5F5;
			}
		}

		&.btn-primary {
			background-color: #FF4444;
			color: #FFFFFF;

			&:active {
				background-color: #E63939;
			}
		}
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 100rpx 0;

		.empty-icon {
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 30rpx;
			opacity: 0.5;
		}

		.empty-text {
			font-size: 28rpx;
			color: #999999;
		}
	}

	.load-more {
		text-align: center;
		padding: 30rpx;
		font-size: 24rpx;
		color: #999999;
	}
</style>