<template>
  <q-page>
    <CTitleBanner title="Ordini"></CTitleBanner>
    <q-spinner v-if="!endload" color="primary" size="3em" :thickness="2" />

    <div class="q-gutter-md text-center">
      <q-btn-toggle
        v-model="cosa"
        push
        rounded
        glossy
        toggle-color="purple"
        :options="[
          { value: shared_consts.PROD.TUTTI, slot: 'tutti' },
          { value: shared_consts.PROD.BOTTEGA, slot: 'bottega' },
          { value: shared_consts.PROD.GAS, slot: 'gas' },
        ]"
      >
        <template v-slot:tutti>
          <div class="row items-center no-wrap">
            <div class="text-center">
              {{ t("gas.tutti") }}
            </div>
            <q-icon right name="fas fa-user-friends" />
          </div>
        </template>
        <template v-slot:gas>
          <div class="row items-center no-wrap">
            <div class="text-center">
              {{ t("gas.ordina_sul_gas") }}
            </div>
            <q-icon right name="fas fa-user-friends" />
          </div>
        </template>

        <template v-slot:bottega>
          <div class="row items-center no-wrap">
            <div class="text-center">
              {{ t("gas.bottega") }}
            </div>
            <q-icon right name="fas fa-store" />
          </div>
        </template>
      </q-btn-toggle>
    </div>

    <div v-if="endload" class="panel">
      <q-select
        :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
        outlined
        v-model="storeGasordine"
        :options="productStore.getGasordines()"
        :label="t('products.gasordine') + `:`"
        emit-value
        map-options
      >
      </q-select>

      <div class="q-pa-sm" v-if="arrout">
        <q-table
          :columns="columns"
          row-key="numorder"
          :pagination="initialPagination"
          :rows="arrout"
        >
          <template v-slot:body="props">
            <q-tr :props="props">
              <q-td key="name" :props="props">
                <span v-if="props.row.name"> &nbsp; {{ props.row.name }}</span>
              </q-td>
              <q-td key="weight" :props="props">
                <span v-if="props.row.weight">
                  &nbsp; {{ props.row.weight }}
                  {{ tools.getUnitsMeasure(props.row.unit, true) }}</span
                >
              </q-td>
              <q-td key="price_acquistato" :props="props">
                <span v-if="props.row.price_acquistato">
                  &nbsp; {{ props.row.price_acquistato.toFixed(2) }} €
                </span>
              </q-td>
              <q-td key="totalQuantity" :props="props">
                <span v-if="props.row.totalQuantity">
                  &nbsp;
                  {{ props.row.totalQuantity }}</span
                >
              </q-td>
              <q-td key="totalPrice_acquistato" :props="props">
                <span v-if="props.row.totalPrice_acquistato">
                  <span :class="props.row.name !== 'TOTALI' ? '' : 'totaliacq'">
                    &nbsp; {{ props.row.totalPrice_acquistato.toFixed(2) }} €
                    &nbsp;</span
                  >
                </span>
              </q-td>
              <q-td key="totalPrice" :props="props">
                <span v-if="props.row.totalPrice">
                  <span :class="props.row.name !== 'TOTALI' ? '' : 'totali'">
                    &nbsp; {{ props.row.totalPrice.toFixed(2) }} € &nbsp;</span
                  >
                </span>
              </q-td>
            </q-tr>
          </template>
        </q-table>
      </div>
    </div>
  </q-page>
</template>

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

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