<template>
  <div class="q-pa-sm row items-start q-gutter-sm">
    <q-card
      v-if="myrec"
      bordered
      :style="`width: ` + opt.widthcard + `; ` + (opt.heightcard ? `height: ` + opt.heightcard + `; ` : '')"
    >
      <!--<q-skeleton
        v-if="!myrec.foto_collana"
        type="QAvatar"
        :width="opt.widthcard"
        :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>
        <div
          class="q-mb-sm text-center text-bold"
          style="font-size: 1.15rem"
        >
          <a
            :href="pagina_collegata"
            target="_blank"
            >{{ myrec.title }}</a
          >
        </div>
        <div class="">
          <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()"
            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="collanestr"
            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"
            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"
            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"
            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"
            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"
            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()"
            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
        align="center"
        class="q-pa-none"
        style="position: absolute; bottom: 0; width: 100%"
      >
        <div class="row justify-center">
          <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"
          />
        </div>
      </q-card-actions>
    </q-card>
  </div>

  <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>
        </div>
        <div
          style="width: 300px"
          class="q-ma-sm"
        >
          <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>
