<template>
	<view class="swipperWrapper" v-show="showSwiper">
		<swiper class="swiper" circular :indicator-dots="true" :autoplay="false" :interval="interval" :duration="duration">
			<swiper-item v-for="item in swiperItems" :key="item.img_url">
				<view class="swiperItem">
					<image :src="item.img_url" mode="aspectFill" class="swiperItemImage" @click="toTarget(item)"></image>
				</view>
			</swiper-item>
		</swiper>
		<image src="/static/close.png" mode="aspectFit" class="closeIcon" @click="closeSwiper"></image>
	</view>
</template>

<script>
import { getSwiperList } from '@/services/home/home';
export default {
	name: 'HomeSwiper',
	props: {
		position: {
			type: Number,
			required: false,
			default: 1 // 1 首页
		}
	},
	data() {
		return {
			showSwiper: true,
			autoplay: true,
			interval: 2000,
			duration: 500,
			swiperItems: []
		};
	},
	methods: {
		async getSwiperData() {
			const res = await getSwiperList(this.position);
			if (res && res.code === 0) {
				this.swiperItems = res.data;
			}
		},
		toTarget(item) {
			if (item.act_type == 1 || item.act_type == 2) {
				if (item.contentId) {
					uni.navigateTo({ url: `/pages/activity/detail?contentId=${item.contentId}&contentType=${item.act_type}` });
				}
			} else if (item.act_type == 3) {
				uni.navigateTo({ url: '/pages/activity/shop/index' });
			}
		},
		closeSwiper() {
			this.showSwiper = false;
			uni.removeStorageSync('swiper');
		}
	},
	created() {
		this.getSwiperData();
		this.showSwiper = uni.getStorageSync('swiper');
	}
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
