<template>
  <div class="img-preview" >
    <img id="previewImg" :src="fileUrl" :style="{width: fullscreen?windowWidth+'px':'100%',height: fullscreen?'auto':'650px;'}" alt="Preview"/>
  </div>
</template>

<script setup>
const emit = defineEmits(["update:fileUrl"])
const props = defineProps({
  fileUrl: {
    type: String,
    default: ''
  },
  fullscreen: {
    type: Boolean,
    default:false
  }
})
const showImagePreview = ref(true)
const dialogWidth = ref('')
const dialogHeight = ref('')
// 屏幕宽度
const windowWidth = ref(0)
// 屏幕高度
const windowHeight = ref(0)
// onMounted(() => {
// })
// 获取屏幕尺寸
const getWindowResize = function () {
  windowWidth.value = window.innerWidth-32
  windowHeight.value = window.innerHeight
}
getWindowResize()
window.addEventListener('resize', getWindowResize)
nextTick(() => {
  const previewImg = document.getElementById('previewImg');
  // console.log(previewImg)
  let offsetHeight = previewImg?.offsetHeight
  // console.log(offsetHeight)
  if (offsetHeight > 750){
  //   previewImg?.offsetHeight = 750
  }
})

// dialogWidth.value=document.getElementById('previewImg')?.offsetWidth||1500
// dialogWidth.value=document.getElementById('previewImg')?.offsetHeight||750

</script>

<style lang="scss">
.img-preview {
  display: flex;
  justify-content: center;
  overflow-y: auto;
  overflow-x: auto;
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  // 滚动条轨道
  &::-webkit-scrollbar-track {
    background: rgb(239, 239, 239);
    border-radius: 2px;
  }

  // 小滑块
  &::-webkit-scrollbar-thumb {
    background: rgba(80, 81, 82, 0.29);
    border-radius: 10px;
  }
}

</style>
