<template>
  <b-field class="column mb-0 pb-0" :class="columnSize" :label="label">
    <b-datepicker
      icon="calendar-today"
      locale="es-MX"
      placeholder="Selecciona una fecha"
      :icon-right="botonCerrar ? (fecha ? 'close-circle' : '') : ''"
      :max-date="fechaMaxima"
      :min-date="fechaMinima"
      :unselectable-days-of-week="[0, 7]"
      @icon-right-click="clearDate"
      v-model="fecha"
      icon-right-clickable
      trap-focus
    >
    </b-datepicker>
  </b-field>
</template>

<script>
export default {
  props: {
    botonCerrar: { typeof: Boolean, required: false, default: false },
    fechaMaxima: { typeof: Date, required: true, default: () => new Date() },
    fechaMinima: { typeof: Date, required: true, default: () => new Date() },
    fechaPadre: { typeof: Date, required: true, default: () => new Date() },
    columnSize: { typeof: String, required: false, default: '' },
    label: { typeof: String, required: true, default: '' },
  },
  data: () => {
    return { fecha: null }
  },
  methods: {
    clearDate() {
      this.fecha = null
    },
  },
  watch: {
    fecha() {
      this.$emit('fecha', this.fecha)
    },
    fechaPadre() {
      this.fecha = this.fechaPadre
    },
  },
  created() {
    if (this.fechaPadre) this.fecha = this.fechaPadre
  },
}
</script>

<style scoped></style>
