<template>
  <byjove-model-crud model-name="ReceivingBatchRow"
                     model-index-title="Receiving"
                     :mode="mode"
                     :header-label-renderer="renderHeaderLabel"
                     :parent-header-label-renderer="renderParentHeaderLabel"
                     api-object-url="/api/receiving-batch-row/"
                     model-path-prefix="/receiving"
                     @refresh="record => { row = record }"
                     is-row
                     :allow-edit="false"
                     >
    <!-- TODO: allow-edit should be be true if batch still open -->
                     <!-- model-title="Ordering Batch" -->
                     <!-- model-title-plural="Ordering Batches" -->
                     <!-- api-index-url="/api/ordering-batches" -->
                     <!-- :row-label-renderer="renderRowLabel" -->
                     <!-- @save="save" -->

    <b-field label="UPC">
      <span>
        {{ row.upc_pretty }}
      </span>
    </b-field>

    <b-field label="Brand">
      <span>
        {{ row.brand_name }}
      </span>
    </b-field>

    <b-field label="Description">
      <span>
        {{ row.description }}
      </span>
    </b-field>

    <b-field label="Size">
      <span>
        {{ row.size }}
      </span>
    </b-field>

    <b-field label="Case Size">
      <span>
        {{ row.case_quantity }}
      </span>
    </b-field>

    <b-field label="Cases Ordered">
      <span>
        {{ row.cases_ordered }}
      </span>
    </b-field>

    <b-field label="Units Ordered">
      <span>
        {{ row.units_ordered }}
      </span>
    </b-field>

    <b-field label="Cases Shipped">
      <span>
        {{ row.cases_shipped }}
      </span>
    </b-field>

    <b-field label="Units Shipped">
      <span>
        {{ row.units_shipped }}
      </span>
    </b-field>

    <b-field label="Cases Received">
      <span>
        {{ row.cases_received }}
      </span>
    </b-field>

    <b-field label="Units Received">
      <span>
        {{ row.units_received }}
      </span>
    </b-field>

    <b-field label="Cases Damaged">
      <span>
        {{ row.cases_damaged }}
      </span>
    </b-field>

    <b-field label="Units Damaged">
      <span>
        {{ row.units_damaged }}
      </span>
    </b-field>

    <b-field label="Cases Expired">
      <span>
        {{ row.cases_expired }}
      </span>
    </b-field>

    <b-field label="Units Expired">
      <span>
        {{ row.units_expired }}
      </span>
    </b-field>

    <b-field label="Status">
      <span>
        {{ row.status_display }}
      </span>
    </b-field>

    <br />

    <div class="buttons">
      <b-button type="is-primary"
                tag="router-link"
                :to="`/receiving/rows/${row.uuid}/receive`">
        Receive against this Row
      </b-button>
      <b-button type="is-primary"
                tag="router-link"
                :to="`/receiving/rows/${row.uuid}/edit`"
                disabled>
        Edit this Row
      </b-button>
      <b-button type="is-danger"
                disabled>
        Delete this Row
      </b-button>    </div>

  </byjove-model-crud>
</template>

<script>
import {ByjoveModelCrud} from 'byjove'

export default {
    name: 'ReceivingBatchRow',
    props: {
        mode: String,
        allowCases: {           // TODO
            type: Boolean,
            default: true,
        },
        allowExpired: {         // TODO
            type: Boolean,
            default: true,
        },
        orderQuantitiesKnown: { // TODO
            type: Boolean,
            default: true,
        },
    },
    components: {
        ByjoveModelCrud,
    },
    data: function() {
        return {
            row: {},
        }
    },
    methods: {

        renderParentHeaderLabel(row) {
            return row.batch_id_str
        },

        renderHeaderLabel(row) {
            return row.upc_pretty
        },

        // save(url) {
        //     let params = {
        //         item_id: this.product.item_id,
        //         description: this.product.description,
        //     }
        //     this.$http.post(url, params).then(response => {
        //         this.$router.push('/products/' + response.data.data.uuid)
        //     })
        // },
    },
}
</script>

<!-- <style> -->
<!--   table.receiving-quantities td { -->
<!--       padding: 0px 10px 0px 0px; -->
<!--   } -->
<!-- </style> -->