<template>

	<!-- @select="handleChange" -->
	<a-select
		showSearch
		:value="value"
		:defaultValue="value"
		placeholder="请输入关键词"
		style="width: 200px"
		:maxTagTextLength="30"
		:defaultActiveFirstOption="false"
		:showArrow="false"
		:filterOption="false"
		@search="handleSearch"
		:notFoundContent="fetching ? undefined : notFoundContent"
        @keyup.13.native="doSearch"
	>
		<a-spin v-if="fetching" slot="notFoundContent" size="small" />
		<a-select-option
			v-for="(d, $index) in searchResult"
			:value="d.entId"
			:key="$index"
            @click="reSearch"
		>
			<!-- <ellipsis :length="50" tooltip> -->
				{{ d.entName }}
			<!-- </ellipsis> -->
		</a-select-option>
	</a-select>
</template>

<script>
import { getEntityListByStr } from '@/api/graph/statisticalMap'
// import Ellipsis from '@/components/Ellipsis'
let timeout
export default {
	components: {
		// Ellipsis,
	},
	props: ['moduleName', 'urlName', 'keyId'],
	data() {
		return {
			value: '',
			fetching: false,
			searchResult: [],
			notFoundContent: '无返回结果',
		}
	},
	methods: {
		/*
		 * 输入框输入时执行的方法
		 * @params value 输入的字符串
		 * */
		handleSearch(value) {
			const vm = this
			vm.fetching = true
			if (timeout) {
				clearTimeout(timeout)
				timeout = null
			}
			function getResult() {
				if (value) {
					value = value.replace(/\'/g, '')
					// api[vm.moduleName][vm.urlName](value).then((data) => {
					// 	vm.fetching = false
					// 	vm.searchResult = data
					// })
					getEntityListByStr(value).then((resp) => {
					  vm.fetching = false
					  vm.searchResult = resp.data
					})
				}
			}
			timeout = setTimeout(getResult, 600) // 延迟搜索
		},
        reSearch(value){
            this.handleChange(value.key)
        },
		/*
		 * 搜索框列表选中时执行的方法
		 * @params value 选中的项为{}
		 * */
		handleChange(value) {
			const vm = this
			let tar
			this.searchResult.forEach((v, i) => {
				// v.entID === value ? tar = v : tar
				v[vm.keyId] === value ? (tar = v) : tar
			})
			this.value = value
			this.$emit('selected', tar)
		},
        doSearch(e){
            const vm = this
            let label = e.target.value;
            this.value = ''
			this.$emit('enterSearch', label)
        },
		/*
		 * 清空选中项
		 * */
		clearSelected() {
			this.value = ''
			this.searchResult = []
		},
		filterOption(input, option) {
			return (
				option.componentOptions.children[0].text
					.toLowerCase()
					.indexOf(input.toLowerCase()) >= 0
			)
		},
	},
}
</script>

<style></style>
