import { getLabelText } from '/components/common/utils.js?v=3.4'

export default {
    components: { getLabelText },
    props: {
        options: { type: Array, required: true },
        selectedValue: { type: [String, Number], required: true },
        id: { type: String, required: false },
        useTranslation: { type: Boolean, required: false, default: false },
        disabled: { type: Boolean, required: false, default: false },
        tag: { required: false, default: null }
    },
    data() {
        return {
            selected : this.selectedValue
        };
    },
    created: function () {

        this.selected = this.selectedValue;

        //console.log('VueSelect Created called', this.selected, this.options);

        if (this.id && this.id != '')
            initVirtualSelectPlugin('#' + this.id);
        else
            initVirtualSelectPlugin('.vue-select');
    },
    updated: function () {
        this.selected = this.selectedValue;

        //console.log('VueSelect Updated called', this.selected, this.options);

        if (this.id && this.id != '')
            initVirtualSelectPlugin('#' + this.id);
        else
            initVirtualSelectPlugin('.vue-select');
    },
    methods: {
        getLabelText,
        changeHandler: function (e) {
            //console.log('VueJs VueSelect changeHandler:current' + this.selectedValue + ', new:' + e.target.value);
            if (e.target && e.target.value && e.target.value != this.selectedValue)
                this.$emit('selectchange', { selectedValue: e.target.value, selectedText: e.target.options[e.target.selectedIndex].text, id: this.id, tag: this.tag });
        }
    },
    template: `
    <select class="vue-select form-control" v-model="selected" @change="changeHandler" :id='id' :disabled='disabled'>
        <option v-for="item in options" :value="item.value" :key="item.value">{{ (useTranslation ? getLabelText(item.text) : item.text) }}</option>
    </select>
`
}
