<template>
	<component :is="mode + '-input-wrapper'" :editable="editable" :linkable="linkable" :value="value" :container="container" :property="property" :propertyName="propertyName">
		<el-select :disabled="!editable" :value="editValue" filterable @input="onInput" :placeholder="property.default" class="el-select">
			<el-option
				v-for="(item, key) in assets"
				:key="key"
				:label="item.name"
				:value="item.uuid">
				<span>{{item.name}}</span>
			</el-option>
		</el-select>
	</component>
</template>

<script>
	import {mapMutations} from 'vuex'
	import LinkableInputWrapper from "./LinkableInputWrapper";
	import CmdInputWrapper from "./CmdInputWrapper";

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

<style scoped>

</style>
