<template>
	<!-- 主体内容 -->
	<div class="babyalbum-detail-box">
		<div class="baby-detail-top">
			<div class="baby-top-box">
				<div>宝宝相册>宝宝详情</div>
				<img src="../../static/img/kindergartenIntroduce/icon-back.png" @click="backBaby">
			</div>
			<div class="baby-name">{{babyalbumList[0].StuName}}的相册</div>
		</div>
		<div class="baby-album-box">
			<img src="../../static/img/babyalbum/choose-01.png" class="swiper-button-prev">
			<div style="width: 80%;margin: 0 auto;height: 515px;">
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide" v-for="(item,index) in babyalbumList" :key="index" style="display: flex;justify-content: center;">
							<img :src="item.Url" style="width: 100%;object-fit: cover">
						</div>
					</div>
				</div>
			</div>
			<img src="../../static/img/babyalbum/choose-02.png" class="swiper-button-next">
		</div>
	</div>
</template>
<script>
	export default {
		props:{
			babyalbumList:{
				type:Array,
				default:()=>{
					return []
				}
			}
		},
		name: 'babyActivity',
		data() {
			return {
				
			}
		},
		methods: {
			// 返回宝宝相册列表
			backBaby() {
				this.$emit('backBaby', false);
			}
		},
		mounted() {
			setTimeout(()=>{
				var swiper = require('../utils/swiper-bundle.min.js');
				// new Swiper('.swiper-container', {
				// 	watchSlidesProgress: true,
				// 	loop: true,
				// 	slidesPerView: 3, //'auto'
				// 	centeredSlides: true,
				// 	centeredSlidesBounds: true,
				// 	// 如果需要前进后退按钮
				// 	nextButton: '.swiper-button-next',
				// 	prevButton: '.swiper-button-prev',
				// 	// 如果需要自动切换海报
				// 	autoplay: false,
				// })
				new Swiper('.swiper-container', {
				     paginationClicsable: true,
				    effect: 'coverflow',
				    centeredSlides: true,
				    spaceBetween: '0%',
				    slidesPerView: 2,
				    loop: true,
				    // autoplay: {
				    //     disableOnInteraction: false,
				    // },
					navigation: {
						nextEl: '.swiper-button-next',
						prevEl: '.swiper-button-prev',
					},
				    coverflowEffect: {
				        rotate: 0, //slide做3d旋转时Y轴的旋转角度
				        stretch: 220, //每个slide之间的拉伸值，越大slide靠得越紧。5.3.6 后可使用%百分比
				        depth: 200, //slide的位置深度。值越大z轴距离越远，看起来越小。
				        modifier: 1, //depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。
				        slideShadows: false,
				    },
				    on: {
				        transitionEnd: function () {
				            this.activeIndex
				        }
				    }
				});
			},100)
		}
	}
</script>
<style>
	@import url("../assets/css/swiper-bundle.min.css");
	/* .swiper-slide {
		transform: scale(1.2)!important;
	} */
	.swiper-slide {
		width: 690px;
		height: 515px;
		background-color: #F5F5F5;
		box-shadow: 10px 10px 10px 10px rgba(134, 105, 220, 0.2);
	}
</style>
