<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="row">
      <div class="row">
        <q-toggle
          v-if="tools.isManager()"
          v-model="check_send_email"
          color="blue"
          class="row q-mx-md"
          icon="fas fa-envelope"
          :label="t('orderscart.check_invia_email')"
        ></q-toggle>
        <q-toggle
          v-if="tools.isManager()"
          v-model="mostra_codice"
          color="blue"
          class="row q-mx-md"
          icon="fas fa-barcode"
          :label="t('orderscart.mostra_codice')"
        ></q-toggle>
        <q-toggle
          v-if="tools.isManager()"
          v-model="mostra_cat"
          color="blue"
          class="row q-mx-md"
          icon="fas fa-barcode"
          :label="t('orderscart.mostra_cat')"
        ></q-toggle>
        <q-toggle
          v-if="tools.isManager()"
          v-model="mostra_solo_ordini_produttore"
          color="blue"
          class="row q-mx-md"
          icon="fas fa-user-friends"
          :label="t('orderscart.mostra_solo_ordini_produttore')"
        ></q-toggle>
        <q-select
          v-if="tools.isManager()"
          v-model="showWhichCode"
          :options="showWhichCodeOptions"
          emit-value
          map-options
          option-value="value"
          option-label="label"
          :label="t('orderscart.show_which_code')"
          class="row q-mx-md"
          :style="'width: 200px;'"
        ></q-select>
      </div>

      <q-select
        :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
        outlined
        v-model="storeGasordine"
        :options="productStore.getGasordines()"
        :label="t('products.gasordine') + `:`"
        style="min-width: 300px"
        emit-value
        map-options
      ></q-select>
    </div>
    <div>
      <q-tabs
        v-if="tools.isManager()"
        v-model="tabpages"
        inline-label
        class="text-blue"
      >
        <span v-for="(page, index) of shared_consts.OrderPages" :key="index">
          <q-tab
            :class="page.color"
            :name="page.value"
            :icon="page.icon"
            :label="page.label"
          />
        </span>
      </q-tabs>

      <div v-if="tabpages === shared_consts.OrderPages.ORDINI.value">
        <q-tabs
          v-if="taborders"
          v-model="taborders"
          inline-label
          class="text-blue"
        >
          <span v-for="(stat, index) of shared_consts.OrderStat" :key="index">
            <q-tab
              v-if="arrnumstatus[stat.value] > 0"
              :class="stat.color"
              :name="stat.value"
              :icon="stat.icon"
              :label="`(` + arrnumstatus[stat.value] + `) ` + stat.label"
            />
          </span>
        </q-tabs>

        <div class="q-pa-sm">
          <q-table
            v-if="taborders > 0"
            :grid="$q.screen.lt.sm"
            :hide-header="$q.screen.lt.sm"
            :columns="columns"
            row-key="numorder"
            :pagination="initialPagination"
            :rows="arrout"
            :virtual-scroll="false"
            class="table-container"
          >
            <template v-if="$q.screen.lt.sm" v-slot:item="props">
              <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4">
                <q-card class="my-card-shadow yes_shadow">
                  <q-list dense>
                    <q-item v-for="col in getCols(props)" :key="col.name">
                      <q-item-section>
                        <q-item-label>{{ col.label }}</q-item-label>
                      </q-item-section>
                      <q-item-section side>
                        <q-item-label
                          v-if="col.name === 'created_at'"
                          caption
                          >{{ tools.getstrDateTime(col.value) }}</q-item-label
                        >
                        <q-item-label
                          v-else-if="col.name === 'nameSurname'"
                          caption
                        >
                          <span v-if="props.row.user">
                            <span
                              :class="
                                props.row.user.name !== 'TOTALI' ? '' : 'totali'
                              "
                              >{{
                                tools.getNomeUtenteByRecUser(props.row.user)
                              }}</span
                            >
                          </span>
                        </q-item-label>
                        <q-item-label v-else-if="col.name === 'items'" caption>
                          <div
                            v-for="(item, index) of props.row.items"
                            :key="index"
                          >
                            <div
                              v-if="
                                !!item &&
                                item.order &&
                                item.order.product &&
                                item.order.product.productInfo &&
                                ((mostra_solo_ordini_produttore &&
                                  item.order.idGasordine === storeGasordine) ||
                                  !mostra_solo_ordini_produttore)
                              "
                            >
                              <span
                                v-html="
                                  productStore.getStrInfoOrder(t, item.order)
                                "
                              ></span>
                              {{
                                productStore.getQuantityByOrder(t, item.order)
                              }}
                              {{ item.order.product.productInfo.name }}
                              <span v-if="mostra_cat"
                                >({{
                                  productStore.getSubCatStrByProduct(
                                    item.order.product.productInfo
                                  )
                                }})</span
                              >
                              {{
                                mostra_codice
                                  ? "- [" +
                                    item.order.product.productInfo.code +
                                    "]"
                                  : ""
                              }}
                              <br />
                            </div>
                          </div>
                        </q-item-label>
                        <q-item-label
                          v-else-if="col.name === 'totalPrice'"
                          caption
                          >{{
                            getTotaleOrdineByOrdId(
                              props.row._id,
                              storeGasordine,
                              props.row.user.name === 'TOTALI'
                            )
                          }}
                          €</q-item-label
                        >
                        <q-item-label
                          v-else-if="col.name === 'totalPriceCalc'"
                          caption
                          >{{ props.row.totalPriceCalc }} €</q-item-label
                        >
                        <q-item-label
                          v-else-if="col.name === 'status'"
                          caption
                          >{{
                            shared_consts.getStatusStr(props.row.status)
                          }}</q-item-label
                        >
                        <q-item-label
                          v-else-if="col.name === 'comandi'"
                          caption
                        >
                          <div
                            v-if="
                              tools.isManager() &&
                              props.row.user.name !== 'TOTALI'
                            "
                            class="q-pa-sm"
                          >
                            <q-btn
                              v-if="
                                taborders ===
                                shared_consts.OrderStat.CONFERMATI.value
                              "
                              size="sm"
                              dense
                              color="green"
                              icon="fas fa-people-carry"
                              :label="t('ecomm.consegna')"
                              @click="
                                clickFunz(
                                  props.row,
                                  shared_consts.OrderStat.DELIVERED.value
                                )
                              "
                            ></q-btn>

                            <q-btn-dropdown rounded dense label="Azioni">
                              <q-list class="text-primary">
                                <q-item
                                  v-for="(
                                    cmd, index
                                  ) of shared_consts.OrderCmdStr"
                                  :key="index"
                                  clickable
                                  v-close-popup
                                  @click="clickFunz(props.row, cmd.value)"
                                >
                                  <q-item-section avatar>
                                    <q-avatar
                                      :icon="cmd.icon"
                                      :color="cmd.color"
                                      text-color="white"
                                    />
                                  </q-item-section>
                                  <q-item-section>
                                    <q-item-label>{{ cmd.label }}</q-item-label>
                                  </q-item-section>
                                </q-item>
                              </q-list>
                            </q-btn-dropdown>
                          </div>
                        </q-item-label>

                        <q-item-label
                          v-else-if="col.name === 'apri' && props.row._id"
                          caption
                        >
                          <div class="q-pa-sm">
                            <q-btn
                              size="sm"
                              dense
                              icon="fas fa-filter"
                              :label="t('ecomm.apriordine')"
                              @click="
                                idOrdersCartToShow = props.row._id;
                                showOrdersCart = true;
                              "
                            ></q-btn>
                          </div>
                        </q-item-label>
                        <q-item-label v-else caption>
                          {{ col.value }}
                        </q-item-label>
                      </q-item-section>
                    </q-item>
                  </q-list>
                </q-card>
              </div>
            </template>
            <template v-else v-slot:body="props">
              <q-tr :props="props">
                <q-td key="ind" :props="props">
                  <div class="q-pa-sm">{{ props.row.ind + 1 }}</div>
                </q-td>
                <q-td key="apri" :props="props">
                  <div class="q-pa-sm">
                    <q-btn
                      v-if="props.row._id"
                      color="primary"
                      size="sm"
                      dense
                      icon="far fa-file-alt"
                      :label="t('ecomm.apriordine')"
                      @click="
                        idOrdersCartToShow = props.row._id;
                        showOrdersCart = true;
                      "
                    ></q-btn>
                  </div>
                </q-td>
                <q-td key="comandi" :props="props">
                  <div
                    v-if="tools.isManager() && props.row.user.name !== 'TOTALI'"
                    class="q-pa-sm"
                  >
                    <q-btn
                      v-if="
                        taborders === shared_consts.OrderStat.CONFERMATI.value
                      "
                      size="sm"
                      dense
                      color="green"
                      icon="fas fa-people-carry"
                      class="q-mx-sm"
                      :label="t('ecomm.consegna')"
                      @click="
                        clickFunz(
                          props.row,
                          shared_consts.OrderStat.DELIVERED.value
                        )
                      "
                    ></q-btn>

                    <q-btn-dropdown rounded dense label="Azioni">
                      <q-list class="text-primary">
                        <q-item
                          v-for="(cmd, index) of shared_consts.OrderCmdStr"
                          :key="index"
                          clickable
                          v-close-popup
                          @click="clickFunz(props.row, cmd.value)"
                        >
                          <q-item-section avatar>
                            <q-avatar
                              :icon="cmd.icon"
                              :color="cmd.color"
                              text-color="white"
                            />
                          </q-item-section>
                          <q-item-section>
                            <q-item-label>{{ cmd.label }}</q-item-label>
                          </q-item-section>
                        </q-item>
                      </q-list>
                    </q-btn-dropdown>
                  </div>
                </q-td>
                <q-td key="numorder" :props="props">
                  <span v-if="props.row.numorder"
                    >&nbsp; n. {{ props.row.numorder }}</span
                  >
                </q-td>
                <q-td key="nameSurname" :props="props">
                  <span v-if="props.row.user">
                    <span
                      :class="props.row.user.name !== 'TOTALI' ? '' : 'totali'"
                      >{{ tools.getNomeUtenteByRecUser(props.row.user) }}</span
                    >
                  </span>
                </q-td>
                <q-td key="created_at" :props="props">
                  {{ tools.getstrDateTime(props.row.created_at) }}
                  <span
                    v-if="
                      taborders === shared_consts.OrderStat.COMPLETATI.value
                    "
                  >
                    <br />Consegnato il:
                    <br />
                    {{ tools.getstrDateTime(props.row.date_consegnato) }}
                  </span>
                </q-td>
                <q-td key="items" :props="props">
                  <div v-for="(item, index) of props.row.items" :key="index">
                    <div
                      v-if="
                        !!item.order &&
                        item.order.product &&
                        item.order.product.productInfo &&
                        ((mostra_solo_ordini_produttore &&
                          item.order.idGasordine === storeGasordine) ||
                          !mostra_solo_ordini_produttore)
                      "
                    >
                      {{ productStore.getQuantityByOrder(t, item.order) }}
                      {{ item.order.product.productInfo.name }}
                      <span v-if="mostra_cat">
                        ({{
                          productStore.getSubCatStrByProduct(
                            item.order.product.productInfo
                          )
                        }})
                      </span>
                      {{
                        mostra_codice
                          ? "- [" + item.order.product.productInfo.code + "]"
                          : ""
                      }}
                      <br />
                    </div>
                  </div>
                  <div v-if="props.row.note" class="note">
                    Note: {{ props.row.note }}
                  </div>
                  <div v-if="props.row.note_per_gestore" class="note">
                    Note per Gestore: {{ props.row.note_per_gestore }}
                  </div>
                  <div v-if="props.row.note_per_admin" class="note">
                    Note per Admin: {{ props.row.note_per_admin }}
                  </div>
                </q-td>
                <q-td key="totalPrice" :props="props">
                  <span
                    :class="props.row.user.name !== 'TOTALI' ? '' : 'totali'"
                    >{{
                      getTotaleOrdineByOrdId(props.row._id, storeGasordine, props.row.user.name === 'TOTALI')
                    }}
                    €</span
                  >
                </q-td>
                <q-td key="status" :props="props">
                  <span :class="props.row.status">
                    {{ shared_consts.getStatusStr(props.row.status) }}
                  </span>
                  <br />
                  <div v-if="props.row.confermato" class="ordstat">
                    {{ tools.getstrDateTime(props.row.date_confermato) }}:
                    <span class="ordstat confermato">
                      {{ $t("ecomm.confermato") }}
                    </span>
                  </div>
                  <div v-if="props.row.pagato" class="ordstat">
                    {{ tools.getstrDateTime(props.row.date_pagato) }}:
                    <span class="ordstat">{{ t("ecomm.pagato") }}</span>
                  </div>
                  <div v-if="props.row.consegnato" class="ordstat">
                    {{ tools.getstrDateTime(props.row.date_consegnato) }}:
                    <span class="ordstat">{{ t("ecomm.consegnato") }}</span>
                  </div>
                  <div v-if="props.row.preparato" class="ordstat">
                    {{ tools.getstrDateTime(props.row.date_preparato) }}:
                    <span class="ordstat">{{ t("ecomm.preparato") }}</span>
                  </div>
                  <div v-if="props.row.spedito">
                    {{ tools.getstrDateTime(props.row.date_spedito) }}:
                    <span class="ordstat">{{ t("ecomm.spedito") }}</span>
                  </div>
                  <div v-if="props.row.ricevuto">
                    {{ tools.getstrDateTime(props.row.date_ricevuto) }}:
                    <span class="ordstat">{{ t("ecomm.ricevuto") }}</span>
                  </div>
                </q-td>
              </q-tr>
            </template>
          </q-table>
        </div>

        <!-- Ordini IN CORSO -->
        <div
          v-if="
            tools.isManager() &&
            taborders === shared_consts.OrderStat.IN_CORSO.value
          "
          class="q-ma-sm q-pa-sm row justify-center"
        >
          <q-btn
            color="positive"
            icon="mail"
            :label="t('orderscart.order_confirm')"
            @click="ConfermaOrdini"
          ></q-btn>
        </div>

        <div v-if="tools.isManager()" class="q-ma-sm q-pa-sm row">
          <q-select
            :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
            rounded
            style="width: 300px"
            outlined
            v-model="templemail"
            :options="globalStore.templemail"
            :option-value="fieldsTable.getKeyByTable('templemail')"
            :option-label="fieldsTable.getLabelByTable('templemail')"
            label="Scegli il tipo di Email:"
            emit-value
            map-options
          ></q-select>
          <CMyFieldDb
            title="Email di Test"
            mykey="EMAIL_TEST"
            :serv="true"
            :type="costanti.FieldType.string"
          ></CMyFieldDb>
          <q-btn
            color="primary"
            icon="fas fa-check"
            :label="t('orderscart.sendmail_test')"
            @click="sendMailTest"
          ></q-btn>

          <q-btn
            color="positive"
            icon="mail"
            :label="t('orderscart.sendmail', { count: arrout.length })"
            @click="sendMailToAll"
          ></q-btn>
        </div>

        <!--
      <div v-for="(orderscart, index) in getOrdersCart" :key="index">

        <div>
          {{ orderscart.numorder }}<br>
        </div>

        <div class="container">
          <div class="q-pa-sm col items-start q-gutter-xs" v-for="(itemorder, index) in orderscart.items" :key="index">

            <CSingleCart :order="itemorder.order" :showall="true" :nomodif="true"/>
          </div>
        </div>
        <q-separator></q-separator>
        <div class="col-6 q-mr-sm" style="text-align: right">
          <span class="text-grey q-mr-xs">Totale:</span> <span
          class="text-subtitle1 q-mr-sm ">€ {{ orderscart.totalPrice.toFixed(2) }}</span>
        </div>

        <q-input v-model="orderscart.note" style="max-width: 400px;" label="Note aggiuntive:"
                 filled dense
                 debounce="1000"
                 autogrow
                 @input="change_field(orderscart.id, 'note')">
        </q-input>

        <br>
      </div>
      -->

    </div>
      <div v-else-if="tabpages === shared_consts.OrderPages.LISTA_TOTALI.value">
        <div class="q-pa-sm">
          <q-btn
            v-if="true"
            color="primary"
            icon-right="archive"
            label="Esporta Lista Totali"
            no-caps
            @click="exportListaTotali"
          />

          <q-table
            :grid="false"
            :hide-header="$q.screen.lt.sm"
            :columns="columns_listafiltrati"
            row-key="index"
            :pagination="totalPagination"
            :rows="listatotali"
          >
            <template v-slot:body="props">
              <q-tr :props="props">
                <q-td key="index" :props="props">
                  <div class="q-pa-sm">{{ props.row.index }}</div>
                </q-td>
                <q-td key="code" :props="props">
                  <div class="q-pa-sm">{{ props.row.code }}</div>
                </q-td>
                <q-td key="codice_interno" :props="props">
                  <div class="q-pa-sm">{{ props.row.codice_interno }}</div>
                </q-td>
                <q-td key="productName" :props="props">
                  <div class="q-pa-sm">{{ props.row.productName }}</div>
                </q-td>
                <q-td key="strSubCatProds" :props="props">
                  <div class="q-pa-sm">
                    {{ props.row.strSubCatProds }}
                  </div>
                </q-td>
                <q-td key="qty" :props="props">
                  <div class="q-pa-sm">{{ props.row.qty }}</div>
                </q-td>
                <q-td key="singlePrice" :props="props">
                  <div class="q-pa-sm">
                    {{ props.row.singlePrice.toFixed(2) }} €
                  </div>
                </q-td>
                <q-td key="subtotalPrice" :props="props">
                  <div class="q-pa-sm">
                    {{ props.row.subtotalPrice.toFixed(2) }} €
                  </div>
                </q-td>
              </q-tr>
            </template>
          </q-table>
        </div>
      </div>

      <!-- Emails -->
    </div>
    <CMyDialog v-model="showOrdersCart" title="Ordine">
      <COrdersCart :iscash="false" :idOrdersCart="idOrdersCartToShow" />
    </CMyDialog>
  </q-page>
</template>

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

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