<template>
  <div v-if="small">
    <q-chip
      dense class="cltexth4 chipbooked shadow-5 q-pa-sm2"
      size="md"
      :color="value > 0 ? `green` : value === 0 ? `gray` : `red`" text-color="white"
      icon="fas fa-coins">
      {{ tools.roundDec2(value) }} <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>
    </q-chip>
  </div>
  <div v-else>
    <div v-if="value !== 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 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="value > 0 ? `green` : `red`"
        >
          <template v-slot:prepend>
            <!--<img src="https://cdn.quasar.dev/logo-v2/svg/logo.svg">-->
            <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="`align_elem_right `+ small ? `text-h7` : ``">{{ valueextra }}{{ tools.roundDec2(value) }}
              <q-tooltip :offset="[10, 10]" v-model="showingtooltip">{{ tips }}</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>
          </template>

        </q-field>
      </div>

    </div>
  </div>
</template>

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

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