<template>
  <q-dialog v-model="open" @hide="clearModel" @submit="newRange" persistent>
    <q-card class="full-width no-shadow" style="max-width: 600px">
      <q-card-section>
        <div class="text-h6 q-mb-md">
          Введите период
        </div>
        <x-date-range
          class="height-limit col-6"
          :from.sync="range.from"
          :to.sync="range.to"
          :listStyle="{ display: 'flex' }"
        />
      </q-card-section>
      <q-card-actions align="right">
        <q-btn
          type="submit"
          label="Обновить"
          color="primary"
          @click="newRange"
          :disabled="disableSave"
        />
        <q-btn
          color="white"
          text-color="primary"
          outline
          @click="closeDialog"
          :label="$t('base.actions.cancel')"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script lang="ts">
import { convertDateFormat, DateFormat } from '@/utils/format-date';
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import XDateRange from './x-date-range.vue'

type Range = {
  from: Date | string,
  to: Date | string,
}

@Component({
  inheritAttrs: false,
  components: { XDateRange },
})
export default class DateEditDialog extends Vue {
  @Prop() open: boolean;

  protected range: Range = {from:'', to:''};

  get disableSave() {
    return !this.range.from || !this.range.to;
  }
  
  clearModel() {
    this.range = {from:'', to:''};
  }

  newRange() {
    const convertFrom = convertDateFormat(
      this.range.from,
      DateFormat.date,
      DateFormat.invertedDate,
    )
    const convertTo = convertDateFormat(
      this.range.to,
      DateFormat.date,
      DateFormat.invertedDate,
    )
    const range = `${convertFrom} - ${convertTo}`
    this.$emit('newRange', range);
    this.closeDialog();
  }

  closeDialog() {
    this.$emit('close');
  }
}
</script>
