<!--
@ 作者: 秦东
@ 时间: 2024-04-22 16:05:27
@ 备注: 图标选择列表
-->
<script lang='ts' setup>

const allIconNames: string[] = []; // 所有的图标名称集合

const filterValue = ref(""); // 筛选的值
const filterIconNames = ref<string[]>([]); // 过滤后的图标名称集合
/**
@ 作者: 秦东
@ 时间: 2024-04-22 16:05:52
@ 功能: 加载svg
*/
const loadIcons =() => {
	const icons = import.meta.glob("../../assets/icons/*.svg");
	for (const icon in icons) {
		const iconName = icon.split("assets/icons/")[1].split(".svg")[0];
		allIconNames.push(iconName);
	}
	filterIconNames.value = allIconNames;
	// console.log("icon 加载--->",allIconNames);
}
onMounted(()=>{
	loadIcons();
})
</script>
<template>
	<div class="svgBox">
		<el-input
					v-model="filterValue"
					class="p-2"
					placeholder="搜索图标"
					clearable
					@input="handleFilter"
				/>
				<el-divider border-style="dashed" style="margin:0px;" />
				<el-scrollbar height="150px">
					<ul class="icon_list">
						<li
							v-for="(iconName, index) in filterIconNames"
							:key="index"
							class="icon-item"
							@click="handleSelect(iconName)"
						>
							<el-tooltip :content="iconName" placement="bottom" effect="light">
								<svg-icon color="var(--el-text-color-regular)" :icon-class="iconName" />
							</el-tooltip>
						</li>
					</ul>
				</el-scrollbar>
	</div>
</template>
<style  lang='scss' scoped>
.icon_list {
  display: flex;
  flex-wrap: wrap;
  padding-left: 10px;
  margin-top: 10px;
  
  .icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    width: 10%;
    padding: 5px;
    margin: 0 5px 5px 0;
    cursor: pointer;
    border: 1px solid #ccc;
	padding: 5px 10px;
    &:hover {
      color: var(--el-color-primary);
      border-color: var(--el-color-primary);
      transition: all 0.2s;
      transform: scaleX(1.1);
    }
  }
}
.svgBox{
	:deep(.el-popper){
	padding:0px;
  }
}
</style>
