<template>
	
	<navBar title="肝胆新闻" />
	<view class="news-page">
		<!-- Fixed Banner Swiper -->
		<view class="banner-container">
			<view class="swipemask">
				<view class="banner-subtitle">{{bannerList[currentBannerIndex].summary}}</view>	
				<view class="dotbox">
					<view class="circle" :class="{active:currentBannerIndex==index} "v-for="(banner, index) in bannerList" 
					:key="banner.id"></view>
				</view>
			</view>
			<swiper 
				class="banner-swiper"
				:indicator-dots="false"
				:autoplay="true"
				:interval="5000"
				:duration="300"
				indicator-color="rgba(255,255,255,0.4)"
				indicator-active-color="#fff"
				circular
				@change="onSwiperChange"
			>
			  
				<swiper-item 
					v-for="(banner, index) in bannerList" 
					:key="banner.id"
					@click="playBannerVideo(banner)"
				>
					<view class="banner-item">
						<image 
						style="width:100%;"
							class="banner-image" 
							:src="docUrl +banner.headImg" 
							mode="widthFix"
						></image>
						
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<scroll-view class="news-list" scroll-y="true">
			<!-- 肝胆新闻 -->
			<view class="news-item" @click="goToNews('news')">
				<view class="news-icon blue">
					<uni-icons type="paperplane" size="24" color="#fff"></uni-icons>
				</view>
				<view class="news-content">
					<view class="news-title">肝胆新闻</view>
					<view class="news-subtitle">新鲜资讯、一触即达</view>
				</view>
				<view class="news-arrow">
					<uni-icons type="forward" size="16" color="#ccc"></uni-icons>
				</view>
			</view>
		
			<!-- 互动圈 -->
			<!-- <view class="news-item" @click="goToNews('interactionCircle')">
				<view class="news-icon purple">
					<uni-icons type="redo" size="24" color="#fff"></uni-icons>
				</view>
				<view class="news-content">
					<view class="news-title">互动圈</view>
					<view class="news-subtitle">技术、资讯、大家齐分享</view>
				</view>
				<view class="news-arrow">
					<uni-icons type="forward" size="16" color="#ccc"></uni-icons>
				</view>
			</view> -->
		
			<!-- 科研项目 -->
			<!-- <view class="news-item" @click="goToNews('researchProjects')">
				<view class="news-icon orange">
					<uni-icons type="star" size="24" color="#fff"></uni-icons>
				</view>
				<view class="news-content">
					<view class="news-title">科研项目</view>
					<view class="news-subtitle">项目、基金申报信息集聚地</view>
				</view>
				<view class="news-arrow">
					<uni-icons type="forward" size="16" color="#ccc"></uni-icons>
				</view>
			</view>
		 -->
			<!-- 临床招募 -->
			<!-- <view class="news-item" @click="goToNews('clinicalRecruitment')">
				<view class="news-icon green">
					<uni-icons type="personadd" size="24" color="#fff"></uni-icons>
				</view>
				<view class="news-content">
					<view class="news-title">临床招募</view>
					<view class="news-subtitle">最全招募信息,快速招募合格患者</view>
				</view>
				<view class="news-arrow">
					<uni-icons type="forward" size="16" color="#ccc"></uni-icons>
				</view>
			</view> -->
		
			<!-- 肝胆会议 -->
			<view class="news-item" @click="goToCourse('hepatoBiliaryConference')">
				<view class="news-icon yellow">
					<uni-icons type="staff" size="24" color="#fff"></uni-icons>
				</view>
				<view class="news-content">
					<view class="news-title">肝胆会议</view>
					<view class="news-subtitle">了解会议信息的最佳入口</view>
				</view>
				<view class="news-arrow">
					<uni-icons type="forward" size="16" color="#ccc"></uni-icons>
				</view>
			</view>
		
			<!-- 肝胆活动 -->
			<!-- <view class="news-item" @click="goToNews('hepatoBiliaryActivities')">
				<view class="news-icon pink">
					<uni-icons type="gift" size="24" color="#fff"></uni-icons>
				</view>
				<view class="news-content">
					<view class="news-title">肝胆活动</view>
					<view class="news-subtitle">福利多多,期待您的参与</view>
				</view>
				<view class="news-arrow">
					<uni-icons type="forward" size="16" color="#ccc"></uni-icons>
				</view>
			</view> -->
		</scroll-view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue';
	import { onShow } from "@dcloudio/uni-app";
	import api from '@/api/api.js';
	import docUrl from "@/utils/docUrl.js";
    import navTo from '../../utils/navTo';
	import navBar from '@/components/navBar/navBar.vue';

	onMounted(() => {
		loadNewsBanner();
	});

	onShow(() => {
		loadNewsBanner();
	});

	// 加载新闻轮播数据
	const loadNewsBanner = async () => {
		try {
			console.log(api)
			const res = await api.newsRollNew({});
			console.log('新闻轮播响应:', res);
			
			if(res && res.code === 200) {
				bannerList.value = res.data || [];
				console.log('获取到轮播数据:', bannerList.value);
			} else {
				console.error('加载新闻轮播失败:', res.message);
				// 如果接口失败，使用模拟数据作为备选
				bannerList.value = getMockBannerData();
			}
			
		} catch (e) {
			console.error('加载新闻轮播异常:', e);
			// 如果接口异常，使用模拟数据作为备选
			bannerList.value = getMockBannerData();
		}
	};
	// Banner相关数据
	const bannerList = ref([]);
	const currentBannerIndex = ref(0);
	// 返回
	const goBack = () => {
		uni.navigateBack({
			fail() {
				uni.redirectTo({
					url: '/pages/index/index'
				});
			}
		});
	};
	// Banner相关方法
	const getMockBannerData = () => {
		return [
			{
				id: 'banner_1',
				title: 'IgG4相关性疾病的腹部影像表现',
				subtitle: '肝胆精品课 | 宋文艳教授',
				thumbnail: '/static/big_background_my.png',
				doctorAvatar: '/static/doctor-avatar-1.png'
			},
			{
				id: 'banner_2',
				title: '《2025年版慢加急性肝衰竭指南》解读',
				subtitle: '肝胆精品课 | 专家团队',
				thumbnail: '/static/big_background_my.png',
				doctorAvatar: '/static/doctor-avatar-2.png'
			},
			{
				id: 'banner_3',
				title: '自身免疫性肝病专栏｜免疫治疗的双刃剑',
				subtitle: '肝胆精品课 | 专业团队',
				thumbnail: '/static/big_background_my.png',
				doctorAvatar: '/static/doctor-avatar-3.png'
			}
		];
	};
	
	const onSwiperChange = (e) => {
		currentBannerIndex.value = e.detail.current;
	};
	
	const playBannerVideo = (banner) => {
		uni.navigateTo({
			url: `/pages/videoDetail/videoDetail?id=${banner.id}`
		});
	};
	
	// 新闻相关方法
	const goToNews = (type) => {
		if(type=="news"){
			navTo({
			  url:'/pages_app/newsList/newsList'
			})
		}
	};
	
	const goToCourse = (type) => {
		navTo({
		  url:'/pages/live/live'
		})
	};
