<template>
  <!-- Note in this component that it is using another component -->
<div v-if="divideorder()" >
  <OrderItem
    v-if="this.burgerordrink"
    :ui-labels="uiLabels"
    :lang="lang"
    :order-id="burgers"
    :order="order"
    :burgerordrink="burgerordrink">
  </OrderItem>
  <OrderItem
    v-if="this.burgerordrink!==true"
    :ui-labels="uiLabels"
    :lang="lang"
    :order-id="drinksAndExtras"
    :order="order"
    :burgerordrink="burgerordrink">
  </OrderItem>
  <button v-on:click="orderDone">
    {{uiLabels.ready}}
  </button>
</div>
</template>
<script>
import OrderItem from '@/components/OrderItem.vue'

export default {
  name: 'OrderItemToPrepare',
  components: { OrderItem },
  drinksAndExtras:[],
  burgers:[],
  aBurger:[],
  burgerordrink: true,
  divide:true,

  props: {
    uiLabels: Object,
    order: Object,
    orderId: String,
    lang: String
  },
  methods: {
    orderDone: function () {
      // sending 'done' message to parent component or view so that it
      // can catch it with v-on:done in the component declaration
      this.$emit('done');
    },
    cancelOrder: function () {
      // not implemented
    },
    divideorder: function(){
      var i
      for (i=0;this.order.ingredient.length;i++){
        if (this.order.ingredient[i].category < 4){
          this.aBurger.pusht(this.order.ingredient[i])
        }
        if (this.order.ingredient[i].category == 4){
          this.aBurger.push(this.order.ingredient[i])
          this.burgers.push(this.aBurger);
          this.aBurger=[];
        }
        else{
          this.drinksAndExtras.push(this.order.ingredient[i])
        }
      }
      return true


    }

  }

}
</script>
<style scoped>

</style>