<template>
	<el-layout>
		<el-navbar :opacity="0" :border="false" :fixed="true" title=""></el-navbar>
		
		<view class="mask">
			<swiper 
			@change="onChangeSwiper" 
			class="my_swiper" 
			:current="current" 
			:circular="circular" 
			:indicator-dots="indicatorDots" 
			:autoplay="autoplay" 
			:duration="duration">
				<swiper-item v-for="(x, y) in picList" :key="y">
					<view class="bg_img" :style="{ backgroundImage: 'url('+x+')'}"></view>
				</swiper-item>
			</swiper>
		</view>
		<view class="page" v-if="picList.length>0">{{ current + 1 }} / {{ picList.length }}</view>
	</el-layout>
</template>

<script setup>
	import { onLoad, onUnload } from "@dcloudio/uni-app";
	import { ref } from "vue";
	
	let scrollNum 		= ref(0);
	let picList 		= ref([]);
	let indicatorDots 	= ref(false);
	let autoplay 		= ref(false);
	let duration 		= ref(500);
	let circular 		= ref(true);
	let current 		= ref(0);
	let isShowSwiper 	= ref(false);
	
	onLoad(()=>{
		init();
	});
	
	onUnload(()=>{
		// uni.$storage.remove("picIndex");
		// uni.$storage.remove("picList");
	});
	
	const init = ()=>{
		current.value = uni.$storage.get("picIndex",0);
		picList.value = uni.$storage.getJson("picList",[]);
	}
	
	const onChangeSwiper = (e)=>{
		current.value = e.detail.current;
	}
	
</script>

<style lang="scss">
	.page {
		position: fixed;
		z-index: 6;
		color: #fff;
		bottom: 20rpx;
		text-align: center;
		width: 100%;
	}
	
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #000;
		z-index: 5;
		> .my_swiper {
			width: 100%;
			height: 60vh;
			.bg_img {
				background-size: 100% auto;
				background-repeat: no-repeat;
				background-position:center;
				width: 100%;
				height: 100%;
			}
		}
	}
	
	.pic_list {
		display: flex;
		flex-flow: row wrap;
		> view {
			flex: 0 0 33.3vw;
			height: 33.3vw;
			padding: 1vw;
			> image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>