<template>
  <div class="restaurants-admin-orders-container restaurants-listing">
    <filters-container :id="filterId" :filters="filters" />

    <table-listing
      id="restaurant-admin-orders-listing"
      endpoint="content/dishes_orders"
      :fields="requestFields"
      :filters="requestFilters"
      :filter-id="filterId"
      :headers="headers"
      :rows="scaffoldRows"
      :on-row-click="handleRowClick"
      :mass-actions="massActions"
      :items-per-page="10"
    >
      <template #no-data>{{ $_tr('empty') }}</template>
    </table-listing>
  </div>
</template>

<script>
import { http } from '@inside-library/helpers/Http'

export default {
  name: 'AdminOrdersListing',
  $_i18nRootPath: 'customs.RESTAURANTS.ADMIN_ORDERS',
  data() {
    return {
      filterId: 'restaurants-admin-orders',
      orderAdmin: null,
      requestFields: [
        'uuid',
        'title',
        'admin',
        'content_type',
        'cost',
        'date',
        'order',
        { authors: ['uuid', 'firstname', 'lastname'] },
        { dishes_orders_status: ['uuid', 'title', 'color'] }
      ]
    }
  },
  computed: {
    headers() {
      return [
        { value: this.$_tr('headers.user') },
        {
          value: this.$_tr('headers.date'),
          key: 'date',
          sortable: true
        },
        { value: this.$_tr('headers.menu') },
        { value: this.$_tr('headers.cost') },
        { value: this.$_tr('headers.status') }
      ]
    },
    filters() {
      return [
        {
          modelName: 'users',
          type: 'selectbox',
          async: {
            contentType: 'users',
            fields: ['lastname', 'firstname', 'uuid'],
            filters: { status: 1 }
          },
          reference: 'authors',
          equality: 'eq',
          class: 'author',
          label: this.$_tr('filters.author'),
          labelCallback: fields => this.$_username(fields),
          objectValueKey: 'uuid'
        },
        {
          modelName: 'day',
          type: 'day',
          label: this.$_tr('filters.day'),
          filterOn: 'date',
          equality: '',
          class: 'day',
          callback: date => {
            if (!date) return

            return {
              'date:gte': `${date} 00:00:00`,
              'date:lte': `${date} 23:59:59`
            }
          }
        },
        {
          modelName: 'status',
          type: 'selectbox',
          fetch: true,
          reference: 'dishes_orders_status',
          fields: ['uuid', 'title'],
          filters: { status: 1 },
          objectLabelKey: 'title',
          objectValueKey: 'uuid',
          label: this.$_tr('filters.status'),
          class: 'status'
        }
      ]
    },
    massActions() {
      return [
        {
          id: 'print',
          label: this.$_tr('actions.print'),
          callback: () => {
            window.print()
          }
        }
      ]
    },
    requestFilters() {
      return {
        sort: ['date:desc', 'published_at:desc'],
        'status:eq': 1,
        'offset:eq': 0
      }
    }
  },
  async beforeMount() {
    this.orderAdmin = await this.fetchOrderAdmin()

    if (this.isAlive(this.orderAdmin, ['permission', 'update'])) {
      this.$router.push({ name: 'ErrorPage', params: { code: '403' } })
    }
  },
  methods: {
    async fetchOrderAdmin() {
      try {
        const { data } = await http.get('content/dishes_orders', {
          fields: ['admin'],
          filters: { 'status:eq': 1, limit: 1 }
        })

        return data[0].admin
      } catch (err) {
        throw new Error(err)
      }
    },
    scaffoldRows(field) {
      const menu = JSON.parse(field.order)
        .map(({ name }) => name)
        .join(' - ')

      return [
        {
          id: 'user',
          class: 'user',
          value: this.$_username(field.authors)
        },
        {
          id: 'date',
          class: 'date',
          value: this.$_formatDate(field.date)
        },
        {
          id: 'menu',
          class: 'menu',
          value: menu,
          cellOptions: { width: '60%' }
        },
        {
          id: 'total',
          class: 'total',
          value: `${field.cost}€`
        },
        {
          id: 'status',
          class: 'status',
          value: field.dishes_orders_status.title,
          data: { style: { color: field.dishes_orders_status.color } }
        }
      ]
    },
    handleRowClick(row) {
      this.triggerModal(
        'restaurants-order',
        'fetch',
        { item: row, content: row.content_type },
        {
          layout: 'right',
          width: 550,
          transition: 'fadeInLeft',
          listingId: this.listingId
        }
      )
    }
  }
}
</script>

<style lang="scss">
@media print {
  .restaurants-admin-orders-container {
    .listing-item {
      margin-bottom: var(--spacing-l);
      list-style-type: none;
    }
  }
}
</style>
