<template>
  <div class="app-container">

    <div v-for="(tags, tagsIndex) in tagArray" :key="tagsIndex">

      <el-tag :key="tag" v-for="tag in dynamicTags[`tag${tagsIndex}`]" closable :disable-transitions="false"     @close="handleClose(tag, tagsIndex)">
        {{tag}}
      </el-tag>

      <el-input class="input-new-tag" v-if="inputVisible && currentIndex === tagsIndex" v-model="inputValue"     :ref="`saveTagInput${tagsIndex}`" size="small" @keyup.enter.native="handleInputConfirm(tagsIndex)"     @blur="handleInputConfirm(tagsIndex)"></el-input>

      <el-button v-else class="button-new-tag" size="small" @click="showInput(tagsIndex)">+ New Tag     {{tagsIndex}}</el-button>
      <br />
      <br />
    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        tagArray: [...Array(3).keys()],
        dynamicTags: {
          'tag0': [],
          'tag1': [],
          'tag2': []
        },
        inputVisible: false,
        currentIndex: -1,
        inputValue: ''
      }
    },
    methods: {
      handleClose(tag, index) {
        this.dynamicTags[`tag${index}`].splice(this.dynamicTags[`tag${index}`].indexOf(tag), 1)
      },

      showInput(index) {
        this.currentIndex = index
        this.inputVisible = true
        this.$nextTick(_ => {
          this.$refs[`saveTagInput${index}`][0].$refs.input.focus()
        })
      },

      handleInputConfirm(index) {
        const inputValue = this.inputValue
        if (inputValue) {
          this.dynamicTags[`tag${index}`].push(inputValue)
        }
        this.inputVisible = false
        this.currentIndex = -1
        this.inputValue = ''
      }
    }
  }
</script>

<style lang='scss' scpoed>
  .app-container {
    padding-bottom: 2rem;

    .el-tag + .el-tag {
      margin-left: 10px;
    }
    .button-new-tag {
      margin-left: 10px;
      height: 32px;
      line-height: 30px;
      padding-top: 0;
      padding-bottom: 0;
    }
    .input-new-tag {
      width: 90px;
      margin-left: 10px;
      vertical-align: bottom;
    }
  }
</style>