<template>
  <div class="q-pa-md q-gutter-y-md">
    <div
      class="flex justify-between items-center bg-white q-pa-md rounded-borders"
    >
      <div class="column justify-center text-h5" style="min-height: 36px">
        {{ $t('envelopes.label') }}
      </div>
    </div>
    <div class="bg-white rounded-borders">
      <BaseTable
        :columns="columns"
        :data="envelopesRecords"
        :loading="envelopesLoading"
        :pagination="{ rowsPerPage: 100 }"
        :title="$t('envelopes.listAllMessage')"
        :visible-columns="visibleColumns"
        @requestTable="init"
        @update="init"
        saveQuery
      >
        <template v-slot:body-item-title="props">
          <span
            @click="rowsHandler(props.row)"
            style="cursor: pointer"
            class="row items-center no-wrap"
          >
            <q-badge
              v-if="!props.row.checked"
              rounded
              color="red-6"
              class="q-mr-xs"
              >!</q-badge
            >
            {{ props.row.title }}
          </span>
        </template>
        <template v-slot:body-item-linkOnTemplate="props">
          <q-icon
            v-if="
              props.row.hasOwnProperty('messageContext') &&
              props.row.messageContext.hasOwnProperty('notificationId')
            "
            name='open_in_new'
            size='20px'
            @click='goTo(props.row.messageContext.notificationId)'
          />
          <span v-else>Отсутствует ID</span>
        </template>
      </BaseTable>
      <q-dialog v-model="model.dialog.value">
        <q-card>
          <q-card-section>
            <div class="text-h6">
              {{
                model.dialog.envelope && model.dialog.envelope.title
                  ? model.dialog.envelope.title
                  : $t('envelopes.dialog.title')
              }}
            </div>
          </q-card-section>

          <q-separator />

          <q-card-section style="max-height: 50vh" class="scroll">
            <div
              v-if="model.dialog.envelope"
              v-html="
                get(model, 'dialog.envelope.body') ||
                $t('envelopes.dialog.empty')
              "
            />
          </q-card-section>

          <q-separator />

          <q-card-actions align="right">
            <q-btn
              flat
              :label="$t('envelopes.delete')"
              color="negative"
              @click="deleteEnvelope(model.dialog.envelope.id)"
            />
            <q-btn
              v-close-popup
              flat
              :label="$t('envelopes.close')"
              color="primary"
            />
          </q-card-actions>
        </q-card>
      </q-dialog>
    </div>
  </div>
</template>

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