<template>
	<view class="ppt-detail-page">
		<!-- 顶部导航栏 -->
		<uni-nav-bar
			left-icon="left"
			title="课件详情"
			@clickLeft="goBack"
			fixed
			color="#8B2316"
			height="140rpx"
			:border="false"
			backgroundColor="#eeeeee"
		>
			<template v-slot:right>
				<view class="nav-actions">
					<uni-icons type="paperplane" size="22" color="#8B2316"></uni-icons>
					<uni-icons type="heart" size="22" color="#8B2316" style="margin-left: 20rpx;"></uni-icons>
				</view>
			</template>
		</uni-nav-bar>

		<!-- 下载提示条 -->
		<view class="download-bar">
			<view class="download-inner">
				<u-icon name="download" color="#fff" size="28"></u-icon>
				<text class="download-text">本课件下载</text>
				<text class="download-price">{{ price }}</text>
				<text class="download-unit">元</text>
			</view>
		</view>

		<!-- 图片浏览 -->
		<view class="viewer">
			<swiper
				class="ppt-swiper"
				:indicator-dots="false"
				:circular="true"
				:autoplay="false"
				@change="onSwiperChange"
			>
				<swiper-item v-for="(img, idx) in images" :key="idx">
					<view class="slide">
						<image :src="img" mode="widthFix" class="slide-image" />
					</view>
				</swiper-item>
			</swiper>

			<!-- 页码指示 -->
			<view class="page-indicator">{{ currentIndex + 1 }}/{{ images.length }}</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onShow } from "@dcloudio/uni-app";

	const images = ref([
		'/static/big_background_my.png',
		'/static/big_background_my.png',
		'/static/big_background_my.png'
	]);
	const currentIndex = ref(1); // 对应截图显示 2/23 的第二页效果
	const price = ref('1.0');

	const onSwiperChange = (e) => {
		currentIndex.value = e.detail.current;
	};

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

	onShow(() => {
		// 可在此根据路由参数拉取课件详情与图片列表
	});
</script>

<style lang="scss" scoped>
	.ppt-detail-page {
		background-color: #ffffff;
		min-height: 100vh;
	}

	.nav-actions {
		display: flex;
		align-items: center;
	}

	.download-bar {
		position: sticky;
		top: calc(var(--status-bar-height) + 44px);
		z-index: 9;
		width: 100%;
		background-color: #6F6F6F; // 接近截图灰条
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.download-inner {
		padding: 0 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
	}
	.download-text {
		margin-left: 12rpx;
		font-size: 28rpx;
	}
	.download-price {
		margin-left: 8rpx;
		color: #ff3b30; // 红色价格
		
		font-size: 30rpx;
	}
	.download-unit {
		margin-left: 4rpx;
		font-size: 26rpx;
	}

	.viewer {
		padding: 24rpx 0;
	}

	.ppt-swiper {
		width: 100%;
		min-height: 400rpx;
		background-color: #fff;
	}
	.slide {
		width: 100%;
		display: flex;
		justify-content: center;
	}
	.slide-image {
		width: 100%;
	}

	.page-indicator {
		margin-top: 20rpx;
		text-align: center;
		font-size: 32rpx;
		color: #333;
	}
</style>
