<template>
	<div style="display: flex;flex: 1;">
		<el-popover
			placement="bottom"
			popper-class="node-select-popover"
			class="node-select-container"
			trigger="manual"
			width="400"
			height="500"
			v-model="popoverVisible"
			@after-enter="onPopoverShow"
		>
			<div>
				<el-input v-model="filterText" prefix-icon="el-icon-search" size="mini" clearable/>
				<el-scrollbar class="tree-scrollbar" wrap-class="wrap-x-hidden">
					<el-tree
						ref="tree"
						v-if="popoverVisible"
						:data="behavior_views"
						:props="defaultProps"
						:expand-on-click-node="true"
						:default-expanded-keys="expandedKeys"
						draggable
						node-key="uuid"
						highlight-current
						:default-expand-all="true"
						@node-click="handleNodeClick"
						empty-text=""
						:filter-node-method="filterNodeMethod"
					>
						<div slot-scope="{ node, data }" class="tree-node">
							{{data.name}}
						</div>
					</el-tree>
				</el-scrollbar>
				<div class="bottom-bar">
					<div></div>
					<div>
						<el-button @click="onCancel" plain>{{$t('Cancel')}}</el-button>
						<el-button @click="onConfirm" type="primary">{{$t('Confirm')}}</el-button>
					</div>
				</div>
			</div>
			<el-input clearable slot="reference" :value="editValue" @change="onInput" placeholder="unset"
			          :readonly="!editable">
				<template slot="prepend">
					<el-tooltip effect="dark" :content="nodePath" placement="top" :open-delay="500" :disabled="!nodePath">
						<span>{{nodeScheme}}</span>
					</el-tooltip>
				</template>
			</el-input>
		</el-popover>
		<el-button-group>
			<el-button :icon="editButtonIcon" @click="onClickEdit" :disabled="!editable"></el-button>
			<el-button icon="el-icon-delete" @click="onClickClean" :disabled="!editable"></el-button>
		</el-button-group>
	</div>
</template>

<script>
	import {mapGetters} from "vuex";
	import LinkableInputWrapper from "./LinkableInputWrapper";
	import CmdInputWrapper from "./CmdInputWrapper";
	import {nodeScheme} from "../../utils";

	export default {
		name: "NodeSelectInput",
		components: {LinkableInputWrapper, CmdInputWrapper},
		props: ['value', 'container', 'property', 'propertyName', 'editable'],
		data() {
			return {
				nodeScheme: nodeScheme,
				filterText: '',
				editValueOrigin: this.value,
				popoverVisible: false,
				defaultProps: {
					children: 'children',
					label: 'name'
				},
				nodePath: '',
				expandedKeys: [],
			}
		},
		watch: {
			value(v) {
				this.editValue = v;
			},
			filterText(val) {
				this.updateFilter();
			},
		},
		computed: {
			...mapGetters([
				'behavior_views',
				'behavior_searchViewNode',
			]),
			editValue: {
				get() {
					let v = this.editValueOrigin && typeof this.editValueOrigin !== 'object' ? this.editValueOrigin.replace(nodeScheme, '') : '';

					this.updateNodePath(v);

					return v;
				},
				set(v) {
					this.editValueOrigin = v;
				},
			},
			editButtonIcon() {
				return this.popoverVisible ? 'el-icon-check' : 'el-icon-edit';
			},
		},
		methods: {
			updateNodePath(v) {
				let uuid = v ? v.replace(nodeScheme, '') : null;
				let searchResult = this.behavior_searchViewNode(uuid);
				if (searchResult) {
					this.nodePath = searchResult.path;
				} else {
					this.nodePath = '';
				}
			},
			updateFilter() {
				if (this.$refs.tree) {
					this.$refs.tree.filter(this.filterText);
				}
			},
			filterNodeMethod(value, data) {
				if(value.startsWith(':uuid|')){
					let targetUUID = value.replace(':uuid|', '');
					return data.uuid === targetUUID;
				}else{
					return data.name.toLowerCase().includes(value.toLowerCase());
				}
			},
			onInput(v, oldValue) {
				if (v !== this.value) {
					this.$emit('input', v ? nodeScheme + v : undefined, this.container, this.propertyName, oldValue);
				}
			},
			onChange() {
				this.$emit('input', nodeScheme + this.selectedNodeUUID, this.container, this.propertyName, this.value);
			},
			onClickEdit() {
				this.popoverVisible = !this.popoverVisible;

			},
			onClickClean() {
				this.nodePath = '';
				this.$emit('input', undefined, this.container, this.propertyName, this.value);
			},
			onConfirm() {
				this.editValue = this.selectedNodeUUID;
				this.onChange();
				this.popoverVisible = false;
			},
			onCancel() {
				this.$emit('cancel');
				this.popoverVisible = false;
			},
			handleNodeClick(data, node) {
				this.selectedNodeUUID = data.uuid;
			},
			onPopoverShow(){
				let uuid = this.editValue;
				if(uuid){
					this.filterText = ':uuid|' + uuid;
					this.updateFilter();
					this.$refs.tree.setCurrentKey(uuid);
					this.expandedKeys = [uuid];
					this.selectedNodeUUID = uuid;
				}
			},
		},
	}
</script>

<style scoped>

</style>
