<template>
	<view class="complaint-page">
		<!-- 自定义导航栏 -->
		<wd-navbar :bordered="false"
			custom-style="background: transparent !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;"
			safeAreaInsetTop fixed placeholder>
			<template #left>
				<view class="li-ml-15 li-mt-10 li-flex li-items-center">
					<text v-if="hasMultiplePages" class="ri-arrow-left-s-line li-text-70"
						@click="toPages({type:'nav'})"></text>
					<text v-if="!hasMultiplePages" class="ri-home-5-line li-text-55 li-mb-8 li-mr-10"
						@click="toPages({type:'home'})"></text>
					<text class="li-text-42">投诉管理</text>
				</view>
			</template>
		</wd-navbar>
		<!-- 导航栏背景 -->
		<view class="nav-bg-layer"></view>

		<!-- 搜索栏 -->
		<view class="li-w-90% li-mx-auto li-mt-30">
			<wd-search placeholderStyle="color:#d9d9d9" v-model="searchText" placeholder="搜索投诉内容/编号" hide-cancel
				placeholder-left @search="handleSearch"></wd-search>
		</view>

		<!-- 状态筛选 -->
		<view class="li-flex li-items-center li-mx-auto li-w-96% li-mt-20 li-pl-30">
			<text v-for="(item, index) in statusList" :key="index"
				:class="activeStatus === item.value ? 'status-tag active' : 'status-tag'"
				@click="handleStatusChange(item.value)">
				{{item.label}}
			</text>
		</view>

		<!-- 投诉列表 -->
		<view class="li-w-92% li-mx-auto li-mt-30 li-pb-30">
			<view v-if="complaintList.length > 0">
				<view v-for="(item, index) in complaintList" :key="index" @click="toPages({type:'detail', value:item})"
					class="complaint-card li-bg-white li-rd-20 li-px-30 li-py-25 li-mb-20 li-shadow-sm">
					<!-- 投诉头部 -->
					<view
						class="complaint-header li-flex li-items-center li-justify-between li-pb-15 li-bottom-border2">
						<view class="li-flex li-items-center">
							<text class="ri-error-warning-line li-text-34 li-mr-10 li-text-#999999"></text>
							<text class="li-text-30">{{item.complaint_no}}</text>
						</view>
						<view class="status-badge" :style="{
                            backgroundColor: getStatusBgColor(item.status),
                            color: getStatusColor(item.status)
                        }">
							{{getStatusText(item.status)}}
						</view>
					</view>

					<!-- 投诉内容 -->
					<view class="complaint-content li-mt-20">
						<view class="li-flex li-items-start li-mb-15">
							<text class="content-label li-text-28 li-text-#9a9a9a li-w-160">投诉内容</text>
							<text
								class="content-text li-text-28 li-text-#333 li-flex-1 li-line-clamp-2">{{item.content}}</text>
						</view>

						<view class="li-flex li-items-center li-mb-15">
							<text class="content-label li-text-28 li-text-#9a9a9a li-w-160">小区信息</text>
							<text class="content-text li-text-28 li-text-#333">{{item.village_name}}</text>
						</view>

						<view class="li-flex li-items-center li-mb-15">
							<text class="content-label li-text-28 li-text-#9a9a9a li-w-160">投诉人</text>
							<text class="content-text li-text-28 li-text-#333">{{item.user_name}}</text>
							<text class="ri-phone-line li-text-28 li-text-#0070F0 li-ml-20"
								@click.stop="callPhone(item.user_mobile)"></text>
						</view>

						<view class="li-flex li-items-center">
							<text class="content-label li-text-28 li-text-#9a9a9a li-w-160">提交时间</text>
							<text class="content-text li-text-28 li-text-#999">{{item.create_time}}</text>
						</view>

						<!-- 标签 -->
						<view class="li-flex li-items-center li-flex-wrap li-mt-15"
							v-if="item.tags && item.tags.length">
							<wd-tag v-for="(tag, idx) in item.tags" :key="idx" color="#0083ff" bg-color="#d0e8ff"
								custom-class="li-mr-10 li-mb-10">
								{{tag}}
							</wd-tag>
						</view>

						<!-- 附件图片预览 -->
						<view class="li-flex li-mt-15" v-if="item.images && item.images.length">
							<image v-for="(img, imgIdx) in item.images.slice(0, 3)" :key="imgIdx" :src="img"
								mode="aspectFill" class="preview-image li-mr-10"
								@click.stop="previewImage(item.images, imgIdx)">
							</image>
							<text v-if="item.images.length > 3" class="more-image-text li-text-28 li-text-#0070F0">
								+{{item.images.length - 3}}
							</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 空状态 -->
			<view v-else class="li-mt-100">
				<wd-status-tip image="search" tip="暂无投诉记录" />
			</view>

			<!-- 加载状态 -->
			<view v-if="loading" class="li-flex-center li-mt-30">
				<wd-loading color="#0070F0" />
			</view>

			<!-- 底部提示 -->
			<view v-if="!loading && finished && complaintList.length > 0"
				class="li-text-center li-text-26 li-text-#999 li-py-20">
				-- 没有更多数据了 --
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive, onMounted } from 'vue';
	import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
	import { useNavigation } from '@/hooks/useNavigation';
	import { useToast } from '@/uni_modules/wot-design-uni';

	const Toast = useToast();

	// 使用导航composable
	const {
		hasMultiplePages,
		isTabBarPage,
		checkRouteStack
	} = useNavigation();

	// 状态管理
	const searchText = ref('');
	const activeStatus = ref('ALL');
	const loading = ref(false);
	const finished = ref(false);
	const page = ref(1);
	const pageSize = ref(10);

	// 状态筛选选项
	const statusList = ref([
		{ label: '全部', value: 'ALL' },
		{ label: '待处理', value: 0 },
		{ label: '处理中', value: 1 },
		{ label: '已处理', value: 2 },
		{ label: '已关闭', value: 3 }
	]);

	// 模拟数据 - 实际项目中应该是通过API获取
	const complaintList = ref([
		{
			complaint_id: 1,
			complaint_no: 'TS20240607001',
			content: '楼道灯已经坏了三天，晚上上下楼很不方便，希望物业尽快解决！',
			village_name: '阳光花园小区',
			user_name: '张三',
			user_mobile: '13800138000',
			create_time: '2024-06-07 10:23',
			status: 0,
			urgency: 2,
			tags: ['公共设施', '照明'],
			images: [
				'https://img.yzcdn.cn/vant/cat.jpeg',
				'https://img.yzcdn.cn/vant/tree.jpeg'
			]
		},
		{
			complaint_id: 2,
			complaint_no: 'TS20240606001',
			content: '小区北门停车场有人乱停车，导致通道被堵，请物业及时处理。',
			village_name: '阳光花园小区',
			user_name: '李四',
			user_mobile: '13900139000',
			create_time: '2024-06-06 16:45',
			status: 1,
			urgency: 1,
			tags: ['停车管理', '安全隐患'],
			images: [
				'https://img.yzcdn.cn/vant/cat.jpeg',
				'https://img.yzcdn.cn/vant/cat.jpeg',
				'https://img.yzcdn.cn/vant/cat.jpeg',
				'https://img.yzcdn.cn/vant/tree.jpeg'
			]
		},
		{
			complaint_id: 3,
			complaint_no: 'TS20240605001',
			content: '小区垃圾分类做得不到位，希望加强宣传和管理。',
			village_name: '阳光花园小区',
			user_name: '王五',
			user_mobile: '13700137000',
			create_time: '2024-06-05 09:12',
			status: 2,
			urgency: 1,
			tags: ['环境卫生', '垃圾分类'],
			images: []
		}
	]);

	// 状态颜色配置
	const getStatusColor = (status) => {
		const colorMap = {
			0: '#ff9d00', // 待处理
			1: '#37A5FF', // 处理中
			2: '#00b42a', // 已处理
			3: '#999999'  // 已关闭
		};
		return colorMap[status] || '#666666';
	};

	// 状态背景色配置
	const getStatusBgColor = (status) => {
		const bgColorMap = {
			0: '#fff6e9', // 待处理
			1: '#e8f4ff', // 处理中
			2: '#e8ffea', // 已处理
			3: '#f5f5f5'  // 已关闭
		};
		return bgColorMap[status] || '#f5f5f5';
	};

	// 状态文字配置
	const getStatusText = (status) => {
		const textMap = {
			0: '待处理',
			1: '处理中',
			2: '已处理',
			3: '已关闭'
		};
		return textMap[status] || '未知状态';
	};

	// 处理状态切换
	const handleStatusChange = (status) => {
		activeStatus.value = status;
		resetList();
		loadComplaintList();
	};

	// 搜索处理
	const handleSearch = () => {
		resetList();
		loadComplaintList();
	};

	// 重置列表
	const resetList = () => {
		page.value = 1;
		finished.value = false;
		complaintList.value = [];
	};

	// 加载投诉列表数据
	const loadComplaintList = async () => {
		if (loading.value || finished.value) return;

		try {
			loading.value = true;

			// 这里应该调用实际的API接口获取数据
			// const params = {
			//     page: page.value,
			//     page_size: pageSize.value,
			//     keyword: searchText.value,
			//     status: activeStatus.value !== 'ALL' ? activeStatus.value : ''
			// };
			// const res = await getComplaintList(params);

			// 模拟加载延迟
			await new Promise(resolve => setTimeout(resolve, 1000));

			// 模拟数据加载完成的情况
			if (page.value > 1) {
				finished.value = true;
			} else {
				page.value++;
			}

			loading.value = false;
		} catch (error) {
			console.error('加载投诉列表失败', error);
			Toast.fail('加载失败，请重试');
			loading.value = false;
		}
	};

	// 页面跳转
	const toPages = (item) => {
		switch (item.type) {
			case 'nav':
				uni.navigateBack({
					delta: 1
				});
				break;
			case 'home':
				uni.switchTab({
					url: '/pages/index/index'
				});
				break;
			case 'detail':
				uni.navigateTo({
					url: `/pagesB/complaint/detail?id=${item.value.complaint_id}`
				});
				break;
			default:
				break;
		}
	};

	// 拨打电话
	const callPhone = (phone) => {
		uni.makePhoneCall({
			phoneNumber: phone,
			success: () => {
				console.log('拨打电话成功');
			},
			fail: (err) => {
				console.log('拨打电话失败', err);
			}
		});
	};

	// 预览图片
	const previewImage = (images, current) => {
		uni.previewImage({
			urls: images,
			current: images[current]
		});
	};

	// 生命周期钩子
	onLoad(() => {
		checkRouteStack();
		loadComplaintList();
	});

	// 下拉刷新
	onPullDownRefresh(() => {
		resetList();
		loadComplaintList().then(() => {
			uni.stopPullDownRefresh();
		});
	});

	// 上拉加载
	onReachBottom(() => {
		loadComplaintList();
	});


