<template>
  <q-inner-loading id="spinner" :showing="!finishloading">
    <q-spinner-tail size="3em" color="primary" />
  </q-inner-loading>
  <div v-if="tools.isUserOk() && finishloading">
    <div v-if="finder && showfinder" class="q-gutter-sm q-pa-sm q-pb-sm">
      <div class="q-mt-md">
        <CSendRISTo></CSendRISTo>

        <q-tabs
          v-model="mytab"
          no-caps
          class="bg-indigo text-white shadow-2 q-mt-sm full-width"
          dense
        >
          <q-tab name="circuiti" icon="fas fa-sitemap" label="Lista Circuiti" />
          <q-tab name="mov" icon="fas fa-exchange-alt" label="Storico Transazioni" />
        </q-tabs>

        <q-tab-panels
          v-model="mytab"
          animated
          keep-alive
        >
          <q-tab-panel name="circuiti">
            <CTitleBanner
              :class="`q-pa-xs `"
              :title="myoptions[0].label"
              bgcolor="white"
              bgcolor2="lightblue"
              :clcolor="`text-indigo`"
              :canopen="true"
              :small="true"
            >
              <div v-if="listcircuitsmy.length === 0" class="q-ma-sm q-pa-sm">
                {{ t('circuit.nessun_circuito_attivo') }}
              </div>
              <div v-else style="max-height: 250px; overflow-y: auto">
                <span
                  v-for="(circuit, index) in listcircuitsmy"
                  :key="index"
                  class="q-my-sm"
                  clickable
                >
                  <CMyCircuit
                    :mycircuit="circuit"
                    :visu="visu"
                    :username="username"
                  >
                  </CMyCircuit>
                </span>
              </div>
            </CTitleBanner>

            <div class="row justify-center">
              <q-btn
                rounded
                toggle-color="primary"
                :label="
                  visu === costanti.MY_CIRCUITS
                    ? t('circuit.find_others_circuit')
                    : t('circuit.hide_others_circuit')
                "
                @click="togglevisu()"
              />
            </div>
            <CTitleBanner
              v-if="visu === costanti.FIND_CIRCUIT"
              :class="`q-pa-xs `"
              :title="t('circuit.circuiti_territoriali')"
              bgcolor="bg-primary"
              :clcolor="`text-white`"
              :canopen="true"
              :small="true"
            >
              <div>
                <span
                  v-for="(circuit, index) in listcircuitsfind"
                  :key="index"
                  class="q-my-sm"
                  clickable
                >
                  <CMyCircuit
                    :mycircuit="circuit"
                    :visu="visu"
                    :username="username"
                  >
                  </CMyCircuit>
                </span>
              </div>
              <div>
                <slot></slot>
              </div>
            </CTitleBanner>
          </q-tab-panel>
          <q-tab-panel name="mov">
            <CTitleBanner
              :class="`q-pa-xs `"
              :title="t('circuit.tuoi_ultimi_movimenti', { num: numtransaz })"
              bgcolor="white"
              bgcolor2="lightblue"
              :clcolor="`text-indigo`"
              :canopen="true"
              :small="true"
              :open="false"
            >
              <CMovements
                @loaded="movcaricati"
                :username="username"
                :showbuttolastmov="false"
              >
                <div class="row justify-center">
                  <q-btn
                    rounded
                    dense
                    class="text-center"
                    color="primary"
                    :label="t('circuit.show_next_mov')"
                    @click="addlastmov()"
                  />
                </div>
              </CMovements>

              <q-inner-loading id="spinner" :showing="loadingvalues">
                <q-spinner-tail size="3em" color="primary" />
              </q-inner-loading>

              <br />
            </CTitleBanner>
          </q-tab-panel>
        </q-tab-panels>
      </div>
    </div>
    <div v-else>
      <q-list class="width-container">
        <span class="q-my-sm" clickable>
          <CMyCircuit :mycircuit="mycircuit" :visu="visu" :username="username">
          </CMyCircuit>
        </span>
      </q-list>
    </div>
  </div>
  <div v-else>
    <CUserNonVerif></CUserNonVerif>
  </div>
</template>

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

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

