<template>
  <byjove-model-crud model-name="Product"
                     :allow-edit="allowEdit"
                     :mode="mode"
                     @refresh="record => { product = record }">

    <div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">

      <b-field label="Item ID">
        <b-input v-if="mode == 'creating' || mode == 'editing'"
                 v-model="product.item_id">
        </b-input>
        <span v-if="mode == 'viewing' || mode == 'deleting'">
          {{ product.item_id }}
        </span>
      </b-field>

      <img :src="product.image_url" />
    </div>

    <b-collapse class="card"
                animation="slide"
                :open="false"
                aria-id="contentIdForVendors">

      <template #trigger="props">
        <div class="card-header"
             role="button"
             aria-controls="contentIdForVendors"
             :aria-expanded="props.open">
          <p class="card-header-title">
            Vendors
          </p>
          <a class="card-header-icon">
            <b-icon pack="fas"
                    :icon="props.open ? 'angle-down' : 'angle-up'">
            </b-icon>
          </a>
        </div>
      </template>

      <div class="card-content">
        <div class="content">

          <b-field label="Preferred Vendor">
            {{ product.vendor_name }} @ {{ product.default_unit_cost_display }}
          </b-field>

          <b-table :data="product.costs">
            <b-table-column label="Vendor"
                            field="vendor_name"
                            v-slot="props">
              {{ props.row.vendor_name }}
            </b-table-column>
            <b-table-column label="Unit Cost"
                            field="unit_cost"
                            v-slot="props">
              {{ props.row.unit_cost }}
            </b-table-column>
          </b-table>

        </div>
      </div>
    </b-collapse>

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

<script>
import ByjoveModelCrud from '../model-crud'

export default {
    name: 'Product',
    props: {
        mode: String,
        allowEdit: {
            type: Boolean,
            default: false,
        },
    },
    components: {
        ByjoveModelCrud,
    },
    data: function() {
        return {
            product: {},
        }
    },
}
</script>
