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

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

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

	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";
		},

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

		nav_right() {
			this.leftpage += 2;
			this.update();
		},

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

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