-
<template>
  <q-dialog v-model="dialogVisible">
    <q-card class="no-shadow">
      <q-card-section>
        <div class="text-h6">{{ $t('reportDialog.dialogTitle') }}</div>
      </q-card-section>

      <q-card-section class="q-pt-none">
        <q-form ref="form">
          <div class="row q-gutter-xs">
            <div class="col-12">
              <q-input
                v-model="form.issueDate"
                filled
                :label="$t('reportDialog.form.issueDate') + ' *'"
                readonly
                mask="##.##.####"
                lazy-rules
                :rules="[noEmptyValueRule]"
              />
            </div>
            <div class="col-12">
              <q-input
                v-model="form.topic"
                filled
                :label="$t('reportDialog.form.topic') + ' *'"
                lazy-rules
                :rules="[noEmptyValueRule]"
              />
            </div>
            <div class="col-12">
              <q-input
                v-model="form.descriptioninRTF"
                filled
                type="textarea"
                :label="$t('reportDialog.form.descriptioninRTF') + ' *'"
                lazy-rules
                :rules="[noEmptyValueRule]"
              />
            </div>
            <div class="col-12">
              <q-input
                v-model="form.clientEmail"
                filled
                type="email"
                placeholder="example@mail.com"
                :label="$t('reportDialog.form.email') + ' *'"
                lazy-rules
                :rules="[noEmptyValueRule, validEmailRule]"
              >
                <template #prepend>
                  <q-icon name="mail" />
                </template>
              </q-input>
            </div>
            <div class="col-12">
              <q-input
                v-model="form.clientPhone"
                filled
                mask="+# (###) ### - ####"
                unmasked-value
                type="tel"
                fill-mask
                :label="$t('reportDialog.form.phone') + ' *'"
                lazy-rules
                :rules="[noEmptyValueRule, validPhoneNumberRule]"
              />
            </div>
            <div class="col-12">
              <q-input
                v-model="form.text"
                filled
                :label="$t('reportDialog.form.text')"
              />
            </div>
          </div>
        </q-form>
      </q-card-section>

      <q-card-actions align="right">
        <q-btn
          icon-right="send"
          :label="$t('reportDialog.buttonSend')"
          color="primary"
          @click="onClickSend"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script lang="ts" src="./index.ts" />

<style lang="scss"></style>
