<!--suppress ALL -->
<template>
  <div class="q-py-xs centermydiv cardrec" :style="{ maxWidth: computedWidth }">
    <div v-if="myrec && table === shared_consts.TABLES_MYBACHECAS">
      <div class="row">
        <div class="col-2 q-my-sm">
          <div class="column">
            <span class="ev_dayofweek">{{
              tools.getDayOfWeek(myrec.dateTimeStart)
            }}</span>
            <span class="ev_day">{{
              tools.getstrDay(myrec.dateTimeStart)
            }}</span>
            <span class="ev_month">{{
              tools.getstrMonth3Letters(myrec.dateTimeStart)
            }}</span>
            <span class="ev_hour">{{
              tools.getstrTime(myrec.dateTimeStart)
            }}</span>
            <span
              v-if="
                tools.getstrDay(myrec.dateTimeStart) ===
                tools.getstrDay(myrec.dateTimeEnd)
              "
              class="ev_hour_end"
              >{{ tools.getstrTime(myrec.dateTimeEnd) }}</span
            >
            <div
              v-if="
                tools.getstrDay(myrec.dateTimeStart) !==
                tools.getstrDay(myrec.dateTimeEnd)
              "
              class="q-mx-sm"
            >
              ------
            </div>
            <span
              v-if="
                tools.getstrDay(myrec.dateTimeStart) !==
                tools.getstrDay(myrec.dateTimeEnd)
              "
              class="ev_dayofweek"
              >{{ tools.getDayOfWeek(myrec.dateTimeEnd) }}</span
            >
            <span
              v-if="
                tools.getstrDay(myrec.dateTimeStart) !==
                tools.getstrDay(myrec.dateTimeEnd)
              "
              class="ev_day"
              >{{ tools.getstrDay(myrec.dateTimeEnd) }}</span
            >
            <span
              v-if="
                tools.getstrDay(myrec.dateTimeStart) !==
                tools.getstrDay(myrec.dateTimeEnd)
              "
              class="ev_month"
              >{{ tools.getstrMonth3Letters(myrec.dateTimeEnd) }}</span
            >
            <span
              v-if="
                tools.getstrDay(myrec.dateTimeStart) !==
                tools.getstrDay(myrec.dateTimeEnd)
              "
              class="ev_hour_end"
              >{{ tools.getstrTime(myrec.dateTimeEnd) }}</span
            >
            <q-avatar size="50px" class="q-my-sm">
              <q-img
                :src="getImgUser(myrec)"
                :alt="myrec.username"
                img-class="imgprofile"
                height="50px"
              />
            </q-avatar>
          </div>
        </div>
        <div class="col-10">
          <q-img
            :src="
              tools.getFullFileName(myrec.photos, table, myrec.username, '')
            "
            :alt="myrec.descr"
            img-class="imgprofile"
            height="270px"
            fit="cover"
            @click="cmdExt(costanti.CMD_SHOW_PAGE, null, myrec)"
          />
          <!--<div class="event_date">
            <span v-html="tools.getstrDateTimeEvent($t, myrec, true, true)"></span>
          </div>-->
        </div>
      </div>
    </div>
    <q-item
      v-if="myrec"
      clickable
      v-ripple
      :class="
        `shadow-2 butt_rounded ` +
        (tools.isPartecipero(myrec) ? ` butt_green ` : '')
      "
    >
      <q-item-section
        v-if="
          (shared_consts.TABLES_VISU_IMG.includes(table) &&
            myrec.photos &&
            myrec.photos.length > 0) ||
          (myrec.mygrp && myrec.mygrp.photos.length > 0)
        "
        avatar
        @click="cmdExt(costanti.CMD_SHOW_PAGE, null, myrec)"
      >
        <q-badge
          v-if="showBadge()"
          class="q-my-xs self-center"
          :color="fieldsTable.getColByAdType(myrec.adType)"
        >
          {{ fieldsTable.getValByTabAndId(table, 'adType', myrec.adType) }}
          <q-icon
            :name="fieldsTable.getIconByAdType(myrec.adType)"
            color="white"
            class="q-ml-xs"
          />
        </q-badge>

        <q-avatar size="60px">
          <q-img
            v-if="
              myrec.mygrp &&
              myrec.mygrp.groupname &&
              tools.getValue(myrec.mygrp, 'photos', '')
            "
            :src="
              tools.getFullFileName(
                tools.getValue(myrec.mygrp, 'photos', ''),
                'mygroups',
                myrec.username,
                myrec.groupname
              )
            "
            class="img"
            alt="immagine del gruppo"
          >
          </q-img>
          <q-img
            v-else
            :src="
              tools.getFullFileName(myrec.photos, table, myrec.username, '')
            "
            :alt="myrec.descr"
            img-class="imgprofile"
            height="60px"
          />
        </q-avatar>
      </q-item-section>

      <q-item-section
        v-else-if="!myrec.organisedBy && table !== shared_consts.TABLES_MYBACHECAS"
        avatar
        @click="naviga(`/my/` + myrec.username)"
      >
        <q-badge
          v-if="showBadge()"
          class="q-my-xs self-center"
          :color="fieldsTable.getColByAdType(myrec.adType)"
        >
          {{ fieldsTable.getValByTabAndId(table, 'adType', myrec.adType) }}
          <q-icon
            :name="fieldsTable.getIconByAdType(myrec.adType)"
            color="white"
            class="q-ml-xs"
          />
        </q-badge>
        <q-avatar size="60px">
          <q-img
            :src="getImgUser(myrec)"
            :alt="myrec.username"
            img-class="imgprofile"
            height="60px"
          />
        </q-avatar>
      </q-item-section>

      <q-item-section @click="navigaExt(myrec)">
        <q-item-label lines="2" class="full-width">
          <span
            v-for="(rec, ind) of tools.getArrSubSector(table, myrec)"
            :key="ind"
          >
            <q-chip
              dense
              class="text-center shadow-5 glossy text-white bg-green"
              >{{ rec.descr }}</q-chip
            >
          </span>
          <span>
            <span
              v-for="(rec, ind) of tools.getArrSector(table, myrec)"
              :key="ind"
            >
              <q-chip
                dense
                class="text-center shadow-5 glossy text-white bg-blue"
                >{{ rec.descr }}</q-chip
              ></span
            >
          </span>
          <span
            v-for="(recstatus, index) in myrec.idStatusSkill"
            :key="index"
            class="q-ml-xs"
            style="vertical-align: middle"
          >
            <q-badge
              v-if="
                recstatus === shared_consts.STATUSSKILL_ONLINE ||
                myrec.idStatusSkill.length > 1
              "
              dense
              :color="globalStore.getColByStatusSkills(recstatus)"
              text-color="white"
            >
              <q-icon
                :name="globalStore.getStatusSkillIconById(recstatus)"
                color="white"
              />&nbsp;
              {{ globalStore.getStatusSkillById(recstatus) }}
            </q-badge>
          </span>

          <!--<span class="dateevent" v-if="myrec.dateTimeStart">dal <span class="datainizio">{{tools.getstrVeryShortDate(myrec.dateStart) }}</span> al <span class="datafine">{{ tools.getstrVeryShortDate(myrec.dateEnd) }}</span>
          </span>-->
        </q-item-label>

        <q-item-label
          lines="4"
          :class="table === shared_consts.TABLES_MYBACHECAS ? 'text-bold' : ''"
          v-if="myrec.descr"
          >{{ myrec.descr }}<br />
        </q-item-label>
        <q-item-label lines="1" style="" class="text_user_city">
          <div class="row justify-between">
            <div class="text-weight-bold text-italic">
              <span
                v-if="
                  table === shared_consts.TABLES_MYBACHECAS && myrec.organisedBy
                "
              >
                <span>{{ myrec.organisedBy }} </span>
              </span>
              <span v-else>
                {{ getNameToShow(myrec) }}
              </span>
            </div>
            <div class="q-mx-sm">
              (
              <span
                v-if="
                  table === shared_consts.TABLES_MYBACHECAS &&
                  tools.getNumPartecipantes(myrec) > 0
                "
              >
                <span class="q-mx-xxs-left text-bold">{{
                  tools.getNumPartecipantes(myrec)
                }}</span>
                <span class="q-mx-xxs-left"
                  ><q-icon dense color="blue" name="far fa-check-circle" />
                </span>
              </span>
              <span class="q-mx-xxs-left">{{
                myrec.numseen ? myrec.numseen : 0
              }}</span>
              <span class="q-mx-xxs-left"
                ><q-icon dense color="blue" name="far fa-eye" />
              </span>
              <span class="q-mx-xxs-left">&nbsp;</span>
              <span class="" v-if="myrec">{{
                myrec.numfav ? myrec.numfav : 0
              }}</span>
              <span class="q-mx-xxs-left"
                ><q-icon
                  dense
                  color="red"
                  :name="
                    userStore.isFavorite(myrec._id, table)
                      ? 'favorite'
                      : 'far fa-heart'
                  "
                />
              </span>
              <!--<span class="q-mx-xxs">&nbsp;</span>
              <span class="">{{ myrec.mybook.length }}</span>
              <span class="q-mx-xxs"
                ><q-icon
                  dense
                  color="teal"
                  :name="
                    userStore.isBookmarked(myrec._id, table)
                      ? 'bookmark'
                      : 'far fa-bookmark'
                  "
                />
              </span>
              -->
              )
            </div>
          </div>
        </q-item-label>

        <q-item-label
          v-if="tools.isPartecipero(myrec)"
          lines="1"
          style="text-align: left"
          class="text_user_city"
        >
          <span class="text-bold text-green text-h7">
            <q-icon name="fas fa-user-check" color="green"></q-icon>
            {{ $t('event.attend') }}</span
          >
        </q-item-label>
        <q-item-label
          lines="1"
          style="text-align: right"
          class="text_user_city"
        >
          <span v-for="(rec, ind) of myrec.mycities" :key="ind"
            ><span v-if="ind > 0">, </span>{{ rec.comune }} ({{
              rec.prov
            }})</span
          >
        </q-item-label>
      </q-item-section>
      <q-item-section side v-if="tools.canModifyThisRec(myrec) || editOn">
        <q-item-label>
          <q-btn rounded dense icon="fas fa-pencil-alt">
            <q-menu>
              <q-list style="min-width: 150px">
                <q-item
                  clickable
                  v-close-popup
                  @click="cmdExt(costanti.CMD_MODIFY, myrec._id, null)"
                >
                  <q-item-section side>
                    <q-icon name="fas fa-pencil-alt" />
                  </q-item-section>
                  <q-item-section>{{ $t('reg.edit') }}</q-item-section>
                </q-item>
              </q-list>
              <q-list style="min-width: 150px">
                <q-item
                  clickable
                  v-close-popup
                  @click="cmdExt(costanti.CMD_CLONE, myrec._id, null)"
                >
                  <q-item-section side>
                    <q-icon name="fas fa-copy" />
                  </q-item-section>
                  <q-item-section>{{ $t('event.duplicate') }}</q-item-section>
                </q-item>
              </q-list>
              <q-list style="min-width: 150px">
                <q-item
                  clickable
                  v-close-popup
                  @click="cmdExt(costanti.CMD_DELETE, myrec._id, null)"
                >
                  <q-item-section side>
                    <q-icon name="fas fa-trash-alt" />
                  </q-item-section>
                  <q-item-section>{{ $t('reg.elimina') }}</q-item-section>
                </q-item>
              </q-list>
            </q-menu>
          </q-btn>
        </q-item-label>
      </q-item-section>
    </q-item>
    <q-separator inset="item" />
  </div>
</template>

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

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