<template>
    <div class="multiple-input">
        <el-input v-model="input" :placeholder="placeholder">
            <template slot="append"><i class="el-icon-plus add-btn" @click="onAdd"></i></template>
        </el-input>
        <ul>
            <li v-for="(item,index) in value" :key="index">
                <span>{{item}}</span>
                <i class="el-icon-close delete-btn" @click="onDelete(index)"></i>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    model: {
        prop: 'value',
        event: 'change'
    },
    props: {
        placeholder: String,
        value: Array
    },
    data () {
        return {
            input: ''
        }
    },
    methods: {
        onAdd () {
            if (this.input) {
                const value = this.value
                value.push(this.input)
                this.input = ''
                this.$emit('change', value)
            }
        },
        onDelete (index) {
            const value = this.value
            if (value[index]) {
                value.splice(index, 1)
                this.$emit('change', value)
            }
        }
    }
}
</script>

<style lang="less" scoped>
.multiple-input {
    .add-btn {
        cursor: pointer;
    }
    .delete-btn {
        cursor: pointer;
        color: red;
        margin-left: 15px;
    }
    ul {
        padding: 0;
        list-style: none;
    }
}
</style>