<template>
  <img v-loading="loading" :src="`local:///${(imageSrc || src)?.replaceAll('\\', '/')}`" v-bind="$attrs"></img>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useProjectStore } from '@/store/modules/project'

const props = defineProps<{
  src?: string
  id?: string
}>()

const imageSrc = ref('')
const loading = ref(false)
const projectStore = useProjectStore()

// 读取文件
const readFile = async () => {
  if (!props.src && !props.id) return
  if (props.id) {
    const path =
      projectStore.project?.resources.images.find((item) => item.id === props.id)?.path || ''
    imageSrc.value = projectStore.projectPath + path
  } else {
    imageSrc.value = ''
  }
}

watch(
  () => [props.src, props.id],
  () => {
    readFile()
  },
  { immediate: true }
)
</script>

<style scoped></style>
