Vue.component('NewIng',{
  template : `
    <div class="ingredient__form">
      <input v-model="text">

    </div>
  `,
  props : {
    obj : Object
  },
  data () {
    return {
      name : "name",
      fr : "fr",
      en : "en",
      it : "it",
    }
  },
  methods : {
    hello(){
      return "hello"
    },
  }
})

let vm = new Vue({
  el: '#root',
  data : {
    message: "Hello Vue",
    editTabMarkerL: "0px",
    editTabMarkerW: "0px",
    editTabRollXOff: 0,
    newIng: {
      name: "",
      fr: "",
      en: "",
      it: "",
    }
  },
  methods: {
    obj2php: function(obj) {
      data = JSON.stringify(obj)
      r = new XMLHttpRequest
      r.open("POST", "asset/php/handler.php", true)
      r.setRequestHeader(
        "Content-type",
        "application/json")
      r.send(data)
    },
    saveIng: function() {
      if (this.newIng.name !== "") {
        ingredients[this.newIng.name] = {
          fr: this.newIng.fr,
          en: this.newIng.en,
          it: this.newIng.it,
        }
      }
      this.obj2php(ingredients)
    },
    setEditTab: function(ind) {
      let xoff = 0
      switch(ind){
        case 'ind':
          xoff = 0;
          break;
        case 'dish':
          xoff = 1;
          break;
        case 'resto':
          xoff = 0;
          break;
      }
      this.editTabRollXOff = xoff
      m = document.getElementById("edit-tab-nav-" + ind)
      this.editTabMarkerL = m.offsetLeft + "px"
      this.editTabMarkerW = m.offsetWidth + "px"
    }
  },
  computed: {
    editTabRollTransX: function () {
      return "translateX(-" + this.editTabRollXOff + "00vw)";
    },
  },
  created: function(){
    console.log("created start")
    console.log("created end")
  },
  mounted: function() {
    console.log("mounted start")
    this.setEditTab('ing')
    console.log("mounted end")
  },
  updated: function() {
    console.log("updated start")
    console.log("updated end")
  }

})