<template>
	<div>
		<b-modal :id="'cropper-modal'" size="lg" scrollable>
			<template v-slot:modal-title>
				<h4 class="modal-title">Crop Image</h4>
			</template>
			<vue-cropper
				ref='cropper'
				:guides="true"
				:view-mode="2"
				drag-mode="crop"
				:auto-crop-area="0.5"
				:min-container-width="250"
				:min-container-height="180"
				:background="true"
				:rotatable="true"
				:src="img"
				alt="Source Image"
				:img-style="{ 'width': '400px', 'height': '300px' }"
			>
			</vue-cropper>
			<template v-slot:modal-footer>
				<form>
					<v-btn
						:block="true"
						type="button"
						color="primary"
						class="white--text"
						@click="cropImage" 
					>
					Crop
					</v-btn>
				</form>     
			</template>
		</b-modal>
	</div>
</template>

<script>
	import VueCropper from 'vue-cropperjs';
	export default {
		props: ['img'],
		components: {
			VueCropper
		},
		methods: {
			cropImage() {
				let vm = this;
		    	let cropImg = '';
		    	cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL();
          		vm.$bvModal.hide('cropper-modal');
				vm.$emit('clicked', cropImg);
		    }
		}
	}
</script>