<template>
    <v-datetime-picker 

        :clearText="__('Șterge')"
        :textFieldProps="{
            outlined: true,
            dense: true,
            'hide-details': true,
            'append-icon': 'mdi-clock',
        }" 
        v-model="myvalue"
        ref="myInput" 
    > 
        <template #dateIcon>
            <v-icon>mdi-calendar</v-icon>
        </template>

        <template #timeIcon>
            <v-icon>mdi-clock</v-icon>
        </template>

    </v-datetime-picker>
</template>

<script>
    export default {
        props: {
            app: {required: true},
            column: {required: true},
            rowvalues: {required: true},
        },

        data: () => ({
            myvalue: null,
        }),

        watch: {
            rowvalues: {
                deep: true,
                handler: function() {

                    let oldvalue = !! this.myvalue ? moment(this.myvalue).format('YYYY-MM-DD HH:mm') : null;
                    let newvalue = this.rowvalues['col-' + this.column.id];

                    
                    
                    if( oldvalue !== newvalue)
                    {
                        setTimeout( () => {
                            this.myvalue = newvalue;
                            console.log('handler: ' + oldvalue + '---->' + this.myvalue);
                            if(newvalue === null)
                            {
                                this.$refs.myInput.clearHandler();
                            }
                        }, 100);
                    }
                    
                },
            },
            
            myvalue: function(value, oldvalue) {
                
                
                value = !! value ? moment(value).format('YYYY-MM-DD HH:mm') : null;
                oldvalue = !! oldvalue ? moment(oldvalue).format('YYYY-MM-DD HH:mm') : null;
                
                if( value !== oldvalue)
                {
                    let r = {...this.rowvalues};

                    

                    setTimeout( () => {
                        r['col-' + this.column.id]  = value;

                        console.log('myvalue: col-' + this.column.id + '---- = ' + value + ' (' + oldvalue + ')');
                        this.$emit('update-values', r);
                    }, 100);
                    
                }
            },
        },

        created() {
            this.myvalue = this.rowvalues['col-' + this.column.id];
        },

        components: {
            CsDateBox: require('@CsVueComp/controls/dates/CsDateBox').default,
        },
        
        name: 'RegistruRowInputDatetimebox',
    }
</script>