<template>
	<view class="warp">
		<view class="top_list">
			<view class="top_tab">
				<view 
					class="tab_list" 
					v-for="(item,index) in topNavList" 
					:key="index" 
					@tap="onTopTabs(index)"
				>	
					<view class="tab_item" :class="tabIndex==index?'active':''">{{item.title}}</view>
				</view>
			</view>
		</view>
		<view class="swiper" :style="'height: calc(100vh - '+height+'rpx)'">
			<swiper 
				class="swiper_css"
				ref="swiper1" 
				:duration="300"
				:current="tabIndex" 
				@change="onSwiperChange"
			>
				<block
					v-for="(val,i) in topNavList"
					:key="i"
				>
					<swiper-item class="swiper_item_css">
						<slot name="{{i}}"></slot>
					</swiper-item>
				</block>
				
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		name:"swiper-tabs",
		data() {
			return {};
		},
		props:{
			height:{
				type:Number,
				default:120,
			},
			tabIndex:{    //当前导航栏索引
				type:Number,
				default:3,
			},
			topNavList:{  //顶部tabs数据
				type:Array,
				default:[]
			},
		},
		methods:{
			// 点击顶部tabs切换
			onTopTabs(index){
				this.$emit('onTopTabs',index)
			},
			onSwiperChange(e){
				const idx = e.target.current;
				this.$emit('onSwiperChange',idx)
			},
		}
	}
</script>

<style lang="scss" scoped>
.warp{
	width: 100%;
	height: 100%;
	background-color: #F3F4F6;
	
	.top_list{
		width: 100%;
		position: sticky;
		top: 0;
		border-bottom: 10rpx solid #F3F4F6;
		display: flex;
		flex-direction: column;
		.top_tab{
			width: 100%;
			height: 90rpx;
			background-color: white;
			display: flex;
			flex-direction:row;
			align-items: center;
			justify-content: center;
			.tab_list{
				width: 25%;
				height: 100%;
				display: flex;
				flex-direction:column;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				font-weight: bold;
				.tab_item{
					height:100%;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
				}
				.active{
					border-bottom:6rpx solid #3476fe ;
					color: #3476fe;
					font-size: 29rpx;
				}
			}
		}
	}
	.swiper{
		width: 100%;
		// border: 1rpx solid red;
		background-color: #EFEFEFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		.swiper_css{
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			// border: 1px solid red;
			.swiper_item_css{
				width: 100%;
				height: 100%;
				// border: 1rpx solid red;
			}
		}
	}
}
</style>
