<!--
@ 作者: 秦东
@ 时间: 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 sendClick = () => {
	emits("update:svgName","liuChengBiaoDan")
	handleClose()
}
</script>
<template>
	<el-dialog
		v-model="props.isShow"
		title="选择图标"
		width="500"
		:before-close="handleClose"
	>
		<span>{{filterIconNames}}</span>

		<template #footer>
		<div class="dialog-footer">
			<el-button @click="handleClose">取消</el-button>
			<el-button type="primary" @click="sendClick">
			确定
			</el-button>
		</div>
		</template>
	</el-dialog>
</template>
<style  lang='scss' scoped>

</style>
