<template>
  <div v-if="myrec._id">
    <div class="q-pa-sm row items-start q-gutter-sm">
      <q-card class="my-card" bordered>
        <q-img
          v-if="myrec.photos.length > 0"
          :src="myrec.photos[0].imagefile"
          class="imgautosize"
          :alt="myrec.descr">
        </q-img>
        <q-card-actions align="right">
          <q-btn flat round :color="userStore.isFavorite(myrec._id, table) ? 'red' : ''" icon="favorite" @click="userStore.setFavorite($q, t, myrec._id, shared_consts.TABMYSKILLS)" />
          <q-btn flat round :color="userStore.isBookmarked(myrec._id, table) ? 'teal' : ''" icon="bookmark" @click="userStore.setBookmark($q, t, myrec._id, shared_consts.TABMYSKILLS)"/>
          <q-btn
            flat
            round
            color="primary"
            icon="share"
            @click="tools.copyToClip($q, getlinkpage(), true)"
          />
        </q-card-actions>
        <q-separator />

        <q-list>
          <q-item clickable>
            <q-item-section avatar>
              <div v-if="showBadge()" class="text-center">
                <q-chip
                  dense
                  :color="fieldsTable.getColByAdType(myrec.adType)"
                  text-color="white"
                  >{{
                    fieldsTable.getValByTabAndId(table, 'adType', myrec.adType)
                  }}
                </q-chip>
              </div>
            </q-item-section>

            <q-item-section>
              <q-item-label class="text-bold text-h7">{{
                myrec.descr
              }}</q-item-label>
            </q-item-section>
          </q-item>
          <q-item>
            <q-item-section avatar>
              <q-icon color="blue" name="category" />
            </q-item-section>

            <q-item-section>
              <q-item-label>
                <q-chip
                  v-if="myrec.sector && myrec.sector[0].descr"
                  class="glossy"
                  color="blue"
                  text-color="white"
                  dense
                >
                  <span class="cal__quota-content">{{
                    myrec.sector[0].descr
                  }}</span>
                </q-chip>
                <q-chip
                  v-if="myrec.recSkill.length > 0 && myrec.recSkill[0].descr"
                  class="glossy"
                  dense
                  color="blue"
                  text-color="white"
                >
                  <span class="cal__quota-content">{{
                    myrec.recSkill[0].descr
                  }}</span>
                </q-chip>
              </q-item-label>
            </q-item-section>
          </q-item>
          <q-item-label v-if="myrec.note"
            ><div v-html="myrec.note" class="clBorderService"></div
          ></q-item-label>

          <q-card class="my-card clBorderUser" bordered>
            <CMyUser
              :mycontact="myrec"
              :visu="costanti.FIND_PEOPLE"
              @setCmd="tools.setCmd"
            >
            </CMyUser>
          </q-card>
          <q-item v-if="myrec.mycities[0].comune">
            <q-item-section avatar>
              <q-icon color="amber" name="fas fa-map-marker-alt" />
            </q-item-section>
            <q-item-section>
              <q-item-label>
                <span v-for="(city, index) in myrec.mycities" :key="index">
                  <span v-if="city.comune">
                    {{ city.comune }} ({{ city.prov }})</span
                  ><span v-if="myrec.mycities.length > 1"> - </span>
                </span>
              </q-item-label>
              <q-item-label v-if="myrec.profile.qualifica" caption>{{
                myrec.biografia
              }}</q-item-label>
            </q-item-section>
          </q-item>
          <q-item clickable v-if="myrec.website">
            <q-item-section avatar>
              <q-icon color="blue" name="fas fa-globe" />
            </q-item-section>

            <q-item-section>
              <q-item-label>{{ myrec.website }}</q-item-label>
            </q-item-section>
          </q-item>
          <q-item v-if="myrec.idContribType && myrec.idContribType.length > 0">
            <q-item-section avatar>
              <q-icon color="green" name="fas fa-hand-holding" />
            </q-item-section>

            <q-item-section>
              <q-item-label>
                <span
                  v-for="(reccontr, index) in myrec.idContribType"
                  :key="index"
                >
                  <q-chip
                    dense
                    :color="calendarStore.getColByContribType(reccontr)"
                    text-color="white"
                  >
                    {{ calendarStore.getContribtypeById(reccontr) }}
                  </q-chip>
                </span>
              </q-item-label>
            </q-item-section>
          </q-item>
          <q-item>
            <q-item-section avatar>
              <q-icon color="blue" name="far fa-edit" />
            </q-item-section>

            <q-item-section>
              <q-item-label
                ><span v-if="myrec.date_updated">{{
                  tools.getstrDateMonthLong(myrec.date_updated)
                }}</span
                ><span v-else>{{
                  tools.getstrDateMonthLong(myrec.date_created)
                }}</span></q-item-label
              >
            </q-item-section>
          </q-item>
          <q-item clickable v-if="false">
            <q-item-section avatar>
              <q-icon color="red" name="local_gas_station" />
            </q-item-section>

            <q-item-section>
              <q-item-label></q-item-label>
              <q-item-label caption>Fill your gas tank.</q-item-label>
            </q-item-section>
          </q-item>
        </q-list>
        <q-separator />
        <q-card-actions align="center">
          <q-btn
            v-if="myrec.profile.username_telegram"
            :label="$t('dialog.contact')"
            color="primary"
            icon="far fa-comment"
            target="_blank"
            :type="tools.isUserOk() ? 'a' : 'btn'"
            size="md"
            rounded
            :href="tools.isUserOk() ? tools.getHttpForTelegram(myrec.profile.username_telegram) : null"
          />
          <q-btn
            rounded
            outline
            :label="$t('dialog.close')"
            color="primary"
            icon="close"
            v-close-popup
          />
        </q-card-actions>
      </q-card>
    </div>
  </div>

  <q-card class="dialog_card q-mb-lg" v-if="myrec._id && false">
    <q-footer
      v-if="!nopopup"
      :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 v-if="!nopopup" dense class="bg-primary text-white">
      {{ myrec.username }}
      <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,
              myrec.username,
              myrec.groupname
            )
          "
          class="img"
          alt="immagine bene"
        ></q-img>
      </div>

      <div v-if="showBadge()" class="text-center">
        <q-chip
          :icon="fieldsTable.getIconByAdType(myrec.adType)"
          :color="fieldsTable.getColByAdType(myrec.adType)"
          text-color="white"
          >{{ fieldsTable.getValByTabAndId(table, 'adType', myrec.adType) }}
        </q-chip>
      </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">
            <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 === 'numMaxPeopleHosp'">
            <div class="text-bacheca">
              <span class="accom_maxosp">{{
                tools.getValue(myrec, mycol.field, mycol.subfield)
              }}</span
              >{{ t('hosps.numMaxPeopleHosp') }}
            </div>
          </div>
          <div
            v-else-if="mycol.name === 'dateTimeStart'"
            class="text-center cal"
          >
            <div v-if="myrec.dateTimeStart" class="cal__when">
              <span class="cal__where-title">{{ $t('cal.when') }}:</span>
              <span v-html="tools.getstrDateTimeEvent(t, myrec, true)"></span>
            </div>
            <!--
            <span class="dateevent" v-if="myrec.dateTimeStart">dal <span class="datainizio">{{
                tools.getstrVeryShortDate(myrec.dateTimeStart)
              }}</span> al <span class="datafine">{{ tools.getstrVeryShortDate(myrec.dateTimeEnd) }}</span>
            </span>--->
          </div>
          <div v-else-if="mycol.name === 'accomodation'">
            <CAccomodation
              v-if="!!myrec.accomodation"
              :mylist="myrec.accomodation"
              :isInModif="false"
              :edit="false"
              :canModify="false"
            >
            </CAccomodation>
          </div>
          <div v-else-if="mycol.name === 'dateTimeEnd'"></div>
          <CMyFieldRec
            v-else
            :table="table"
            :id="myrec._id"
            :rec="myrec"
            :field="mycol.field"
            :canEdit="false"
            :canModify="false"
          >
          </CMyFieldRec>
        </div>
      </div>

      <br />
      <div v-if="myrec.date_created" class="row justify-center">
        <span class="cal__where-title"> {{ $t('reg.pub_created') }}:</span>
        <span v-html="tools.getstrDate(myrec.date_created)"></span>
      </div>
      <div
        v-if="
          tools.getstrDate(myrec.date_updated) !==
          tools.getstrDate(myrec.date_created)
        "
        class="row justify-center"
      >
        <span class="cal__where-title"> {{ $t('reg.pub_updated') }}:</span>
        <span v-html="tools.getstrDate(myrec.date_updated)"></span>
      </div>

      <div v-if="!nopopup" 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 />
      myrec: {{ myrec }}
    </q-card-section>
  </q-card>
</template>

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

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

