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

    <q-separator />

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

    <div class="text-center">
      <div class="text-center">
        <q-spinner v-if="loadSaldo" color="primary" size="3em" :thickness="2" />
      </div>
      <q-btn
        v-if="
          myaccount &&
          !loadSaldo &&
          (grp
            ? tools.iAmAdminGroup(grp.groupname)
            : tools.iAmAdminCircuit(circuit.name))
        "
        outline
        rounded
        dense
        color="green"
        icon="fas fa-redo"
        :label="t('movement.updatewallet')"
        @click="aggiornaSaldo()"
      >
      </q-btn>
    </div>

    <q-card-section>
      <span v-for="(rec, ind) of myaccount.recCatGrp" :key="ind">
        <q-chip
          dense
          class="text-center shadow-5 glossy chipmodif text-white"
          :style="`background-color: ${rec.color};`"
        >
          <q-icon :name="rec.icon" left />
          {{ rec.descr }}</q-chip
        ></span
      >
      <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="./CInfoAccount.ts">
</script>

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