<template>
  <div class="container">
    <div class="row">
      <div class="col-md-12" style="margin-bottom: 1em">
        <h1>Option Item</h1>
      </div>
    </div>
    <div class="row" style="text-align:left">
      <div class="col-md-12" style="margin-bottom: 1em">
        <label>Description</label>
        <div class="input-group-prepend">
          <span class="input-group-text">
            <eva-icon name="credit-card-outline" fill="#24aae1"></eva-icon>
          </span>
          <input
            class="form-control"
            type="text"
            name="description"
            v-model="menuOptionItem.description"
          />
        </div>
      </div>
    </div>
    <div class="row" style="text-align:left">
      <div class="col-md-12" style="margin-bottom: 1em">
        <label>Price</label>
        <div class="input-group-prepend">
          <span class="input-group-text">
            <eva-icon name="credit-card-outline" fill="#24aae1"></eva-icon>
          </span>
          <input
            class="form-control"
            type="number"
            name="description"
            v-model="menuOptionItem.price"
          />
        </div>
      </div>
    </div>
    <div class="row" style="text-align:left">
      <div class="col-md-12" style="margin-bottom: 1em">
        <label>Rank</label>
        <div class="input-group-prepend">
          <span class="input-group-text">
            <eva-icon name="credit-card-outline" fill="#24aae1"></eva-icon>
          </span>
          <input
            class="form-control"
            type="number"
            name="description"
            v-model="menuOptionItem.rank"
          />
        </div>
      </div>
    </div>
    <div class="row"></div>
    <div class="row">
      <div class="col-md-12" style="margin-bottom: 1em">
        <div class="input-group-prepend">
          <b-button class="btn btn-b-n" @click="Ok">Ok</b-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ImageUploader from "vue-image-upload-resize";

export default {
  name: "MenuOptionItem",
  props: {
    editMenuOptionItem: { default: {} }
  },
  components: {
    ImageUploader
  },
  data() {
    return {
      hasImage: false,
      menuOptionItem: {
        id: 0,
        description: "",
        price: 0,
        rank: 0,
        menuOptionId: 0
      }
    };
  },
  methods: {
    Ok() {
      this.$emit("MenuItemUpdated", this.menuOptionItem);
    }
  },
  watch: {
    editMenuOptionItem: {
      immediate: true,
      handler(val, oldVal) {
        if (val) {
          this.menuOptionItem = val;
        }
      }
    }
  }
};
</script>