<template>
  <div class="container">
    <div class="row" v-for="(choice, i) in item.options" :key="i">
      <div class="col-sm-1">
        <input
          v-if="item.optionType === 'Multiple' || item.optionType === 'MultipleLimit'"
          type="checkbox"
          v-model="selection[i]"
          @change="UpdateSelection(choice, i)"
        />
        <input
          v-else
          type="radio"
          v-model="selection[i]"
          name="RadioOption"
          :value="choice.description"
          @change="UpdateSelection(choice, i)"
        />
      </div>
      <!-- Description -->
      <div class="col-sm-6">
        <label>{{ choice.description }}</label>
      </div>
      <!-- Qty -->
      <div class="col-sm-3" v-if="choice.price > 0">
        <input
          class="form-control"
          type="number"
          :name="choice.description"
          v-model="qtys[i]"
          placeholder="qty"
          :min="1"
          @change="UpdateSelectionQty(choice, i)"
        />
      </div>
      <!-- Price -->
      <div class="col-sm-2" v-if="choice.price > 0">
        <label>R {{ choice.price }}</label>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "optionSelection",
  props: {
    item: { type: Object, default: () => {} }
  },
  data() {
    return {
      selection: [],
      qtys: []
    };
  },
  methods: {
    UpdateSelection(field, index) {
      this.qtys[index] = 1;
      const item = {
        field: field,
        value: this.selection[index]
      };

      item.field.qty = this.qtys[index];

      if (!item.value) {
        this.qtys[index] = "Undefined";
      }
      this.$emit("UpdateSelection", item);
    },
    UpdateSelectionQty(field, index) {
      field.qty = Number(this.qtys[index]);

      //alert(JSON.stringify(field));
      this.$emit("UpdateSelectionQty", field);
    }
  }
};
</script>