<template>
	<view class="news-list-page">
		<!-- 顶部导航栏 -->
		<uni-nav-bar
			left-icon="left" 
			:title="title" 
			@clickLeft="goBack" 
			fixed 
			color="#8B2316" 
			height="140rpx" 
			:border="false" 
			backgroundColor="#eeeeee"
		></uni-nav-bar>

 
		<!-- 新闻列表 -->
		<scroll-view 
			class="news-scroll-view"
			scroll-y="true"
			:refresher-enabled="true"
			:refresher-triggered="isRefreshing"
			@refresherrefresh="onRefresh"
			@scrolltolower="onScrollToLower"
			:show-scrollbar="false"
		>
 
			<view class="news-list">
			<view
				class="news-item"
				v-for="(news, index) in newsList"
				:key="news.uuid || index"
				@click="goToNewsDetail(news)"
			>
				<view class="item-image-container">
					<image
						class="item-image"
						:src="docUrl + (news.headImg || news.imgPath) "
						mode="aspectFill"
					></image>
					<view class="important-tag" v-if="news.isImportant">重要通知</view>
				</view>
				<view class="item-content">
					<view class="item-title">{{ news.title || news.topic }}</view>
					<view class="item-meta">
						<text class="item-date">{{ formatDate(news.createDate || news.submitDate) }}</text>
						<view class="item-stats">
							<uni-icons type="eye" size="14" color="#999"></uni-icons>
							<text>{{ news.readnum || 0 }}</text>
							<uni-icons type="hand-up" size="14" color="#999" style="margin-left: 20rpx;"></uni-icons>
							<text>{{ news.likenum || news.agreenum }}</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 加载更多/无数据提示 -->
				<view class="load-more-status">
					<view v-if="loadMoreStatus === 'loading'" class="loading">
						<uni-icons type="spinner-cycle" size="20" color="#999"></uni-icons>
						<text>加载中...</text>
					</view>
					<view v-else-if="loadMoreStatus === 'more'" class="more">
						<text>上拉加载更多</text>
					</view>
					<view v-else-if="loadMoreStatus === 'noMore'" class="no-more">
						<text>没有更多数据了</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import { ref, onMounted, reactive } from 'vue';
	import { onShow, onPullDownRefresh, onReachBottom,onLoad } from '@dcloudio/uni-app';
	import api from '@/api/api.js';
	import docUrl from '@/utils/docUrl.js';
	import dayjs from 'dayjs';
	import navTo from '@/utils/navTo.js'; 
    const from=ref('');
    const title=ref('肝胆新闻');
	// Banner相关数据
	const bannerList = ref([]);
	const currentBannerIndex = ref(0);
	const newstagid=ref('');
	// 响应式数据
	const activeTab = ref(-1); // '肝胆新闻' is the second tab (index 1)
	const tabs = ref(['精选', '肝胆新闻', '技术快讯', '基地动态', '专家动态']);
	
	const newsList = ref([]);
	const page = ref(1);
	const pageSize = ref(10);
	const total = ref(0);
	const loadMoreStatus = ref('more'); // more, loading, noMore
	const isRefreshing = ref(false); // 控制下拉刷新状态
	const keywords=ref('');
	const loadMoreText = reactive({
		contentdown: '上拉显示更多',
		contentrefresh: '正在加载...',
		contentnomore: '没有更多数据了'
	});
	const newsTags = ref([]); // 新闻标签列表
    onLoad((options) => {
        if(options.from){
            from.value = options.from
            title.value = '患教学堂'
        }
        if(options.keywords){
            keywords.value = options.keywords
        }
       
    })
	onShow(() => {
		
        if(from.value){
            loadNewsListKePu();
        }else{
            loadNewsListIndex();
        }
		
	});
	
	const onSwiperChange = (e) => {
		currentBannerIndex.value = e.detail.current;
	};

	// scroll-view 下拉刷新
	const onRefresh = async () => {
		console.log('scroll-view 下拉刷新触发');
		isRefreshing.value = true;
		await refreshData();
		isRefreshing.value = false;
	};

	// scroll-view 滚动到底部
	const onScrollToLower = () => {
		console.log('=== onScrollToLower 触发 ===');
		console.log('当前状态:', { 
			loadMoreStatus: loadMoreStatus.value, 
			isRefreshing: isRefreshing.value,
			currentPage: page.value,
			listLength: newsList.value.length
		});
		
		if (loadMoreStatus.value === 'more' && !isRefreshing.value) {
			console.log('条件满足，开始加载更多数据');
            if(from.value){
            loadNewsListKePu();
        }else{
            loadNewsListIndex();
        }
		} else {
			console.log('条件不满足，跳过加载:', {
				loadMoreStatus: loadMoreStatus.value,
				isRefreshing: isRefreshing.value
			});
		}
	};

	// 方法
	const goBack = () => {
		uni.navigateBack();
	};

	const goToSearch = () => {
		// Implement navigation to search page
		console.log('Go to search page');
	};

	

		// 加载新闻轮播数据
	

	// 加载新闻标签列表
	const loadNewsTags = async () => {
		try {
			const res = await api.newsTagList({});
			console.log('新闻标签响应:', res);

			if (res && res.code === 200) {
				console.log('获取到标签数据:', res.data);
				tabs.value = res.data;
				
				// 确保标签数据存在且有效
				if (res.data && Array.isArray(res.data) && res.data.length > 0) {
					newstagid.value = res.data[0].ID;
					//loadNewsList(true); // Initial load
				} else {
					console.warn('标签数据为空或格式不正确');
					newstagid.value = '';
				}
			} else {
				console.error('加载新闻标签失败:', res.message);
			}
		} catch (e) {
			console.error('加载新闻标签异常:', e);
		}
	};

	// 加载新闻列表数据
	const loadNewsListKePu = async (isRefresh = false) => {
	
		if (isRefresh) {
			page.value = 1;
			newsList.value = [];
			loadMoreStatus.value = 'more';
			console.log('刷新模式：重置分页状态');
		}

		// 检查加载状态
		if (loadMoreStatus.value === 'noMore' || loadMoreStatus.value === 'loading') {
			console.log('当前状态不允许加载:', loadMoreStatus.value);
			return;
		}

		// 设置加载状态
		loadMoreStatus.value = 'loading';
		console.log(`开始加载第${page.value}页数据，newstagid: ${newstagid.value}`);

		try {
			const res = await api.polularScienceArticleListIndexNew({
				page: page.value,
				pageSize: pageSize.value,
				topic: keywords.value
			});
			console.log('新闻列表API响应:', res);

			if (res && res.code === 200) {
				// 尝试多种可能的数据结构
				let newItems = [];
				let totalCount = 0;
				
				if (res.data && res.data.list) {
					newItems = res.data.list;
					totalCount = res.data.totalRow;
					console.log('使用 res.data.list 结构');
				} 
				
				console.log('解析后的数据:', { newItems, totalCount, newItemsLength: newItems.length });
				
				// 确保 newItems 是数组
				if (Array.isArray(newItems)) {
					if (isRefresh) {
						newsList.value = newItems;
						console.log('刷新模式：替换列表数据');
					} else {
						newsList.value = [...newsList.value, ...newItems];
						console.log('加载更多：追加数据到列表');
					}
					
					total.value = totalCount;
					console.log(`当前页数据: ${newItems.length}, 总数: ${total.value}, 当前列表长度: ${newsList.value.length}`);

					// 判断是否还有更多数据
					if (newItems.length < pageSize.value || newsList.value.length >= total.value) {
						loadMoreStatus.value = 'noMore';
						console.log('没有更多数据了');
					} else {
						loadMoreStatus.value = 'more';
						page.value++;
						console.log(`还有更多数据，下一页: ${page.value}`);
					}
				} else {
					console.error('API返回的数据不是数组格式:', newItems);
					loadMoreStatus.value = 'noMore';
				}
			} else {
				console.error('加载新闻列表失败:', res.message);
				loadMoreStatus.value = 'noMore';
			}
		} catch (e) {
			console.error('加载新闻列表异常:', e);
			loadMoreStatus.value = 'noMore';
		}
		
		console.log('=== loadNewsList 结束 ===');
		console.log('最终状态:', { 
			loadMoreStatus: loadMoreStatus.value, 
			page: page.value, 
			listLength: newsList.value.length 
		});
	};
	
	const loadNewsListIndex = async (isRefresh = false) => {
		console.log('=== loadNewsList 开始 ===');
		console.log('当前参数:', { isRefresh, page: page.value, newstagid: newstagid.value });
		
		// 验证 newstagid 是否有效
	
	
		if (isRefresh) {
			page.value = 1;
			newsList.value = [];
			loadMoreStatus.value = 'more';
			console.log('刷新模式：重置分页状态');
		}
	
		// 检查加载状态
		if (loadMoreStatus.value === 'noMore' || loadMoreStatus.value === 'loading') {
			console.log('当前状态不允许加载:', loadMoreStatus.value);
			return;
		}
	
		// 设置加载状态
		loadMoreStatus.value = 'loading';
		console.log(`开始加载第${page.value}页数据，newstagid: ${newstagid.value}`);
	
		try {
			const res = await api.defaultNewsListNew({
				page: page.value,
				pageSize: pageSize.value,
			});
			console.log('新闻列表API响应:', res);
	
			if (res && res.code === 200) {
				// 尝试多种可能的数据结构
				let newItems = [];
				let totalCount = 0;
				
				if (res.data && res.data.list) {
					newItems = res.data.list;
					totalCount = res.data.totalRow || 0;
					console.log('使用 res.data.list 结构');
				} 
				
				console.log('解析后的数据:', { newItems, totalCount, newItemsLength: newItems.length });
				
				// 确保 newItems 是数组
				if (Array.isArray(newItems)) {
					if (isRefresh) {
						newsList.value = newItems;
						console.log('刷新模式：替换列表数据');
					} else {
						newsList.value = [...newsList.value, ...newItems];
						console.log('加载更多：追加数据到列表');
					}
					
					total.value = totalCount;
					console.log(`当前页数据: ${newItems.length}, 总数: ${total.value}, 当前列表长度: ${newsList.value.length}`);
	
					// 判断是否还有更多数据
					if (newItems.length < pageSize.value || newsList.value.length >= total.value) {
						loadMoreStatus.value = 'noMore';
						console.log('没有更多数据了');
					} else {
						loadMoreStatus.value = 'more';
						page.value++;
						console.log(`还有更多数据，下一页: ${page.value}`);
					}
				} else {
					console.error('API返回的数据不是数组格式:', newItems);
					loadMoreStatus.value = 'noMore';
				}
			} else {
				console.error('加载新闻列表失败:', res.message);
				loadMoreStatus.value = 'noMore';
			}
		} catch (e) {
			console.error('加载新闻列表异常:', e);
			loadMoreStatus.value = 'noMore';
		}
		
		console.log('=== loadNewsList 结束 ===');
		console.log('最终状态:', { 
			loadMoreStatus: loadMoreStatus.value, 
			page: page.value, 
			listLength: newsList.value.length 
		});
	};

	const refreshData = async () => {
		console.log('Refreshing data...');
		// 重置分页状态
		page.value = 1;
		newsList.value = [];
		loadMoreStatus.value = 'more';
		
		if(from.value){
			// 重新加载数据
		   await loadNewsListKePu(true);
		}else{
			await loadNewsListIndex(true);
		}
		
		
		uni.showToast({
			title: '刷新成功',
			icon: 'none'
		});
	};

	const goToNewsDetail = (item) => {
        console.log('Go to news detail:', item);
		let url=encodeURIComponent(docUrl+item.path)
		navTo({
			url: `/pages_app/webview/webview?url=${url}`
		});
	};

	const formatDate = (dateString) => {
		if (!dateString) return '';
		try {
			// 使用 dayjs 格式化日期
			return dayjs(dateString).format('YYYY-MM-DD');
		} catch (error) {
			console.error('日期格式化失败:', error, dateString);
			return '';
		}
	};


