<template>
	<!-- 随手拍 意见反馈 -->
	<view class="forumPage">
		<!-- 内容区 -->
		<scroll-view
			class="scrollContent"
			:scroll-y="true"
			@scrolltolower="scrolltolower"
			:refresher-enabled="true"
			:refresher-triggered="triggered"
			@refresherrefresh="onRefresh"
			refresher-default-style="black"
			v-if="forumData.length > 0"
		>
			<div class="contPart" v-for="(item, index) in forumData" :key="index">
				<img src="@/static/images/nocl.png" alt="未处理" class="imgsTag" v-if="item.orderStatus == 0" />
				<img src="@/static/images/donecl.png" alt="已处理" class="imgsTag" v-if="item.orderStatus == 1" />
				<div class="titleCon flex">
					<img :src="item.headImg ? item.headImg : defaultHeadImg" alt="头像" class="imgs" />
					<div class="name">
						<p class="ellipsis">{{ item.nickName }}</p>
						<p>{{ item.happenTime }}(意见反馈)</p>
					</div>
				</div>
				<div class="message">{{ item.describ }}</div>
				<div class="images flex" v-if="item.complaintPhotosFileList.length > 0">
					<img
						:src="img.url"
						alt="headImg"
						class="headImg"
						v-for="img in item.complaintPhotosFileList"
						:key="img.id"
						@click="previewImg(img.url)"
					/>
				</div>
			</div>
		</scroll-view>
	</view>
	<!-- 暂无数据 -->
	<div class="noDatas" v-if="forumData.length == 0">
		<img src="@/static/images/noData.png" alt="暂无数据" class="imgs" />
	</div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { wechartSuggestList } from '@/utils/homeApi.js';
import { onLoad, onTabItemTap } from '@dcloudio/uni-app';
import defaultHeadImg from '@/static/images/userUtar.png'; //默认头像

const forumData = ref([]);
const triggered = ref(false); //下拉是否激活
const pageNum = ref(1);
const pageSize = ref(4);
const total = ref(0);

// 向上加载
function scrolltolower() {
	console.log('向上加载--');
	if (forumData.value.length < total.value) {
		pageNum.value += 1;
		getDataList();
	} else {
		uni.showToast({
			title: '已经到底，没有更多了',
			icon: 'none'
		});
		return;
	}
}
// 下拉刷新
function onRefresh() {
	console.log('下拉刷新--');
	triggered.value = true;
	pageNum.value = 1;
	forumData.value = [];
	getDataList();
	//复位
	setTimeout(() => {
		triggered.value = false;
	}, 1000);
}

// 获取列表数据
function getDataList() {
	wechartSuggestList({ pageNum: pageNum.value, pageSize: pageSize.value }).then((res) => {
		forumData.value = forumData.value.concat(res.data || []);
		total.value = res.total;
	});
}

// 点击放大预览图片
function previewImg(url) {
	uni.previewImage({
		urls: [url] //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
	});
}

onLoad((e) => {
	forumData.value = [];
	getDataList();
});
</script>

<style lang="scss">
.forumPage {
	padding: 15rpx 10rpx;
	.scrollContent {
		height: calc(100vh - var(--window-top) - var(--window-bottom) - 40rpx);
	}
	.contPart {
		background: #fff;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.3);
		border-radius: 8rpx;
		margin: 15rpx 20rpx 0rpx 20rpx;
		padding: 15rpx;
		align-content: center;
		justify-content: space-between;
		position: relative;
		.imgsTag {
			position: absolute;
			right: 5rpx;
			top: 5rpx;
			z-index: 99;
			width: 75rpx;
			height: 73rpx;
		}
		.titleCon {
			height: 90rpx;
			.imgs {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
			.name {
				flex: 1;
				margin: 0 10rpx;
			}
		}
		.message {
			margin: 10rpx 0;
		}
		.images {
			.headImg {
				width: 30%;
				height: 200rpx;
				margin-left: 2%;
			}
		}
	}
}
</style>