<script setup lang="ts">
import { Icon } from '@iconify/vue'
import {
  Cell as VanCell,
  CellGroup as VanCellGroup,
  Divider as VanDivider,
  Grid as VanGrid,
  GridItem as VanGridItem,
  NavBar as VanNavBar,
  Tab as VanTab,
  Tabs as VanTabs,
} from 'vant'
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const searchKeyword = ref('')
const activeTab = ref(0)

// 图标分类展示
const iconCategories = [
  {
    title: '常用图标',
    icons: [
      { name: 'mdi:home', label: '首页' },
      { name: 'mdi:account', label: '用户' },
      { name: 'mdi:bell', label: '通知' },
      { name: 'mdi:cog', label: '设置' },
      { name: 'mdi:magnify', label: '搜索' },
      { name: 'mdi:plus', label: '添加' },
      { name: 'mdi:check', label: '确认' },
      { name: 'mdi:close', label: '关闭' },
    ],
  },
  {
    title: '方向图标',
    icons: [
      { name: 'mdi:arrow-up', label: '向上' },
      { name: 'mdi:arrow-right', label: '向右' },
      { name: 'mdi:arrow-down', label: '向下' },
      { name: 'mdi:arrow-left', label: '向左' },
      { name: 'mdi:chevron-up', label: '上箭头' },
      { name: 'mdi:chevron-right', label: '右箭头' },
      { name: 'mdi:chevron-down', label: '下箭头' },
      { name: 'mdi:chevron-left', label: '左箭头' },
    ],
  },
  {
    title: '文件图标',
    icons: [
      { name: 'mdi:file', label: '文件' },
      { name: 'mdi:file-document', label: '文档' },
      { name: 'mdi:file-excel', label: 'Excel' },
      { name: 'mdi:file-pdf', label: 'PDF' },
      { name: 'mdi:file-image', label: '图片' },
      { name: 'mdi:file-video', label: '视频' },
      { name: 'mdi:file-music', label: '音频' },
      { name: 'mdi:folder', label: '文件夹' },
    ],
  },
  {
    title: '通信图标',
    icons: [
      { name: 'mdi:email', label: '邮件' },
      { name: 'mdi:phone', label: '电话' },
      { name: 'mdi:message', label: '消息' },
      { name: 'mdi:chat', label: '聊天' },
      { name: 'mdi:wifi', label: 'WiFi' },
      { name: 'mdi:bluetooth', label: '蓝牙' },
      { name: 'mdi:share', label: '分享' },
      { name: 'mdi:cloud', label: '云' },
    ],
  },
]

// UnoCSS图标示例
const unocssIcons = [
  { name: 'i-mdi:home', label: '首页' },
  { name: 'i-mdi:account', label: '用户' },
  { name: 'i-mdi:bell', label: '通知' },
  { name: 'i-mdi:cog', label: '设置' },
  { name: 'i-mdi:magnify', label: '搜索' },
  { name: 'i-mdi:plus', label: '添加' },
  { name: 'i-mdi:check', label: '确认' },
  { name: 'i-mdi:close', label: '关闭' },
  { name: 'i-mdi:arrow-up', label: '向上' },
  { name: 'i-mdi:arrow-right', label: '向右' },
  { name: 'i-mdi:arrow-down', label: '向下' },
  { name: 'i-mdi:arrow-left', label: '向左' },
]

// 样式设置示例
const styleExamples = [
  { name: 'mdi:home', label: '默认样式', style: {} },
  { name: 'mdi:home', label: '大尺寸', style: { fontSize: '32px' } },
  { name: 'mdi:home', label: '自定义颜色', style: { color: '#1989fa' } },
  { name: 'mdi:home', label: '旋转效果', style: { transform: 'rotate(45deg)' } },
  { name: 'mdi:home', label: '背景填充', style: { backgroundColor: '#eee', padding: '5px', borderRadius: '4px' } },
  { name: 'mdi:home', label: '悬停效果', class: 'hover-effect', style: {} },
]

// UnoCSS样式设例
const unocssStyleExamples = [
  { name: 'i-mdi:home', label: '默认样式', classes: '' },
  { name: 'i-mdi:home', label: '大尺寸 (text-3xl)', classes: 'text-3xl' },
  { name: 'i-mdi:home', label: '自定义颜色 (text-blue-500)', classes: 'text-blue-500' },
  { name: 'i-mdi:home', label: '旋转效果 (transform rotate-45)', classes: 'transform rotate-45' },
  { name: 'i-mdi:home', label: '背景填充 (bg-gray-200 p-1 rounded)', classes: 'bg-gray-200 p-1 rounded' },
  { name: 'i-mdi:home', label: '悬停效果 (hover:scale-125)', classes: 'transition hover:scale-125' },
]

