<template>
	<view class="bg">
		<headerVue :type="'article'" />
		
		<view class="start-swiper" v-show="isShow && startSwiper && startSwiper.length > 0" @click="this.isShow = false">
			<swiper class="start-swiper" :indicator-dots="false" :autoplay="true" :interval="5000" :duration="500"
				@change="onSwiperChange">
				<swiper-item v-for="(item, index) in startSwiper" :key="index">
					<image :src="showImg(item.head_img)" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>

		<!-- <view class="top-box">
			<swiper class="carousel-swiper" :indicator-dots="false" :autoplay="true" :interval="5000" :duration="500"
				@change="onSwiperChange">
				<swiper-item v-for="(item, index) in swiperList" :key="index">
					<image :src="showImg(item.head_img)" mode=""></image>
				</swiper-item>
			</swiper>
			<view class="exhibit-issue">issue/0{{ currentIndex + 1 }}</view>
			底部指示点
			<view class="custom-indicators">
				<view v-for="(_, index) in swiperList" :key="index"
					:class="['indicator-dot', {'active': index === currentIndex}]"></view>
			</view>
		</view> -->
		
		<uni-swiper-dot class="uni-swiper-dot-box" :info="swiperList" :current="current" :mode="mode"
			:dots-styles="dotsStyles" field="content">
			<swiper class="swiper-box" @change="change" :current="swiperDotIndex" :style="{height : swiperHeight + 'px'}">
				<swiper-item v-for="(item, index) in swiperList" :key="index" @click="gotoUrlNew(item)">
					<image :src="showImg(item.head_img)" mode="widthFix" :id="`swiper-item-${index}`"></image>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		
		<!-- <swiper class="category-scroll">
			<swiper-item v-for="(item, index) in categories" :key="index" @click="gotoUrlNew(item)">
				<image :src="showImg(item.head_img)" mode="aspectFill"></image>
			</swiper-item>
		</swiper> -->
		
		<!-- <view class="category-scroll" v-if="categories && categories.length > 0">
			<video src="https://static.ticket.sz-trip.com/epicSoul/category.mp4" :poster="showImg(categories[0].head_img)" objectFit="cover"></video>
		</view> -->
		
		<view class="category-scroll">
			<video src="https://static.ticket.sz-trip.com/epicSoul/categorys.mp4" objectFit="cover"></video>
		</view>
		
		<view class="title-box">
			阅读合集
			<image src="https://static.ticket.sz-trip.com/epicSoul/readingBody/titleSpan.png" mode=""></image>
		</view>
		
		<view class="reading-title flex-between" v-if="false">
			<!-- <view v-for="(item,index) in readingType" :key="index" @click="changeType(index)">{{item.title}}</view>
			<span :style="{left: readingIndex == 0 ? '32rpx' : (readingIndex == 1 ? '245rpx' : '448rpx')}"></span> -->
		</view>
		<view class="reading-box">
			<image v-for="(item,index) in readingList" :key="index" :src="showImg(item.image)" @click="gotoUrlNew(item)"></image>
			<image  :src="showImg('/uploads/20250903/1aadd1b9a4c94ff0aa6b3f880a725b50.png')" @click="gotoUrlNew({jump_type:2,front_model:{mini:'/xqk/home/home'}})"></image>
		</view>
		
		<CustomTabBar :currentTab="1" />
		<MusicControl />
	</view>
</template>

