<template>
	<el-select :disabled="!editable" :value="editValue" @input="onInput" :placeholder="property.default" class="el-select">
		<el-option
			v-for="(item, key) in property.enum"
			:key="key"
			:label="typeof item === 'object' ? item.label : item"
			:value="typeof item === 'object' ? item.value : item">
			<span>{{typeof item === 'object' ? item.label : item}}</span>
			<span class="enum-input-comment">{{typeof item === 'object' ? item.value : item}}</span>
		</el-option>
	</el-select>
</template>

<script>
	import LinkableInputWrapper from "./LinkableInputWrapper";
	import CmdInputWrapper from "./CmdInputWrapper";

	export default {
		name: "EnumInput",
		components: {LinkableInputWrapper, CmdInputWrapper},
		props: ['value', 'container', 'property', 'propertyName', 'editable'],
		computed: {
			editValue() {
				return this.value === undefined ? this.property.default : this.value;
			},
		},
		methods: {
			onInput(v, oldValue){
				if(v !== this.value){
					this.$emit('input', v, this.container, this.propertyName, oldValue);
				}
			}
		},
	}
</script>

<style scoped>

</style>
