<template>
    <label>
        <span :style="{ width: width + 'em' }">{{ $t(labelTr) }}</span>
        <select :title="$t(tooltipTr)" :value="value" :disabled="disabled" @change="updateValue($event.target.value)">
            <option v-if="allowNone" :value="noneValue">{{ $t('none') }}</option>
            <option v-for="item in list" :key="item.value" :value="item.value">
                {{ item.captionTr ? $t(item.captionTr) : item.caption }}
            </option>
        </select>
    </label>
</template>

<script>
export default {
    name: "SelectDropdownWidget",
    props: {
        labelTr: {
            type: String,
            required: true,
        },
        value: {
            type: String,
            required: false,
        },
        tooltipTr: {
            type: String,
            required: true,
        },
        width: {
            type: Number,
            required: false,
            default: 10
        },
        list: {
            type: Array,
            required: true,
        },
        allowNone: {
            type: Boolean,
            required: false,
            default: false
        },
        noneValue: {
            type: String,
            required: false,
            default: ''
        },
        disabled: {
            type: Boolean,
            required: false,
            default: false
        }
    },
    methods: {
        updateValue(value) {
            this.$emit("input", value);
        }
    }
};
</script>

<style scoped>
label {
    display: block;
}

label>span {
    display: inline-block;
}

select {
    margin-left: 0.5em;
}
</style>