// 使用方法示例代码
const usageExamples = [
  {
    title: '基本使用',
    code: '<Icon icon="mdi:home" />',
  },
  {
    title: '设置尺寸',
    code: '<Icon icon="mdi:home" :width="24" :height="24" />',
  },
  {
    title: '自定义样式',
    code: '<Icon icon="mdi:home" style="color: red; font-size: 24px;" />',
  },
  {
    title: '内联样式',
    code: '<Icon icon="mdi:home" :style="{ color: \'#1989fa\', fontSize: \'24px\' }" />',
  },
  {
    title: '自定义类名',
    code: '<Icon icon="mdi:home" class="custom-icon" />',
  },
]

// UnoCSS使用方法示例代码
const unocssUsageExamples = [
  {
    title: '基本使用',
    code: '<div class="i-mdi:home"></div>',
  },
  {
    title: '设置尺寸',
    code: '<div class="i-mdi:home text-2xl"></div>',
  },
  {
    title: '自定义颜色',
    code: '<div class="i-mdi:home text-red-500"></div>',
  },
  {
    title: '添加多个样式',
    code: '<div class="i-mdi:home p-1 bg-gray-100 rounded text-blue-500"></div>',
  },
  {
    title: '交互效果',
    code: '<div class="i-mdi:home transition hover:text-green-500 hover:scale-125"></div>',
  },
]

// 过滤显示的图标
const filteredCategories = computed(() => {
  if (!searchKeyword.value) {
    return iconCategories
  }

  return iconCategories.map((category) => {
    const filteredIcons = category.icons.filter(icon =>
      icon.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
      || icon.label.toLowerCase().includes(searchKeyword.value.toLowerCase()),
    )

    return {
      ...category,
      icons: filteredIcons,
    }
  }).filter(category => category.icons.length > 0)
})

// 过滤UnoCSS图标
const filteredUnocssIcons = computed(() => {
  if (!searchKeyword.value) {
    return unocssIcons
  }

  return unocssIcons.filter(icon =>
    icon.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
    || icon.label.toLowerCase().includes(searchKeyword.value.toLowerCase()),
  )
})
</script>

