<template>
	<view class="bg">
		<headerVue />
		
		<view class="start-swiper" v-show="isShow" @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">
				<swiper-item v-for="(item, index) in swiperList" :key="index">
					<image :src="showImg(item.head_img)" mode=""></image>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		
		<scroll-view scroll-x="true" show-scrollbar="false">
			<view class="category-scroll">
				<image v-for="(item,index) in categories" :key="index" :src="showImg(item.head_img)"></image>
			</view>
		</scroll-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">
			<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="viewDetail(item)"></image>
		</view>
		
		<CustomTabBar :currentTab="1" />
	</view>
</template>

<script>
	import headerVue from "@/components/header.vue";
	import CustomTabBar from '@/components/CustomTabBar.vue';
	export default {
		components: {
			headerVue,
			CustomTabBar
		},
		data() {
			return {
				swiperList: [],
				current: 0,
				swiperDotIndex: 0,
				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.Post({
				type_id: 3,
				position: 4,
			}, '/api/adv/getAdv').then(res => {
				if(res.data) {
					this.startSwiper = res.data;
				}
			});
			
			this.sendRequest()
		},
		methods: {
			sendRequest() {
				this.Post({
					type_id: 3,
					position: 2,
				}, '/api/adv/getAdv').then(res => {
					if(res.data) {
						this.swiperList = res.data;
					}
				});
				
				this.Post({
					type_id: 3,
					position: 1,
				}, '/api/adv/getAdv').then(res => {
					if(res.data) {
						this.categories = 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
			},
			onSwiperChange(e) {
				this.currentIndex = e.detail.current;
			},
			changeType(index) {
				this.readingIndex = index
				this.getList()
				console.log(index,this.readingIndex)
			},
			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 40rpx 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;
		
		image {
			width: 520rpx;
			height: 260rpx;
			flex-shrink: 0;
			margin-right: 20rpx;
			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 55rpx;
		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: 0 40rpx 0;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
		padding: 35rpx 20rpx 5rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		position: relative;
		top: -15rpx;
		background-color: #fff;
		
		image {
			width: 188rpx;
			height: 335rpx;
			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>