<template>
	<view class="contentStyle" style="">
		<view class="status-bar"></view>
		<uni-nav-bar title="投诉建议" backgroundColor="transparent" :border="false" left-icon="left" @clickLeft="goBack">
		</uni-nav-bar>
		<!-- 1. 顶部分段控制器 -->
		<view style="width: 60vw;">
			<uni-segmented-control :current="currentTab" :values="tabs" @clickItem="onTabClick" style-type="text"
				active-color="#007AFF" inactive-color="#999" class="seg-control"></uni-segmented-control>
		</view>
		<!-- 表单区域 -->
		<scroll-view class="page" scroll-y="true">
			<view class="page-container">

				<!-- 2. 投诉卡片主体 -->
				<view class="card-wrapper" v-for="item,index in dataList" :key="index">
					<!-- 卡片头部：标题 + 标签 -->
					<view class="card-header">
						<text class="card-title">{{item.title}}</text>
						<text class="card-tag"
							:class="item.status=='pending'?'pending':item.status=='processing'?'processing':item.status=='completed'?'completed':''">{{item.status=='pending'?'待处理':item.status=='processing'?'处理中':item.status=='completed'?'已完成':''}}</text>
					</view>

					<!-- 卡片内容：描述 + 横向图片 -->
					<view class="card-body">
						<text class="card-desc">
							{{item.desc}}
						</text>

						<!-- 横向图片滚动区 -->
						<view class="img-scroll-container">
							<view v-for="(img, imgIndex) in item.imgList" :key="imgIndex" class="img-item">
								<image :src="img" mode="widthFix" class="card-img"></image>
							</view>
						</view>

						<!-- 时间 & 详情 -->
						<view class="card-footer">
							<text class="card-time">{{item.time}}</text>
							<text class="card-detail" @click="turnToDetail(item)">投诉详情</text>
						</view>
					</view>
				</view>







			</view>

		</scroll-view>
		<view class="bottom-btn-wrap">
			<button class="next-btn" @click="addComplaintsSuggestions">投诉建议</button>
		</view>
	</view>



</template>

