<template>
	<view>
		<uni-swiper-dot :info="slide_list" :dotsStyles="{'width': 4,'height':4, 'bottom':5, 'selectedBackgroundColor':'#fff', 'backgroundColor': '#ccc', 'border':'none','selectedBorder':'none'}" :mode="slide_setting.tipsStyle === 1 ? 'dot' : 'default'" :current="current" :showDots="slide_setting.dots">
			<swiper :autoplay="autoplay" :style="{'background-color': slide_setting.bg_color, 'height': slide_setting.slideHeight*2+'rpx'}" circular="true" :interval="interval" @change="change">
				<swiper-item v-for="(item, key) in slide_list" :key="key">
					<view :style="{'height': slide_setting.slideHeight*2+'rpx'}">
						<image class="slide_img" :src="item.img_url" @click="$jump(item.img_href)"></image>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
	</view>
</template>

<script>
	import uniSwiperDot from "@/components/uni-swiper-dot/uni-swiper-dot.vue"
	export default {
		props: {
			wrapper_props: {
				type: Object
			}
		},
		data() {
			return {
				slide_setting: this.wrapper_props.slide_setting,
				slide_list: this.wrapper_props.slide_list,
				current: 0,
				interval: 3000,
				autoplay: this.wrapper_props.slide_setting.autoplay
			}
		},
		mounted() {
			const { infinite } = this.slide_setting;
			const list = [];
			const goods_type = this.$getCache('goods_type');
			
			this.slide_list.map((item, index) => {
				if((item.goods_type > 0 && goods_type > 0) || item.goods_type == 0) {
					list.push(item)
				}
			});
			this.slide_list = list;
			if(!infinite) {
				const time = this.interval * this.slide_list.length;
				setTimeout(() => {
					this.autoplay = false;
				}, time);
			}
		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			}
		},
		components: {
			uniSwiperDot
		}
	}
</script>

<style lang="less" scoped>
	.slide_img {
		width: 100%;
		height: 100%;
	}
</style>