<!--
@ 作者: 秦东
@ 时间: 2024-04-22 14:39:07
@ 备注: 选择图标弹窗
-->
<script lang='ts' setup>
import SvgIcon from "@/components/SvgIcon/index.vue";
import SvgPage from "@/components/IconSelect/svgPage.vue";

const props = defineProps({
	isShow:{
		type: Boolean,
		default: false,
	},
	svgName:{
		type:String,
		require: false,
		default:""
	},
	iconList:{
		type:Object,
		default(){
			return {}
		}
	}
});
const visible = ref(false); // 弹窗显示状态
const iconSelectorRef = ref();
const iconSelectorDialogRef = ref();
const emits = defineEmits(["update:isShow","update:svgName"]);
const filterIconNames = ref<string[]>([]); 
//点击窗外。取消显示
onClickOutside(iconSelectorRef, () => (visible.value = false), {
  ignore: [iconSelectorDialogRef],
});


watch(() => props.isShow, (val:boolean) =>{
	if(val){
		filterIconNames.value = props.iconList
	}
})
/**
@ 作者: 秦东
@ 时间: 2024-04-22 16:43:49
@ 功能: 关闭
*/
const handleClose = () => {
	emits("update:isShow",false)
}
/**
@ 作者: 秦东
@ 时间: 2024-04-22 16:54:03
@ 功能: 确定
*/
const handleSelect = (svgName:string) => {
	emits("update:svgName",svgName)
	handleClose()
}
</script>
<template>
	<el-dialog
		v-model="props.isShow"
		title="选择图标"
		width="500"
		:before-close="handleClose"
	>
		<el-input
			v-model="filterValue"
			class="p-2"
			placeholder="搜索图标"
			clearable
			@input="handleFilter"
		/>
		<el-divider border-style="dashed" style="margin:0px;" />

		<el-scrollbar height="250px">
			<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>

	</el-dialog>
</template>
<style  lang='scss' scoped>
.icon_list {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0px;
  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>
