<template>
	<el-form-item class="input-wrapper" :label="propertyName" content-float="right"
	              :content-width="contentWidth" :labelOffsetTop="labelOffsetTop"
				  v-if="(propertyName!='_width'&&propertyName!='_height')" >
				  
		<el-tooltip placement="left" class="label" slot="label" trigger="hover" :open-delay="500" :enterable="false">
			<div slot="content" class="property-name-popover">
				<p>{{$t('Alias')}}：{{property.alias}}</p>
				<p>{{$t('Name')}}：{{propertyName}}</p>
			</div>
			<div>
				<p class="alias">{{property.alias||propertyName}}</p>
				<p class="property-name">{{propertyName}}</p>
			</div>
		</el-tooltip>
		<template v-if="cmdMode">
			<el-input class="cmd-input" placeholder="exp" :value="cmdValue" @input="onInputCmdValue"
			          @change="saveCmdValue"></el-input>
		</template>
		<template v-else>
			<slot></slot>
		</template>
		<el-link style="padding: 3px;" icon="el-icon-link" :underline="false"
		         v-if="switchable"
		         :type="cmdMode ? 'success' : 'default'" :disabled="!editable" @click="onClickLink"/>
	</el-form-item>
</template>

<script>
	import ElFormItem from "./form-item";
	import {cmdOldPrefix, cmdPrefix} from "../../utils";
	//v-if="(propertyName!='_width'&&propertyName!='_height')" >
	export default {
		name: "CmdInputWrapper",
		components: {ElFormItem},
		props: {
			property: Object,
			value: {},
			container: {},
			propertyName: String,
			editable: Boolean,
			switchable: Boolean,
			contentWidth: {
				type: String,
				default: '65%',
			},
			labelOffsetTop: {
				type: Number,
				default: 0,
			},
		},
		data() {
			return {
				//cmdValue: this.container[this.cmdPropName] || '',
			}
		},
		watch: {
			container(v) {
				//this.cmdValue = this.container[this.cmdPropName] || '';
			},
		},
		computed: {
			cmdValue() {
				return this.container[this.cmdPropName] || '';
			},
			cmdMode() {
				return this.container.hasOwnProperty(this.cmdPropName);
			},
			cmdPropName() {
				return cmdPrefix + this.propertyName;
			},
			cmdOldPropName() {
				return cmdOldPrefix + this.propertyName;
			},
		},
		methods: {
			onClickLink() {
				if (this.cmdMode) {
					this.$set(this.container, this.cmdOldPropName, this.cmdValue);
					this.$delete(this.container, this.cmdPropName);
				} else {
					let cmdValue = this.container[this.cmdOldPropName] || '';
					this.$set(this.container, this.cmdPropName, cmdValue);
				}
			},
			onInputCmdValue(v) {
				this.container[this.cmdPropName] = v;
			},
			saveCmdValue(v) {
				let oldValue = this.container[this.cmdPropName];
				//this.cmdValue = v;
				this.$set(this.container, this.cmdPropName, v);
				this.$emit('cmd-prop-change', v, this.container, this.cmdPropName, oldValue);
			},
		}
	}
</script>

<style scoped>

</style>