<script>
	export default {
		onReady: function(e) {},
		components: {

		},

		computed: {




		},
		created() {

		},
		onShow() {

		},

		mounted() {
			this.getDataList()
		},

		onReady() {
			this.$nextTick(() => {

			})
		},
		data() {
			return {
				/* 设定状态栏默认高度 */
				statusBarHeight: 20,
				// 分段器数据
				tabs: ["待处理", "处理中", "已完成"],
				currentTab: 0,
				dataList: [],
				pendingList: [{
						id: 1,
						title: '社区服务',
						status: 'pending',
						desc: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
						time: '2026-08-01 10:05:46',
						imgList: [
							"/static/propertyImgs/community1.png",
							"/static/propertyImgs/community2.png",
							"/static/propertyImgs/community3.png"
						]
					},
					{
						id: 1,
						title: '社区服务',
						status: 'pending',
						desc: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
						time: '2026-08-01 10:05:46',
						imgList: [
							"/static/propertyImgs/community1.png",
							"/static/propertyImgs/community2.png",
							"/static/propertyImgs/community3.png"
						]
					},
					{
						id: 1,
						title: '社区服务',
						status: 'pending',
						desc: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
						time: '2026-08-01 10:05:46',
						imgList: [
							"/static/propertyImgs/community1.png",
							"/static/propertyImgs/community2.png",
							"/static/propertyImgs/community3.png"
						]
					},
					{
						id: 1,
						title: '社区服务',
						status: 'pending',
						desc: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
						time: '2026-08-01 10:05:46',
						imgList: [
							"/static/propertyImgs/community1.png",
							"/static/propertyImgs/community2.png",
							"/static/propertyImgs/community3.png"
						]
					}
				],

				processingList: [{
					id: 2,
					title: '社区服务',
					status: 'processing',
					desc: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
					time: '2026-08-01 10:05:46',
					imgList: []
				}],
				completedList: [{
					id: 3,
					title: '社区服务',
					status: 'completed',
					desc: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
					time: '2026-08-01 10:05:46',
					imgList: [
						"/static/propertyImgs/community1.png",
						"/static/propertyImgs/community2.png",
						"/static/propertyImgs/community3.png"
					]
				}],
			}
		},


		methods: {
			turnToDetail(item) {
				uni.redirectTo({
					url: '/pages/service-list/complaintsDetail?id=' + item.id + '&status=' + item.status,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			getDataList() {
				if (this.currentTab == 0) {
					this.dataList = this.pendingList
				} else if (this.currentTab == 1) {

					this.dataList = this.processingList
				} else if (this.currentTab == 2) {

					this.dataList = this.completedList
				}
			},
			addComplaintsSuggestions() {
				uni.redirectTo({
					url: '/pages/service-list/addComplaints',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});

			},
			onTabClick(e) {
				this.currentTab = e.currentIndex;
				this.getDataList()
			},
			goBack() {
				uni.switchTab({
					url: '/pages/serviceIndex/serviceIndex',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},

		},


	}
</script>
<style lang="scss">
	page {
		background: #f2f1f6;
	}
</style>

<style scoped>
	.contentStyle {
		display: flex;
		flex-direction: column;
		height: 100vh;
		/* 关键：占满屏幕高度 */
		background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%);
	}

	.page {
		flex: 1;
		overflow-y: auto;
		padding: 0px 20px;
		box-sizing: border-box;
		/* background-color: #fff; */
	}

	.page-container {}

	/* --- 分段控制器样式 --- */
	.seg-control {
		margin-bottom: 20rpx;
	}

	.cardScroll {
		padding: 0rpx 0rpx 0px 0rpx;
		overflow-y: scroll;
	}

	/* --- 卡片主体样式 --- */
	.card-wrapper {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		margin-bottom: 10px;

	}

	/* 卡片头部：标题 & 标签 */
	.card-header {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.card-title {
		font-size: 16px;
		font-weight: 400;
		color: #222222;
		margin-right: 20rpx;
	}

	.card-tag {
		font-size: 12px;
		padding: 1px 8px;
		border-radius: 20px;
	}

	.pending {
		background: #E34D59;
		color: #FFFFFF;
	}

	.processing {
		background: #09C2BD;
		color: #FFFFFF;
	}

	.completed {
		background: #2F77FD;
		color: #FFFFFF;
	}

	/* 卡片内容区 */
	.card-body {
		display: flex;
		flex-direction: column;

	}

	/* 描述文本 */
	.card-desc {
		font-size: 14px;
		color: #666666;
		line-height: 20px;
		margin-bottom: 20rpx;
	}

	/* 图片容器 */
	.img-scroll-container {
		display: flex;
		flex-wrap: wrap;
		/* 自动换行 */
		gap: 10px;
		/* 图片之间的间距（可改） */
		margin: 5px 0px 10px 0px;
	}

	/* 单个图片项 */
	.img-item {
		width: calc(33.333% - 7px);
		height: 52px;

	}

	/* 图片样式 */
	.card-img {
		width: 100%;
		height: 52px;
		object-fit: cover;
	}

	/* 底部栏：时间 & 详情 */
	.card-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.card-time {
		font-size: 12px;
		color: #999999;
	}

	.card-detail {
		font-size: 26rpx;
		color: #2F77FD;
	}

	/* 底部按钮 */
	.bottom-btn-wrap {
		padding: 10px 15px 20px;
		display: flex;
		gap: 20rpx;
		/* background-color: #fff; */
	}

	.next-btn {
		width: 100%;
		height: 96rpx;
		line-height: 96rpx;
		background-color: #1677ff;
		color: #fff;
		font-size: 36rpx;
		border-radius: 12rpx;
		border: none;
	}

	.status-bar {
		width: 100vw;
		height: 46px;
	}
</style>