<template>
	<view class="bg-[var(--page-bg-color)] min-h-[100vh]">
		
		<view class="fixed left-0 top-0 right-0 z-10">
			<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': currCategoryId == item.id }]"
						@click="loadCategory(item.id)" v-for="(item, index) in categoryList" :key="index">{{ item.name }}</view>
				</view>
			</scroll-view>
		</view>

		<mescroll-body ref="mescrollRef" @init="mescrollInit" top="105rpx" @down="downCallback" @up="getNoticeListFn">
			<view v-for="(item,index) in articleList" :key="item.id"
				:class="['bg-white flex align-center mb-[2rpx] p-[30rpx]'] "
				@click="toLink(item.id)">
				<u--image width="183rpx" height="170rpx" :src="img(item.image)" model="aspectFill">
					<template #error>
						<u-icon name="photo" color="#f7f7f7" size="50"></u-icon>
					</template>
				</u--image>
				<view class="flex-1 flex flex-col justify-between ml-[10px]">
					<view class="text-[30rpx] leading-[1.3] multi-hidden mt-[2px]">{{item.title}}</view>
					<view class="text-[28rpx] using-hidden mb-[10px] mt-[10px] text-gray-500">{{item.category_id_name}}</view>
					<view class="text-[24rpx] text-gray-400 flex justify-between mb-[5px]">
						<text>{{item.create_time}}</text>
						<text class="ml-auto">浏览 {{item.views}}</text>
					</view>
				</view>
			</view>
			<mescroll-empty :option="{tip : '暂无公告'}" v-if="!articleList.length && loading"></mescroll-empty>
		</mescroll-body>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref, onMounted } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { t } from '@/locale'
	import { redirect, img } from '@/utils/common';
	import { getNoticeList, getCategoryList } from '@/addon/xypm/api/content';
	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 { onPageScroll, onReachBottom } from '@dcloudio/uni-app';

    const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);

	let categoryList = ref<Array<Object>>([]);
	let articleList = ref<Array<any>>([]);
	let currCategoryId = ref<number | string>('');
	let articleTitle = ref<string>('');
	let mescrollRef = ref(null);
	let loading = ref<boolean>(false);

	onLoad(async () => {
		await getCategoryList('notice').then((res) => {
			const initData = { name: "全部", id: '' };
			categoryList.value.push(initData);
			categoryList.value = categoryList.value.concat(res.data);
		});
	})

	interface mescrollStructure {
		num : number,
		size : number,
		endSuccess : Function,
		[propName : string] : any
	}
	const getNoticeListFn = (mescroll : mescrollStructure) => {
		loading.value = false;
		let data : object = {
			category_id: currCategoryId.value,
			title: articleTitle.value,
			page: mescroll.num,
			limit: mescroll.size
		};

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

	const loadCategory = (id : number) => {
		currCategoryId.value = id;
		getMescroll().resetUpScroll();
	}

	const toLink = (id : number) => {
		redirect({ url: '/addon/xypm/pages/content/notice/detail', param: { id } })
	}

	onMounted(() => {
		setTimeout(() => {
			getMescroll().optUp.textNoMore = t("end");
		}, 500)
	});
</script>

<style>
	@import '@/addon/xypm/styles/common.scss';
</style>