<template>
	<view style="background: linear-gradient(354deg, #f3fcff, #ffffff);" :style="{minHeight:height}">
		<swiper v-if="banner && banner.length > 0" :indicator-dots="banner.length > 1" :autoplay="false" :interval="interval" :style="{height:height}">
			<swiper-item v-for="(item,index) in banner" :key="item.id">
				<view v-if="isvideo(item.img)">
					<cover-image v-if="vmuted" @tap="vmute" class="_swiper_mute" :style="{opacity: vop}" :src="file_stor('/img/wav2.png')"></cover-image>
					<cover-image v-else @tap="vmute" class="_swiper_mute" :style="{opacity: vop}" :src="file_stor('/img/wav1.png')"></cover-image>
					<video @tap="showop" object-fit="cover" :poster="file_stor(item.img + '.jpg')" :src="file_stor(item.img)" controls autoplay loop show-mute-btn :muted="vmuted" :enable-progress-gesture="false" style="width:100%;height:80vw;"></video>
				</view>
				<image v-else @tap="gourl" :data-url="item.url" :src="file_stor(item.img)" style="width:100%;height:100%;" />
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		props: {
			banner: {
				type: Array,
				default: []
			},
			height: {
				type: [String, Number],
				default: ''//min-height:80vw;
			},
			interval: {
				type: [String, Number],
				default: '3000'//min-height:80vw;
			}
		},
		data() {
			return {
				vmuted: false,
				vop: 0.2,
			}
		},
		watch: {
		},
		created() {
		},
		methods: {
			showop() {
				this.vop = 2;
			},
			vmute() {
				this.vmuted = !this.vmuted;
			}
		}
	}
</script>

<style scoped>
	._swiper_mute {
		position: absolute;
		right: 0.5em;
		top: 0.5em;
		z-index: 100;
		height: 1.5em;
		width: 1.5em;
	}
</style>