<template>
  <div class="icon-selector">
    <el-input
      :model-value="modelValue"
      placeholder="点击选择图标"
      readonly
      @click="popoverVisible = true"
    >
      <template #prefix>
        <el-icon v-if="modelValue" :size="18">
          <component :is="modelValue" />
        </el-icon>
      </template>
      <template #suffix>
        <el-icon v-if="modelValue" class="clear-btn" @click.stop="handleClear"><CircleClose /></el-icon>
      </template>
    </el-input>

    <el-dialog v-model="popoverVisible" title="选择图标" width="680px" append-to-body>
      <el-input v-model="searchKey" placeholder="搜索图标名称" clearable class="icon-search">
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
      <div class="icon-grid">
        <div
          v-for="name in filteredIcons"
          :key="name"
          class="icon-item"
          :class="{ active: modelValue === name }"
          @click="handleSelect(name)"
        >
          <el-icon :size="22"><component :is="name" /></el-icon>
          <span class="icon-name">{{ name }}</span>
        </div>
      </div>
      <div v-if="filteredIcons.length === 0" class="icon-empty">
        未找到匹配的图标
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import { Search, CircleClose } from '@element-plus/icons-vue'

const props = defineProps({
  modelValue: { type: String, default: '' }
})
const emit = defineEmits(['update:modelValue'])

const popoverVisible = ref(false)
const searchKey = ref('')

const allIcons = Object.keys(ElementPlusIconsVue).sort()

const filteredIcons = computed(() => {
  if (!searchKey.value) return allIcons
  const key = searchKey.value.toLowerCase()
  return allIcons.filter(name => name.toLowerCase().includes(key))
})

const handleSelect = (name) => {
  emit('update:modelValue', name)
  popoverVisible.value = false
  searchKey.value = ''
}

const handleClear = () => {
  emit('update:modelValue', '')
}
</script>

<style scoped>
.icon-selector { width: 100%; }
.icon-search { margin-bottom: 12px; }
.icon-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  max-height: 400px;
  overflow-y: auto;
  padding: 4px;
}
.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 4px;
  border: 1px solid #ebeef5;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}
.icon-item:hover {
  border-color: #409eff;
  background: #ecf5ff;
  color: #409eff;
}
.icon-item.active {
  border-color: #409eff;
  background: #409eff;
  color: #fff;
}
.icon-name {
  font-size: 11px;
  text-align: center;
  line-height: 1.2;
  word-break: break-all;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.icon-empty {
  text-align: center;
  color: #909399;
  padding: 40px 0;
  font-size: 14px;
}
.clear-btn {
  cursor: pointer;
  color: #c0c4cc;
  transition: color 0.2s;
}
.clear-btn:hover { color: #f56c6c; }
</style>
