
<template>
	<view class="container">
		<!-- 引入头部组件 -->
		<view class="content">
			<!-- 标签栏 -->
			<u-tabs 
				:list="tabList" 
				lineWidth="30" 
				lineColor="#3B8CFF" 
				:activeStyle="{
					color: '#303133',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}" 
				:inactiveStyle="{
					color: '#606266',
					transform: 'scale(1)'
				}" 
				itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;width:90px"
				@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" @click="goDetail(order)">
					<view class="order-title">
						<view class="title">
							<view class="title-text">{{ order.title }}</view>
							<u-tag 
								size="mini" 
								:text="getStatusText(order.status)" 
								:type="getStatusType(order.status)"
								plain
							></u-tag>
						</view>
						<view class="date">{{ formatTime(order.createdAt,"YYYY-MM-DD") }}</view>
					</view>
					<view class="order-description">{{ order.content }}</view>
					<button 
						@click.stop="handleAction(order)" 
						class="order-action" 
						v-if="order.status === 2"
					>撤回</button>
				</view>
				
				<!-- 空状态提示 -->
				<u-empty 
				    textSize="24"
				    width="180px"
					height="780px"
					v-if="filteredOrders.length === 0" 
					mode="data" 
					icon="/static/imgs/noData.jpeg"
				></u-empty>
			</view>
		</view>
		<Footer></Footer>
		
		<!-- 固定在右侧的发布工单按钮 -->
		<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 { get, post } from '@/utils/request';
	import { IMAGE_BASE_URL,BASE_URL } from '@/utils/config';
	import { formatTime, formatRelativeTime } from '@/utils/timeFormat';
	
	export default {
		components: {
			Footer
		},
		data() {
			return {
				tabList: [
					{ name: '全部', value: '' },
					{ name: '求助中', value: 2 },
					{ name: '已解决', value: 3 }
				],
				orders: [],
				currentTab: '', // 默认显示全部
				isLoading: false,
				formatTime,
			};
		},
		computed: {
			filteredOrders() {
				if (this.currentTab === '') {
					return this.orders;
				} else {
					return this.orders.filter(order => order.status === this.currentTab);
				}
			}
		},
		mounted(){
			this.getReciprocitiesList();
		},
		methods: {
			// 获取状态对应的文本
			getStatusText(status) {
				const statusMap = {
					'': '全部',
					2: '进行中',
					3: '已完成',
					1: '待审核'
				};
				return statusMap[status] || '未知状态';
			},
			
			// 获取状态对应的标签类型
			getStatusType(status) {
				const typeMap = {
					1: 'warning',
					2: 'warning',
					3: 'success'
				};
				return typeMap[status] || 'info';
			},
			
			handleBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			
			// 切换tabs
			handleTabChange(index) {
				console.log("======index",index)
				this.currentTab = index.value;
			},
			
			// 打开发布工单功能
			openPublishForm() {
				uni.navigateTo({ url: '/pages/helpInfo/index' });
			},
			
			handleAction(order) {
				// 阻止事件冒泡
				event.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' });
			},
			
			// 获取列表接口
			async getReciprocitiesList() {
				if (this.isLoading) return;
				this.isLoading = true;
				
				try {
					const res = await get('/api/v1/app_auth/my/reciprocities', {
						current: 1,
						pageSize: 10,
					});
					
					if (res?.success) {
						this.orders = res.data || [];
					}
				} catch (err) {
					console.error('获取我的求助失败:', err);
					uni.showToast({
						title: '加载列表失败',
						icon: 'none'
					});
				} finally {
					this.isLoading = false;
				}
			},
		}
	};
</script>

<style lang="scss" scoped>
	// 定义全局变量
	$primary-color: #1890ff;
	$light-bg: #f0f8ff;
	$text-color: #333;
	$sub-text-color: #3D3D3D;
	$disabled-text-color: #999;
	$fab-bg: $primary-color; // 发布按钮背景色
	$fab-shadow: 0 4rpx 16rpx rgba(24, 144, 255, 0.3); // 按钮阴影效果

	.container {
		width: 100%;
		min-height: 100vh;
		opacity: 1;
		background: linear-gradient(0deg, rgba(240, 240, 240, 1) 0%, rgba(255, 250, 250, 0) 100%),
			linear-gradient(0deg, rgba(255, 241, 235, 1) 0%, rgba(192, 219, 250, 1) 100%);
		position: relative;

		.content {
			width: 100%;
			position: absolute;
			margin-top: 20rpx;
			background-color: rgba(252, 252, 252, 0.8);
			padding-bottom: 16rpx;
		}

		.content_wapper {
			width: 100%;
			height: auto;
			position: absolute;
			margin-top: 120rpx;
			background-color: rgba(252, 252, 252, 0.8);

			.content_list {
				width: 100%; 
				padding: 0 20rpx;
				box-sizing: border-box;
				.order-item {
					display: flex;
					flex-direction: column;
					width: 95%;
					margin: 20rpx auto;
					border-radius: 10rpx;
					margin-bottom: 40rpx;
					padding:40rpx 20rpx;
					border-radius: 14.17px;
					background: linear-gradient(90deg, rgba(199, 222, 255, 0.5) 0%, rgba(255, 255, 255, 0.72) 100%);
					box-shadow: 0px 2px 4px  rgba(191, 218, 255, 0.58);
					position: relative;

					.order-title {
						font-size: 28rpx;
						display: flex;
						justify-content: space-between;
						.title{
							width: 90%;
							font-weight: bold;
							display: flex;
							align-items: center;
							gap: 8rpx;
							.title-text{
								white-space: nowrap; 
								overflow: hidden; 
								text-overflow: ellipsis; 
								max-width: 200rpx;
							}
						}
						.date{
							width: 40%;
							font-weight: normal;
							text-align: right;
						}
					}

					.order-description {
						font-size: 26rpx;
						color: $sub-text-color;
						margin-top: 10rpx;
						margin-bottom: 30rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical; 
						overflow: hidden; 
						text-overflow: ellipsis; 
						-webkit-line-clamp: 2; 
						line-height: 50rpx;
					}

					.order-action {
						margin-top: 40rpx;
						width: 120rpx;
						height: 40rpx;
						line-height: 40rpx;
						text-align: center;
						background-color: $primary-color;
						color: #fff;
						border-radius: 10rpx;
						font-size: 24rpx;
						margin-top: 20rpx;
						position: absolute;
						right: 20rpx;
						bottom: 20rpx;
					}
				}
			}
		}
		
		// 右侧固定发布按钮样式
		.fab-container {
			position: fixed;
			right: 20rpx;
			bottom: 220rpx;
			z-index: 100; // 确保按钮在最上层
			transition: all 0.3s ease; // 动画过渡效果
			
			// 悬停放大效果
			&:hover .fab-button {
				transform: scale(1.1);
				box-shadow: $fab-shadow, 0 0 0 10rpx rgba(24, 144, 255, 0.1);
			}
		}
		
		.fab-button {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			background-color: $fab-bg;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: $fab-shadow;
			color: #fff;
			font-size: 60rpx;
			font-weight: bold;
			transition: all 0.3s ease;
		}
		
		.fab-icon {
			line-height: 1;
		}
	}
</style>