<script>
	import headerVue from "@/components/header.vue";
	import CustomTabBar from '@/components/CustomTabBar.vue';
	import MusicControl from '@/components/MusicControl.vue';
	export default {
		components: {
			headerVue,
			CustomTabBar,
			MusicControl
		},
		data() {
			return {
				swiperList: [],
				current: 0,
				swiperDotIndex: 0,
				swiperHeight: 524,
				mode: 'round',
				dotsStyles: {
					selectedBackgroundColor: 'rgb(133, 133, 133)',
					selectedBorder: 'none',
					backgroundColor: 'rgba(150, 150, 150, 0.5)',
					border: 'none'
				},
				currentIndex: 0,
				categories: [],
				readingList: [],
				readingType: [{title: '2025', id: 3}, {title: '2026', id: 6}, {title: '全部', id: ''},],
				readingIndex: 0,
				startSwiper: [],
				isShow: true
			}
		},
		onReady() {
			this.sendRequest()
		},
		onShow() {
			const app = getApp();
			if(app.globalData.musicSrc != 'https://static.ticket.sz-trip.com/epicSoul/EpicSouls.mp3') {
				app.updateMusicSrc('https://static.ticket.sz-trip.com/epicSoul/EpicSouls.mp3');
				app.initBackgroundMusic(); // 初始化背景音乐
				uni.$bgMusic.play(); // 播放音乐
			}
		},
		methods: {
			sendRequest() {
				this.Post({
					type_id: 3,
					position: 2,
				}, '/api/adv/getAdv').then(res => {
					if(res.data) {
						this.swiperList = res.data;
						
						setTimeout(() => {
							this.$nextTick(() => {
								this.change({detail: {current: 0}})
							})
						},500)
					}
				});
				
				this.Post({
					type_id: 3,
					position: 1,
				}, '/api/adv/getAdv').then(res => {
					if(res.data) {
						this.categories = res.data;
					}
				});
				
				this.Post({
					type_id: 3,
					position: 4,
				}, '/api/adv/getAdv').then(res => {
					if(res.data) {
						this.startSwiper = res.data;
					}
				});
				
				this.getList()
			},
			// 全部阅读 文章
			getList() {
				this.Post({
					type_id: this.readingType[this.readingIndex].id,
					offset: 0,
					limit: 1
				}, '/api/article/getArticleByType').then(res => {
					if(res.data) {
						this.readingList = res.data
					}
				})
			},
			change(e) {
				this.current = e.detail.current
				let element = '#swiper-item-' + e.detail.current
				let query = uni.createSelectorQuery().in(this)
				query.select(element).boundingClientRect()
				query.exec((res) => {
					if (res && res[0]) {
						this.swiperHeight = res[0].height
					}
				})
			},
			onSwiperChange(e) {
				this.currentIndex = e.detail.current;
			},
			changeType(index) {
				this.readingIndex = index
				this.getList()
			},
			viewDetail(item) {
				if (item.url) {
					uni.navigateTo({
						url:"/subPackages/webPage/webPage?url="+encodeURIComponent(item.url)
					})
					return
				}
				uni.navigateTo({
					url:'/subPackages/letter/detail?id='+item.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		padding-bottom: 200rpx;
	}

	.swiper-box, .top-box {
		margin: 60rpx 25rpx 0;
		height: 830rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
		border-radius: 20rpx;
		overflow: hidden;
		// padding-top: 10rpx;
		// background-color: #fff;
		
		image {
			width: 100%;
			height: 100%;
		}
	}

	.carousel-swiper {
		width: 582.13rpx;
		height: 706.24rpx;
		margin: -40rpx auto 0;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.exhibit-issue {
		font-family: serif;
		font-size: 28rpx;
		color: #999;
		font-style: italic;
		padding: 40rpx 30rpx 0 0;
		text-align: right;
	}

	.custom-indicators {
		display: flex;
		justify-content: center;
		gap: 8rpx;
		margin-top: 40rpx;

		.indicator-dot {
			width: 8rpx;
			height: 8rpx;
			border-radius: 4rpx;
			background-color: rgba(150, 150, 150, 0.5);
			transition: all 0.3s;
		}

		.indicator-dot.active {
			width: 20rpx;
			background-color: rgb(133, 133, 133);
		}
	}
	
	.category-scroll {
		// padding: 40rpx 0 0 40rpx;
		// display: flex;
		height: 393rpx;
		margin: 50rpx 25rpx 0;
		
		image {
			width: 100%;
			height: 393rpx;
			flex-shrink: 0;
			// margin-right: 20rpx;
			border-radius: 20rpx;
		}
		
		video {
			width: 100%;
			height: 393rpx;
			border-radius: 20rpx;
		}
	}
	
	.title-box {
		font-size: 36rpx;
		font-weight: 500;
		margin-top: 40rpx;
		padding-left: 60rpx;
		
		image {
			width: 185.85rpx;
			height: 20.98rpx;
			margin-left: 21rpx;
		}
	}
	
	.reading-title {
		margin: 60rpx auto 0;
		width: 585rpx;
		height: 30rpx;
		border-radius: 15rpx;
		background-color: rgba(46, 220, 78, .8);
		font-weight: bold;
		font-size: 28rpx;
		color: #000000;
		padding: 0 40rpx;
		position: relative;
		
		view {
			position: absolute;
			z-index: 20;
			bottom: 15rpx;
		}
		&>view:nth-child(2) {
			left: 268rpx;
		}
		&>view:nth-child(3) {
			right: 55rpx;
		}
		
		span {
			width: 111rpx;
			height: 100%;
			background-color: rgb(9, 154, 60);
			border-radius: 15rpx;
			position: absolute;
			left: 32rpx;
		}
	}
	
	.reading-box {
		margin: 20rpx 25rpx 0;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
		padding: 35rpx 10rpx 5rpx;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		position: relative;
		// top: -15rpx;
		background-color: #fff;
		
		image {
			width: 212rpx;
			height: 376rpx;
			margin-bottom: 30rpx;
		}
	}
	
	.start-swiper {
		width: 100vw;
		height: calc(100vh - 123rpx);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		
		image {
			width: 100%;
			height: 100%;
		}
	}
</style>