<template>
  <div v-if="!tools.isLogged()">
    <CCheckIfIsLogged></CCheckIfIsLogged>
  </div>

  <q-card class="dialog_card q-mb-lg" v-if="myrec">
    <q-footer
      :class="($q.dark.isActive ? `bg-black` : `bg-white`) + ` small-screen-only text-center`"
      bordered
    >
      <q-btn push rounded color="primary" icon="close" label="Chiudi" v-close-popup></q-btn>

    </q-footer>
    <q-bar dense class="bg-primary text-white">
      {{ myrec.name }} ({{ myrec.subname }})
      <q-space/>
      <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
    </q-bar>
    <q-card-section class="inset-shadow">
      <!-- Per ora visualizzo solo la Prima Immagine -->
      <div class="text-center">

        <q-img
          v-if="tools.getValue(myrec, 'photos', '')"
          :src="tools.getFullFileName(tools.getValue(myrec, 'photos', ''), table, userStore.my.username, myrec.path)"
          class="img"
          alt="immagine del circuito"></q-img>
      </div>

      <!--:title="t(mycol.label_trans)"-->

      <div v-for="(mycol, index) of col" :key="index">
        <div
          v-if="(mycol.visible && (tools.checkIfShowField(mycol, tools.TIPOVIS_SHOW_RECORD, false, tools.getValue(myrec, mycol.field, mycol.subfield))))">
          <div v-if="mycol.fieldtype === costanti.FieldType.html && tools.getValue(myrec, mycol.field, mycol.subfield)">
            <div class="note-bacheca"
                 v-html="tools.getValue(myrec, mycol.field, mycol.subfield)">

            </div>
          </div>
          <div v-else-if="mycol.name === 'descr'">
            <div class="text-bacheca">
              {{ tools.getValue(myrec, mycol.field, mycol.subfield) }}
            </div>
          </div>
          <div v-else-if="mycol.name === 'path'">

          </div>
          <div v-else-if="mycol.name === 'symbol'">

            <div class="text-bacheca text-white">
              Simbolo:
              {{ tools.getValue(myrec, mycol.field, mycol.subfield) }}
            </div>

          </div>
          <div v-else-if="mycol.name === 'longdescr'">
            <div class="text-bacheca text-black">
              {{ tools.getValue(myrec, mycol.field, mycol.subfield) }}
            </div>
          </div>
          <div v-else-if="mycol.name === 'photos' && myrec.photos && myrec.photos.length <= 1">
          </div>
          <div v-else-if="mycol.name === 'admins'">
            <CMyFieldRec
              title="Amministratori:"
              :table="table"
              :id="myrec._id"
              :rec="myrec"
              :field="mycol.field"
              :canEdit="false"
              :canModify="false">
            </CMyFieldRec>

          </div>
          <CMyFieldRec
            v-else
            :table="table"
            :id="myrec._id"
            :rec="myrec"
            :field="mycol.field"
            :canEdit="false"
            :canModify="false">
          </CMyFieldRec>
        </div>
      </div>

      <div class="row q-ma-sm q-pa-sm justify-center">
        <div class="q-ma-sm">
          <q-btn
            icon="far fa-file-alt" label="Apri" color="primary" text-color="white"
            :to="tools.getToByCol(col, table, myrec)"
          />
        </div>
        <div class="q-ma-sm">
          <q-btn
            v-if="myrec._id"
            :text-color="$q.dark.isActive ? `white` : `black`" icon="fas fa-link"
            label="Condividi"
            @click="condividipag"></q-btn>
        </div>
      </div>

      <br><br>
    </q-card-section>

  </q-card>
</template>

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

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

