<template>
	<view>
		<up-overlay :show="show" :z-index="9999">
			<view class="contBox" @click="close()">
				<view class="num">{{index + 1}}/{{specsList.length}}</view>
				<swiper class="swiper" :autoplay="false" :indicator-dots="false" :circular="true" @change="changeSwiper" :current="index">
					<swiper-item v-for="(item, index) in specsList" :key="index">
						<view class="box">
							<image class="img" mode="widthFix" :src="(item.img_800 || item.img) + '?x-oss-process=image/format,webp'" :webp="true"></image>
							<view class="title"><text>{{item.value}}</text></view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</up-overlay>
	</view>
	
</template>

<script>
	import { ref, reactive, toRefs, watch } from 'vue'
	import { showToast  } from '../common.js'
	import { get, post } from '@/Api/request.js'
	import { Style } from '@/utils/list.js'
	
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
			list: {
				type: Object,
				default: []
			},
			current: {
				type: Number,
				default: 0
			}
		},
		setup(props, context) {
			const data = reactive({
				show: false,
				index: 0,
				specsList: [],
				Color: uni.getStorageSync('theme_color'),
				bgColor: Style[uni.getStorageSync('theme_index') * 1].bgColor
			})
			
			function close() {
				data.show = false
				context.emit('close', data.index)
			}
			
			function changeSwiper(event) {
				data.index = event.detail.current
			}
			
			watch(props, (newProps) => {
				if(newProps.show) {
					data.show = true
					data.index = newProps.current
					data.specsList = newProps.list[0].value
				}
			})
			
			return {
				...toRefs(data),
				close,
				changeSwiper
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contBox{
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-color: #191919;
		position: relative;
		.num{
			font-size: 32rpx;
			color: #fff;
			text-align: center;
			width: 100%;
			top: 80rpx;
			position: absolute;
			left: 0;
		}
		.swiper{
			width: 100%;
			height: 100%;
			.box{
				position: relative;
				width: 100%;
				height: 100%;
				display: flex;
				position: relative;
				align-items: center;
				justify-content: center;
			}
			.img{
				width: 100%;
			}
			.title{
				text-align: center;
				width: 100%;
				bottom: 80rpx;
				position: absolute;
				left: 0;
				text{
					font-size: 28rpx;
					color: #fff;
					border-radius: 30rpx;
					padding: 10rpx 28rpx;
					background-color: #5E5E5E;
				}
			}
		}
	}
</style>