<template>
    <div class="w-full  px-4" :class="size ? size : 'lg:w-6/12'">
        <div class="relative w-full mb-3" :class="subSectionClass">
            <label class="block uppercase text-blueGray-600 text-xs font-bold mb-2" :for="id" :class="labelClass"> {{ label }} {{ date }}
                <span class="text-red-600" v-if="required">*</span>
            </label>
            <input
                :class="inputClass"
                :id="id"
                :required="required"
                :value="value"
                class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
                @change="updateInput"
                @wheel="$event.target.blur()"
                :autofocus="autofocus"
                step="any"
                :tabindex="tabindex"
                ref="calendar"
            />
            <span v-if="error" class="text-red-600">{{error}}</span>
        </div>
    </div>
</template>

<script>
    // import mpicker from "@/mpicker.js";
    // import  "@/../css/mpicker.css";

    export default {
        props:["mainSectionClass", "subSectionClass", "labelClass", "inputClass", "label", "tabindex", "type", "id", "required", "value", "readonly", 'error', 'autofocus', 'size'],

        mounted() {
            this.monthPicker();
        },

        watch:{
            value:function(el){
                // console.log(el);
            }
        },

        methods: {
            updateInput(event) {
                setTimeout(() => {
                    this.$emit("update:value", event.value);
                }, 500);
            },

            monthPicker(){
                mpicker.calendar(this.$refs.calendar, {
                    type: 'year-month-picker',
                    format: 'MMM-YYYY',
                    // value: this.value,
                    onchange: this.updateInput
                });
            }
        },
    }
</script>