<template>
  <div class="iconify-view">
    <VanNavBar
      title="Iconify 图标使用示例"
      left-arrow
      @click-left="router.back()"
    />

    <div class="container">
      <section class="intro-section">
        <h2>Iconify 图标使用</h2>
        <p>
          Iconify 是一个开源的图标框架，提供超过 100,000 个开源图标。在本项目中有两种使用方式：
        </p>
      </section>

      <VanTabs v-model:active="activeTab" animated>
        <VanTab title="@iconify/vue 组件">
          <section class="intro-section">
            <p>
              使用 @iconify/vue 提供的 Icon 组件可以直接在模板中渲染图标。
            </p>
          </section>

          <section class="icons-section">
            <div v-for="(category, index) in filteredCategories" :key="index" class="icon-category">
              <h3>{{ category.title }}</h3>
              <VanGrid :column-num="4" :border="false">
                <VanGridItem v-for="(icon, iconIndex) in category.icons" :key="iconIndex">
                  <div class="icon-item">
                    <Icon :icon="icon.name" width="28" height="28" />
                    <div class="icon-label">
                      {{ icon.label }}
                    </div>
                    <div class="icon-name">
                      {{ icon.name }}
                    </div>
                  </div>
                </VanGridItem>
              </VanGrid>
            </div>
          </section>

          <VanDivider />

          <section class="style-section">
            <h3>样式自定义示例</h3>
            <VanGrid :column-num="3" :border="false">
              <VanGridItem v-for="(example, index) in styleExamples" :key="index">
                <div class="style-example">
                  <Icon
                    :icon="example.name"
                    width="28"
                    height="28"
                    :style="example.style"
                    :class="example.class"
                  />
                  <div class="style-label">
                    {{ example.label }}
                  </div>
                </div>
              </VanGridItem>
            </VanGrid>
          </section>

          <VanDivider />

          <section class="usage-section">
            <h3>使用方法</h3>
            <VanCellGroup inset>
              <VanCell v-for="(example, index) in usageExamples" :key="index" :title="example.title">
                <template #value>
                  <code class="code-example">{{ example.code }}</code>
                </template>
              </VanCell>
            </VanCellGroup>
          </section>

          <section class="usage-guide">
            <h3>使用指南</h3>
            <div class="guide-content">
              <h4>1. 安装</h4>
              <code class="code-block">npm install @iconify/vue</code>

              <h4>2. 导入</h4>
              <code class="code-block">import { Icon } from '@iconify/vue'</code>

              <h4>3. 在模板中使用</h4>
              <code class="code-block">&lt;Icon icon="mdi:home" /&gt;</code>
            </div>
          </section>
        </VanTab>

        <VanTab title="UnoCSS 图标类">
          <section class="intro-section">
            <p>
              使用 UnoCSS 的图标预设，可以通过类名直接使用图标，无需导入组件。
            </p>
          </section>

          <VanDivider />

          <section class="style-section">
            <h3>样式自定义示例</h3>
            <VanGrid :column-num="3" :border="false">
              <VanGridItem v-for="(example, index) in unocssStyleExamples" :key="index">
                <div class="style-example">
                  <div :class="`${example.name} ${example.classes}`" />
                  <div class="style-label">
                    {{ example.label }}
                  </div>
                </div>
              </VanGridItem>
            </VanGrid>
          </section>

          <VanDivider />

          <section class="usage-section">
            <h3>使用方法</h3>
            <VanCellGroup inset>
              <VanCell v-for="(example, index) in unocssUsageExamples" :key="index" :title="example.title">
                <template #value>
                  <code class="code-example">{{ example.code }}</code>
                </template>
              </VanCell>
            </VanCellGroup>
          </section>

          <section class="usage-guide">
            <h3>使用指南</h3>
            <div class="guide-content">
              <h4>项目配置</h4>
              <p>本项目已通过 Vite 配置了 UnoCSS 的图标预设：</p>
              <code class="code-block">
                {{ `
                // build/vite/index.ts
                UnoCSS({
                    presets: [
                        presetIcons({
                        scale: 1.2,
                            warn: true,
                            extraProperties: {
                                'display': 'inline-block',
                                'vertical-align': 'middle',
                            // ...
                            },
                        }),
                    ],
                }),
               ` }}
              </code>

              <h4>使用方式</h4>
              <p>直接在 HTML 元素上使用图标类名，格式为：<code>i-{collection}:{name}</code></p>
              <code class="code-block">&lt;div class="i-mdi:home"&gt;&lt;/div&gt;</code>

              <h4>结合其他 UnoCSS 类</h4>
              <p>可以结合 UnoCSS 的其他工具类设置图标样式：</p>
              <code class="code-block">&lt;div class="i-mdi:home text-blue-500 text-2xl"&gt;&lt;/div&gt;</code>
            </div>
          </section>
        </VanTab>
      </VanTabs>

      <VanDivider />

      <section class="usage-guide">
        <h3>图标集</h3>
        <div class="guide-content">
          <p>Iconify 支持多个图标集，格式为 "集合名:图标名"。例如：</p>
          <ul>
            <li>mdi:home - Material Design Icons</li>
            <li>fa:user - Font Awesome</li>
            <li>carbon:settings - Carbon</li>
            <li>更多图标集可访问 <a href="https://icon-sets.iconify.design/" target="_blank">Iconify Icon Sets</a></li>
          </ul>
        </div>
      </section>
    </div>
  </div>
</template>

<style scoped lang="less">
.iconify-view {
  background-color: #f7f8fa;
  min-height: 100vh;

  .container {
    padding: var(--base-interval-2);
  }

  .intro-section,
  .icons-section,
  .style-section,
  .usage-section,
  .usage-guide {
    margin-bottom: 20px;
  }

  h2 {
    font-size: 20px;
    margin-bottom: 12px;
    color: #323233;
  }

  h3 {
    font-size: 16px;
    margin-bottom: 12px;
    color: #323233;
    padding-left: 12px;
  }

  h4 {
    font-size: 14px;
    margin: 12px 0 8px;
    color: #323233;
  }

  p {
    font-size: 14px;
    color: #646566;
    line-height: 1.5;
  }

  .icon-category {
    margin-bottom: 16px;
  }

  .icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0;
  }

  .icon-label {
    margin-top: 8px;
    font-size: 12px;
    color: #323233;
  }

  .icon-name {
    margin-top: 4px;
    font-size: 10px;
    color: #969799;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 90%;
  }

  .style-example {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0;
  }

  .style-label {
    margin-top: 8px;
    font-size: 12px;
    color: #323233;
  }

  .code-example {
    font-size: 12px;
    color: #333;
    background-color: #f5f5f5;
    padding: 2px 4px;
    border-radius: 2px;
    overflow-wrap: break-word;
    word-break: break-all;
  }

  .code-block {
    display: block;
    font-size: 12px;
    color: #333;
    background-color: #f5f5f5;
    padding: 8px 12px;
    border-radius: 4px;
    margin: 8px 0;
    overflow-x: auto;
  }

  .guide-content {
    background-color: white;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }

  .guide-content ul {
    padding-left: 16px;
    margin: 8px 0;
  }

  .guide-content li {
    font-size: 13px;
    color: #646566;
    line-height: 1.6;
  }

  .hover-effect {
    transition: transform 0.3s ease;

    &:hover {
      transform: scale(1.2);
    }
  }
}
</style>
