<template>
	<view :style="warpCss" class="overflow-hidden">
		<view class="flex py-[30rpx] pl-[30rpx] pr-[20rpx] border-0 border-solid border-b-[2rpx] border-[var(--page-bg-color)]" @click="toActivityList()">
			<view class="font-bold h-[32rpx] leading-[32rpx]">
				<text class="text-[#4b88f2] font-bold">|</text> 活动报名
			</view>
			<view class="ml-auto text-gray-400 text-[26rpx] h-[32rpx] leading-[32rpx]">
				<u-icon label="更多" name="arrow-right" labelPos="left" color="text-gray-400" size="18"></u-icon>
			</view>
		</view>
		<view class="activity-wrap pb-[30rpx]">
			<view v-for="(item,index) in activityList" :key="index"
				class=" align-center mx-[30rpx] mt-[30rpx] rounded-[20rpx] overflow-hidden"
				@click="toActivity(item.activity_id)">
				<u--image width="690rpx" height="285rpx" :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 p-[20rpx]">
					<view class="leading-[1.3] text-[30rpx] 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>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed, watch, onMounted } from 'vue';
	import { redirect, img } from '@/utils/common';
	import useDiyStore from '@/app/stores/diy';
	import { getActivityComponents } from '@/addon/xypm/api/manage';

	const props = defineProps(['component', 'index', 'pullDownRefreshCount']);
	const diyStore = useDiyStore();

	const activityList = ref<Array<any>>([]);

	const diyComponent = computed(() => {
		if (diyStore.mode == 'decorate') {
			return diyStore.value[props.index];
		} else {
			return props.component;
		}
	})

	const warpCss = computed(() => {
		var style = '';
		
		if(diyComponent.value.componentStartBgColor) {
		    if (diyComponent.value.componentStartBgColor && diyComponent.value.componentEndBgColor) style += `background:linear-gradient(${diyComponent.value.componentGradientAngle},${diyComponent.value.componentStartBgColor},${diyComponent.value.componentEndBgColor});`;
		    else style += 'background-color:' + diyComponent.value.componentStartBgColor + ';';
		}
		
		if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
		if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
		if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
		if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
		return style;
	})

	watch(
		() => props.pullDownRefreshCount,
		(newValue, oldValue) => {
			// 处理下拉刷新业务
		}
	)

	const getActivityListFn = () => {
		let data = {
			num: diyComponent.value.source == 'all' || diyComponent.value.source == 'category' ? diyComponent.value.num : '',
			activity_ids: diyComponent.value.source == 'custom' ? diyComponent.value.activity_ids : '',
			category_id: diyComponent.value.source == 'category' ? diyComponent.value.category_id : ''
		}
		getActivityComponents(data).then((res) => {
			activityList.value = res.data;
		});
	}

	onMounted(() => {
		refresh();
		// 装修模式下刷新
		if (diyStore.mode == 'decorate') {
			watch(
				() => diyComponent.value,
				(newValue, oldValue) => {
					if (newValue && newValue.componentName == 'AddonList') {
						refresh();
					}
				}
			)
		}
	});

	const refresh = () => {
		// 装修模式下设置默认图
		if (diyStore.mode == 'decorate') {
			let obj = {
				title: "活动标题",
				signup_start_time:"2024-10-30 00:00",
				signup_end_time:"2024-11-30 00:00",
				address: "活动详细地址",
			};
			activityList.value.push(obj);
			activityList.value.push(obj);
		}else{
			getActivityListFn();
		}
	}

	const toActivity = (activity_id: number) => {
		if (diyStore.mode == 'decorate') return false;
		redirect({ url: '/addon/xypm/pages/manage/activity/detail', param: { activity_id } })
	}
	
	const toActivityList = () => {
		if (diyStore.mode == 'decorate') return false;
		redirect({ url: '/addon/xypm/pages/manage/activity/list' })
	}
</script>

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