<template>
  <!-- 放大后的遮罩层 -->
  <view v-if="isEnlarged" class="image-preview-overlay"  @click="handleClose">
    <block v-if="getFileType(mediaUrl)=='image'">
        <image 
          :src="mediaUrl" 
          mode="widthFix" 
          class="enlarged-image" 
        />
    </block>
    <view :class="videoClass"  v-else-if="getFileType(mediaUrl)=='video'">
      <!--  object-fit="cover" -->
        <video :src="mediaUrl" controls  @loadedmetadata="onVideoLoaded"></video>
    </view>
  </view>
</template>

<script setup>
import { ref,watch } from 'vue';
import {getFileType} from '@/utils/common.js';
const props = defineProps({
	visible:{
		type:Boolean
	},
  url:{}//图片路径
})

const isEnlarged = ref(props.visible);
const mediaUrl = ref(props.url);
// const mediaType = ref('');//类型
// 显示隐藏
watch(() => props.visible, (newVal, oldVal) => {
  isEnlarged.value = newVal
},{
    deep:true, // 深度监听
    immediate:true // 立即执行
});

watch(() => props.url, (newVal, oldVal) => {
  mediaUrl.value = newVal;
},{
    deep:true,
    immediate:true
});
const emit = defineEmits(['close'])
const handleClose=()=>{
  emit('close');
}

// 获取视频的宽和高
let videoClass = ref('enlarged-image');
const onVideoLoaded = (e) => {
  // 通过事件对象获取原始宽高[citation:3]
  let w = e.detail.width;
  let h = e.detail.height;
  // 你也可以在这里进行后续操作，比如根据宽高比调整UI
  console.log(w,h)
  if(h>w){
    videoClass.value="enlarged-image"
  }else{
    videoClass.value="enlarged-image"
  }
};

</script>

<style scoped>
.image-preview-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

:deep(uni-video){
  width:100%;
}

.enlarged-image {
  width: 100%;
  height: auto;
}
.enlarged-image2 {
  width:auto;
  height: 100vh;
}
</style>