<template>
	<div class="vector2-input">
		<span class="field-label">x</span>
		<el-input-number style="flex: 1;" :disabled="!editable" v-model="editValue.x" @change="v=>onInput(v, 'x')" controls-position="right"
		                 :placeholder="defaultValue.x"></el-input-number>
		<span class="field-label">y</span>
		<el-input-number style="flex: 1;" :disabled="!editable" v-model="editValue.y" @change="v=>onInput(v, 'y')" controls-position="right"
		                 :placeholder="defaultValue.y"></el-input-number>
	</div>
</template>

<script>
	import {parseVector2} from "props-compute";
	import LinkableInputWrapper from "./LinkableInputWrapper";
	import CmdInputWrapper from "./CmdInputWrapper";

	export default {
		name: "Vector2Input",
		components: {LinkableInputWrapper, CmdInputWrapper},
		props: ['value', 'container', 'property', 'propertyName', 'editable'],
		data() {
			return {
				//editValue: {},
			}
		},
		watch: {
			value(v) {
				//let editValue = v === undefined ? this.property.default : v;
				//this.editValue = parseVector2(editValue);
			}
		},
		computed: {
			editValue() {
				return this.value === undefined ? this.defaultValue : parseVector2(this.value);
			},
			defaultValue() {
				let value = this.property.default;
				let placeholder = {};
				if (value) {
					let v = parseVector2(value);
					placeholder.x = v.x + '';
					placeholder.y = v.y + '';
				} else {
					placeholder.x = 'unset';
					placeholder.y = 'unset';
				}
				return placeholder;
			},
		},
		methods: {
			onInput(v, field) {
				this.editValue[field] = v;
				let {x, y} = this.editValue;
				let value = {
					x, y,
				};
				this.$emit('input', value, this.container, this.propertyName, this.value);
			}
		},
	}
</script>

<style scoped>
</style>