<template>
	<swiper :current="current" :circular="circular" :autoplay="true" :interval="interval" :duration="duration"
		:display-multiple-items="multipleItems" :style="'height:'+height">
		<swiper-item v-for="(item, index) in swiperList" :key="item.id">
			<view class="ss-flex ss-row-around ss-flex-wrap" :style="'margin-left: 10rpx;height:'+height">
				<view :style="'width:'+imageWidth+';height:'+imageHeight">
					<image style="width: 100%;height: 100%;" referrerpolicy="no-referrer" :src="item.imageUrl" @click="onImage(item)"/>
				</view>
				<slot :data="item"></slot>
			</view>
		</swiper-item>
	</swiper>
</template>

<script setup>
	import {
		defineProps
	} from 'vue'
	const emit = defineEmits(['jump']);
	
	const onImage=async()=>{
		emit('jump');
	}
	// 父组件传递的数据
	const props = defineProps({
		current: { //当前所在滑块
			type: Number,
			default: 1
		},
		multipleItems: { //同时显示滑块数量
			type: Number,
			default: 1
		},
		circular: { //是否采用衔接滑动
			type: Boolean,
			default: true
		},
		autoplay: { //是否自动切换
			type: Boolean,
			default: true
		},
		interval: { //自动切换间隔 时长（ms）
			type: Number,
			default: 1000,
		},
		duration: { //滑动动画时长（ms）
			type: Number,
			default: 500,
		},
		height: { //高度
			type: String,
			default: '200rpx'
		},
		width: { //宽度
			type: String,
			default: '100%'
		},
		swiperList: {
			type: Array,
			default () {
				return []
			}
		},
		imageHeight: { //高度
			type: String,
			default: '200rpx'
		},
		imageWidth: { //宽度
			type: String,
			default: '100%'
		},
	});
</script>

<style>

</style>