// ---------------------------------------------------------------------------------
//
// Component: Date picker (wrapped bootstrap date picker)
//
// Input Props:
//      - id
//      - name
//      - required
//      - sstyle
//      - display-format
//      - value-format
//      - placeholder
//      - min-date
//
//      <date-picker id="article_date" name="article_date" v-model="article_date" display-format="dd.mm.yyyy" value-format="yyyy-mm-dd" placeholder="Choose date"></date-picker>
//
Vue.component('date-picker',
{
    props:
    [
        'id', 'name', 'sstyle', 'required', 'displayFormat', 'valueFormat', 'value', 'placeholder', 'readonly', 'minDate'
    ],
    mounted: function ()
    {
        var self = this;

        $(self.$el).find('input[type=text]').datepicker(
        {
            format: self.displayFormat,
            autoclose: true,
            clearBtn: self.readonly != undefined,
            //startDate: "today"
        });

        if(this.value)
        {
            $(self.$el).find('input[type=text]').datepicker("update", new Date(this.value));
        };

        $(self.$el).find('input[type=text]').on("changeDate", function()
        {
            self.$emit('input',$(self.$el).find('input[type=text]').data('datepicker').getFormattedDate(self.valueFormat));
        });

        $(self.$el).find('input[type=text]').on("clearDate", function()
        {
            self.$emit('input', null);
        });
    },
    watch:{
        value (val) 
        {
            var self = this;

            if(val)
            {
                $(self.$el).find('input[type=text]').datepicker("update", new Date(val));
            }
            else
            {
                $(self.$el).find('input[type=text]').datepicker("update", null);
            }
        },
        minDate(val)
        {
            var self = this;
            console.log(val);
            if(val)
            {
                $(self.$el).find('input[type=text]').datepicker("setStartDate", val);
            }
            
        }
    },
    template: '<span style="position:relative;"><input type="text" value="" :name="name" :style="sstyle" class="datepicker" :required="required" :placeholder="placeholder" :readonly="readonly" autocomplete="off"><i class="fa fa-calendar-o" style="cursor:pointer;position: absolute;top: -1px;right: 15px;font-size: 18px;pointer-events: none;color:#748186;"></i><input type="hidden" :id="id" :value="value"/></span>'
});