<template>
  <el-tooltip placement="top" :persistent="!!imgs.length">
    <template #content>
      <template v-if="imgs && imgs.length > 0">
        <img
          v-for="(item, index) in imgs"
          :key="item.imgFilesId || index"
          v-viewer
          :src="
            item.filePath ? VITE_FILE_URL + item.filePath : VITE_FILE_URL + item
          "
          width="100"
          height="100"
          alt=""
          class="ml-10"
        />
      </template>
      <span v-else>暂无图片</span>
    </template>
    <el-tag>预览</el-tag>
  </el-tooltip>
</template>

<script setup>
import { ElTooltip, ElTag } from "element-plus";
import "element-plus/es/components/tooltip/style/css";
import "element-plus/es/components/tag/style/css";
import { getFileUrl } from "../../utils/index.js";

defineOptions({
  name: "AppTooltipImg",
});
const VITE_FILE_URL = getFileUrl();
defineProps({
  imgs: { type: Array, required: true },
});
</script>

<style scoped lang="scss"></style>
