<template>
	<view class="container">
		<!-- 标签栏 -->
		<view class="content">
			<u-tabs 
				:list="tabList" 
				lineWidth="30" 
				lineColor="#3B8CFF" 
				:activeStyle="{
					color: '#3B8CFF',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}" 
				:inactiveStyle="{
					color: '#606266',
					transform: 'scale(1)'
				}" 
				itemStyle="padding-left: 15px; padding-right: 15px; height: 34px"
				@change="handleTabChange"
			></u-tabs>
		</view>
		
		<view class="content_wapper">
			<view class="content_list">
				<!-- 工单列表 -->
				<view 
					v-for="(order, index) in filteredOrders" 
					:key="index" 
					class="order-item" 
					:class="{'order-item--special': order.status === 2}"
					@click="goDetail(order)"
				>
					<view class="order-title">
						 <view class="title">
							<view class="title-text">
								<text :style="{color: getStatusColor(order.status)}">●</text>
								<text> {{order.title}}</text>
							</view>
						    <u-tag
						    	size="mini" 
						    	:text="getStatusText(order.status)" 
						    	:type="getStatusType(order.status)"
						    	:style="{
									backgroundColor: getStatusBgColor(order.status),
									color: getStatusColor(order.status),
									borderColor: getStatusColor(order.status)
								}"
						    ></u-tag>
						 </view>
						 <view class="date">{{ formatTime(order.createdAt,"YYYY-MM-DD") }}</view>
					</view>
					<view class="order-description">{{ order.content }}</view>
					<view class="order-meta">
						<button 
							@click.stop="handleAction(order, $event)" 
							class="order-action" 
							v-if="order.status == 2"
						>
							撤回
						</button>
					</view>
				</view>
				
				<!-- 加载更多提示 -->
				<view class="load-more" v-if="loading">
					<u-loading-icon mode="circle" size="24"></u-loading-icon>
					<text class="load-text">加载中...</text>
				</view>
				<!-- 空状态提示 -->
				<u-empty 
				    textSize="24"
				    width="180px"
					height="780px"
					v-if="filteredOrders.length === 0 && !loading" 
					mode="data" 
					icon="/static/imgs/noData.png"
				></u-empty>
				<!-- 没有更多数据提示 -->
				<view class="no-more" v-if="noMoreData && orders.length > 0 && filteredOrders.length != 0">
					<text>没有更多数据了</text>
				</view>
			</view>
			
		</view>
		
		<!-- 发布工单按钮 -->
		<view class="fab-container">
			<view class="fab-button" @click="openPublishForm">
				<text class="fab-icon">+</text>
			</view>
		</view>
	</view>
</template>

