<template>
  <el-dialog
    v-model="visible"
    title="选择图标"
    width="800px"
    :before-close="handleClose"
  >
    <div class="icon-select-container">
      <el-input
        v-model="filterValue"
        placeholder="搜索图标"
        clearable
        class="search-input"
        @input="filterIcons"
      >
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>

      <el-scrollbar height="400px">
        <div class="icon-grid">
          <div
            v-for="icon in filteredIcons"
            :key="icon.name"
            :class="['icon-item', { active: selectedIcon === icon.name }]"
            @click="selectIcon(icon)"
          >
            <div class="icon-wrapper">
              <img :src="icon.url" :alt="icon.name" />
            </div>
            <div class="icon-name">{{ getIconDisplayName(icon.name) }}</div>
          </div>
        </div>
      </el-scrollbar>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { Search } from '@element-plus/icons-vue';
import { getHomeIcons, getIconDisplayName } from '@/assets/homeIcon/iconUtils';

interface IconItem {
  name: string;
  url: string;
}

const props = defineProps<{
  modelValue: boolean;
  currentIcon?: string;
}>();

const emit = defineEmits<{
  'update:modelValue': [value: boolean];
  'confirm': [iconName: string];
}>();

const visible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
});

const filterValue = ref('');
const selectedIcon = ref<string>(props.currentIcon || '');
const allIcons = ref<IconItem[]>([]);

// 获取所有图标
const loadIcons = async () => {
  allIcons.value = await getHomeIcons();
  if (props.currentIcon) {
    selectedIcon.value = props.currentIcon;
  }
};

// 过滤图标
const filteredIcons = computed(() => {
  if (!filterValue.value) {
    return allIcons.value;
  }
  const keyword = filterValue.value.toLowerCase();
  return allIcons.value.filter(icon => {
    const displayName = getIconDisplayName(icon.name).toLowerCase();
    return displayName.includes(keyword) || icon.name.toLowerCase().includes(keyword);
  });
});

// 选择图标
const selectIcon = (icon: IconItem) => {
  selectedIcon.value = icon.name;
};

// 过滤图标
const filterIcons = () => {
  // 通过 computed 自动处理
};

// 确认选择
const handleConfirm = () => {
  if (selectedIcon.value) {
    emit('confirm', selectedIcon.value);
    visible.value = false;
  } else {
    ElMessage.warning('请选择一个图标');
  }
};

// 关闭对话框
const handleClose = () => {
  visible.value = false;
};

// 监听 visible 变化，打开时加载图标
watch(visible, (newVal) => {
  if (newVal) {
    loadIcons();
    selectedIcon.value = props.currentIcon || '';
    filterValue.value = '';
  }
});

// 监听 currentIcon 变化
watch(() => props.currentIcon, (newVal) => {
  if (newVal) {
    selectedIcon.value = newVal;
  }
});
</script>

<style scoped lang="scss">
.icon-select-container {
  .search-input {
    margin-bottom: 16px;
  }

  .icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 16px;
    padding: 8px;

    .icon-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 12px;
      border: 2px solid #e4e7ed;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
      background: #fff;

      &:hover {
        border-color: #409eff;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
      }

      &.active {
        border-color: #409eff;
        background: #ecf5ff;
      }

      .icon-wrapper {
        width: 64px;
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 8px;
        border-radius: 8px;
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);

        img {
          width: 48px;
          height: 48px;
          object-fit: contain;
        }
      }

      .icon-name {
        font-size: 12px;
        color: #606266;
        text-align: center;
        word-break: break-all;
        line-height: 1.4;
      }
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style>

