<template>
  <div>
    <div v-if="visustat">
      <CTitleBanner
        class="q-pa-xs"
        :title="$t('pages.status')"
        bgcolor="bg-primary"
        clcolor="text-white"
        mystyle=""
        myclass="sfondo_gradiente_blu myshad"
        :canopen="true"
      >
        <div class="flex flex-center">
          <CElemStat
            myclass="fixed-size"
            :title="$t('statusreg.reg')"
            icon="fas fa-users"
            :value_today="datastat.num_reg_today"
            :mytextval="
              datastat.activeusers + ' su ' + tools.numtostr(datastat.num_reg)
            "
            classColor="text-red"
            colBack="green"
          >
          </CElemStat>
          <CElemStat
            v-if="true"
            myclass="fixed-size"
            :title="$t('statusreg.online_today')"
            icon="fas fa-wifi"
            :mytextval="datastat.online_today"
            classColor="text-orange"
            colBack="yellow"
          >
          </CElemStat>
          <CElemStat
            myclass="fixed-size"
            v-f="datastat.num_annunci > 0"
            :title="$t('statusreg.num_annunci')"
            icon="fas fa-tshirt"
            :value_today="0"
            :mytextval="tools.numtostr(datastat.num_annunci)"
            classColor="text-green"
            colBack="orange"
          >
          </CElemStat>
          <CElemStat
            myclass="fixed-size"
            v-f="datastat.num_circuiti_attivi > 0"
            :title="$t('statusreg.num_circuiti_attivi')"
            icon="fas fa-map-marker-alt"
            :value_today="0"
            :mytextval="
              datastat.num_circuiti_attivi + ' su ' + datastat.num_circuiti
            "
            classColor="text-blue"
            colBack="red"
          >
          </CElemStat>
          <CElemStat
            myclass="fixed-size"
            v-f="datastat.num_transaz_tot > 0"
            :title="$t('statusreg.numtransazioni')"
            icon="fas fa-sync-alt"
            :value_today="0"
            :mytextval="tools.numtostr(datastat.num_transaz_tot)"
            classColor="text-indigo"
            colBack="green"
          >
          </CElemStat>
          <CElemStat
            myclass="fixed-size"
            v-f="datastat.tot_RIS_transati > 0"
            :title="$t('statusreg.totristransati')"
            icon="img: images/1ris_rosso_100.png"
            :value_today="0"
            :mytextval="tools.numtostr(datastat.tot_RIS_transati) + ' RIS'"
            classColor="text-blueviolet"
            colBack="green"
          >
          </CElemStat>

          <!--<CCardState :mytext="$t('statusreg.autorizzare')" :myval="datastat.num_autorizzare"
                      mycolor="yellow" :myperc="(datastat.num_autorizzare / datastat.num_teleg_attivo) * 100"></CCardState>
                      -->

          <div class="q-pa-xs" v-if="datastat.num_part_accepted > 1">
            <CCardStat
              :mytext="$t('stat.accepted')"
              :myval="datastat.num_part_accepted"
            ></CCardStat>
            <!--<CCardStat :mytext="$t('stat.modalita_pagamento')"
                       :myval="datastat.num_modalita_pagamento"></CCardStat>-->
            <!--<CCardStat :mytext="$t('stat.requisiti')" :myval="datastat.num_requisiti"></CCardStat>-->
            <!--<CCardStat :mytext="$t('stat.qualificati')" :myval="datastat.num_qualificati"></CCardStat>-->
            <!--<CCardStat v-if="emailnonverif" :mytext="$t('stat.email_not_verif')" :myval="emailnonverif"
                       mycol="negative"></CCardStat>
            <CCardStat v-if="telegnonattivi" :mytext="$t('stat.telegram_non_attivi')"
                       :myval="telegnonattivi"
                       mycol="negative"></CCardStat>
            <CCardStat v-if="datastat.num_teleg_pending > 0" :mytext="$t('stat.telegram_pendenti')"
                       :myval="datastat.num_teleg_pending" mycol="negative"></CCardStat>-->
          </div>

          <q-list bordered>
            <q-expansion-item
              group="somegroup"
              icon="fas fa-user-plus"
              :label="$t('statusreg.newreg')"
              default-opened
              header-class="text-primary"
            >
              <q-card>
                <q-card-section>
                  <div class="q-pa-md" style="max-width: 350px; margin: auto">
                    <transition-group
                      name="fade"
                      mode="out-in"
                      appear
                      enter-active-class="animazione fadeIn"
                      leave-active-class="animazione fadeOut"
                    >
                      <q-item
                        v-for="(user, index) in lastsreg"
                        :key="index"
                        class="animated chip_shadow q-ma-sm"
                        v-ripple
                        clickable
                        @click="gotoPage(`/my/${user.username}`)"
                      >
                        <q-item-section avatar>
                          <q-avatar round size="48px">
                            <img :src="userStore.getImgByProfile(user)" />
                            <q-badge
                              v-if="tools.isUserOnline(user)"
                              align="top"
                              floating
                              color="green"
                              >online</q-badge
                            >
                          </q-avatar>
                        </q-item-section>
                        <q-item-section class="">
                          <q-item-label>
                            {{ tools.getNameToShow(user, null, {showprov: true, html: true}) }}
                          </q-item-label>
                          <q-item-label caption>{{
                            tools.getUserNameOnlyIfToShow(user, null, {showprov: true, html: true})
                          }}</q-item-label>
                          <q-item-label class="iscritto_da">
                            {{ t('statusreg.invite_by') }}:
                            <span class="iscritto_da_name">{{
                              tools.getNameToShow(user.user_aportador)
                            }}</span>
                          </q-item-label>
                        </q-item-section>
                        <q-item-section side>
                          <q-item-label style="color: white">{{
                            tools.getstrshortDate(user.date_reg)
                          }}</q-item-label>
                        </q-item-section>
                      </q-item>
                    </transition-group>
                  </div>
                </q-card-section>
              </q-card>
            </q-expansion-item>

            <q-separator />

            <q-expansion-item
              expand-separator
              group="somegroup"
              icon="fas fa-medal"
              :label="$t('statusreg.lastsharedlink')"
              header-class="text-purple"
            >
              <div>
                <div class="text-center text-bold text-h6">Unisciti a RISO</div>
                <div class="text-center">
                  Se ancora non sei registrato a RISO, scegli un invitante che
                  conosci. Questa persona dovrà ammetterti per permetterti di
                  accedere alle funzionalità.
                </div>
              </div>

              <q-item
                v-for="(user, index) in lastssharedlink"
                :key="index"
                class="animated chip_shadow q-ma-sm"
                clickable
                v-ripple
                @click="gotoPage(`/registrati/${user.user_aportador.username}`)"
              >
                <q-item-section avatar>
                  <q-avatar round size="48px">
                    <img
                      :src="userStore.getImgByProfile(user.user_aportador)"
                    />
                  </q-avatar>
                </q-item-section>
                <q-item-section class="">
                  <q-item-label>
                    {{ tools.getNameToShow(user.user_aportador, null, {showprov: true, html: true}) }}
                  </q-item-label>
                  <q-item-label caption>{{
                    tools.getUserNameOnlyIfToShow(user.user_aportador, null, {showprov: true, html: true})
                  }}</q-item-label>
                  <q-item-label class="iscritto_da">
                    {{ t('statusreg.has_invited') }}:
                    <span class="iscritto_da_name">{{
                      tools.getNameToShow(user)
                    }}</span>
                  </q-item-label>
                </q-item-section>
                <q-item-section side
                  ><span class="text-h6 q-mr-sm"></span
                ></q-item-section>
              </q-item>
            </q-expansion-item>

            <q-expansion-item
              group="somegroup"
              icon="fas fa-wifi"
              :label="
                $t('statusreg.onlineusers', { today: datastat.online_today })
              "
              header-class="text-teal"
            >
              <q-card>
                <q-card-section>
                  <div class="q-pa-md" style="max-width: 350px; margin: auto">
                    <q-list bordered>
                      <transition-group
                        name="fade"
                        mode="out-in"
                        appear
                        enter-active-class="animazione fadeIn"
                        leave-active-class="animazione fadeOut"
                      >
                        <q-item
                          v-for="(user, index) in lastsonline"
                          :key="index"
                          class="animated chip_shadow q-ma-sm"
                          clickable
                          v-ripple
                          @click="gotoPage(`/my/${user.username}`)"
                        >
                          <q-item-section avatar>
                            <q-avatar round size="48px">
                              <img :src="userStore.getImgByProfile(user)" />
                              <q-badge
                                v-if="tools.isUserOnline(user)"
                                align="top"
                                floating
                                color="green"
                                >online</q-badge
                              >
                            </q-avatar>
                          </q-item-section>
                          <q-item-section class="">
                            <q-item-label
                              >{{ tools.getNameToShow(user, null, {showprov: true, html: true}) }}
                            </q-item-label>
                            <q-item-label caption>{{
                              tools.getUserNameOnlyIfToShow(user, null, {showprov: true, html: true})
                            }}</q-item-label>
                          </q-item-section>
                          <q-item-section side>
                            <div
                              :class="
                                `text-h6 q-mr-sm text-bold ` + $q.dark.isActive
                                  ? `text-white`
                                  : `text-black`
                              "
                            >
                              <CTimeAgo :datetime="user.lasttimeonline" />
                            </div>
                          </q-item-section>
                        </q-item>
                      </transition-group>
                    </q-list>
                  </div>
                </q-card-section>
              </q-card>
            </q-expansion-item>

            <q-separator />

            <q-expansion-item
              v-if="false"
              expand-separator
              group="somegroup"
              icon="fas fa-medal"
              :label="$t('statusreg.diffusori')"
              header-class="text-purple"
            >
              <q-card>
                <q-card-section>
                  <div class="q-pa-md" style="max-width: 350px; margin: auto">
                    <div class="text-center text-bold text-h6">
                      Aiuta RISO a crescere
                    </div>
                    <div class="text-center">
                      Condividi il tuo link d'invito, alimentando nuovi ingressi
                      alla RETE Solidale di RISO.
                    </div>
                    <q-list bordered>
                      <transition-group
                        name="fade"
                        mode="out-in"
                        appear
                        enter-active-class="animazione fadeIn"
                        leave-active-class="animazione fadeOut"
                      >
                        <q-item
                          v-for="(user, index) in diffusorilist"
                          :key="index"
                          class="animated chip_shadow q-ma-sm"
                          clickable
                          v-ripple
                          @click="gotoPage(`/my/${user.username}`)"
                        >
                          <q-item-section avatar>
                            <q-avatar round size="48px">
                              <img :src="userStore.getImgByProfile(user)" />
                              <q-badge
                                v-if="tools.isUserOnline(user)"
                                align="top"
                                floating
                                color="green"
                                >online</q-badge
                              >
                            </q-avatar>
                          </q-item-section>
                          <q-item-section class="">
                            <q-item-label overline>
                              <div class="index_diffusore">
                                {{ index + 1 }}°
                              </div>
                            </q-item-label>
                            <q-item-label>
                              {{ tools.getNameToShow(user, null, {showprov: true, html: true}) }}
                            </q-item-label>
                            <q-item-label caption>{{
                              tools.getUserNameOnlyIfToShow(user, null, {showprov: true, html: true})
                            }}</q-item-label>
                          </q-item-section>
                          <q-item-section side
                            ><div
                              :class="
                                `text-h6 q-mx-sm q-px-sm text-bold ` +
                                ($q.dark.isActive ? `text-white` : `text-black`)
                              "
                            >
                              {{ user.count }}
                            </div></q-item-section
                          >
                        </q-item>
                      </transition-group>
                    </q-list>
                  </div>
                </q-card-section>
              </q-card>
            </q-expansion-item>

            <q-separator />

            <q-expansion-item
              group="somegroup"
              icon="fas fa-handshake"
              :label="$t('handshake.last_strettedimano')"
              header-class="bg-teal text-white"
              expand-icon-class="text-white"
            >
              <q-card class="bg-teal-2">
                <q-card-section>
                  <div class="q-pa-md" style="max-width: 350px; margin: auto">
                    <div class="text-center text-bold text-h6">
                      Strette di Mano
                    </div>
                    <div class="text-center">
                      Più persone conoscerai di persona e maggiore aumenterà la
                      Rete di fiducia.
                    </div>
                    <q-list bordered>
                      <transition-group
                        name="fade"
                        mode="out-in"
                        appear
                        enter-active-class="animazione fadeIn"
                        leave-active-class="animazione fadeOut"
                      >
                        <q-item
                          v-for="(user, index) in strettelist"
                          :key="index"
                          class="animated chip_shadow q-ma-sm"
                          clickable
                          v-ripple
                        >
                          <q-item-section avatar>
                            <q-avatar
                              round
                              size="48px"
                              @click="gotoPage(`/my/${user.username}`)"
                            >
                              <img :src="userStore.getImgByProfile(user)" />
                              <q-badge
                                v-if="tools.isUserOnline(user)"
                                align="top"
                                floating
                                color="green"
                                >online</q-badge
                              >
                            </q-avatar>
                          </q-item-section>
                          <q-item-section class="">
                            <q-item-label class="clDateStrette">
                              {{
                                tools.getstrDateTimeLong(
                                  user.profile.handshake.date
                                )
                              }}</q-item-label
                            >
                            <q-item-label>
                              {{ tools.getNameToShow(user, null, {showprov: true, html: true}) }}
                            </q-item-label>

                            <q-item-label style="text-align: right">
                              {{ tools.getNameToShow(user.userfriend, null, {showprov: true, html: true}) }}
                              </q-item-label
                            >
                          </q-item-section>
                          <q-item-section side>
                            <q-avatar
                              round
                              size="48px"
                              @click="
                                gotoPage(`/my/${user.userfriend.username}`)
                              "
                            >
                              <img
                                :src="
                                  userStore.getImgByProfile(user.userfriend)
                                "
                              />
                              <q-badge
                                v-if="tools.isUserOnline(user.userfriend)"
                                align="top"
                                floating
                                color="green"
                                >online</q-badge
                              >
                            </q-avatar>
                          </q-item-section>
                        </q-item>
                      </transition-group>
                    </q-list>
                  </div>
                </q-card-section>
              </q-card>
            </q-expansion-item>
          </q-list>

          <!--<CGeoChart :mydata="datastat.arr_nations">

          </CGeoChart>-->

          <div class="row q-pa-sm text-center justify-center">
            <!--
            <div class="clBorderZoom">
              <CListNationality :mydata="datastat.arr_nations">

              </CListNationality>
            </div>-->
            <div class="clBorderTutor">
              <CLineChart
                :mydata="datastat.reg_daily"
                :title="$t('stat.reg_daily')"
                color="blue"
                bordercolor="blue"
                :sum="true"
                :showMedia="true"
              >
              </CLineChart>

              <!--<CLineChart :mydata="datastat.reg_daily" :title="$t('stat.reg_total')"
                          :offset="datastat.numreg_untilday" :sum="true"
                          :mycolors="['#0b0', '#666']">

              </CLineChart>-->
            </div>
          </div>
        </div>
      </CTitleBanner>
    </div>
  </div>
</template>

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

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