<template>

  <div v-if="small">
    
    <q-chip
      dense
      class="cltexth4 chipbooked shadow-5 q-pa-sm2"
      size="md"
      :color="modelValue > 0 ? `green` : modelValue === 0 ? `gray` : `red`"
      text-color="white"
      icon="fas fa-coins"
    >
      {{ valueextra }} {{ tools.roundDec2(modelValue) }}
      <span class="text-currency"
        >&nbsp;<em
          class="q-pa-xxs text-white rounded-borders shadow-2"
          :style="`background-color: ` + (color ? color : '#ff5500')"
          >{{ symbol }}</em
        ></span
      >
      <div v-if="myrecparam && myrecparam.fidoConcesso > 0 && !paramTypeAccount">
        <q-icon
          :color="myrecparam.fidoConcesso > 0 ? 'blue' : 'grey'"
          name="fas fa-house-user"
          class="vertical-baseline q-ml-xs"
        />
      </div>
    </q-chip>
  </div>
  <div v-else>
    <div
      v-if="modelValue !== null"
      :class="
        `text-h5 ` +
        (small ? `bordo_stondato_small` : `bordo_stondato_stretto`) +
        ` full-width`
      "
      :style="
        (!$q.screen.lt.sm && !small
          ? `min-width: 250px; `
          : small
          ? ` max-width: 120px;`
          : ``) +
        (color_border ? `border-color: ` + color_border + `!important;` : '')
      "
    >
      <div
        :class="
          `text-center text-h7-dense text-italic ` +
          ($q.dark.isActive ? `text-grey-6` : `text-grey-14`)
        "
      >
        <span v-if="small">
          <em
            class="q-px-xs text-white rounded-borders"
            :style="`background-color: ` + (color ? color : '#ff5500')"
            >{{ symbol }}</em
          >
        </span>
        <span v-else>{{ label }}</span>
      </div>
      <div>
        <q-field
          dense
          borderless
          :readonly="readonly"
          type="number"
          rounded
          :class="!small ? `q-px-sm text-h5` : `q-px-xs text-h7`"
          :color="modelValue > 0 ? `green` : `red`"
        >
          <template v-slot:prepend>
            <q-btn
              v-if="tips && !small"
              icon="fas fa-info"
              color="primary"
              text-color="white"
              round
              size="sm"
              @click="showingtooltip = !showingtooltip"
            >
            </q-btn>
            <q-icon v-else name="fas fa-coins" :size="small ? `xs` : `sm`" />
          </template>
          <template v-slot:control>
            <div class="text-h8 text-blue">
              {{ before_str }}
            </div>
            <div :class="`align_elem_right ` + (small ? `text-h7` : ``)">
              {{ valueextra }}{{ tools.roundDec2(modelValue) }}
              <q-tooltip :offset="[10, 10]" v-model="showingtooltip">{{
                tips
              }}</q-tooltip>
              <q-tooltip :offset="[10, 10]" v-model="showinghouse">{{
                strfido
              }}</q-tooltip>
            </div>
          </template>
          <template v-slot:append>
            <div v-if="!small" :class="small ? `text-h7-dense` : `text-h7`">
              <em
                class="q-px-sm text-white rounded-borders"
                :style="`background-color: ` + (color ? color : '#ff5500')"
                >{{ symbol }}</em
              >
            </div>
            <div v-if="paramTypeAccount && admin">
              <q-btn
                flat
                round
                icon="fas fa-pencil-alt"
                size="sm"
                @click="$emit('changedParamValue', true)"
              ></q-btn>
            </div>
            <q-btn
              v-if="myrecparam && myrecparam.fidoConcesso >= 0 && !paramTypeAccount"
              icon="fas fa-house-user"
              class="q-ml-sm"
              :color="myrecparam.fidoConcesso > 0 ? 'primary' : 'grey'"
              text-color="white"
              round
              size="sm"
              @click="showinghouse = !showinghouse"
            >
            </q-btn>
          </template>
        </q-field>
      </div>
    </div>
  </div>
</template>

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

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