<template>
  <el-dialog v-model="visible" width="1184px" class="preview-dialog" close align-center>
    <template v-if="!isVideoPreview" #footer>
      <div class="preview-dialog-footer">
        <el-button type="text" @click="zoomOut" class="zoom-button">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <circle cx="11" cy="11" r="8"></circle>
            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
            <line x1="8" y1="11" x2="14" y2="11"></line>
          </svg>
        </el-button>
        <el-button type="text" @click="zoomIn" class="zoom-button">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <circle cx="11" cy="11" r="8"></circle>
            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
            <line x1="11" y1="8" x2="11" y2="14"></line>
            <line x1="8" y1="11" x2="14" y2="11"></line>
          </svg>
        </el-button>
        <el-button type="text" @click="rotateImage(90)" class="rotate-button">
          <img :src="Rotate" />
        </el-button>
      </div>
    </template>
    <div class="preview-content" @wheel="handleWheel">
      <img
        v-if="!isVideoPreview"
        :src="previewUrl"
        @load="onImageLoad"
        :style="imageStyle"
        ref="previewImage"
        @mousedown="startDrag"
        @mousemove="onDrag"
        @mouseup="endDrag"
        @mouseleave="endDrag"
      />
      <video v-if="isVideoPreview" :src="previewUrl" class="media-video" controls autoplay></video>
    </div>
  </el-dialog>
</template>
<script setup>
  import { ref, computed, watch } from 'vue';
  import Rotate from '@/assets/home/icon/rotate.svg';
  const props = defineProps({
    modelValue: Boolean,
    previewUrl: {
      type: String,
      default: ''
    },
    isVideoPreview: Boolean
  });
  const emit = defineEmits(['update:modelValue']);
  const visible = ref(props.modelValue);
  watch(
    () => props.modelValue,
    (newVal) => {
      visible.value = newVal;
    }
  );
  watch(visible, (val) => {
    emit('update:modelValue', val);
  });
  const imageRotation = ref(0);
  const previewImage = ref(null);
  const dialogWidth = 1184;
  const dialogHeight = 648;
  const zoomLevel = ref(1);
  // 縮放限制
  const minZoom = 0.1;
  const maxZoom = 5;
  // 拖拽相關(guān)變量
  const isDragging = ref(false);
  const dragStartX = ref(0);
  const dragStartY = ref(0);
  const imageStartLeft = ref(0);
  const imageStartTop = ref(0);
  const imageLeft = ref(0);
  const imageTop = ref(0);
  const rafId = ref(0);
  const zoomIn = () => {
    if (zoomLevel.value < maxZoom) {
      zoomLevel.value = Math.min(zoomLevel.value + 0.1, maxZoom);
    }
  };
  const zoomOut = () => {
    if (zoomLevel.value > minZoom) {
      zoomLevel.value = Math.max(zoomLevel.value - 0.1, minZoom);
    }
  };
  const handleWheel = (event) => {
    event.preventDefault();
    if (event.deltaY < 0) {
      zoomIn();
    } else {
      zoomOut();
    }
  };
  const startDrag = (event) => {
    if (zoomLevel.value <= 1) return; // 只有在放大時(shí)才能拖拽
    isDragging.value = true;
    dragStartX.value = event.clientX;
    dragStartY.value = event.clientY;
    imageStartLeft.value = imageLeft.value;
    imageStartTop.value = imageTop.value;
    if (previewImage.value) {
      previewImage.value.style.cursor = 'grabbing';
    }
    // 阻止默認(rèn)行為，防止圖片被選中
    event.preventDefault();
  };
  const onDrag = (event) => {
    if (!isDragging.value || zoomLevel.value <= 1) return;
    // 使用 requestAnimationFrame 優(yōu)化性能
    if (rafId.value) {
      cancelAnimationFrame(rafId.value);
    }
    rafId.value = requestAnimationFrame(() => {
      const deltaX = event.clientX - dragStartX.value;
      const deltaY = event.clientY - dragStartY.value;
      imageLeft.value = imageStartLeft.value + deltaX;
      imageTop.value = imageStartTop.value + deltaY;
      rafId.value = 0;
    });
    // 阻止默認(rèn)行為
    event.preventDefault();
  };
  const endDrag = () => {
    isDragging.value = false;
    if (rafId.value) {
      cancelAnimationFrame(rafId.value);
      rafId.value = 0;
    }
    if (previewImage.value) {
      previewImage.value.style.cursor = 'grab';
    }
  };
  const rotateImage = (degree) => {
    console.log('翻轉(zhuǎn)', degree, (imageRotation.value + degree) % 360);
    imageRotation.value += degree;
    // zoomIn();
    // 旋轉(zhuǎn)時(shí)重置縮放級(jí)別以避免布局問題
    zoomLevel.value = 1;
    // 重置拖拽位置
    imageLeft.value = 0;
    imageTop.value = 0;
  };
  const imageDimensions = computed(() => {
    if (!previewImage.value) return { width: 0, height: 0 };
    const img = previewImage.value;
    const naturalWidth = img.naturalWidth;
    const naturalHeight = img.naturalHeight;
    const isRotated = imageRotation.value % 180 !== 0;
    const displayWidth = isRotated ? naturalHeight : naturalWidth;
    const displayHeight = isRotated ? naturalWidth : naturalHeight;
    return { width: displayWidth, height: displayHeight };
  });
  const imageStyle = computed(() => {
    if (!previewImage.value) return {};
    const { width: displayWidth, height: displayHeight } = imageDimensions.value;
    // 計(jì)算基礎(chǔ)縮放比例，確保圖片適應(yīng)容器
    const baseScale = Math.min(dialogWidth / displayWidth, dialogHeight / displayHeight);
    // 應(yīng)用用戶縮放級(jí)別
    const finalScale = baseScale * zoomLevel.value;
    // 計(jì)算縮放后的尺寸
    const scaledWidth = displayWidth * finalScale;
    const scaledHeight = displayHeight * finalScale;
    // 居中定位
    const left = (dialogWidth - scaledWidth) / 2 + imageLeft.value;
    const top = (dialogHeight - scaledHeight) / 2 + imageTop.value;
    return {
      position: 'absolute',
      left: `${left}px`,
      top: `${top}px`,
      width: `${scaledWidth}px`,
      height: `${scaledHeight}px`,
      transform: `rotate(${imageRotation.value}deg)`,
      transformOrigin: 'center center',
      cursor: zoomLevel.value > 1 ? 'grab' : 'default'
    };
  });
  const onImageLoad = () => {
    // 重置旋轉(zhuǎn)和縮放
    imageRotation.value = 0;
    zoomLevel.value = 1;
    imageLeft.value = 0;
    imageTop.value = 0;
    for (let index = 0; index < 4; index++) {
      console.log('執(zhí)行第幾次', index + 1);
      rotateImage(90); //執(zhí)行四次 可以讓圖片以合適的寬度呈現(xiàn)
    }
    // 可選：調(diào)試用
    // console.log('Image loaded:', previewImage.value.naturalWidth, previewImage.value.naturalHeight);
  };
