<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="computedEndDateFormatted" :label=init_label persistent-hint readonly browser-autocomplete="off"></v-text-field>
    <v-date-picker v-model="init_edate" no-title @input="menu2 = false" :max="init_max_edate"></v-date-picker>
  </v-menu>
</template>

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

    data() {
      return {
        init_edate: this.date && this.date != "0000-00-00" ? this.date : null, //new Date().toISOString().substr(0, 10),
        init_max_edate: this.max_edate ? this.max_edate : '2999-09-09',
        dateFormatted: this.formatDate(new Date().toISOString().substr(0, 10)),
        menu1: false,
        menu2: false,

        init_label: this.label ? this.label : 'Date',
        init_edata: this.data ? this.data : ''
      }
    },

    computed: {
      computedEndDateFormatted() {
        return this.formatDate(this.init_edate)
      }
    },

    watch: {
      init_edate(n, o) {
        this.dateFormatted = this.formatDate(this.init_edate)

        this.$emit('change', {
          "old_edate": o,
          "new_edate": n,
          "data": this.init_edata
        });
      }
    },

    methods: {
      formatDate(date) {
        if (!date) {
          return null
        }

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

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

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