<template>
  <span>
    <el-tag
      v-for="(tag,index) in list"
      :key="tag"
      closable
      :disable-transitions="false"
      @close="remove(index)">
      {{tag}}
    </el-tag>
    <el-input
      v-if="inputVisible"
      v-model="inputValue"
      ref="myInput"
      size="small"
      @keyup.enter.native="handleInputConfirm"
      @blur="handleInputConfirm"
      style="width: 100px"
    >
    </el-input>
    <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加</el-button>

  </span>
</template>

<script>
  import {layer} from '../math/layer';
  export default {
    name: "option-edit",
    props: {
      list: {
        type: Array
      }
    },
    data() {
      return {
        inputValue: '',
        inputVisible: false
      }
    },
    methods: {
      remove(index) {
        this.list.splice(index, 1);
      },
      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.myInput.$refs.input.focus();
        });
      },
      handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue.length > 0) {
          if (this.list.indexOf(inputValue) === -1) {
            this.list.push(inputValue);
          } else {
            layer.error('不可添加重复项');
            return;
          }
        }
        this.inputVisible = false;
        this.inputValue = '';
      }
    }
  }
</script>

<style scoped>

</style>
