<template>
  <div v-if="myrec && 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">
          <div class="">
            <q-btn
              flat
              round
              color="red"
              :icon="userStore.isFavorite(myrec._id, table) ?  'favorite' : 'far fa-heart'"
              @click="clicca(costanti.TIPOFAVBOOK.FAVORITE, true, '')"
            >
              <q-badge
                v-if="myrec.myfav"
                color="primary"
                :label="myrec.myfav.length"
                floating
                transparent
              />
            </q-btn>
          </div>
          <div class="">
            <q-btn
              flat
              round
              color="teal"
              :icon="userStore.isBookmarked(myrec._id, table) ?  'bookmark' : 'far fa-bookmark'"
              @click="clicca(costanti.TIPOFAVBOOK.BOOKMARK, true, '')"
            >
              <q-badge
                v-if="myrec.mybook"
                color="primary"
                :label="myrec.mybook.length"
                floating
                transparent
              />
            </q-btn>
          </div>
          <div>
            <q-btn
              flat
              round
              color="primary"
              icon="share"
              @click="tools.copyToClip($q, getlinkpage(), true)"
            />
          </div>
          <div>
            <q-btn flat round icon="fas fa-ellipsis-h">
              <q-menu>
                <q-list v-if="true" style="min-width: 200px">
                  <q-item
                    v-if="myrec.profile.username_telegram"
                    clickable
                    v-close-popup
                  >
                    <q-item-section avatar>
                      <q-icon color="blue" name="far fa-comment" />
                    </q-item-section>
                    <q-item-section>
                      <a :href="tools.getHttpForTelegram(myrec.profile.username_telegram)" target="_blank">{{ $t('dialog.contact') }} - {{tools.getNomeUtenteByRecUser(myrec)}}</a>
                    </q-item-section>
                  </q-item>
                  <q-item
                    v-if="!nopopup"
                    clickable
                    v-close-popup
                    @click="naviga(tools.getPathByTableAndRec(table, myrec))"
                  >
                    <q-item-section avatar>
                      <q-icon color="blue" name="fas fa-globe" />
                    </q-item-section>
                    <q-item-section>
                      {{ $t('event.openpage') }}
                    </q-item-section>
                  </q-item>
                  <q-separator />
                  <q-item
                    clickable
                    v-close-popup
                    @click="
                      clicca(
                        costanti.TIPOFAVBOOK.FAVORITE,
                        false,
                        $t('cmd.favorite', {num: myrec.myfav ? myrec.myfav.length : 0})
                      )
                    "
                  >
                    <q-item-section avatar>
                      <q-icon color="red" name="favorite" />
                    </q-item-section>
                    <q-item-section>
                      {{ $t('cmd.favorite', {num: myrec.myfav ? myrec.myfav.length : 0}) }}
                    </q-item-section>
                  </q-item>
                  <q-item
                    clickable
                    v-close-popup
                    @click="
                      clicca(
                        costanti.TIPOFAVBOOK.BOOKMARK,
                        false,
                        $t('cmd.bookmark', {num: myrec.mybook ? myrec.mybook.length : 0})
                      )
                    "
                  >
                    <q-item-section avatar>
                      <q-icon color="teal" name="bookmark" />
                    </q-item-section>
                    <q-item-section>
                      {{ $t('cmd.bookmark', {num: myrec.mybook ? myrec.mybook.length : 0}) }}
                    </q-item-section>
                  </q-item>
                </q-list>
              </q-menu>
            </q-btn>
          </div>
        </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 v-if="myrec.typeHosp" class="text-bold text-h7">
                <q-chip dense color="green" text-color="white"
                  >{{ getTypeHosps() }}
                </q-chip>
              </q-item-label>

              <q-item-label class="text-bold text-h7">{{
                myrec.descr
              }}</q-item-label>
            </q-item-section>
          </q-item>

          <q-item v-if="myrec.dateTimeStart">
            <q-item-section avatar>
              <q-icon color="green" name="far fa-calendar-alt" />
            </q-item-section>

            <q-item-section>
              <q-item-label>
                <span>{{tools.getstrDateMonthTimeLong(myrec.dateTimeStart)}}</span>
              </q-item-label>
            </q-item-section>
          </q-item>
          <q-item v-if="myrec.dateTimeEnd">
            <q-item-section avatar>
              <q-icon color="red" name="far fa-calendar-alt" />
            </q-item-section>

            <q-item-section>
              <q-item-label>
                <span>{{tools.getstrDateMonthTimeLong(myrec.dateTimeEnd)}}</span>
              </q-item-label>
            </q-item-section>
          </q-item>

          <q-item v-if="getSectorByRec(myrec)">
            <q-item-section avatar>
              <q-icon color="blue" name="category" />
            </q-item-section>

            <q-item-section>
              <q-item-label>
                <q-chip
                  v-if="getSectorByRec(myrec) && getSectorByRec(myrec)[0].descr"
                  class="glossy"
                  color="blue"
                  text-color="white"
                  dense
                >
                  <span class="cal__quota-content">{{
                    getSectorByRec(myrec)[0].descr
                  }}</span>
                </q-chip>
                <q-chip
                  v-if="
                    getRecGoodSkillByRec(myrec) &&
                    getRecGoodSkillByRec(myrec).length > 0 &&
                    getRecGoodSkillByRec(myrec)[0].descr
                  "
                  class="glossy"
                  dense
                  color="blue"
                  text-color="white"
                >
                  <span class="cal__quota-content">{{
                    getRecGoodSkillByRec(myrec)[0].descr
                  }}</span>
                </q-chip>
              </q-item-label>
            </q-item-section>
          </q-item>
          <q-item v-if="myrec.numMaxPeopleHosp" class="q-mt-sm">
            <q-item-section avatar>
              <q-icon color="blue" name="fas fa-users" />
            </q-item-section>
            <q-item-section>
              <q-item-label class="q-px-xs q-ma-xs">
                <span class="accom_maxosp">{{ myrec.numMaxPeopleHosp }}</span
                >{{ t('hosps.numMaxPeopleHosp') }}
              </q-item-label>
            </q-item-section>
          </q-item>
          <q-item v-if="!!myrec.accomodation && myrec.accomodation.length > 0">
            <q-item-section avatar>
              <q-icon color="orange" name="fas fa-bed" />
            </q-item-section>
            <q-item-section>
              <q-item-label>
                <CAccomodation
                  v-if="!!myrec.accomodation"
                  :mylist="myrec.accomodation"
                  :isInModif="false"
                  :edit="false"
                  :canModify="false"
                >
                </CAccomodation>
              </q-item-label>
            </q-item-section>
          </q-item>
          <q-item v-if="!!myrec.preferences && myrec.preferences.length > 0">
            <q-item-section avatar>
              <q-icon color="red" name="fas fa-asterisk" />
            </q-item-section>
            <q-item-section>
              <q-item-label>
                <CMyChipList
                  :rec="myrec"
                  :type="costanti.FieldType.multiselect"
                  :value="myrec.preferences"
                  :options="
                    globalStore.getTableJoinByName(
                      toolsext.TABPREF,
                      false,
                      false,
                      null
                    )
                  "
                  :optval="fieldsTable.getKeyByTable(toolsext.TABPREF)"
                  :optlab="fieldsTable.getLabelByTable(toolsext.TABPREF)"
                  :opticon="fieldsTable.getIconByTable(toolsext.TABPREF)"
                ></CMyChipList>
              </q-item-label>
            </q-item-section>
          </q-item>
          <q-separator />
          <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 clickable v-if="myrec.link_maplocation">
            <q-item-section avatar>
              <q-icon color="blue" name="fas fa-map-marker-alt" />
            </q-item-section>

            <q-item-section>
              <q-item-label lines="1">
                <span
                  v-html="
                    tools.getlinkhref(myrec.link_maplocation, 'Apri Mappa')
                  "
              /></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 || nopopup"
          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
            v-if="!nopopup"
            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 && !nopopup"
        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
          v-if="!nopopup"
          rounded
          outline
          :label="$t('dialog.close')"
          color="primary"
          icon="close"
          v-close-popup
        />
      </div>
    </div>
  </div>
  <q-dialog v-model="usersList.show">
    <q-card class="dialog_card">
      <q-toolbar class="bg-primary text-white">
        <q-toolbar-title>
          {{ usersList.title }}
        </q-toolbar-title>
        <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
      </q-toolbar>

      <q-card-section class="inset-shadow">
        <div v-for="(rec, i) in usersList.list" :key="i">
          <CMyUser
            :mycontact="rec"
            :visu="costanti.FIND_PEOPLE"
            @setCmd="tools.setCmd"
          >
          </CMyUser>
        </div>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

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

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

