<template>
  <div>
    <router-view></router-view>
    <q-drawer
      v-model="$state.rightDrawerOpen"
      side="right"
      elevated>
      <div
        v-if="order"
        class="q-pa-md">
        <q-input
          :label="$t('id')"
          :value="order.id"
          readonly/>
        <q-input
          :label="$t('delivery')"
          :value="order.landed | relDate"
          readonly/>
        <q-input
          v-if="order.address"
          :label="$t('address')"
          :value="order.address.nickname"
          readonly/>
        <q-input
          v-if="order.agencyMode"
          :label="$t('agency')"
          :value="order.agencyMode.name"
          readonly/>
        <q-btn
          :label="$t('configure')"
          to="configure"
          color="primary"
          class="q-mt-md"
          style="width: 100%;"
          flat/>
      </div>
    </q-drawer>
  </div>
</template>

<script>
import Page from 'components/Page'

export default {
  name: 'OrdersPendingView',
  mixins: [Page],
  data () {
    return {
      order: {},
      notes: null
    }
  },
  created () {
    this.$state.useRightDrawer = true
  },
  beforeRouteUpdate (to, from, next) {
    next()
    this.reload()
  },
  mounted () {
    this.reload()
  },
  methods: {
    reload () {
      let filter = {
        fields: [
          'id',
          'landed',
          'addressFk',
          'agencyModeFk'
        ],
        include: [
          {
            relation: 'address',
            scope: {
              fields: ['nickname']
            }
          }, {
            relation: 'agencyMode',
            scope: {
              fields: ['name']
            }
          }
        ]
      }

      this.$axios.get(`Orders/${this.$route.params.id}`, { params: { filter } })
        .then(res => (this.order = res.data))
    }
  }
}
</script>
