<template>
    <div contenteditable="false" class="title">{{ value }}</div>
</template>

<script>
import { useTextMask } from '@/components/Generator/utils/useTextMask';
export default {
    name: 'QuestionnaireInput',
    props: {
        value: {
            type: [String, Number],
            default: ''
        },
        addonBefore: {
            type: String,
            default: ''
        },
        addonAfter: {
            type: String,
            default: ''
        },
        detailed: {
            type: Boolean,
            default: false
        },
        useMask: {
            type: Boolean,
            default: false
        },
        maskConfig: {
            type: Object,
            default: () => { }
        },
        showOverflow: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            innerValue: '',
            maskedValue: ''
        };
    },
    watch: {
        value: {
            handler(val) {
                this.setValue(val);
            },
            immediate: true
        },
    },
    methods: {
        setValue(value) {
            this.innerValue = value;
            if (!this.useMask) return (this.maskedValue = value);
            const { getMaskedText } = useTextMask(this.maskConfig);
            this.maskedValue = getMaskedText(value);
        },
        onChange(value) {
            this.$emit('input', value);
        }
    }
};
</script>
<style lang="scss" scoped>
.title {
    font-size: 40px;
    margin: 0 auto;
    font-weight: bold;
    padding: 20px;
    text-align: center;
    color: #000;
}
</style>