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

  <q-btn
    v-if="
      !small &&
      account &&
      account.notifspending &&
      account.notifspending.length > 0
    "
    :label="$t('movement.viewpendingtransaction')"
    @click="visuTransac = true"
    icon="fas fa-info"
  >
  </q-btn>

  <q-dialog v-model="visuTransac">
    <q-card class="dialog_card">
      <q-toolbar class="bg-primary text-white">
        <q-toolbar-title class="text-h7">
          {{ $t('movement.pendingtransaction') }}
        </q-toolbar-title>
        <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
        <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
      </q-toolbar>
      <q-card-section class="inset-shadow">
        <div
          v-if="
            !small &&
            account &&
            account.notifspending &&
            account.notifspending.length > 0
          "
          :class="`text-h7 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">
            <q-card class="row justify-evenly items-center">
              <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>
            </q-card>
          </div>
        </div>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

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

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