<script setup lang="ts">
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
// 父组件传参props
const props = defineProps<{
  dialogVisible: boolean
}>()

const dialogVisible = ref(props.dialogVisible)
const iconArr = ref<string[]>([])
const emits = defineEmits(['closeIcon'])
for (const [key] of Object.entries(ElementPlusIconsVue)) {
  iconArr.value.push(key)
}
const setIcon = (item: string) => {
  emits('closeIcon', item)
}
</script>

<template>
  <el-dialog v-model="dialogVisible" title="图标选择器" width="50%" destroy-on-close>
    <el-scrollbar height="400px">
      <div class="iconContent">
        <div v-for="(item, index) in iconArr" :key="index" class="iconWrap" @click="setIcon(item)">
          <el-icon :size="60">
            <component :is="item" />
          </el-icon>
          <span>{{ item }}</span>
        </div>
      </div>
    </el-scrollbar>
  </el-dialog>
</template>

<style lang="scss" scoped>
.iconContent {
  display: flex;
  flex-wrap: wrap;
  .iconWrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 25%;
    padding: 15px 0;
    cursor: pointer;
  }
  .iconWrap:hover {
    color: var(--el-color-primary);
  }
}
</style>
