<template>
	<div>
		<b-modal :id="'img-pop-modal'" size="lg" scrollable>
			<template v-slot:modal-title>
				<h4 class="modal-title">{{ label }}</h4>
			</template>
			<div v-if="img[0]" class="text-center">
				<img class="img-fluid" 
                	:src="img[0].file_info.original.file"
                	width="300px" height="300px"
                >
			</div>
			<template v-slot:modal-footer>
				<form>
					<v-btn
                        depressed
                        small
                        type="button"
                        color="warning"
                        class="m-0"
                        @click="$bvModal.hide('img-pop-modal')"
                    >
                        Close
                    </v-btn>
				</form>     
			</template>
		</b-modal>
	</div>
</template>

<script>
	import VueCropper from 'vue-cropperjs';
	export default {
		props: ['label', '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>