<template>
	<el-form-item class="input-wrapper" :label="propertyName" content-float="right"
	              :content-width="contentWidth" :labelOffsetTop="labelOffsetTop">
		<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="linked">
			<span class="linked">Linked to parent</span>
		</template>
		<template v-else>
			<slot></slot>
		</template>
		<el-popover
			v-if="switchable"
			trigger="click"
			:disabled="!editable"
		>
			<div class="linked-prop-popover">
				<div>
					<span>{{$t('Link to parent')}}: </span>
					<el-switch :value="linked" @input="onChange"/>
				</div>
				<div v-if="linked">
					<el-input size="mini" v-model="value.alias" :placeholder="$t('Alias')"/>
				</div>
			</div>
			<el-link style="padding: 3px;" slot="reference" icon="el-icon-link" :underline="false"
			         :type="linked ? 'success' : 'default'" :disabled="!editable"/>
		</el-popover>
	</el-form-item>
</template>

<script>
	import camelcase from 'camelcase'
	import ElFormItem from "./form-item";

	export default {
		name: "LinkableInputWrapper",
		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 {}
		},
		watch: {
			value(v) {

			}
		},
		computed: {
			linked() {
				return typeof this.value === 'object' && this.value.type === 'link'
			}
		},
		methods: {
			onChange(v) {
				if (v) {
					this.$set(this.container, this.propertyName, {
						type: 'link',
						alias: undefined,
					});
				} else {
					this.$delete(this.container, this.propertyName);
				}
			}
		}
	}
</script>

<style scoped>

</style>