<template>
	<view
		class="swiper-container"
		:class="[imgScale=='3:1'?'ad_swiper-container':'',imgScale=='1:1'?'ad_swiper-container1':'',imgScale=='5:2'?'ad_swiper-container52':'',imgScale=='25:17'?'ad_swiper-container25':'',imgScale=='23:7'?'ad_swiper-container37':'',radius ? radius == 1? 'radius_1' : 'radius_2' : '']"
	>
	    <swiper class="swiper_box"
	        :autoplay="autoplay"
	        :circular="circular"
	        :interval="interval"
	        :duration="duration"
	        :indicator-dots="indicatorDots"
	        :indicator-color="indicatorColor"
	        :indicator-active-color="indicatorActiveColor"
			@touchstart="setIsTouch"
			@touchend="setNotTouch"
	    >
	        <block>
	            <swiper-item v-for="(item,index) in imgArr" :key="index">
	                <view class="imgsBar" @tap='goList(item)' :data-id='item.id||""'>
	                    <image :src="item.url ? item.url : item" class="image" :mode='mode' />
	                </view>
	            </swiper-item>
	        </block>
	    </swiper>
	</view>
</template>

<script>
	export default {
		props:{
			imgArr: Array,
			mode: {
				type: String,
				default: ''
			}, //图片裁剪、缩放的模式
			imgScale: String, //图片比例："1:1"；"15:7"；"3:1"；"5:2"；"25:17"；"23:7"默认："15:7"
			autoplay: Boolean, //是否自动切换
			circular: Boolean, //是否采用衔接滑动
			interval: Number, //自动切换时间间隔
			duration: Number, //滑动动画时长
			indicatorDots: {
				type: Boolean,
				default: true
			}, //是否显示面板指示点
			indicatorColor: {
				type: String,
				default: "rgba(255, 255, 255, .3)"
			}, //"rgba(0, 0, 0, .3)" 
			indicatorActiveColor: {
				type: String,
				default: "#fff"
			}, //"#000"
			radius: { // 圆角 1：10rpx；2：16rpx
			    type: Number,
			    default: 0
			},
		},
		data() {
			return {
				
			};
		},
		methods: {
		    goList: function (data) {
				this.$emit("goList",data);
		    },
			setIsTouch:function(){
				this.$emit('setIsTouch')
			},
			setNotTouch:function(){
				this.$emit('setNotTouch')
			}
		}
	}
</script>

<style lang="scss">
.swiper-container {
    width: 100%;
    position: relative;
}

.swiper_box {
    width: 100%;
    height: 330rpx;
    overflow: hidden;
}
.radius_1{
	.swiper_box,.image {
		border-radius: 10rpx;
	}
}

.radius_2{
	.swiper_box,.image {
		border-radius: 16rpx;
	}
}

.imgsBar {
    width: 100%;
    height: 330rpx;
}

.swiper-container .dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20rpx;
    display: flex;
    justify-content: center;
}

.swiper-container .dots .dot {
    margin: 0 8rpx;
    width: 16rpx;
    height: 16rpx;
    background: #000;
    border-radius: 50%;
    transition: all 0.6s;
    opacity: 0.3;
}

.swiper-container .dots .dot.active {
    opacity: 1;
}

/* 广告图1:1 */
.ad_swiper-container1 {
    width: 100%;
}
.ad_swiper-container1 .swiper_box{
    border-radius: 0;
}
.ad_swiper-container1 .swiper_box,
.ad_swiper-container1 .swiper_box .imgsBar{
    height: 695rpx;
}

/* 广告图3:1 */
.ad_swiper-container .swiper_box,
.ad_swiper-container .swiper_box .imgsBar{
    height: 234rpx;
}
/* 广告图5:2 */
.ad_swiper-container52 .swiper_box,
.ad_swiper-container52 .swiper_box .imgsBar{
    height: 272rpx;
}

// 广告图 25 ： 17
.ad_swiper-container25 .swiper_box,
.ad_swiper-container25 .swiper_box .imgsBar{
    height: 520rpx;
}

// 广告图 23 ： 7
.ad_swiper-container37 .swiper_box,
.ad_swiper-container37 .swiper_box .imgsBar{
    height: 210rpx;
}

.image{
	width: 100%;
	height: 100%;
}
</style>
