<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card class="q-dialog-plugin overflow-hidden" style="width: 100%; max-width: 400px">
      <DefaultDialogHeader title="Mês de Cobrança" @close="onDialogCancel" />

      <q-form ref="formRef" @submit="onGenerate">
        <q-card-section class="q-pt-none">
          <DefaultSelect
            v-model="month"
            label="Mês"
            :options="monthOptions"
            :rules="[inputRules.required]"
          />
        </q-card-section>

        <q-card-actions>
          <q-space />
          <q-btn outline label="Cancelar" @click="onDialogCancel" />
          <q-btn color="primary-2" label="Gerar" type="submit" />
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { ref } from "vue";
import { useDialogPluginComponent } from "quasar";
import { useInputRules } from "src/composables/useInputRules";
import DefaultDialogHeader from "src/components/defaults/DefaultDialogHeader.vue";
import DefaultSelect from "src/components/defaults/DefaultSelect.vue";

defineEmits([...useDialogPluginComponent.emits]);

const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
  useDialogPluginComponent();

const { inputRules } = useInputRules();

const month = ref(null);

const monthOptions = [
  { label: "Janeiro", value: 1 },
  { label: "Fevereiro", value: 2 },
  { label: "Março", value: 3 },
  { label: "Abril", value: 4 },
  { label: "Maio", value: 5 },
  { label: "Junho", value: 6 },
  { label: "Julho", value: 7 },
  { label: "Agosto", value: 8 },
  { label: "Setembro", value: 9 },
  { label: "Outubro", value: 10 },
  { label: "Novembro", value: 11 },
  { label: "Dezembro", value: 12 },
];

function onGenerate() {
  onDialogOK({ month: month.value });
}
</script>
