<template>
  <v-layout row wrap>
    <v-flex xs12>
      <v-dialog
        ref="dialog"
        v-model="modal"
        :return-value.sync="date"
        persistent
        lazy
        full-width
        width="290px"
      >
        <template v-slot:activator="{ on }">
            <v-text-field
                v-model="computedDateFormatted"
                :label=init_label
                readonly
                v-on="on"
                hint="MM/DD/YYYY format"
                browser-autocomplete="off"
            ></v-text-field>
        </template>
        <v-date-picker v-model="init_date" no-title @input="modal = false" :max="init_max_date" scrollable>
          <v-spacer></v-spacer>
          <v-btn flat color="primary" @click="modal = false">Cancel</v-btn>
          <!-- <v-btn flat color="primary" @click="$refs.dialog.save(date)">OK</v-btn> -->
        </v-date-picker>
      </v-dialog>
    </v-flex>
    
    
  </v-layout>
</template>

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

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

            init_label: this.label ? this.label : 'Date',
            init_data: this.data ? this.data : '',

            modal: false
        }
    },

    computed: {
        computedDateFormatted () {
            return this.formatDate(this.init_date)
        }
    },

    watch: {
        init_date (n, o) {
            this.dateFormatted = this.formatDate(this.init_date)
            
            this.$emit('change', {"old_date":o, "new_date":n, "data":this.init_data});
        }
    },

    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>