<template>
  <div>
    <section class="modal-card-body">
      <div class="field">
        <label class="label">Code</label>
        <div class="control">
          <input class="input" type="text" placeholder="Code" v-model="formData.code">
        </div>
      </div>

    <div class="select is-multiple">
      <select id="Supplier" v-model="supplier_id" class="form-control">
        <option v-for="supplier in suppliers" :key="supplier.id" :value="supplier.id">{{ supplier.name }}</option>
      </select>
    </div>

      <div class="field">
        <label class="label">Titre</label>
        <div class="control">
          <input class="input" type="text" placeholder="Titre" v-model="formData.title">
        </div>
      </div>

      <div class="field">
        <label class="label">Modèle</label>
        <div class="control">
          <input class="input" type="text" placeholder="Modèle" v-model="formData.modelNo">
        </div>
      </div>

      <div class="field">
        <label class="label">Prix Unitaire</label>
        <div class="control">
          <input class="input" type="text" placeholder="Prix Unitaire" v-model="formData.unitPrice">
        </div>
      </div>

      <div class="field">
        <label class="label">Inventaire</label>
        <div class="control">
          <input class="input" type="text" placeholder="Inventaire" v-model="formData.inventory">
        </div>
      </div>
    </section>
    <footer class="modal-card-foot">
      <button
        class="button is-success"
        :class="processing && 'is-loading'"
        @click="save">Sauvegarder</button>
      <button class="button" @click="close">Annuler</button>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'product-form',
  props: {
    objectToEdit: {
      required: false,
      type: Object,
    },
  },
  data() {
    return {
      formData: { ...this.objectToEdit },
      processing: false,
    };
  },
  methods: {
    close() {
      this.$emit('close');
    },
    save() {
      this.processing = true;
      const action = (this.formData.id > 0) ? 'update' : 'create';
      this.$store.dispatch(`products/${action}`, { data: this.formData })
        .then(() => {
          this.processing = false;
          this.$emit('close');
        });
    },
  },
};
</script>