<script>
	import Footer from '@/components/footer_common.vue';
	import { IMAGE_BASE_URL,BASE_URL } from '@/utils/config';
	import { formatTime, formatRelativeTime } from '@/utils/timeFormat';
	import { get, post,put } from '@/utils/request';
	
	export default {
		components: {
			Footer
		},
		data() {
			return {
				tabList: [
					{ name: '全部', value: '' },
					{ name: '求助中', value: 2 },
					{ name: '已解决', value: 3 }
				],
				orders: [],
				currentTab: '', // 默认显示全部
				isLoading: false,
				formatTime,
				currentPage: 1,     // 当前页码
				pageSize: 10,      // 每页数量
				loading: false,     // 加载状态
				noMoreData: false,  // 是否没有更多数据
			};
		},
		computed: {
			filteredOrders() {
				if (this.currentTab === '') {
					return this.orders;
				} else {
					return this.orders.filter(order => order.status === this.currentTab);
				}
			}
		},
		onReachBottom() {
			// 触底加载更多
			this.loadMore();
		},
		mounted(){
			this.getReciprocitiesList();
		},
		methods: {
			// 获取状态对应的颜色
			getStatusColor(status) {
				const colorMap = {
					1: '#FF7D00', // 待审核-橙色
					2: '#00B42A', // 进行中-绿色
					3: '#86909C', // 已完成-灰色
					99: '#F53F3F', // 驳回-红色
					98: '#86909C'  // 已撤回-灰色
				};
				return colorMap[status] || '#86909C';
			},
			
			// 获取状态标签背景色
			getStatusBgColor(status) {
				const colorMap = {
					1: 'rgba(255, 125, 0, 0.1)', // 待审核-浅橙
					2: 'rgba(0, 180, 42, 0.1)', // 进行中-浅绿
					3: 'rgba(134, 144, 156, 0.1)', // 已完成-浅灰
					99: 'rgba(245, 63, 63, 0.1)', // 驳回-浅红
					98: 'rgba(134, 144, 156, 0.1)'  // 已撤回-浅灰
				};
				return colorMap[status] || 'rgba(134, 144, 156, 0.1)';
			},
			
			// 获取状态对应的文本
			getStatusText(status) {
				const statusMap = {
					'': '全部',
					2: '进行中',
					3: '已完成',
					1: '待审核',
					98:'已撤回'
				};
				return statusMap[status] || '未知状态';
			},
			
			// 获取状态对应的标签类型
			getStatusType(status) {
				const typeMap = {
					1: 'warning',
					2: 'success',
					3: 'success',
					98:'error'
				};
				return typeMap[status] || 'info';
			},
			
			handleBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			
			// 切换tabs
			handleTabChange(index) {
				this.currentTab = index.value;
				this.resetList(); // 切换标签时重置列表
			},
			
			// 重置列表
			resetList() {
				this.currentPage = 1;
				this.orders = [];
				this.noMoreData = false;
				this.getReciprocitiesList();
			},
			
			// 打开发布工单功能
			openPublishForm() {
				uni.navigateTo({ url: '/pages/helpInfo/index' });
			},
			
			handleAction(order, e) {
				e.stopPropagation();
				if (order.status === 2) {
					uni.showModal({
						title: '提示',
						content: '确定要撤回该工单吗？',
						success: async (res) => {
							if (res.confirm) {
								try {
									// 这里调用撤回接口
									// await post('/api/withdraw', { id: order.id });
									
									// 本地更新状态
									this.orders = this.orders.map(item => 
										item.id === order.id ? { ...item, status: 3 } : item
									);
									
									uni.showToast({
										title: '工单已撤回',
										icon: 'success'
									});
								} catch (error) {
									uni.showToast({
										title: '撤回失败',
										icon: 'none'
									});
								}
							}
						}
					});
				}
			},
			
			// 跳转详情
			goDetail(i){
				uni.setStorageSync("Detail",i)
				uni.navigateTo({ url: '/pages/mySeekHelpDetail/index' });
			},
			
			// 加载更多数据
			loadMore() {
				if (this.loading || this.noMoreData) return;
				this.currentPage += 1;
				this.getReciprocitiesList();
			},
			
			// 获取列表接口
			async getReciprocitiesList() {
				if (this.loading) return;
				this.loading = true;
				
				try {
					const res = await get('/api/v1/app_auth/my/reciprocities', {
						current: this.currentPage,
						pageSize: this.pageSize,
					});
					console.log("res",res)
					
					if (res?.success) {
						const newData = res.data || [];
						if (this.currentPage === 1) {
							this.orders = newData;
						} else {
							this.orders = [...this.orders, ...newData];
						}
						
						// 判断是否还有更多数据
						this.noMoreData = newData.length < this.pageSize;
					}
				} catch (err) {
					console.error('获取我的求助失败:', err);
					uni.showToast({
						title: '加载列表失败',
						icon: 'none'
					});
					// 加载失败时回退页码
					if (this.currentPage > 1) {
						this.currentPage -= 1;
					}
				} finally {
					this.loading = false;
				}
			},
		}
	};
</script>

