<template>
	<el-dialog :title="$t('Process Search')" width="80%" :visible.sync="visible"
	           :append-to-body="true"
	           :close-on-click-modal="false"
	           custom-class="meta-search-dialog"
	>
		<div class="wrapper">
			<div class="inputs">
				<el-input class="input-keyword" size="mini" v-model="keyword" clearable @change="search">
					<span slot="prepend">关键词</span>
					<el-button slot="append" icon="el-icon-search" @click="search"></el-button>
				</el-input>
				<el-radio-group v-model="searchType">
					<el-radio :label="1">{{$t('Name')}}</el-radio>
					<el-radio :label="2">ID</el-radio>
					<el-radio :label="3">{{$t('Code')}}</el-radio>
				</el-radio-group>
			</div>
			<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden">
				<div v-for="(item, key) in paths" :key="key">
					<template v-if="item.node">
						<el-link type="success" icon="el-icon-aim" :underline="false" @click="clickMeta(item.node)">
							{{item.node.name}}
						</el-link>
						<span> > </span>
					</template>
					<span v-for="(p, index) in item.path" :key="index">
						<el-link type="primary" :underline="false" icon="el-icon-aim" @click="clickMeta(item.path, index)">
							<span>{{p.metaName || p.process.meta}}</span>
							<span v-if="p.process.alias">[{{p.process.alias}}]</span>
						</el-link>

						<!--<template v-if="meta.meta">
							<span v-if="meta.meta">{{meta.meta}}
								<span v-if="meta.alias">[{{meta.alias}}]</span>
							</span>
						</template>-->
						<span v-if="index < item.path.length-1"> > </span>
					</span>
				</div>
			</el-scrollbar>
		</div>
		<div slot="footer" class="dialog-footer">
			<div></div>
			<el-button size="mini" plain @click="close">{{$t('Close')}}</el-button>
		</div>
	</el-dialog>
</template>

<script>
	import {mapGetters} from 'vuex'
	import events from "@/global-events.js"

	const searchFieldMap = [
		'',
		'name',
		'id',
		'script',
	];

	export default {
		name: "ProcessSearchDialog",
		data() {
			return {
				visible: false,
				keyword: '',
				searchType: 1,
				paths: [],
			}
		},
		computed: {
			...mapGetters([
				'searchProcess'
			])
		},
		watch: {
			searchType(){
				this.search();
			},
		},
		methods: {
			show() {
				this.visible = true;
			},
			close() {
				this.visible = false;
			},
			search() {
				if(this.keyword){
					this.paths = this.searchProcess(this.keyword, searchFieldMap[this.searchType]);
				}
			},
			clickMeta(path, index) {
				if (index === undefined) {  //view node
					events.$emit('locate-view-node', path)
				} else {  //process
					events.$emit('edit-behavior', path, index)
				}
				this.visible = false;
			},
		}
	}
</script>

<style scoped>

</style>