<template>
  <div v-if="myaccount && circuit">
    <q-card-section v-if="!onlysaldo">
      <div class="text-h6">{{ t('groups.infoaccount') }}</div>
    </q-card-section>

    <q-separator />

    <q-avatar v-if="userStore.getImgByCircuit(circuit)" size="30px">
      <q-img
        :src="userStore.getImgByCircuit(circuit)"
        :alt="circuit.name"
        img-class="imgprofile"
        height="30px"
        @click="
          naviga(tools.getPathByTableAndRec(shared_consts.TABLES_CIRCUITS, circuit))
        "
      />
    </q-avatar>
    <q-btn
      class="shadow-1 q-mb-xs q-mt-xs"
      color="primary"
      rounded
      size="sm"
      @click="naviga(tools.getPathByTableAndRec(shared_consts.TABLES_CIRCUITS, circuit))"
    >
      {{ circuit.name }}
    </q-btn>

    <CSaldo
      v-if="tools.isUserOk() && myaccount"
      :account="myaccount"
      :symbol="circuit.symbol"
      :color="circuit.color"
      :saldo="myaccount.saldo_pend"
      :valueextra="myaccount.saldo_pend !== myaccount.saldo ? '*': ''"
      :qtarem="myaccount ? circuitStore.getRemainingCoinsToSend(myaccount) : 0"
    >
    </CSaldo>

    <div v-if="onlysaldo" class="q-ma-sm">
      <div v-if="circuitsnational.length === 0">
        
      </div>
      <div v-else v-for="(circnaz, ind) of circuitsnational" :key="ind">
        <q-avatar v-if="userStore.getImgByCircuit(circnaz)" size="30px">
          <q-img
            :src="userStore.getImgByCircuit(circnaz)"
            :alt="circuit.name"
            img-class="imgprofile"
            height="30px"
            @click="
              naviga(tools.getPathByTableAndRec(shared_consts.TABLES_CIRCUITS, circnaz))
            "
          />
        </q-avatar>
        <q-btn
          class="shadow-1 q-mb-xs q-mt-xs"
          color="primary"
          rounded
          size="sm"
          @click="
            naviga(tools.getPathByTableAndRec(shared_consts.TABLES_CIRCUITS, circnaz))
          "
        >
          {{ circnaz.name }}
        </q-btn>

        <CSaldo
          v-if="tools.isUserOk() && circnaz.account"
          :account="circnaz.account"
          :symbol="circnaz.symbol"
          :color="circnaz.color"
          :saldo="circnaz.account.saldo_pend"
          :valueextra="circnaz.account.saldo_pend !== circnaz.account.saldo ? '*': ''"
          :qtarem="
            myaccount
              ? circuitStore.getRemainingCoinsToSend(circnaz.account)
              : 0
          "
        >
        </CSaldo>
      </div>
    </div>

    <q-card-section v-if="!onlysaldo">
      <div v-if="myaccount.date_created" class="container">
        <q-icon name="fas fa-lightbulb" class="iconcirc"></q-icon>
        {{
          $t('shared.createddate', {
            date: tools.getstrDateYY(myaccount.date_created),
          })
        }}
      </div>
      <div
        v-if="
          !!myaccount.date_updated &&
          tools.getstrDate(myaccount.date_updated) !==
            tools.getstrDate(myaccount.date_created)
        "
        class="container"
      >
        <q-icon name="fas fa-pencil-alt" class="iconcirc"></q-icon>
        <span class="element">{{
          $t('shared.lastmodify', {
            date: tools.getstrDateYY(myaccount.date_updated),
          })
        }}</span>
      </div>

      <div :class="$q.screen.lt.sm ? '' : 'row'">
        <div class="sezioni">
          <CCurrencyV2
            v-if="!circuit.ignoreLimits"
            :symbol="tools.getSymbolByCircuit(circuit)"
            :color="tools.getColorByCircuit(circuit)"
            color_border="red"
            v-model="myaccount.fidoConcesso"
            icon="fas fa-battery-quarter"
            :label="t('circuit.fido_scoperto_default')"
            :tips="t('circuit.fido_scoperto_default_tips')"
            :paramTypeAccount="costanti.ParamTypeAccount.FIDO_CONCESSO"
            :myrecparam="myaccount"
            :admin="admin"
            @save="save"
          >
          </CCurrencyV2>
        </div>
        <div class="sezioni">
          <CCurrencyV2
            v-if="!circuit.ignoreLimits"
            :symbol="tools.getSymbolByCircuit(circuit)"
            :color="tools.getColorByCircuit(circuit)"
            color_border="green"
            v-model="myaccount.qta_maxConcessa"
            icon="fas fa-battery-quarter"
            :label="t('circuit.qta_max_default')"
            :tips="t('circuit.qta_max_default_tips')"
            :paramTypeAccount="costanti.ParamTypeAccount.QTA_MAXCONCESSA"
            :myrecparam="myaccount"
            :admin="admin"
            @save="save"
          >
          </CCurrencyV2>
        </div>
        <div v-if="myaccount.totTransato" class="sezioni">
          <CCurrencyValue
            :symbol="tools.getSymbolByCircuit(circuit)"
            :color="tools.getColorByCircuit(circuit)"
            color_border="blue"
            v-model="myaccount.totTransato"
            icon="fas fa-battery-quarter"
            :label="t('circuit.totTransato')"
            :tips="t('circuit.totTransato_tips')"
          >
          </CCurrencyValue>
        </div>
      </div>
    </q-card-section>
  </div>
</template>

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

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