<template>
	<!-- 选项卡列表 swiper高度自适应 -->
	<view>
		<view class="posi-sticky">
			<scroll-text-slide @changeEv="tabTap" :activeIndex="activeIndex"></scroll-text-slide>
		</view>
		<swiper :style="{ height: swiperHeight + 'rpx' }" :current="swiperCurrent" @change="swiperChange">
			<swiper-item style="height: 100%" v-for="(item, index) in tabs" :key="index">
				<view :class="'list' + index">
					<view class="item">
						<!-- 列表数据 -->
						<slot :listData="item.data"></slot>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import scrollTextSlide from '@/components/scroll-views/scroll-text-slide.vue';
	export default {
		name: "tabsSwiper",
		components:{scrollTextSlide},
		props: {
			tabs: {
				type: Array,
				default: () => {
					return [];
				},
			}
		},
		data() {
			return {
				activeIndex: 0, // tabs索引
				swiperCurrent: 0, // swiper索引
				swiperHeight: 0, //swiper高度
			};
		},
		mounted() {
			this.initSwiperHeight(".list0");
		},
		methods: {
			// 点击tabs
			tabTap(index) {
				this.activeIndex = index;
				this.swiperCurrent = index;
				let list = ".list" + index;
				this.initSwiperHeight(list);
				this.$emit('currentEv',index);
			},
			// 手势切换
			swiperChange(e) {
				this.activeIndex = e.detail.current;
				let list = ".list" + e.detail.current;
				this.initSwiperHeight(list);
				this.$emit('currentEv',e.detail.current);
			},
			// 计算高度
			initSwiperHeight(list) {
				const query = uni.createSelectorQuery().in(this);
				this.$nextTick(() => {
					query
						.select(list)
						.boundingClientRect((data) => {
							this.swiperHeight = Math.ceil(data.height / (uni.upx2px(data.height) / data
								.height));
						})
						.exec();
				});
			},
		},
	};
</script>

<style lang="scss">
	.tabsSwiper {
		padding: 40rpx;
	}

	.tabs {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.tabs-con {
			color: #333;
			transition: all 0.5s;
			padding: 6rpx 40rpx;
			overflow: hidden;

			.title {
				font-size: 28rpx;
				width: 100%;
			}

			.des {
				font-size: 20rpx;
				width: 100%;
			}

			&.active {
				transition: all 0.5s;
				box-shadow: 0 -2rpx 2rpx 2rpx #bcbec2;
				background-color: #ffffff;
				border-radius: 16rpx 16rpx 0 0;

				.title {
					font-size: 32rpx;
					font-weight: bold;
				}
			}
		}
	}

	.list {
		box-shadow: 0rpx 0rpx 2rpx 2rpx #bcbec2;
		background-color: #ffffff;
		padding: 16rpx;
		border-radius: 0 0 16rpx 16rpx;
		overflow: hidden;
		min-height: 100rpx;
	}
</style>
