<template>
  <div v-if="myrec._id" class="fulldiv">
    <div class="q-pa-sm row items-start q-gutter-sm full-height fulldiv">
      <q-card class="my-card fulldiv" bordered>
        <CGalleryImages
          v-if="myrec.photos.length > 0"
          :imgGallery="myrec.photos"
          :directory="'upload/' + tools.getDirectoryGall(myrec, table, '')"
        >
        </CGalleryImages>

        <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, toolsext.TABMYGOODS)
            "
          />
          <q-btn
            flat
            round
            :color="userStore.isBookmarked(myrec._id, table) ? 'teal' : ''"
            icon="bookmark"
            @click="
              userStore.setBookmark($q, t, myrec._id, toolsext.TABMYGOODS)
            "
          />
          <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.sectorGood && myrec.sectorGood[0].descr"
                  class="glossy"
                  color="blue"
                  text-color="white"
                  dense
                >
                  <span class="cal__quota-content">{{
                    myrec.sectorGood[0].descr
                  }}</span>
                </q-chip>
                <q-chip
                  v-if="myrec.recGood.length > 0 && myrec.recGood[0].descr"
                  class="glossy"
                  dense
                  color="blue"
                  text-color="white"
                >
                  <span class="cal__quota-content">{{
                    myrec.recGood[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 lines="1">
                <span v-html="tools.getlinkhref(myrec.website, 'Visita il Sito Web')"
              /></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 />
        <div class="q-mb-xl"></div>
        <q-card-actions
          v-if="$q.screen.gt.sm"
          class="text-center justify-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
        v-if="!$q.screen.gt.sm"
        class="row absolute-bottom text-shadow custom-caption q-px-md buttons_bottom"
      >
        <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
        />
      </div>
    </div>
  </div>
</template>

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

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

