<template>
	<div class="sc-search">
		<el-input ref="input" v-model="searchText" placeholder="搜索" size="large" clearable
				  prefix-icon="el-icon-search"
				  :trigger-on-focus="false" @input="inputChange"/>
		<div class="sc-search-history" v-if="history.length>0">
			<el-tag closable effect="dark" type="info" v-for="(item, index) in history" :key="item"
					@click="historyClick(item)" @close="historyClose(index)">{{ item }}
			</el-tag>
		</div>
		<div class="sc-search-result">
			<div class="sc-search-no-result" v-if="result.length<=0">{{ t('menu.noSearchResults') }}</div>
			<ul v-else>
				<el-scrollbar max-height="366px">
					<li v-for="item in result" :key="item.path" @click="to(item)">
						<el-icon>
							<component :is="item.icon || 'el-icon-menu'"/>
						</el-icon>
						<span class="title">{{ item.breadcrumb }}</span>
					</li>
				</el-scrollbar>
			</ul>
		</div>
	</div>
</template>

<script setup>
import {ref, onMounted, getCurrentInstance} from "vue"
import tools from "@/utils/tools.js"
import {useRouter} from "vue-router"
import {useI18n} from "vue-i18n"

const {t} = useI18n()
const {proxy} = getCurrentInstance()
const router = useRouter()

let searchText = ref("")
let menu = ref([])
let result = ref([])
let history = ref([])

onMounted(() => {
	history.value = tools.data.get("SEARCH_HISTORY") || []
	const menuTree = tools.data.get("MENU");
	filterMenu(menuTree)
	proxy.$refs.input.focus()
})

function inputChange(value) {
	if (value) {
		result.value = menuFilter(value)
	} else {
		result.value = []
	}
}

function filterMenu(map) {
	map.forEach(item => {
		if (item.meta.hidden || item.meta.type === "button") {
			return false
		}
		if (item.meta.type === 'iframe') {
			item.path = `/i/${item.name}`
		}
		if (item.children && item.children.length > 0 && !item.component) {
			filterMenu(item.children)
		} else {
			menu.value.push(item)
		}
	})
}

function menuFilter(queryString) {
	const res = [];
	//过滤菜单树
	let filterMenu = [];
	menu.value.forEach((item) => {
		filterMenu = filterMenu.concat(item.children.filter((v) => {
			if ((v.meta.title).toLowerCase().indexOf(queryString.toLowerCase()) >= 0) {
				return true
			}
			if ((v.name).toLowerCase().indexOf(queryString.toLowerCase()) >= 0) {
				return true
			}
		}))
	})
	//匹配系统路由
	const routes = router.getRoutes();
	const filterRouter = filterMenu.map((m) => {
		if (m.meta.type === "link") {
			return routes.find(r => r.path === '/' + m.path)
		} else {
			return routes.find(r => r.path === m.path)
		}
	});
	//重组对象
	filterRouter.forEach(item => {
		res.push({
			name: item.name,
			type: item.meta.type,
			path: item.meta.type === "link" ? item.path.slice(1) : item.path,
			icon: item.meta.icon,
			title: item.meta.title,
			breadcrumb: item.meta.breadcrumb.map(v => v.meta.title).join(' - ')
		})
	})
	return res
}

function to(item) {
	if (!history.value.includes(searchText.value)) {
		history.value.push(searchText.value)
		tools.data.set("SEARCH_HISTORY", history.value)
	}
	if (item.type === "link") {
		setTimeout(() => {
			let a = document.createElement("a")
			a.style = "display: none"
			a.target = "_blank"
			a.href = item.path
			document.body.appendChild(a)
			a.click()
			document.body.removeChild(a)
		}, 10);
	} else {
		router.push({path: item.path})
	}
	proxy.$emit('success', true)
}

function historyClick(text) {
	searchText.value = text
	inputChange(text)
}

function historyClose(index) {
	history.value.splice(index, 1);
	if (history.value.length <= 0) {
		tools.data.remove("SEARCH_HISTORY")
	} else {
		tools.data.set("SEARCH_HISTORY", history.value)
	}
}

</script>

<style scoped>
.sc-search {
}

.sc-search-no-result {
	text-align: center;
	margin: 40px 0;
	color: #999;
}

.sc-search-history {
	margin-top: 10px;
}

.sc-search-history .el-tag {
	cursor: pointer;
}

.sc-search-result {
	margin-top: 15px;
}

.sc-search-result li {
	height: 56px;
	padding: 0 15px;
	background: var(--el-bg-color-overlay);
	border: 1px solid var(--el-border-color-light);
	list-style: none;
	border-radius: 4px;
	margin-bottom: 5px;
	font-size: 14px;
	display: flex;
	align-items: center;
	cursor: pointer;
}

.sc-search-result li i {
	font-size: 20px;
	margin-right: 15px;
}

.sc-search-result li:hover {
	background: var(--el-color-primary);
	color: #fff;
	border-color: var(--el-color-primary);
}
</style>
