<template>
    <v-menu
          v-model="menu2"
          :close-on-content-click="false"
          :nudge-right="40"
          lazy
          transition="scale-transition"
          offset-y
          full-width
          max-width="290px"
          min-width="290px"
        >
       
          <v-text-field
            slot="activator"
            v-model="init_time"
            :label=init_label
            persistent-hint
            readonly
            browser-autocomplete="off"
          ></v-text-field>
          <v-time-picker
            v-if="menu2"
            v-model="init_time"
            full-width
            @click:minute="save(init_time)"
            :max="init_max_time"
            format="24hr"
            ></v-time-picker>
          
    </v-menu>
 </template>

 <script>
 module.exports = {
     props : ['label', 'time', 'data', 'max_time'],

     data () {
        return {
            init_time: this.time && this.time != "00:00:00" ? this.time : null,
            init_max_time: this.max_time ? this.max_time : '24:00:00',
            timeFormatted: "00:00",
            menu1: false,
            menu2: false,

            init_label: this.label ? this.label : 'Time',
            init_data: this.data ? this.data : ''
        }
     },

    computed: {
      computedTimeFormatted () {
        return this.formatTime(this.init_time)
      }
    },

    watch: {
      init_time (n, o) {
        this.timeFormatted = this.formatTime(this.init_time)
        
        this.$emit('change', {"old_time":o, "new_time":n, "data":this.init_data});
      }
    },

    methods: {
      formatTime (time) {
          return time;
        // if (!date) return null

        // const [year, month, day] = date.split('-')
        // return `${day}-${month}-${year}`
      },
      parseTime (time) {
        // if (!date) return null

        // const [month, day, year] = date.split('/')
        // return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`
        return time;
      },

      emitChange (n, o) {
          console.log("old:"+o)
          console.log("new:"+n)
      },

      save (time) {
          console.log("time:"+time)
          this.$emit('change', {"new_time":time, "data":this.data});
          this.menu2 = false;
      }
    }
 }
</script>
