<template>
  <div class="icon-view">
    <ul class="flex flex-wrap">
      <li v-for="icon in icons" :key="icon" class="icon-block" @click="copy(icon)">
        <p class="icon">
          <svg-icon :name="icon" />
        </p>
        <p class="icon-name" :title="icon">{{ icon }}</p>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts" name="IconView">
import SvgIcon from '@/components/common/SvgIcon.vue'
import copyToClipboard from 'copy-to-clipboard'
import { ElMessage } from 'element-plus'

const svgModule = import.meta.glob(`@/assets/icons/*.svg`, { eager: true })

const icons = Object.keys(svgModule).map((path) => path.substring(path.lastIndexOf('/') + 1, path.lastIndexOf('.')))

const copy = (iconName: string) => {
  const copyResult = copyToClipboard(`<SvgIcon name="${iconName}"/>`)
  copyResult &&
    ElMessage.success({
      message: `复制成功\r\n<SvgIcon name="${iconName}"/>`,
      duration: 0,
    })
}
</script>

<style scoped lang="scss">
.icon-view {
  background-color: #f1f1f1;
  .icon-block {
    text-align: center;
    cursor: pointer;
    border: 1px solid #c1c1c1;
    margin: 10px;
    padding: 10px;
    border-radius: 4px;
    font-size: 1em;
    width: 10em;
    color: #c1c1c1;
    overflow: hidden;
    .icon {
      color: #000;
      width: 4em;
      height: 4em;
      line-height: 4em;
      margin: 0 auto;
    }
    .icon-name {
      font-size: 0.8em;
      color: #c1c1c1;
    }
  }
}
</style>
