<template>
    <v-text-field
        ref="Control"
        :id="control.id"
        :hide-details="control.hideDetails"
        :dense="control.dense"
        :outlined="control.outlined"
        :clearable="control.clearable"
        :maxlength="control.maxlength"
        :persistent-hint="control.persistentHint"
        :hint="control.hint"
        :error-messages="localeErrors"
        :class="{
            'cs-control': true,
            'cs-pssword-box': true,
        }"
        :type="mytype"
        :append-icon="icon"
        :name="control.name"

        v-model="localValue"

        @click:append="ToggleType"

        @focus="$emit('focus')"
        @blur="$emit('blur')"
    >
        <template #label>
            <cs-label 
                :control="control"
            />
        </template>
    </v-text-field>
</template>

<script>
    import RandomString from '@CsFunc/global/RandomString';

    export default {

        props: {
            control: {required: true},

            value: {required: true},

            errors: {default: null},
        },

        data: () => ({
            mytype: 'password',
            icons: {
                password: 'mdi-eye-outline',
                text: 'mdi-lock-outline',
            },
        }),

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

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

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

            icon() {
                return this.icons[this.mytype];
            },
        },

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

            ToggleType() {
                this.mytype = (this.mytype == 'password' ? 'text': 'password');
            },
        },

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

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

        name: 'CsPasswordBox',
    }
</script>