<template>
	<view class="bg-[var(--page-bg-color)] min-h-[100vh]">
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="getActivityListFn">
			<view v-for="(item,index) in activityList" :key="index"
				class="bg-white align-center mx-[30rpx] mt-[30rpx] rounded-[20rpx] overflow-hidden"
				@click="toLink(item.activity_id)">
				<image :src="img(item.image)" class="w-[690rpx] h-[285rpx]" />
					
				<view class="flex-1 flex flex-col justify-between p-[20rpx]">
					<view class="leading-[1.3] text-[32rpx] multi-hidden">{{item.title}}</view>
					<view class="text-[26rpx] text-gray-500 flex leading-[32rpx] mt-[20rpx]">
						 <u-icon name="clock" color="text-gray-500" size="17" />
						 <text class="ml-[10rpx]">{{item.signup_start_time}}至{{item.signup_end_time}}</text> 
					</view>
					<view class="text-[26rpx] text-gray-500 flex leading-[32rpx] mt-[15rpx]">
						<u-icon name="map" color="text-gray-500" size="20" />
						<text class="ml-[10rpx]">{{item.address}}</text>
					</view>
				</view>
			</view>
			
			<mescroll-empty :option="{tip : '暂无数据'}" v-if="!activityList.length && loading"></mescroll-empty>
		</mescroll-body>
		
		<tabbar addon="xypm"/>
	</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 { getActivityList } 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 { onPageScroll, onReachBottom } from '@dcloudio/uni-app';

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

	let activityList = ref<Array<any>>([]);
	let activityTitle = ref<string>('');
	let mescrollRef = ref(null);
	let loading = ref<boolean>(false);

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

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

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

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

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