<style lang="scss">
</style>

<template>
	<modal id="itemImageDialog" :shown="shown" @hide="shown = false">
		<h2>Add image</h2>
		<form id="itemImageUrlForm" @submit.prevent="saveImageUrl()">
			<div class="lpFields">
				<input id="itemImageUrl" v-model="imageUrl" type="text" placeholder="Image URL">
				<div class="lpButtons">
					<input type="submit" class="lpButton" value="Save">
				</div>
			</div>
		</form>
	</modal>
</template>

<script>
import modal from './modal.vue';

export default {
	name: 'ItemImage',
	components: {
		modal,
	},
	data() {
		return {
			shown:    false,
			item:     false,
			imageUrl: null,
		};
	},
	mounted() {
		bus.$on('updateItemImage', (item) => {
			this.shown    = true;
			this.item     = item;
			this.imageUrl = item.imageUrl;
		});
	},
	methods: {
		saveImageUrl() {
			this.$store.commit('updateItemImageUrl', {
				item:     this.item,
				imageUrl: this.imageUrl,
			});
			this.shown = false;
		},
	},
};
</script>
