<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"
    :valueextra="
      account && account.notifspending && account.notifspending.length > 0
        ? `* `
        : (valueextra ? valueextra : '')
    "
  >
  </CCurrencyValue>
    <!--:tips="t('account.saldo_tips', { fido: qtarem, symbol })"-->
  <CCurrencyValue
    v-else
    :symbol="symbol"
    :strfido="t('account.fido_casa', { fido: account ? account.fidoConcesso : '', symbol })"
    :color="color"
    v-model="saldo"
    :before_str="t('account.saldo') + `:`"
    :valueextra="
      account && account.notifspending && account.notifspending.length > 0
        ? `* `
        : (valueextra ? valueextra : '')
    "
    :label="
      `(` + t('account.dispon') + `: ` + qtarem + ` ` + symbol + `)`
    "
    :paramTypeAccount="paramTypeAccount"
    :myrecparam="account"
  >
  </CCurrencyValue>
  <q-btn
    v-if="
      !small &&
      account &&
      account.notifspending &&
      account.notifspending.length > 0
    "
    :label="$t('movement.viewpendingtransaction')"
    @click="visuTransac = true"
    dense
    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-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="index">
            <q-card class="row justify-evenly items-center">
              <div class="testo">{{ index + 1 }}°</div>

              <CMyFieldRec
                table="sendnotifs"
                :id="myrec.result._id"
                :rec="myrec.result"
                field="datenotif"
                :canEdit="false"
                :canModify="false"
              >
              </CMyFieldRec>
              <CMyFieldRec
                v-if="myrec.result.dest"
                table="sendnotifs"
                :id="myrec.result._id"
                :rec="myrec.result"
                field="extrarec.dest"
                :canEdit="false"
                :canModify="false"
              >
              </CMyFieldRec>

              <CMyFieldRec
                v-if="myrec.result.extrarec.contoComDest"
                table="sendnotifs"
                :id="myrec.result._id"
                :rec="myrec.result"
                field="extrarec.contoComDest"
                :canEdit="false"
                :canModify="false"
              >
              </CMyFieldRec>
              <CMyFieldRec
                table="sendnotifs"
                :id="myrec.result._id"
                :rec="myrec.result"
                field="extrarec.qty"
                :canEdit="false"
                :canModify="false"
              >
              </CMyFieldRec>
              <CMyFieldRec
                table="sendnotifs"
                :id="myrec.result._id"
                :rec="myrec.result"
                field="extrarec.causal"
                :canEdit="false"
                :canModify="false"
              >
              </CMyFieldRec>
              <CMyFieldRec
                table="sendnotifs"
                :id="myrec.result._id"
                :rec="myrec.result"
                field="extrarec.causalDest"
                :canEdit="false"
                :canModify="false"
              >
              </CMyFieldRec>

              <!--<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.result, mycol.field, mycol.subfield)
                    )
                  "
                >
                  <span class="testo" v-if="mycol.name === 'datenotif'"
                    >{{ index + 1 }}°</span
                  >

                  <CMyFieldRec
                    table="sendnotifs"
                    :id="myrec.result._id"
                    :rec="myrec.result"
                    :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>
