<template>
	<div>
		<div class="row m-3 bg-white">
			<div class="col-6 m-0 p-0">
				<img @click="nav_left" :class="leftclass()" :src="left">
			</div>
			<div class="col-6 m-0 p-0">
				<img @click="nav_right"  :class="rightclass()" :src="right">
			</div>
		</div>
	</div>
</template>

<script>
import { ref } from 'vue/dist/vue.esm-bundler';

export default {
	props: {
		rev: ref(""),
		pages: ref(0)
	},

	setup(props, emit) {
		return {
			left: ref(""),
			right: ref(""),
			leftpage : ref(0),
		}
	},

	methods: {
		init() {
			this.leftpage = 0;
			this.update();
			this.$watch('rev', this.show);
		},

		update() {
			this.left = "/page/" + this.rev + "/" + this.leftpage + "/page.jpg";
			this.right = "/page/" + this.rev + "/" + (this.leftpage + 1) + "/page.jpg";
		},

		leftclass() {
			if (this.leftpage > 0) {
				return 'page-left w-100 m-0 p-0';
			} else {
				return 'page-end w-100 m-0 p-0';
			}
		},

		rightclass() {
			if ((this.leftpage + 1) >= this.pages) {
				return "invisible w-100 m-0 p-0";
			}
			if (this.leftpage < this.pages - 2) {
				return 'page-right w-100 m-0 p-0';
			} else {
				return 'page-end w-100 m-0 p-0';
			}
		},

		show() {
			this.left = '';
			this.right = '';
			this.leftpage = 0;
			this.update();
		},

		nav_right() {
			if (this.leftpage < this.pages - 2) {
				this.leftpage += 2;
			}
			this.update();
		},

		nav_left() {
			this.leftpage -= 2;
			if (this.leftpage < 0) {
				this.leftpage = 0;
			}
			this.update();
		},
	},

	mounted() {
		this.init();
	}
}
</script>
