var VueTomSelect = (function () {
    return {
        name: 'tomselect',
        data() {
            return {
                tomselect: null,
                first: true,
            }
        },
        props: ['id', 'eltype', 'multiple', 'options', 'config', 'value', 'placeholder'],
        template: `
    <template v-if="eltype=='input'">
    <input :id="id" :value="value" :placeholder="placeholder">
    </template>
    <template v-else>
    <select :id="id" :multiple="multiple" :value="value">
    <option v-show="placeholder" selected disabled value="">{{placeholder}}</option>
    <slot></slot>
    </select>
    </template>
    `,
        mounted() {
            let conf = this.config || {
                create: false,
            }
            if (this.eltype == 'select') {
                conf.options = this.options;
            }
            conf.onChange = (v) => {
                this.$emit('changed', v);
            }
            let t = new TomSelect("#" + this.id, conf);
            if (this.value) {
                t.setValue(this.value)
            }
            this.tomselect = t;
        },
        methods: {
            setValue(v) {
                this.tomselect.setValue(v)
            },
        },
        watch: {
            value(v) {
                if (this.first && this.multiple) return;
                this.tomselect.setValue(v)
            },
            options: function (options) {
                // update options
                this.tomselect.clearOptions();
                options.forEach(elem => {
                    this.tomselect.addOption(elem)
                });
            }
        },
        destroyed: function () {
            // $(this.$el).off().select2('destroy')
        }
    }
})();