<template>
    <el-autocomplete
        v-model="inputValue"
        :fetch-suggestions="fetchSuggestions"
        :placeholder="placeholder"
    ></el-autocomplete>
</template>
<script>
export default {
    props: {
        suggestions: {
            type: Array,
            default: () => []
        },
        value: {},
        placeholder: {
            type: String,
            default: '请输入'
        }
    },
    data() {
        return {
            inputValue: ''
        };
    },
    created() {
        this.inputValue = this.value;
    },
    methods: {
        fetchSuggestions(queryString, cb) {
            if (this.suggestions.length === 0) {
                cb([]);
                return;
            }
            cb(
                this.suggestions.map(item => {
                    return {
                        value: item
                    };
                })
            );
        }
    },
    watch: {
        value(val) {
            this.inputValue = val;
        },
        inputValue(val) {
            this.$emit('input', val);
        }
    }
};
</script>