</script>

<style lang="scss">
	page {
		background-color: #F7F8FA;
	}

	.complaint-page {
		min-height: 100vh;
	}

	.nav-bg-layer {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: calc(var(--status-bar-height) + 88rpx);
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
		z-index: -1;
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	}

	.status-tag {
		padding: 8rpx 24rpx;
		border-radius: 30rpx;
		font-size: 28rpx;
		color: #666;
		background: #f5f5f5;
		margin-right: 16rpx;
		transition: all 0.3s;
	}

	.status-tag.active {
		color: #0070F0;
		background: rgba(0, 112, 240, 0.1);
		font-weight: 500;
	}

	.complaint-card {
		transition: all 0.3s;

		&:active {
			transform: scale(0.98);
			opacity: 0.9;
		}
	}

	.complaint-header {
		.status-badge {
			padding: 4rpx 20rpx;
			border-radius: 20rpx;
			font-size: 24rpx;
		}
	}

	.li-bottom-border2 {
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	}

	.preview-image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		object-fit: cover;
	}

	.more-image-text {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 120rpx;
		height: 120rpx;
		background-color: #f8f8f8;
		border-radius: 8rpx;
	}

	/* 覆盖组件样式 */
	::v-deep .wd-search {
		background-color: transparent !important;
		padding: 0 !important;
		border-radius: 10rpx !important;
	}

	::v-deep .wd-search__block {
		background-color: rgba(255, 255, 255, 0.8) !important;
		padding: 8rpx !important;
		border-radius: 10rpx !important;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.015);
	}

	::v-deep .wd-status-tip__text {
		margin-top: 30rpx !important;
		color: #999 !important;
	}
</style>