<template>
  <div>
    <div v-if="visustat">
      <CTitleBanner
        class="q-pa-xs"
        :title="$t('pages.status')"
        bgcolor="bg-primary"
        clcolor="text-white"
        mystyle=""
        myclass="myshad"
        :canopen="true"
      >
        <div class="flex flex-center">
          <CElemStat
            :title="$t('statusreg.reg')"
            icon="fas fa-users"
            :value_today="datastat.num_reg_today"
            :mytextval="datastat.num_reg"
            classColor="text-blue"
            colBack="green"
          >
          </CElemStat>

          <CElemStat
            :title="$t('statusreg.online_today')"
            icon="fas fa-wifi"
            :mytextval="datastat.online_today"
            classColor="text-green"
            colBack="red"
          >
          </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>

          <div class="column animazione">
            <q-tabs v-model="mytab" class="text-blue">
              <q-tab
                name="reg"
                :label="$t('statusreg.newreg')"
                icon="fas fa-user-plus"
              />
              <q-tab
                name="online"
                :label="$t('statusreg.onlineusers')"
                icon="fas fa-wifi"
              />
              <q-tab
                name="diffusori"
                :label="$t('statusreg.diffusori')"
                icon="fas fa-medal"
              />
              <q-tab
                name="strettelist"
                :label="$t('statusreg.strettelist')"
                icon="fas fa-handshake"
              />
            </q-tabs>

            <q-tab-panels v-model="mytab" animated>
              <q-tab-panel name="reg">
                <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"
                      v-ripple
                    >
                      <q-item-section>
                        <q-item-label lines="1">
                          <CMyFieldRec
                            table="users"
                            :id="user._id"
                            :rec="user"
                            field="username"
                            :canEdit="false"
                            :canModify="false"
                            :fieldtype="costanti.FieldType.username_chip"
                          >
                          </CMyFieldRec>
                        </q-item-label>
                      </q-item-section>

                      <q-item-section side>
                        <q-item-label>{{
                          tools.getstrDateTimeShort(user.date_reg)
                        }}</q-item-label>
                      </q-item-section>
                    </q-item>
                  </transition-group>
                </div>
              </q-tab-panel>
              <q-tab-panel name="online">
                <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)
                          }}</q-item-label>
                          <q-item-label caption>{{
                            tools.getUserNameOnlyIfToShow(user)
                          }}</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-tab-panel>
              <q-tab-panel name="diffusori">
                <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) }}</q-item-label
                          >
                          <q-item-label caption>{{
                            tools.getUserNameOnlyIfToShow(user)
                          }}</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-tab-panel>
              <q-tab-panel name="strettelist">
                <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
                        @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) }}</q-item-label
                          >
                          <q-item-label caption>{{
                            tools.getUserNameOnlyIfToShow(user)
                          }}</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-tab-panel>
              <q-tab-panel name="sharedlink">
                <div class="q-pa-md" style="max-width: 300px">
                  <div class="text-center text-bold text-h6">
                    Registrati con questi invitanti:
                  </div>
                  <div class="text-center">
                    Cliccare sulla persona per procedere alla registrazione
                  </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 lastssharedlink"
                        :key="index"
                        class="animated chip_shadow q-ma-sm"
                        clickable
                        v-ripple
                        @click="gotoPage(`/registrati/${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) }}</q-item-label
                          >
                          <q-item-label caption>{{
                            tools.getUserNameOnlyIfToShow(user)
                          }}</q-item-label>
                        </q-item-section>
                        <q-item-section side
                          ><span class="text-h6 q-mr-sm"></span
                        ></q-item-section>
                      </q-item>
                    </transition-group>
                  </q-list>
                </div>
              </q-tab-panel>
            </q-tab-panels>
          </div>

          <!--<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"
              >
              </CLineChart>

              <!--<CLineChart :mydata="datastat.reg_weekly" :title="$t('stat.reg_weekly')" color="blue" bordercolor="green" :sum="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>
