<template>
  <div
    ref="imageViewRef"
    class="image-view"
    @mouseover="(ev) => mouseoverImg(ev, src)"
    @mouseleave="mouseleaveImg"
  >
    <img :src="formatUrl" :style="imageStyle" />
  </div>
</template>
<script setup lang="ts">
import useImagePreview from '@/utils/hooks/useImagePreview.'
import { computed, defineProps } from 'vue'
import { formatImgUrl } from '@/utils/hooks/commonUtil.ts'
const props = defineProps({
  src: {
    type: String,
    default: () => '',
  },
  width: {
    type: String,
    default: () => '30px',
  },
  height: {
    type: String,
    default: () => '30px',
  },
})
const imageStyle = computed(() => {
  return {
    width: props.width,
    height: props.height,
  }
})

const formatUrl = computed(() => {
  const w = Number(props.width.replace('px',''))
  const h = Number(props.height.replace('px',''))
  return formatImgUrl({url:props.src,w,h})
})
const { mouseoverImg, mouseleaveImg } = useImagePreview()
</script>
<style lang="scss" scoped>
.image-view {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
</style>
