<template>
	<swiper class="full-box" :options="swiperOption" v-if="active">
		<swiper-slide v-for="(item,index) in fullImg" :key="index"  class="middle_before">
			<img class="middle" v-lazy="item.photourl" @click="handle" alt="" />

		</swiper-slide>
		<div class="swiper-pagination" slot="pagination"></div>
	</swiper>
</template>

<script>
	import {
		swiper,
		swiperSlide
	} from 'vue-awesome-swiper'
	export default {
		components: {
			swiper,
			swiperSlide
		},
		props: {
			fullImg:{
				default() {
					return [{
						photourl:'static/img/prod.jpg'
					},{
						photourl:'static/img/prod.jpg'
					}]
				}
			},
			swiperOpt: {
				default() {
					return {
						freeMode: false
					}
				}
			}
		},


		data() {
			return {
				active:true,
				swiperOption: Object.assign({
					 zoom: true,
					notNextTick: true,
					slideToClickedSlide: true,
					initialSlide: 1,
					watchSlidesProgress: true,
					watchSlidesVisibility: true,
					slidesPerView: 'auto',
					freeMode: true,
					pagination:'.full-box .swiper-pagination'

				}, this.swiperOpt),
			}
		},
		methods:{
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
	@import url("../../assets/config.less");
	.full-box {
		position:fixed;
		top:0;
		left:0;
		width:100%;
		height:100%;
		background:#000;
		z-index:666;
		.swiper-slide {
			display: inline-block;
			width: 100%;
			height:100%;
			text-align:center;
			img{
				max-width:80%;
				max-height:80%;
				width:100%;
			}

		}
		&.swiper-container-horizontal>.swiper-pagination-bullets,
		.swiper-pagination-custom,
		.swiper-pagination-fraction {
			/*bottom: -20px;*/
		}
		.swiper-pagination-bullet {
			width: 15px;
			height: 3px;
			border-radius: 0;
			background:#fff;
		}
		.swiper-pagination-bullet-active {
			background: @common_cl;
		}
	}
</style>
