<template>
    <el-select v-model="selected" placeholder="请选择标签" multiple value-key="id">
        <el-option v-for="item in tags" :key="item.id" :value="item" :label="item.name"></el-option>
    </el-select>
</template>
<script>
export default {
    props: {
        value: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            tags: [],
            selected: []
        };
    },
    computed: {},
    created() {
        if (this.value) {
            this.selected = [...this.value];
        }
        this.$http.post('/tag/all', { size: 10000 }, { body: 'json' }).then(res => {
            this.tags = res.content;
        });
    },
    watch: {
        value(val) {
            if (val) {
                if (val.map(tag => tag.id).join(',') !== this.selected.map(tag => tag.id).join(',')) {
                    this.selected = [...val];
                }
            } else {
                this.selected = [];
            }
        },
        selected(val) {
            this.$emit('input', [...val]);
        }
    }
};
</script>