</script>
<style lang="scss" scoped>
  .preview-dialog {
    :deep(.el-dialog) {
      height: 648px;
      display: flex;
      flex-direction: column;
    }
    :deep(.el-dialog__body) {
      flex: 1;
      overflow: hidden !important;
      text-align: center;
      padding: 0;
      position: relative;
    }
    .preview-dialog-footer {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .rotate-button {
      font-size: 20px;
      padding: 10px;
    }
    .preview-content {
      width: 1184px;
      height: 648px;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      position: relative;
      img {
        max-width: none;
        max-height: none;
        object-fit: contain;
        user-select: none;
        // 添加硬件加速
        transform: translateZ(0);
        backface-visibility: hidden;
        perspective: 1000px;
      }
      .media-video {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
      }
    }
  }
</style>

<div class="comment_image_box_list" v-for="(imgitem, imgindex) in item.img_url" :key="imgindex+'i'">
	<img :src="imgitem" alt="" @click="showPopup(imgitem, 1)" />
</div>
<div class="comment_image_box_list" v-for="(vdoitem, vdoindex) in item.video_url" :key="vdoindex+ 'v'">
	<video :src="vdoitem" @click="showPopup(vdoitem, 2)" :poster="vdoitem + '?x-oss-process=video/snapshot,t_1000,f_jpg,w_800,h_600,m_fast'"></video>
</div>

<van-popup v-model="popubIsShow">
   <img class="popubImg" :src="img_src" alt="" v-if="popup_type == 1" />
   <video class="popubImg" :src="img_src" :poster="img_src + '?x-oss-process=video/snapshot,t_1000,f_jpg,w_800,h_600,m_fast'" controls v-if="popup_type == 2"></video>
</van-popup>

data() {
	return {
		popubIsShow: false,
		img_src: ''
		};
	},

showPopup(src, type) {
	this.img_src = src
	this.popubIsShow = true;
	this.popup_type = type
},