<template>
  <up-overlay :show="show" @click="show = false">
    <view class="warp">
      <image :src="imgInfo" ref="img1" :style="imgStyle" class="img1"></image>
    </view>
  </up-overlay>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, defineEmits, watch, computed } from 'vue';

const fileList1 = ref([]);
const emit = defineEmits();
const { proxy } = getCurrentInstance();
const imgInfo = ref(null);
const imageWidth = ref(0);
const imageHeight = ref(0);

const props = defineProps({
  modelValue: [String, Object, Array],
  show: {
    type: Boolean,
    default: false,
  },
  imgsrc: {
    type: Object,
    default: null,
  },
  fileSize: {
    type: Number,
    default: 100 * 1024 * 1024,
  },
  typeImgInfo: {
    type: String,
    default: '1'
  }
});

const initInfo = () => {
  console.log("ceshi1");

  if (props.imgsrc && props.imgsrc.tempFilePaths) {
    imgInfo.value = props.imgsrc.tempFilePaths[0];
    uni.getImageInfo({
      src: props.imgsrc.tempFilePaths[0],
      success: function (image) {
        imageWidth.value = image.width;
        imageHeight.value = image.height;
        console.log(image.width);
        console.log(image.height);
      }
    });
  }
};

// 监听 show 和 imgsrc 的变化
watch([() => props.show, () => props.imgsrc], ([newShow, newImgsrc]) => {
  if (newShow || newImgsrc) {
    initInfo();
  }
});

// 动态计算样式
const warpStyle = reactive({
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  height: '100vh', // 使容器高度为视口高度
});

const imgStyle = computed(() => ({
  width: `${imageWidth.value/2}rpx`,
  height: `${imageHeight.value/2}rpx`,
}));

</script>

<style lang="scss" scoped>
.warp {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; // 使容器高度为视口高度
}
</style>