<!-- 
    daterangepicker component

    PRIMER UPOTREBE:
        <autoerp-daterangepicker id="example_id" name="example_name" >
        </autoerp-daterangepicker>
-->


<template>
    <div v-bind:id="id" >
        <input type="text" 
               class="form-control input-limit-datepicker"
               v-bind:start_date="start_date"
               v-bind:end_date="end_date"
               v-bind:name="name"
               v-bind:placeholder="placeholder"
               v-bind:disabled="disabled"
               v-bind:ranges="ranges"
        >
    </div>
 </template>

 <script>

    export default {
        props: {
            id: {
                type: String,
                default: 'daterangepicker_' + Math.floor((Math.random() * 10000000) + 1)
            },
            start_date: {
                type: String,
                default: ''
            },
            end_date: {
                type: String,
                default: ''
            },
            name: { 
                type: String, 
                default: 'date_range' 
            },
            disabled: {
                type: Boolean,
                default: false
            },
            placeholder: {
                type: String,
                default: 'Izaberite raspon datuma'
            },
            ranges: {
                type: Object,
                default: function (){
                       return { 
                            'Tekuća godina': [moment().startOf('year'), moment().endOf('year')],
                            'Tekući mesec': [moment().startOf('month'), moment().endOf('month')],
                            'Poslednjih 30 dana': [moment().subtract(30, 'days'), moment()],
                            'Prethodni mesec': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                        };
                }
            },
            opens: {
                type: String,
                default: 'left'
            },
            drops: {
                type: String,
                default: 'down'
            },
            enable_quarters: {
                type: Boolean,
                default: false
            }
        },
        data: function () {
            return {
                i: 0,
                element: null
            };
        },
        mounted: function() {
            let self = this;
            let input = $(this.$el.firstChild);
            this.element = input;
            
            this.enableQuarters();
            
            this.$nextTick(function() {

                input.daterangepicker({
                    timePicker: false,
                    ranges: this.ranges,
                    opens: this.opens,
                    drops: this.drops,
                    buttonClasses: ['btn', 'btn-sm'],
                    applyClass: 'btn-success',
                    cancelClass: 'btn-secondary',
                    separator: ' - ',
                    locale: {
                        format: 'DD.MM.YYYY',
                        applyLabel: 'Primeni',
                        cancelLabel: 'Obriši',
                        fromLabel: 'Od',
                        toLabel: 'Do',
                        customRangeLabel: 'Ručni unos',
                        daysOfWeek: ['Ned', 'Pon', 'Uto', 'Sre', 'Čet', 'Pet', 'Sub'],
                        monthNames: ['Januar', 'Februar', 'Mart', 'April', 'Maj', 'Jun', 'Jul', 'Avgust', 'Septembar', 'Oktobar', 'Novembar', 'Decembar'],
                        firstDay: 1
                    }
                });
                
                self.initEmitDates(this.start_date, this.end_date, input);
                
                input.on('apply.daterangepicker', function(ev, picker) {
                    let response = {
                        start_date: self.mysqlDateVal(picker.startDate._d),
                        end_date: self.mysqlDateVal(picker.endDate._d)
                    };
                    
                    self.$emit('daterangechanged', response);
                });
                
                // izbrisi vrednosti kada se klikne na 'cancel' (Obrisi)
                input.on('cancel.daterangepicker', function(ev, picker) {
                    input.val('');
                 
                    let response = {
                        start_date: '',
                        end_date: ''
                    };
                    
                    self.$emit('daterangechanged', response);
                });
                
            });
        },
        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 '';
                }                
            },
            mysqlDateVal(val) {
                return this.momentDateConvert(val, 'DD.MM.YYYY', 'YYYY-MM-DD');
            },
            serbDateVal(val) {
                return this.momentDateConvert(val, 'YYYY-MM-DD', 'DD.MM.YYYY');
            },
            initEmitDates(start_date, end_date, input) {
                
                let response = {
                    start_date: start_date,
                    end_date: end_date
                };
                
                this.$emit('daterangechanged', response);
                
                if(this.start_date && this.end_date) {
                    input.val(this.serbDateVal(this.start_date) + ' - ' + this.serbDateVal(this.end_date));
                } else {
                    input.val('');
                }
                
            },
            enableQuarters() {
                if(this.enable_quarters){
                    this.ranges['Prvi kvartal'] = [moment().quarter(1).startOf('quarter'), moment().quarter(1).endOf('quarter')];
                    this.ranges['Drugi kvartal'] = [moment().quarter(2).startOf('quarter'), moment().quarter(2).endOf('quarter')];
                    this.ranges['Treći kvartal'] = [moment().quarter(3).startOf('quarter'), moment().quarter(3).endOf('quarter')];
                    this.ranges['Četvrti kvartal'] = [moment().quarter(4).startOf('quarter'), moment().quarter(4).endOf('quarter')]; 
                }
            },
            setStartEndDates(startDate, endDate, inputFormat) {

                if(inputFormat == "mysql") {
                    startDate = this.momentDateConvert(startDate, 'YYYY-MM-DD', 'DD/MM/YYYY');;
                    endDate = this.momentDateConvert(endDate, 'YYYY-MM-DD', 'DD/MM/YYYY');;
                }

                this.$nextTick(() => {
                    this.element.data('daterangepicker').setStartDate(startDate); //'03/01/2014');
                    this.element.data('daterangepicker').setEndDate(endDate); //'08/02/2015');
                });
            }
        }
    };

</script>