<template>
	<div class="process-tree">
		<el-input v-model="filterText" prefix-icon="el-icon-search" size="mini" clearable/>
		<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden">
			<el-tree
				ref="tree"
				:data="data"
				:props="defaultProps"
				empty-text=""
				:filter-node-method="filterNodeMethod"
			>
				<div slot-scope="{ node, data }" class="process-tree-node">
					<div class="node-name">
						<span :class="{'current-node': isCurrentProcess(data)}" :draggable="draggable(data)"
						      @dragstart.stop="dragProcessStart(data, $event)">{{transName(data, node)}}</span>
					</div>

					<el-dropdown v-if="nodeMenu(data)" class="more-button" size="mini" trigger="click"
					             @command="(command)=>{onMoreMenu(command, data, node)}">
						<el-link icon="el-icon-more" :underline="false" @click.stop/>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command="desc">{{$t('Desc')}}</el-dropdown-item>
							<el-dropdown-item command="edit" v-if="metaEditable(data)" divided>{{$t('Edit')}}</el-dropdown-item>
							<el-dropdown-item command="delete" v-if="metaEditable(data)">{{$t('Delete')}}</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
			</el-tree>
		</el-scrollbar>
	</div>

</template>

<script>
	import {mapState} from 'vuex'

	const editableIds = ['custom', 'divider'];

	export default {
		name: "ProcessList",
		props: [
			'data', 'type',
		],
		data() {
			return {
				filterText: '',
				defaultProps: {
					children: 'children',
					label: 'name'
				}
			}
		},
		watch: {
			filterText(val) {
				this.updateFilter();
			},
			data: {
				handler(v) {
					this.updateFilter();
				},
				immediate: true,
				deep: true
			}
		},
		computed: {
			...mapState({
				currentProcess(state) {
					return state.behavior.currentProcess;
				}
			}),
		},
		methods: {
			transName(meta, node) {
				if (node.parent.parent) {
					return meta.name
				} else {
					return this.$t('processGroups')[meta.name] || meta.name;
				}
			},
			updateFilter() {
				if (this.$refs.tree) {
					this.$refs.tree.filter(this.filterText);
				}
			},
			draggable(data) {
				return !data.hasOwnProperty('children') && data.isDivider !== true;
			},
			dragProcessStart(data, event) {
				event.dataTransfer.setData('process', data.id);
			},
			nodeMenu(data) {
				return !data.hasOwnProperty('children')
			},
			metaEditable(data) {
				return data.type !== 'builtin' && !data.hasOwnProperty('children') && !editableIds.includes(data.id) && data.isDivider !== true
			},
			onMoreMenu(command, data, node) {
				switch (command) {
					case 'desc':
						this.$alert(data.desc || this.$t('No desc'), data.name + ' ' + this.$t('Description'), {
							confirmButtonText: this.$t('Confirm'),
							callback: action => {

							}
						});
						break;
					case 'edit':
						this.$emit('edit-meta', data);
						break;
					case 'delete':
						this.$emit('delete-meta', data);
						break;
				}
			},
			filterNodeMethod(value, data, node) {
				let filterFrom = data.from && node.parent.data.from ? data.from === node.parent.data.from : true;
				let filterDivider = data.isDivider !== true;

				if (!value) return filterDivider && filterFrom;
				return filterDivider && filterFrom && !data.hasOwnProperty('children') && data.name.toUpperCase().indexOf(value.toUpperCase()) >= 0;
			},
			isCurrentProcess(data) {
				let yes = this.currentProcess && this.currentProcess.meta && data.id && data.id === this.currentProcess.meta.id;
				if (yes) {
					console.log();
				}
				return yes;
			}
		},

	}
</script>

<style scoped>

</style>