<template>
	<div style="display: flex;">
		<el-popover
			placement="top"
			popper-class="input-area-popover"
			class="string-input-container"
			trigger="manual"
			v-model="popoverVisible"
			:disabled="!editable"
		>
			<div>
				<el-radio-group v-model="editValue.type" size="mini" @change="onChange" :disabled="!editable">
					<el-radio-button v-for="(item, key) in dataTypes" :label="key" :key="key">{{item}}</el-radio-button>
				</el-radio-group>
				<el-button circle plain type="danger" icon="el-icon-close" class="micro" style="margin-left: 5px;" @click="popoverVisible=false"/>
			</div>
			<el-input clearable slot="reference" :value="editValue.value" @input="onInput" @change="onChange"
			          :readonly="!editable"
			          :placeholder="defaultValue"/>
		</el-popover>
		<el-button-group>
			<el-button @click="onClickEdit" :disabled="!editable">{{dynamicIconMapping[editValue.type]}}</el-button>
			<el-button icon="el-icon-delete" @click="onClickClean" :disabled="!editable"></el-button>
		</el-button-group>
	</div>
</template>

<script>
	import {clonePureObj, dynamicIconMapping, getInputDefaultValue} from "../../utils";

	export default {
		name: "DynamicSelector",
		components: {},
		props: ['value', 'container', 'property', 'propertyName', 'editable'],
		data() {
			let dataTypes = this.$t('dataTypes');
			return {
				editValue: this.transEditValue(),
				popoverEditValue: this.value,
				popoverVisible: false,
				dataTypes,
				dynamicIconMapping,
			}
		},
		computed: {
			defaultValue() {
				return getInputDefaultValue(this.property);
			},
		},
		watch: {
			value(v) {
				this.editValue = this.transEditValue();
			},
		},
		methods: {
			transEditValue(){
				return clonePureObj(this.value || {type: 'static'});
			},
			onClickEdit() {
				this.popoverVisible = !this.popoverVisible;
			},
			onClickClean() {
				this.$emit('input', undefined, this.container, this.propertyName, this.value);
			},
			onInput(v) {
				this.$set(this.editValue, 'value', v);
			},
			onChange() {
				this.$emit('input', this.editValue, this.container, this.propertyName, this.value);
				this.popoverVisible = false;
			},
		},
	}
</script>

<style scoped>

</style>