<template>
  <div class="image-view">
    <ul class="flex flex-wrap">
      <li v-for="image in imageModule" :key="image" class="image-block" @click="copy(image)">
        <p class="image">
          <img :src="image" alt="" />
        </p>
        <p class="image-name" :title="image">
          {{ extractImageName(image) }}
        </p>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts" name="ImageView">
import copyToClipboard from 'copy-to-clipboard'
import { ElMessage } from 'element-plus'

const imageModule = import.meta.glob(`@img/*.(png|jpg)`, {
  eager: true,
  as: 'url',
})

const extractImageName = (path: string) => {
  return path.substring(path.lastIndexOf('/') + 1, path.lastIndexOf('.'))
}

const copy = (imagePath: string) => {
  const path = imagePath.replace(/\/?src\/assets\/images/, '@img')
  const copyResult = copyToClipboard(path)
  copyResult && ElMessage.success(`复制成功\r\n${path}`)
}
</script>

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