<template>
  <div>
    <div style="margin: 40px">
      <CalendarRange
        v-model="diaInicial"
        :validation-error="validation"
        @outs-elements="obtenerValor"
      ></CalendarRange>
      <div>{{ data }} {{ hour }} {{ diaInicial }}</div>
    </div>
    <div style="margin: 40px">
      <CalendarRange
        :validation-error="validation"
        :specific-days="specificDays"
        v-model="diaRange"
      ></CalendarRange>
      <div>{{ diaRange }}</div>
    </div>
    <div style="margin: 40px">
      <CalendarRange
        v-model="diaInicial"
        :is-visible-clock="false"
        :single-day-selection="true"
        :validation-error="validation"
      ></CalendarRange>
    </div>
    <div style="margin: 40px">
      <MonthlyPicker
        v-model="mesInicial"
        :validation-error="validation"
        date-format="MMMM YYYY"
      ></MonthlyPicker>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-lg-5" style="margin:40px">
      Calendario con ancho fijo y rango de fechas y horas. Calendario tiene
      opciones predeterminadas a la izquierda.
      <div>{{ valor5 }}</div>
      <CalendarRange
        @outs-elements="obtenerValor5"
        :specific-days="specificDays"
        shortcut-days-width="200px"
        v-model="diaInicial"
      ></CalendarRange>
    </div>
    <div class="form-group col-xs-6 col-sm6 col-lg-5" style="margin:40px">
      Calendario con ancho fijo, fecha y hora single y estilo de validación con
      error
      <div>{{ valor6 }}</div>
      <CalendarRange
        :is-visible-clock="true"
        :single-day-selection="true"
        :validation-error="validation"
        @outs-elements="obtenerValor6"
      ></CalendarRange>
      <button-icon
        textButton="cambiar a 22-04-2020 10:00"
        @click="cambiarFecha"
      />
    </div>
  </div>
</template>

<script>
import ButtonIcon from "@/components/Buttons/ButtonIcon";
import CalendarRange from "@/components/CalendarRange/Calendar";
import MonthlyPicker from "@/components/MonthlyPicker/MonthlyPicker";
import moment from "moment";

export default {
  name: "CalendarRangeView",
  data() {
    return {
      horaInicial: "19:10",
      specificDays: [
        {
          name: "Hoy",
          value: 0
        },
        {
          name: "Última semana",
          value: 7
        },
        {
          name: "Últimos 15 días",
          value: 15
        },
        {
          name: "Último mes",
          value: 30
        },
        {
          name: "Últimos 2 meses",
          value: 60
        },
        {
          name: "Último año",
          value: 365
        }
      ],
      selecis: null,
      mesInicial: "",
      diaInicial: new Date(2019, 10, 1),
      diaRange: null,
      monthLabels: [
        "Ene",
        "Feb",
        "Mar",
        "Abr",
        "May",
        "Jun",
        "Jul",
        "Ago",
        "Sept",
        "Oct",
        "Nov",
        "Dic"
      ],
      validation: true,
      data: null,
      hour: null,
      fecha1: null,
      valor5: null,
      valor6: null
    };
  },
  created() {
    this.cambiarFecha();
  },
  methods: {
    cambiarFecha() {
      let fecha2 = moment("2020-04-22 10:00", "YYYY-MM-DD HH:mm");
      let fecha1 = moment("2020-04-02 10:00", "YYYY-MM-DD HH:mm");
      console.log(fecha1.format());
      this.diaInicial = {
        inicio: new Date(fecha1.format()),
        fin: new Date(fecha2.format())
      };
      this.diaRange = {
        inicio: new Date(fecha1.format()),
        fin: new Date(fecha2.format())
      };
    },
    obtenerValor(valor) {
      this.data = valor;
      this.hour = valor.hourInitial;
    },
    obtenerValor5(valor) {
      console.log("obtenerValor5", valor);
      this.valor5 = valor;
    },
    obtenerValor6(valor) {
      this.valor6 = valor;
    },
    obtenerDatos(valor) {
      console.log("obtenerDatos", valor);
    }
  },
  components: {
    MonthlyPicker,
    CalendarRange,
    ButtonIcon
  }
};
</script>

<style scoped></style>
