<template>
	<view class="bg-[var(--page-bg-color)] min-h-screen overflow-hidden build-list">
		<view class="fixed left-0 top-0 right-0 z-10" v-if="statusLoading">
			<scroll-view scroll-x="true" class="scroll-Y box-border px-[24rpx] bg-white">
				<view class="flex whitespace-nowrap justify-around">
					<view :class="['text-sm leading-[90rpx]', { 'class-select': suggestState === item.status }]"
						@click="suggestStateFn(item.status)" v-for="(item, index) in suggestStateList">{{ item.name }}</view>
				</view>
			</scroll-view>
		</view>

		<mescroll-body ref="mescrollRef" top="90rpx" @init="mescrollInit" @down="downCallback" @up="getSuggestListFn">
			<view class="suggest-wrap">
				<view v-for="(item,index) in list" :key="index" class="bg-white mb-[2rpx] py-[10rpx] px-[30rpx] rounded-[20rpx] m-[20rpx]">
					<view class="flex border-[var(--light-color)] border-solid border-0 border-bottom-[2rpx] py-[15rpx]">
						<view class="w-[110rpx]">房产：</view>
						<view>{{item.build_name}}</view>
					</view>
					
					<view class="flex border-[var(--light-color)] border-solid border-0 border-bottom-[2rpx] py-[15rpx]">
						<view class="w-[110rpx] flex-shrink-0">内容：</view>
						<view class="w-[100%]">{{item.content}}</view>
					</view>
					<view class="flex border-[var(--light-color)] border-solid border-0 border-bottom-[2rpx] py-[15rpx]">
						<view class="w-[110rpx] flex-shrink-0">图片：</view>
						<view class="w-[100%] flex flex-wrap">
							<u--image v-for="(imageItem, imageIndex) in item.images" :class="['rounded-[8rpx] overflow-hidden mb-[10rpx]', (imageIndex + 1) % 3 === 0 ? '' : 'mr-[10rpx]']"
							    width="170rpx" height="170rpx" :src="img(imageItem)" model="aspectFill"
							    @click="imgListPreview(imageItem)">
							    <template #error>
							        <u-icon name="photo" color="#999" size="50"></u-icon>
							    </template>
							</u--image>
						</view>
					</view>
					<view class="flex border-[var(--light-color)] border-solid border-0 border-bottom-[2rpx] py-[15rpx]">
						<view class="w-[110rpx]">时间：</view>
						<view>{{item.create_time}}</view>
					</view>
					<view class="flex py-[15rpx]">
						<view class="w-[110rpx]">状态：</view>
						<view>{{item.status_name}}</view>
					</view>
				</view>
			</view>
			<mescroll-empty :option="{tip : '暂无数据'}" v-if="!list.length && loading"></mescroll-empty>
		</mescroll-body>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { t } from '@/locale'
import { img, redirect } from '@/utils/common';
import { getSuggestStatus, getSuggestList,  } from '@/addon/xypm/api/manage';
import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue';
import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue';
import useMescroll from '@/components/mescroll/hooks/useMescroll.js';
import { onLoad, onPageScroll, onReachBottom } from '@dcloudio/uni-app';

const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);
let list = ref<Array<Object>>([]);
let loading = ref<boolean>(false);
let statusLoading = ref<boolean>(false);
let suggestState = ref('')
let suggestStateList = ref([]);

onLoad((option) => {
	suggestState.value = option.status || "";
	getSuggestStatusFn();
});

const getSuggestListFn = (mescroll) => {
	loading.value = false;
	let data: object = {
		page: mescroll.num,
		limit: mescroll.size,
		status: suggestState.value
	};

	getSuggestList(data).then((res) => {
		let newArr = (res.data.data as Array<Object>);
		//设置列表数据
		if (mescroll.num == 1) {
			list.value = []; //如果是第一页需手动制空列表
		}
		list.value = list.value.concat(newArr);
		mescroll.endSuccess(newArr.length);
		loading.value = true;
	}).catch(() => {
		loading.value = true;
		mescroll.endErr(); // 请求失败, 结束加载
	})
}

const getSuggestStatusFn = () => {
	statusLoading.value = false;
	suggestStateList.value = [];
	let obj = { name: '全部', status: '' };
	suggestStateList.value.push(obj);

	getSuggestStatus().then((res) => {
		Object.keys(res.data).forEach((item, index) => {
			suggestStateList.value.push({status:item,name:res.data[item]});
		});
		statusLoading.value = true;
	}).catch(() => {
		statusLoading.value = true;
	})
}

const suggestStateFn = (status) => {
	suggestState.value = status.toString();
	list.value = [];
	getMescroll().resetUpScroll();
};

//预览图片
const imgListPreview = (item:any) => {
    if (item === '') return false
    var urlList = []
    urlList.push(img(item))  //push中的参数为 :src="item.img_url" 中的图片地址
    uni.previewImage({
        indicator: "number",
        loop: true,
        urls: urlList
    })
}
</script>
<style>
	@import '@/addon/xypm/styles/common.scss';
</style>
