<template>
  <q-dialog v-model="visibileSync">
    <q-card class="full-width no-shadow" style="max-width: 800px">
      <q-form
        @submit.prevent="onSubmit"
      >
        <q-card-section>
          <div class="text-h6">
            {{ $t('registries.inspectRecordsBtnLabel') }}
          </div>
          <q-banner rounded class="q-mt-md grey-banner q-py-xs">
            <div class="text-grey-9">
              {{ $t('registries.inspectRecordsModalSubtitle') }}
            </div>
          </q-banner>
        </q-card-section>

        <q-card-section>
          <div class="row">
            <div class="col-12 col-sm-6 q-pr-sm">
              <arm-datepicker
                v-model="from"
                type="date"
                :label="$t('registries.dateFrom')"
                :max-date-limit="to"
              />
            </div>

            <div class="col-12 col-sm-6 q-pl-sm">
              <arm-datepicker
                v-model="to"
                type="date"
                :label="$t('registries.dateTo')"
                :min-date-limit="from"
              />
            </div>
          </div>            
        </q-card-section>

        <q-card-actions align="right">
          <q-btn
            class="q-ma-sm"
            type="submit"
            unelevated
            color="primary"
            :label="$t('registries.inspectBtnLabel')"
          />
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<script lang="ts">
import { Component, PropSync, Vue } from 'vue-property-decorator';
import ArmDatepicker from '@components/common/node-generator/components-lib/datepicker/arm-datepicker.vue';

@Component({
  components: {
    ArmDatepicker
  },
})
export default class InspectRecordsModal extends Vue {
  @PropSync('visible') visibileSync?: boolean; // Видимость модального окна

  from = (new Date(Date.now() - 7 * 24 * 60 * 60 * 1000)).toISOString();
  to = (new Date()).toISOString();

  /* Отправка формы */
  onSubmit() {
    this.$emit('inspect', {from: this.from, to: this.to});
  }
}
</script>