<template>
	<transition name="fade" mode="out-in">
		<div v-if="isPreview" class="imgPreview_container_dask">
			<span class="close_btn" @click="close"></span>
			<div class="img_container">
				<img :src="arr[actIndex]" class="img">
			</div>
			<template v-if="isShowToggle">
				<span class="arrow_btn arrow_left" @click="turnLeft"></span>
				<span class="arrow_btn arrow_right" @click="turnRight"></span>
			</template>
		</div>
	 </transition>
</template>

<script>
export default {
	name:'',
	components: {},
	props: {
		arr:{
			type:Array,
		},
		isPreview:{
			type:Boolean
		},
		actIndex:{
			type:Number
		},
		isShowToggle: {
			type:Number
		}
	},
	watch: {
		arr(newval) {
			this.arr = newval
		},
		actIndex(newval) {
			this.actIndex = newval
		}
	},
	data () {
		return {

		};
	},
	methods: {
		close() {
			this.$emit('close')
		},
		turnLeft() {
			this.$emit('togglePre',1)
		},
		turnRight() {
			this.$emit('togglePre',2)
		}
	},
	created() {},
	mounted() {
		this.$nextTick(()=>{
       document.addEventListener('keyup',(e)=>{
         if(e.keyCode==27){
           this.$emit('close');
         }
       })
     })
	},
}
</script>
<style lang='scss' scoped>
.imgPreview_container_dask {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 9999;
	background: rgba($color: #000000, $alpha: 0.8);
	.close_btn {
		width: 65px;
		height: 65px;
		position: absolute;
		right: 60px;
		top: 30px;
		background: url('~@/assets/img/cus_m/pre_close.png') no-repeat 100%;
		background-size: cover;
		cursor: pointer;
		&:hover {
			opacity: 0.6;
		}
	}
	.arrow_btn {
		width: 62px;
		height: 110px;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		cursor: pointer;
		&.arrow_left {
			left: 54px;
			background: url('~@/assets/img/cus_m/pre_left.png') no-repeat 100%;
			background-size: cover;
			&:hover {
				opacity: 0.6;
			}
		}
		&.arrow_right {
			right: 54px;
			background: url('~@/assets/img/cus_m/pre_right.png') no-repeat 100%;
			background-size: cover;
			&:hover {
				opacity: 0.6;
			}
		}
	}
	.img_container {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		max-height: 100vh;
		overflow: hidden;
		overflow-y: auto;
		.img {
			max-width: 1200px;
			height: auto;
		}
	}
}
</style>