<template>
  <div name="block-image">
    <div class="kit__field field">
      <div class="field__wrap field__wrap--title">
        <input type="text" name="block-image-title"
               :value="title"
               class="field__input"
               placeholder="Заголовок раздела"
               @change="onTitleChange">
      </div>
    </div>
    <div class="kit__row">
      <lil-image :image-id="imageId" :image-url="imageUrl" v-on:update:imageUrl="onUpdateImageUrl" name="block-image-image"
                 v-on:update:imageId="onUpdateImageId" :access-token="accessToken" />
    </div>
  </div>
</template>

<script>
    import LilImage from "./Image";

    export default {
        name: "block-image",
        props: ["index", "title", "imageUrl", "imageId", "accessToken"],
        methods: {
            onTitleChange(event) {
                this.$emit('update:title', event.target.value);
            },
            onUpdateImageUrl(newValue) {
                this.$emit('update:imageUrl', newValue);
            },
            onUpdateImageId(newValue) {
                this.$emit('update:imageId', newValue);
            },
        },
        components: {
            'lil-image': LilImage,
        },
    }
</script>

<style scoped>

</style>
