<!-- 
    datetimepicker component

    PRIMER UPOTREBE:
        // standardna upotreba
        <autoerp-datetimepicker name="datum" v-model:value="state.datum" placeholder="Izaberite datum"></autoerp-datetimepicker>

        // sa 'disable'-ovanim inputom
        <autoerp-datetimepicker name="datum" v-model:value="state.datum" placeholder="Izaberite datum" disabled></autoerp-datetimepicker>
-->


<template>
    <div v-bind:id="id" class="input-group">
        <input class="form-control datepicker"
                data-date-format="DD.MM.YYYY HH:mm"
                v-bind:placeholder="placeholder"
                v-bind:value="dtpValue"
                v-on:input="updateValue"
                type="text"
                v-bind:disabled="disabled"
                v-bind:class="validationClassObj"
                >
        <div class="input-group-append">
            <span v-on:click="openCalendar" class="input-group-text bg-custom text-white b-0">
                <i class="mdi mdi-calendar"></i>
            </span>
        </div>
        <input type="hidden" 
            id="hidden_datum"
            ref="input"
            v-bind:value="value" 
            v-on:input="onHiddenInput($event)"
            v-bind:defaultdate ="defaultdate"
            >
    </div>
 </template>

 <script>
    export default {
        inject: ['$validator'],
        $_veeValidate: {
            value() {
                return this.$el.firstChild.value;
            },
            name() {
                return this.name;
            }
        },
        props: {
            id: {
                type: String,
                default: 'datetimepicker_' + Math.floor((Math.random() * 10000000) + 1)
            },
            value: {
                type: String,
                default: moment().format('DD.MM.YYYY HH:mm')
            },
            disabled: {
                type: Boolean,
                default: false
            },
            defaultdate: {
                type: String
            },
            name: '',
            placeholder: ''
        },
        data: function () {
            return {
                i: 0
            }
        },
        mounted: function() {
            let self = this;
            
            this.$nextTick(function() {

                $(this.$el.firstChild).datetimepicker({
                    defaultDate: self.defaultdate,
                    format: "DD.MM.YYYY HH:mm",
                })
                .on('dp.change', function(e) {
                    self.updateValue(e.target.value);
                });
            });
        },
        methods: {
            /* 
             * Konvertuj datum koristeci 'momentjs' 
             */
            momentDateConvert(val, inputDateFormat, outputDateFormat) {
                let momentObj = moment(val, inputDateFormat);

                // mora da se proveri ispravnost datuma i posebno da se setuje vrednost
                // kada je datum neispravan zato sto 'momentjs' vraca 'Invalid date' string
                if(momentObj.isValid()) { 
                    return momentObj.format(outputDateFormat);
                }
                else { 
                    return '';
                }                
            },
            onHiddenInput(e) {
                this.$emit('input', e.target.value);
            },
            updateValue(value) {
                this.i = this.i + 1;
                this.$emit('input', this.mysqlDateVal(value) );
            },
            openCalendar() {
                $(this.$el.firstChild).trigger('click');
            },
            mysqlDateVal(val) {
                return this.momentDateConvert(val, 'DD.MM.YYYY HH:mm', 'YYYY-MM-DD HH:mm:ss');
            },
            serbDateVal(val) {
                return this.momentDateConvert(val, 'YYYY-MM-DD HH:mm:ss', 'DD.MM.YYYY HH:mm');
            }
        },
        computed: {
            dtpValue() {
                if(this.value) {
                    return this.serbDateVal(this.value);
                }
                else {
                    return '';
                }
            },
            isValid() {
                return ! this.$validator.errors.has(this.name);
            },
            dirty() {
                return this.i != 0;
            },
            validationClassObj() {
                return { 
                         'is-invalid': this.dirty && !this.isValid, 
                         'is-valid': this.dirty && this.isValid 
                       };
            }
        }
    };
</script>