<template>
    <v-text-field
        ref="Control"
        :id="control.id"
        :hide-details="control.hideDetails"
        :dense="control.dense"
        :outlined="control.outlined"
        :clearable="control.clearable"
        :maxlength="maxLength"
        :persistent-hint="control.persistentHint"
        :hint="control.hint"
        :height="control.height"
        :error-messages="localeErrors"
        :disabled="control.disabled"
        :class="{
            'cs-control': true,
            'cs-text-box': true,
            'cs-input-numeric': isNumeric,
            ...htmlClass,
        }"
        :type="textType"
        :hide-spin-buttons="true"
        :name="control.name"

        v-model="localValue"

        @keyup.enter="$emit('enter')"
        @focus="$emit('focus')"
        @blur="OnBlur(), $emit('blur')"
    >
        <template #label v-if="control.label">
            <cs-label 
                :control="control"
            />
        </template>
    </v-text-field>
</template>

<script>
    import RandomString from '@CsFunc/global/RandomString';
    import JQApply from '@Cs/jquery/Apply';

    export default {

        props: {
            control: {required: true},

            value: {required: true},

            errors: {default: null},

            htmlClass: {default: null},
        },

        computed: {
            localValue: {
                get: function() {
                    return this.value;
                },

                set: function(value) {
                    return this.$emit('input', value);
                }
            },

            localeErrors() {
                return _.map(this.errors, error => this.__(error))
            },

            isNumeric() {
                return !! this.control.numeric;
            },

            maxLength() {
                if( this.isNumeric )
                {
                    return this.control.numeric.length;
                }
                return this.control.maxlength;
            },

            textType() {
                if(this.isNumeric)
                {
                    return 'number';
                }
                return 'text';
            }
        },

        methods: {
            Focus(time = 5) {
                setTimeout( () => {
                    this.$refs.Control.focus();
                }, time)
            },

            OnBlur() {
                if(this.isNumeric)
                {
                    let value = 1 * (this.value || 0);

                    value = value.toFixed(this.control.numeric.decimals)

                    this.localValue = value;
                }
            },

            InitNumericTextbox() {
                if(this.isNumeric)
                {
                    JQApply(this.control.id, [
                        j => {
                            j.focus(function(e) {
                                $(this).one('mouseup', function(event){
                                    event.preventDefault();
                                }).select();
                            })
                        }
                    ])
                }
            }
        },

        mounted() {
            this.InitNumericTextbox();
        },

        created() {
            this.control.id = 'cs-text-box-' + RandomString(64);
        },

        components: {
            CsLabel: require('./../labels/CsLabel').default,
        },

        name: 'CsTextBox',
    }
</script>