<template>
  <div class="item no-select" :style="{height: height+'px'}">
    <div class="ql-editor item__text" @click="doModify" v-html="$escapeHTML(`${value}`)" />
    <el-button class="item__button" type="primary" size="mini" icon="el-icon-edit" circle @click="doModify" />
    <el-button v-if="remove" class="item__button" type="danger" size="mini" icon="el-icon-delete" circle @click="doRemove" />
  </div>
</template>

<script>

export default {
    props: {
        value: {
            type: String,
            default: ''
        },
        height: {
            type: Number,
            default: 60
        },
        remove: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        doModify() {
            this.$emit('modify', this.value);
        },
        doRemove() {
            this.$emit('remove', this.value);
        }
    }
};

</script>

<style lang="scss" scoped>
    .item {
        display: flex;
        justify-content: space-between;
        align-items: center;

        &__text {
            flex: 1;
            background: #f1f1f1;
        }

        &__button {
            width: 32px;
            margin-left: 10px;
            place-self: flex-end;
        }
    }
</style>