</script>

<style lang="scss" scoped>
	.news-list-page {
		background-color: #f8f8f8;
		height: 100vh;
		overflow-y: hidden;
	}

	.uni-navbar {
		/* Custom styles for uni-nav-bar if needed */
		.uni-navbar__content {
			height: 44px; // Standard navbar height
		}
	}

	.nav-tabs {
		background-color: #ffffff;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
		position: sticky;
		top: calc(var(--status-bar-height) + 44px); // Below navbar
		z-index: 99;

		.tabs-scroll {
			width: 100%;
			white-space: nowrap;
		}

		.tabs-container {
			display: flex;
			padding: 0 20rpx;
			min-width: 100%;
		}

		.tab-item {
			flex-shrink: 0;
			padding: 10rpx 30rpx;
			font-size: 28rpx;
			color: #666;
			position: relative;
			margin-right: 20rpx;

			&:last-child {
				margin-right: 0;
			}

			&.active {
				color: #ff4757;
				font-weight: bold;

				&::after {
					content: '';
					position: absolute;
					bottom: -10rpx;
					left: 50%;
					transform: translateX(-50%);
					width: 60%;
					height: 4rpx;
					background-color: #ff4757;
					border-radius: 2rpx;
				}
			}
		}
	}

	/* Fixed Banner Container */
	.banner-container {
	  position: relative;
		background-color: #fff;
		.swipemask{
			width:100%;
			z-index:3;
			box-sizing:border-box;
			position: absolute;
			bottom:0;
			padding:0 20rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: rgba(0,0,0,0.7);
			.banner-subtitle {
				font-size: 24rpx;
				color: rgba(255,255,255,0.8);
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				max-width: 60%;
			}
			
			.dotbox{
				display:flex;
				align-items: center;
				
				.circle{
					margin:0 4rpx;
					width:16rpx;
					height:16rpx;
					background-color: #eee;
					border-radius: 50%;
				}
				.circle.active{
					background-color: #8B2316;
				}
			}
		}
	}

	.news-scroll-view {
		position: fixed;
		bottom:0;
		width:100%;
		top:140rpx;
		height: calc(100vh - 140rpx); // 仅减去导航栏高度
		background-color: #f8f8f8;
	}

	.news-list {
		padding: 20rpx;
		background-color: #f8f8f8;

		.news-item {
			display: flex;
			background-color: #ffffff;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			padding: 20rpx;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
			overflow: hidden; // Ensure content respects border-radius

			.item-image-container {
				flex-shrink: 0;
				width: 200rpx;
				height: 160rpx;
				border-radius: 8rpx;
				overflow: hidden;
				margin-right: 20rpx;
				position: relative;
				background-color: #f0f0f0; // Placeholder background

				.item-image {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}

				.important-tag {
					position: absolute;
					top: 0;
					left: 0;
					background-color: #ff4757;
					color: #fff;
					font-size: 20rpx;
					padding: 4rpx 12rpx;
					border-bottom-right-radius: 8rpx;
					z-index: 1;
				}
			}

			.item-content {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}

			.item-title {
				font-size: 32rpx;
				font-weight: normal; // Removed bold as per previous request
				color: #333;
				line-height: 1.4;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2; // Fixed two-line height
				overflow: hidden;
				text-overflow: ellipsis;
				margin-bottom: 10rpx;
			}

			.item-meta {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;
				color: #999;

				.item-date {
					flex-shrink: 0;
				}

				.item-stats {
					display: flex;
					align-items: center;

					text {
						margin-left: 8rpx;
					}
				}
			}
		}
	}

	.load-more-status {
		text-align: center;
		padding: 40rpx 0;
		color: #999;
		font-size: 28rpx;

		.loading {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 10rpx;
		}

		.more {
			color: #666;
		}

		.no-more {
			color: #ccc;
		}
	}
</style>
