<template>
	<div class="swiper-container" ref="imageSwiper">
		<div class="swiper-wrapper">
			<div class="swiper-slide" v-for="(item, index) in skuImageList" :key="index" >
				<!-- 你要给图片加边框 就要在图片上绑定啊啊啊啊 看清楚 -->
				<img :src="item.imgUrl" :class="{active:index==currentindex}" @click="changeactive(index)"/>
				<!-- <img :src="item.imgUrl" alt=""> -->
				<!-- ../images/s1.png -->
			</div>
		</div>
		<div class="swiper-button-next"></div>
		<div class="swiper-button-prev"></div>
	</div>
</template>

<script>
import Swiper from 'swiper'
export default {
	name: 'ImageList',
	props: ['skuImageList'],
	data() {
		return {
			currentindex:0
		}
	},
	watch: {
		skuImageList: {
			// 监听数据 可以保证数据一定ok 但是不能保证v-for遍历结构
			handler(newVal, oldVal) {
				// 确保数据回来的时候,立即触发这个回调函数
				// 推迟下个DOM更新进行 保证cb操作最新的DOM
				this.$nextTick(() => {
					// ref代替DOM API
					// 定义ref="abc" 使用this.$refs.abc
					new Swiper(this.$refs.imageSwiper, {
						// 显示三个
						slidesPerView: 3,
						// 一次切换一个
						slidesPerGroup:1,
						// 如果需要前进后退按钮
						navigation: {
							nextEl: '.swiper-button-next',
							prevEl: '.swiper-button-prev'
						}
					})
				})
			}
		}
	},
	methods:{
		changeactive(e){
			// console.log(e);
			this.currentindex=e
			// 通知兄弟组件,当前的索引值为几,进行展示数据
			this.$bus.$emit("changeindex",this.currentindex)
		}
	}
}
</script>

<style lang="less" scoped>
.swiper-container {
	height: 56px;
	width: 412px;
	box-sizing: border-box;
	padding: 0 12px;

	.swiper-slide {
		width: 56px;
		height: 56px;

		.active{
			border: 2px solid #f60;
			padding: 1px;
		}
		img {
			width: 100%;
			height: 100%;
			border: 1px solid #ccc;
			padding: 2px;
			width: 50px;
			height: 50px;
			display: block;

			// &.active {
			// 	border: 2px solid #f60;
			// 	padding: 1px;
			// }

			// &的意思是:上一层样式    .img:hover
			// &:hover {
			// 	border: 2px solid #f60;
			// 	padding: 1px;
			// }
		}
	}

	.swiper-button-next {
		left: auto;
		right: 0;
	}

	.swiper-button-prev {
		left: 0;
		right: auto;
	}

	.swiper-button-next,
	.swiper-button-prev {
		box-sizing: border-box;
		width: 12px;
		height: 56px;
		background: rgb(235, 235, 235);
		border: 1px solid rgb(204, 204, 204);
		top: 0;
		margin-top: 0;
		&::after {
			font-size: 12px;
		}
	}
}
</style>
