<template>
  <q-card
    v-if="myrec"
    bordered
    class="full-height flex flex-column justify-evenly"
    :style="`width: ` + opt.widthcard + `; ` + (opt.heightcard ? `height: ` + opt.heightcard + `;` : '')"
  >
    <q-img
      :width="opt.widthimg"
      @click="naviga(pagina_collegata)"
      :height="opt.heightimg"
      class="clickable-image"
      fit="cover"
      :src="tools.getFullFileName([myrec.foto_collana], table, '', myrec._id)"
    >
      <template v-slot:error>
        <div class="absolute-full flex flex-center text-white">immagine non impostata</div>
      </template>
      <!--<div class="text-h6 absolute-bottom text-left">
          {{ myrec.title }}
        </div>-->
    </q-img>

    <q-card-section class="q-px-sm" style="margin-top: 0; flex-grow: 0; align-self: flex-start;">

      <div
        class="q-mb-md text-center text-bold"
        style="font-size: 1.15rem"
      >
        <a
          :href="pagina_collegata"
          target="_blank"
          >{{ myrec.title }}</a
        >
      </div>
      <div class="q-px-md">
        <div class="text-caption text-h7 text-grey q-pb-xs">
          <q-icon name="fas fa-list-ol" /> {{ $t('cataloglist.numprodotti') }}:
          <span :class="`text-` + (numprodottistr === 0 ? 'red' : 'blue')">{{ numprodottistr }}</span>
        </div>
        <div
          v-if="!tools.isUtente() && dettagli"
          class="text-caption text-h7 text-grey q-pb-xs"
        >
          <q-icon name="fas fa-user" /> {{ $t('cataloglist.referenti') }}:
          <span
            v-if="myrec.referenti && myrec.referenti.length > 0"
            :class="`text-bold ` + myrec.referenti && myrec.referenti.length > 0 ? 'text-blue' : 'text-red'"
          >
            {{ myrec.referenti ? myrec.referenti.join(', ') : '' }}
          </span>
          <span v-else>
            <span class="text-red">[Nessuno]</span>
          </span>
        </div>
        <div
          v-if="!tools.isUtente() && collanestr && dettagli"
          class="text-caption text-h7 text-grey q-pb-xs"
        >
          <q-icon name="fas fa-book" /> {{ t('cataloglist.collane') }}:
          <span class="text-blue">{{ collanestr }}</span>
        </div>
        <div
          v-if="!tools.isUtente() && argomentistr && dettagli"
          class="text-caption text-h7 text-grey q-pb-xs"
        >
          <q-icon name="fas fa-book" /> {{ $t('cataloglist.argomenti') }}:
          <span class="text-blue">{{ argomentistr + ` (${numprodtot})` }}</span>
        </div>
        <div
          v-if="!tools.isUtente() && editorestr && dettagli"
          class="text-caption text-h7 text-grey q-pb-xs"
        >
          <q-icon name="fas fa-book-open" /> {{ $t('cataloglist.casaeditrice') }}:
          <span class="text-blue">{{ editorestr }}</span>
        </div>
        <div
          v-if="!tools.isUtente() && !esiste_descrintro && dettagli"
          class="text-caption text-h7 text-grey q-pb-xs"
        >
          <q-icon name="fas fa-pencil-alt" /> Testo descrittivo:
          <span :style="`color: ` + (esiste_descrintro ? 'green' : 'red')">{{
            esiste_descrintro ? 'Presente' : 'Mancante'
          }}</span>
        </div>
        <div
          v-if="!tools.isUtente() && !myrec.img_bordata?.imagefile && dettagli"
          class="text-caption text-h7 text-grey q-pb-xs"
        >
          <q-icon name="fas fa-image" /> Sfondo:
          <span :style="`color: ` + (myrec.img_bordata?.imagefile ? 'green' : 'red')">{{
            myrec.img_bordata?.imagefile ? 'Presente' : 'Mancante'
          }}</span>
        </div>
        <div
          v-if="!tools.isUtente() && !myrec.img_intro?.imagefile && dettagli"
          class="text-caption text-h7 text-grey q-pb-xs"
        >
          <q-icon name="fas fa-image" /> Copertina:
          <span :style="`color: ` + (myrec.img_intro?.imagefile ? 'green' : 'red')">{{
            myrec.img_intro?.imagefile ? 'Presente' : 'Mancante'
          }}</span>
        </div>
        <div
          v-if="myrec.pdf_generato"
          class="text-caption text-h7 text-blue q-pb-xs"
        >
          <q-icon name="fas fa-book" /> -
          <a
            :href="myrec.pdf_generato"
            target="_blank"
            >PDF Generato</a
          >
          (Data: {{ tools.getstrDate(myrec.data_generato) }})
        </div>
        <div
          v-if="!tools.isUtente() && dettagli"
          class="text-caption text-h7 text-grey q-pb-xs"
        >
          <q-icon name="fas fa-list" /> Lista generata il:
          <span :class="`text-` + (tools.isDateValid(myrec.data_lista_generata) ? 'blue' : 'red')"
            >{{ tools.getstrDate(myrec.data_lista_generata) || '(non ancora generata)' }} da
            {{ myrec.username_lista_generata }}
          </span>
        </div>
        <div
          v-if="myrec.pdf_online"
          class="text-caption text-h7 text-blue q-pb-xs"
        >
          <q-icon name="fas fa-book" /> -
          <a
            :href="myrec.pdf_online"
            target="_blank"
            >PDF ONLINE</a
          >
          (Data: {{ tools.getstrDate(myrec.data_online) }})
        </div>
      </div>
      <!--<div class="text-overline text-orange-9">{{collanestr}}</div>-->
    </q-card-section>



    <q-card-actions
      v-if="!tools.isUtente() && dettagli"
      align="center"
      class="q-mt-auto q-mx-auto q-mb-sm"
    >
      <q-fab
        color="primary"
        icon="fas fa-caret-down"
        label="Menu"
        direction="up"
        flat
        dense
      >
        <q-fab-action
          v-if="tools.canModifyThisRec(myrec, table) || tools.isManager() || editOn"
          @click="cmdExt(costanti.CMD_DELETE, myrec._id, null)"
          color="negative"
          :label="$t('reg.elimina')"
          icon="fas fa-trash-alt"
        />
        <!--<q-fab-action
              v-if="tools.canModifyThisRec(myrec, table) || tools.isManager() || editOn"
              @click="cmdExt(costanti.CMD_CLONE, myrec._id, null)"
              color="accent"
              :label="$t('event.duplicate')"
              icon="fas fa-copy"
            />-->
        <q-fab-action
          v-if="tools.canModifyThisRec(myrec, table) || editOn"
          :disable="!pagina_collegata"
          color="positive"
          label="Gestisci"
          icon="fas fa-book-open"
          @click="naviga(pagina_collegata)"
        />
        <q-fab-action
          v-if="tools.canModifyThisRec(myrec, table) || editOn"
          @click="cmdExt(costanti.CMD_MODIFY, myrec._id, null)"
          color="primary"
          :label="$t('reg.edit')"
          icon="fas fa-pencil-alt"
        />
      </q-fab>
      <q-btn
        flat
        color="primary"
        label="Info"
        icon="fas fa-info"
        @click="apriInfo = true"
      />
    </q-card-actions>
  </q-card>

  <q-dialog v-model="apriInfo">
    <q-card>
      <q-toolbar class="bg-primary text-white">
        <q-toolbar-title>
          {{ myrec.title }}
        </q-toolbar-title>
        <q-btn
          flat
          round
          color="white"
          label="CHIUDI"
          icon="close"
          v-close-popup
        ></q-btn>
      </q-toolbar>
      <q-card-section>
        <div class="row justify-center q-ma-sm q-pb-xs">
          <div
            style="width: 300px"
            class="q-ma-sm"
          >
            <CLabel
              :value="myrec.referenti && myrec.referenti.length > 0 ? myrec.referenti.join(', ') : '[Non Assegnato]'"
              :label="$t('cataloglist.referenti') + `:`"
              :color="myrec.referenti && myrec.referenti.length > 0 ? 'text-blue' : 'text-red'"
            />
          </div>
          <div
            v-if="collanestr"
            style="width: 300px"
            class="q-ma-sm"
          >
            <CLabel
              :value="collanestr"
              :label="$t('cataloglist.collane') + `:`"
            />
          </div>
          <div
            v-if="argomentistr"
            style="width: 300px"
            class="q-ma-sm"
          >
            <CLabel
              :value="argomentistr + ` (${numprodtot})`"
              :label="$t('cataloglist.argomenti') + `:`"
            />
          </div>
          <div
            style="width: 300px"
            class="q-ma-sm"
          >
            <CLabel
              :class_text="{ 'text-bold': true }"
              :value="esiste_descrintro ? 'PRESENTE ' : 'MANCANTE !'"
              label="Testo descrittivo"
              :color="esiste_descrintro ? 'green' : 'red'"
            />
          </div>
          <div
            style="width: 300px"
            class="q-ma-sm"
          >
            <CLabel
              :value="
                tools.getstrDate(myrec.data_lista_generata) + ' da ' + myrec.username_lista_generata ||
                'ancora non è stata generata'
              "
              label="Lista generata"
              :color="myrec.pdf_generato ? 'green' : 'red'"
            />
          </div>
          <CLabel
            :value="myrec.pdf_generato || 'ancora non è stato generato'"
            label="PDF generato"
            :color="myrec.pdf_generato ? 'green' : 'red'"
            :copy="true"
          />
          <CLabel
            :value="myrec.pdf_online || 'ancora non è andato ONLINE'"
            label="PDF On-Line Ufficiale"
            :color="myrec.pdf_online ? 'green' : 'red'"
            :copy="true"
          />
        </div>
      </q-card-section>
    </q-card>
    <q-card-actions align="center">
      <q-btn
        color="primary"
        label="Chiudi"
        @click="apriInfo = false"
      />
    </q-card-actions>
  </q-dialog>
</template>
<script lang="ts" src="./CMyRecCatalog.ts"></script>

<style lang="scss" scoped>
@import './CMyRecCatalog.scss';
</style>
