<template>

  <CCurrencyValue
    v-if="small"
    :small="true"
    :symbol="symbol"
    :color_border="saldo > 0 ? `green` : `red`"
    :color="color"
    :value="saldo"
    :label="t('account.saldo')">
  </CCurrencyValue>
  <CCurrencyValue
    v-else
    :symbol="symbol"
    :tips="t('account.saldo_tips', {fido: qtarem, symbol})"
    :color="color"
    :value="saldo"
    :valueextra="account && account.notifspending && account.notifspending.length > 0 ? `* `: ''"
    :label="t('account.saldo') + ` (` + t('account.dispon') + `: ` + qtarem + `)`">

  </CCurrencyValue>


  <div v-if="!small && account && account.notifspending && account.notifspending.length > 0" :class="`text-h5 bordo_stondato_stretto full-width`"
       :style="(!$q.screen.lt.sm ? `min-width: 250px; ` : ``) + (color_border ? `border-color: ` + color_border + `!important;`: '')">
    <div class="text-center text-h7-dense text-italic text-grey-14">
      {{ t('movement.pendingtransaction') }}
    </div>

    <div v-for="(myrec, index) in account.notifspending" :key="myrec._id">
      <div class="row justify-evenly items-center bordo_stondato_pending">
        <span v-for="(mycol, indcol) of colTableNotifCoins" :key="indcol">
          <div
            class="col"
            style="display: flex;"
            v-if="(mycol.visible && (tools.checkIfShowField(mycol, tools.TIPOVIS_SHOW_RECORD, false, tools.getValue(myrec, mycol.field, mycol.subfield))))">

            <span class="testo" v-if="mycol.name === 'datenotif'">{{ index + 1 }}°</span>

            <CMyFieldRec
              table="sendnotifs"
              :id="myrec._id"
              :rec="myrec"
              :field="mycol.name"
              :canEdit="false"
              :canModify="false">
            </CMyFieldRec>
          </div>
        </span>
      </div>
    </div>
  </div>


</template>

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

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