Vue.component("tagged-input", {
  template: `
  <div class='child'>
  <div class="input-wrapper clearfix">
     <li :tabindex="index" :class="['tag left',{'focus':index===deleteIndex}]" v-for="(tag,index) in tagList" :key="tag" ref="tags">
     <span>{{tag}}</span>
     <i class="iconfont icon-delete" @click="deleteTag(index)"></i>
          </li><!-- </ul> -->
        <div class="left input-box">
          <input type="text" class="input" :placeholder="placeholder" v-model="currentValue"
            @keyup.enter="onInputEnter"
            @input="onInput"
            @keyup.8.prevent.stop="onBackspacePress"></input>
        </div>
      </div>
    </div>
</div>


`,
  props: {
    value: [String, Number],
    placeholder: {
      type: [String, Number],
      default: ''
    },
    tagged: {
      type: Boolean,
      default: true
    },
    handleInput: Function
  },
  data() {
    return {
      currentValue: this.value,
      deleteIndex: -1,
      tagList: ['test1', 'test2']
    }
  },
  watch:{
    tagList(val){
      this.$emit('input',val.join(","));
    }
  },
  methods: {
    onInputEnter() {
      this.tagList.push(this.currentValue);
      this.currentValue = "";
      // this.$emit("input",this.currentValue);
    },
    /*
    input框有值则清空，第二次按键focus上一个tag。再次按则删除tag.
    */
    onBackspacePress(event) {

      if (event.target.value)
        this.currentValue = "";
      else {
        if (this.tagList.length > 0)
          this.deleteTag(this.tagList.length - 1);
      }
      return false;

    },
    deleteTag(index) {
      this.tagList.splice(index, 1);
    },
    onInput(event) {
      this.currentValue = event.target.value;
      console.log(" child :in tagged ",this.currentValue)
      // this.$emit("input",this.currentValue);
      if (this.handleInput)
        this.handleInput(this.currentValue);
    },

  }

})

let parent = new Vue({
  el: '.parent',
  data: {
    taggedInput: ''
  },
  watch:{
   "taggedInput"(val){
     console.log("parent watch input: ",val);
   } 
  },
  methods: {
    handleInput(val) {
      console.log(this.input);
    }
  }
})


/*
backspace回退问题：http://stackoverflow.com/questions/6587525/javascript-backspace-by-default-problem-going-back-a-page
*/