</script>

<style scoped lang="scss">
	// 颜色变量
	$primary-color: #ff6b6b;
	$theme-color: #8B2316;
	$white: #fff;
	$gray-bg: #f5f5f5;
	$gray-light: #eee;
	$gray-medium: #999;
	$gray-dark: #666;
	$text-color: #333;
	
	// 课程图标颜色
	$green-color: #00D4AA;
	$yellow-color: #FFB800;
	$orange-color: #FF8C00;
	$green-chat-color: #52C41A;
	$purple-color: #B37FEB;
	$blue-color: #40A9FF;
	$orange-tutorial-color: #FF7A45;
	
	// 尺寸变量
	$border-radius: 8px;
	$border-radius-small: 6px;
	$padding: 15px;
	$padding-small: 10px;
.news-page{
	/* Fixed Banner Container */
	.banner-container {
		position: fixed;
		top:calc(var(--status-bar-height) + 44px); 
		left: 0;
		right: 0;
		z-index: 50;
		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-list {
	position: fixed;
	width: 100%;
	bottom: 30rpx;
	box-sizing: border-box;
	padding: 0 30rpx;
	top: 450rpx;
	
	.news-item {
		background-color: $white;
		border-radius: $border-radius;
		margin-bottom: 20rpx;
		padding: 30rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);

		.news-icon {
			width: 94rpx;
			height: 94rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 30rpx;
			
			&.blue {
				background-color: $blue-color;
			}
			
			&.purple {
				background-color: $purple-color;
			}
			
			&.orange {
				background-color: $orange-color;
			}
			
			&.green {
				background-color: $green-color;
			}
			
			&.yellow {
				background-color: $yellow-color;
			}
			
			&.pink {
				background-color: $primary-color;
			}
		}

		.news-content {
			flex: 1;
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			gap: 8rpx;

			.news-title {
				font-size: 32rpx;
				color: $text-color;
				font-weight: 600;
				line-height: 1.3;
			}

			.news-subtitle {
				font-size: 26rpx;
				color: $gray-medium;
				line-height: 1.4;
			}
		}

		.news-arrow {
			width: 40rpx;
			height: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		// 点击效果
		&:active {
			opacity: 0.8;
			transform: scale(0.98);
		}
	}
}
</style>
