<template>
  <div>
    <i class="el-icon-circle-plus-outline" style="cursor: pointer" @click="add"></i>
    <el-input v-for="(item,index) in arr"
              style="margin-bottom: 4px"
              :value="item"
              @input="(v)=>{doInput(v,index)}"
              :placeholder="placeholder">
      <template slot="append">
        <i class="el-icon-remove-outline" style="cursor: pointer" @click="remove(index)"></i>
      </template>
    </el-input>
  </div>
</template>

<script>
export default {
  name: "ArrayInput",
  props: {
    value: {
      type: String,
      default: ''
    },
    placeholder:{
      type: String,
      default: ''
    }
  },
  model: {
    prop: 'value',
    event: 'changeValue'
  },
  computed: {
    arr() {
      return this.value.split(',')
    }
  },
  methods: {
    doInput(value, index) {
      let arr = this.value.split(',')
      arr[index] = value
      this.$emit('changeValue', arr.join(","))
    },
    add() {
      this.$emit('changeValue', this.value + ",")
    },
    remove(index) {
      let arr = this.value.split(',')
      arr.splice(index, 1)
      this.$emit('changeValue', arr.join(","))
    },
  }


}
</script>

<style lang="scss" scoped>

</style>
