<template>
    <div id="hlava">
        <div v-on:click="makeactive" v-if="!isactive">
            <p class="mx-6 mt-4 has-text-weight-bold has-text-centered">
                {{ localTitle || "Název hlavy" }}
            </p>
            <p>
                {{ localText || "Text hlavy" }}
            </p>
        </div>
        <div v-click-outside="makeinactive" v-if="isactive">
            <p class="mx-6 mt-4 has-text-weight-bold has-text-centered">
                <b-input placeholder="Název hlavy" style="text-align:right;" v-model="localTitle"></b-input>
            </p>
            <p>
                <b-input placeholder="Text hlavy" v-model="localText" type="textarea"></b-input>
            </p>
            <p>
                <b-button type="is-danger" class="mt-3" v-on:click="$emit('deletehlava', index)" expanded>Smazat hlavu</b-button>
            </p>
        </div>
    </div>
</template>

<style scoped>

</style>

<script>
export default {
    name: "Hlava",
    props: ['title', 'text', 'index'],
    data: () => {
        return {
            isactive: false
        }
    },
    methods: {
        makeactive: function () {
            this.isactive = true;
        },
        makeinactive: function () {
            this.isactive = false;
        }
    },
    computed: {
        localTitle: {
          get: function() {
            return this.title
          },
          set: function (value) {
            this.$emit('update:title', value)
          }
        },
        localText: {
          get: function() {
            return this.text
          },
          set: function (value) {
            this.$emit('update:text', value)
          }
        }
    }
}
</script>
