<template>
	<view :style="warpCss" class="overflow-hidden">
		<view class="flex py-[30rpx] pl-[30rpx] pr-[20rpx]" @click="toArticleList()">
			<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="article-wrap">
			<view v-for="(item,index) in articleList" :key="index" class="flex align-center mb-[2rpx] p-[30rpx] border-0 border-solid border-t-[2rpx] border-[var(--page-bg-color)]" @click="toArticle(item.article_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.author}}</view>
					<view class="text-[24rpx] text-gray-400 flex justify-between mb-[5px]">
						<text>浏览 {{item.total_views}} </text>
						<text class="ml-auto">{{item.create_time}}</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 { getArticleComponents } from '@/addon/xypm/api/content';

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

	const articleList = 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 getArticleListFn = () => {
		let data = {
			num: diyComponent.value.source == 'all' || diyComponent.value.source == 'category' ? diyComponent.value.num : '',
			article_ids: diyComponent.value.source == 'custom' ? diyComponent.value.article_ids : '',
			category_id: diyComponent.value.source == 'category' ? diyComponent.value.category_id : ''
		}
		getArticleComponents(data).then((res) => {
			articleList.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: "文章标题",
				author:"行云物业",
				create_time: "2024-10-07 11:34:18",
				total_views: "188",
			};
			articleList.value.push(obj);
			articleList.value.push(obj);
		}else{
			getArticleListFn();
		}
	}

	const toArticle = (article_id: number) => {
		if (diyStore.mode == 'decorate') return false;
		redirect({ url: '/addon/xypm/pages/content/article/detail', param: { article_id } })
	}
	
	const toArticleList = () => {
		if (diyStore.mode == 'decorate') return false;
		redirect({ url: '/addon/xypm/pages/content/article/list' })
	}
</script>

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