<style lang="scss" scoped>
	// 丰富色彩的样式变量
	$primary-color: #3B8CFF;      // 主色调-蓝色
	$secondary-color: #FF7D00;    // 辅助色-橙色
	$success-color: #00B42A;      // 成功色-绿色
	$danger-color: #F53F3F;       // 危险色-红色
	$gray-color: #86909C;         // 灰色
	$light-bg: #F7F8FA;           // 页面背景
	$card-bg: #FFFFFF;            // 卡片背景
	
	// 渐变色定义
	$gradient-primary: linear-gradient(135deg, $primary-color, #5aa7ff);
	$gradient-active: linear-gradient(135deg, #e6f7ff, #ccf0ff);

	.container {
		width: 100%;
		min-height: 100vh;
		background-color: $light-bg;
		position: relative;

		.content {
			width: 100%;
			padding: 15rpx 0;
			background-color: $card-bg;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
			position: sticky;
			top: 0;
			z-index: 10;

			::v-deep .u-tabs {
				padding: 0 15rpx;
			}
			
			// 标签栏下划线动画
			::v-deep .u-tabs__line {
				transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
			}
		}

		.content_wapper {
			width: 100%;
			padding: 25rpx 0 140rpx;
			box-sizing: border-box;

			.content_list {
				width: 100%; 
				padding: 0 25rpx;
				box-sizing: border-box;

				.order-item {
					width: 90%;
					margin: 0 auto 25rpx;
					border-radius: 16rpx;
					padding: 30rpx;
					background-color: $card-bg;
					box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
					position: relative;
					transition: all 0.3s ease;

					&:hover {
						box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);
						transform: translateY(-3rpx);
					}
					
					// 为进行中的工单添加特殊标识
					&--special {
						border-left: 6rpx solid $success-color;
					}

					.order-title {
						font-size: 28rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 25rpx;

						.title {
							display: flex;
							align-items: center;
							gap: 15rpx;

							.title-text {
								color: #1D2129;
								font-weight: 600;
								font-size: 28rpx;
							}
						}

						.date {
							color: $gray-color;
							font-size: 24rpx;
							padding: 5rpx 10rpx;
							background-color: rgba(134, 144, 156, 0.08);
							border-radius: 6rpx;
						}
					}

					.order-description {
						font-size: 28rpx;
						color: #1D2129;
						line-height: 1.7;
						margin-bottom: 30rpx;
						padding-bottom: 20rpx;
						border-bottom: 1px dashed #EEEEEE;
						word-break: break-word;
					}
					
					.order-meta {
						display: flex;
						justify-content: space-between;
						align-items: center;
						
						.meta-item {
							color: $gray-color;
							font-size: 24rpx;
							padding: 3rpx 12rpx;
							background-color: rgba(134, 144, 156, 0.08);
							border-radius: 15rpx;
						}
					}

					.order-action {
						min-width: 130rpx;
						height: 56rpx;
						line-height: 56rpx;
						background-color: $danger-color;
						color: #fff;
						border-radius: 28rpx;
						font-size: 24rpx;
						margin: 0;
						padding: 0;
						transition: all 0.2s;

						&:hover {
							background-color: #e02020;
							transform: scale(1.05);
						}
					}
				}
				
				// 加载更多样式
				.load-more {
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 20rpx 0;
					color: $gray-color;
					font-size: 26rpx;
					
					.load-text {
						margin-left: 15rpx;
					}
				}
				
				// 没有更多数据样式
				.no-more {
					text-align: center;
					padding: 20rpx 0;
					color: $gray-color;
					font-size: 26rpx;
				}
			}
		}

		// 发布按钮增强
		.fab-container {
			position: fixed;
			right: 40rpx;
			bottom: 220rpx;
			z-index: 100;

			.fab-button {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
				background: $gradient-primary;
				display: flex;
				justify-content: center;
				align-items: center;
				box-shadow: 0 8rpx 20rpx rgba(59, 140, 255, 0.45);
				transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
				border: 5rpx solid rgba(255, 255, 255, 0.3);

				&:hover {
					transform: scale(1.1) rotate(90deg);
					box-shadow: 0 10rpx 25rpx rgba(59, 140, 255, 0.55);
				}
			}

			.fab-icon {
				color: white;
				font-size: 65rpx;
				font-weight: bold;
				line-height: 1;
				text-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1);
				position: relative;
			    top: -4rpx;  // 向上微调2rpx
			}
		}
	}
</style>