<template>
    <div class="image-preview-container" id="imagePreviewContainer">
        <img id="zoomableImage"  draggable="false" :src="imageUrl" />
        <div class="operation-container">
            <div @click="lastImage" style="cursor:pointer;">
                <ArrowLeftOutlined />
            </div>
            <div @click="backTransFrom" style="cursor:pointer;">
                <UndoOutlined />
            </div>
            <div @click="bigScale" style="cursor:pointer;">
                <ZoomInOutlined />
            </div>
            <div @click="smallScale" style="cursor:pointer;">
                <ZoomOutOutlined />
            </div>
            <div @click="transform" style="cursor:pointer;" >
                <RedoOutlined />
            </div>
            <div @click="closePreview" style="cursor:pointer;">
                <CloseOutlined />
            </div>
            <div @click="nextImage" style="cursor:pointer;">
                <ArrowRightOutlined />
            </div>
        </div>
    </div>
</template>
<script  lang="ts" setup>
import { ZoomInOutlined, ZoomOutOutlined, RedoOutlined, UndoOutlined, CloseOutlined, ArrowRightOutlined, ArrowLeftOutlined,} from '@ant-design/icons-vue';
import {ref,onMounted,defineEmits,inject,defineProps} from 'vue';

const emits = defineEmits(["closeImagePreview"])

const props = defineProps({
    globalImagePreviewUrl:{
        type:String
    },
    globalImagePreviewList:{
        type:Array
    }
})


const imageUrl = props.globalImagePreviewUrl


let isDragging = false;
let initialMouseX;
let initialMouseY;
let initialImageX;
let initialImageY;
var scale = 1;
var minScale = 0.5;
var maxScale = 3;
var scaleFactor = 0.1;
var rotate = 0;


onMounted(()=>{

    const draggableImage = document.getElementById('zoomableImage');
    const imageContainer = document.getElementById('imagePreviewContainer');

    

    
    const zoomableImage = document.getElementById("zoomableImage");
    // zoomableImage.addEventListener('wheel', handleWheel);


    var scale = 1;
    var minScale = 0.5;
    var maxScale = 3;
    var scaleFactor = 0.1;

    var containerRect = imageContainer.getBoundingClientRect();

    imageContainer.addEventListener('wheel', function(event) {
        event.preventDefault();

        var mouseX = event.clientX - containerRect.left; // 鼠标相对于容器的X坐标
        var mouseY = event.clientY - containerRect.top; // 鼠标相对于容器的Y坐标

        var delta = -Math.max(-1, Math.min(1, (event.deltaY || -event.detail)));
        var zoomFactor = Math.exp(delta * scaleFactor);
        console.log("delta",delta,zoomFactor);


        var oldWidth = zoomableImage.clientWidth;
        var oldHeight = zoomableImage.clientHeight;

        var newWidth = Math.min(Math.max(oldWidth * zoomFactor, containerRect.width * minScale), containerRect.width * maxScale);
        var newHeight = Math.min(Math.max(oldHeight * zoomFactor, containerRect.height * minScale), containerRect.height * maxScale);

        var widthDiff = newWidth - oldWidth;
        var heightDiff = newHeight - oldHeight;

        var mouseXPercent = mouseX / containerRect.width;
        var mouseYPercent = mouseY / containerRect.height;

        var translateX = widthDiff * mouseXPercent;
        var translateY = heightDiff * mouseYPercent;

        scale *= zoomFactor;

        zoomableImage.style.transformOrigin = mouseXPercent * 100 + '% ' + mouseYPercent * 100 + '%';
        zoomableImage.style.transform = 'scale(' + scale + ') translate(' + translateX + 'px, ' + translateY + 'px)';
    });





    draggableImage.addEventListener('mousedown', function(event) {
        isDragging = true;
        initialMouseX = event.clientX;
        initialMouseY = event.clientY;
        initialImageX = draggableImage.offsetLeft;
        initialImageY = draggableImage.offsetTop;
        draggableImage.style.cursor = 'grabbing';
    });

    document.addEventListener('mousemove', function(event) {
        if (isDragging) {
            const deltaX = event.clientX - initialMouseX;
            const deltaY = event.clientY - initialMouseY;
            draggableImage.style.left = initialImageX + deltaX + 'px';
            draggableImage.style.top = initialImageY + deltaY + 'px';
        }
    });

    document.addEventListener('mouseup', function() {
        isDragging = false;
        draggableImage.style.cursor = 'default';
    });


})

const currentImageIndex = ref<Number>(0);


props.globalImagePreviewList?.value?.forEach((item,index)=>{
    if(props.globalImagePreviewUrl?.match(item.url)){
        currentImageIndex.value = index;
    }
})

function lastImage(){

}

function nextImage(){
    
}

function handleWheel(event) {
        // event.preventDefault();
        // const delta = Math.sign(event.deltaY);
        // if (delta > 0) {
        //     if(scale > 0.2){
        //         scale -= scaleStep;
        //     }else if(scale>1.6){
        //         scale -= 0.2;
        //     }
        // } else {
        //     if(scale>1.6){
        //         scale += 0.2;
        //     }else{
        //         scale += scaleStep;
        //     }
            
        // }
        // zoomableImage.style.transform = `scale(${scale})`;
        const imageContainer = document.getElementById('imagePreviewContainer');
        let containerRect = imageContainer.getBoundingClientRect();

        event.preventDefault();

        var mouseX = event.clientX - containerRect.left; // 鼠标相对于容器的X坐标
        var mouseY = event.clientY - containerRect.top; // 鼠标相对于容器的Y坐标

        var delta = Math.max(-1, Math.min(1, (event.deltaY || -event.detail)));
        
        var zoomFactor = Math.exp(delta * scaleFactor);

        var oldWidth = zoomableImage.clientWidth;
        var oldHeight = zoomableImage.clientHeight;

        var newWidth = Math.min(Math.max(oldWidth * zoomFactor, containerRect.width * minScale), containerRect.width * maxScale);
        var newHeight = Math.min(Math.max(oldHeight * zoomFactor, containerRect.height * minScale), containerRect.height * maxScale);

        var widthDiff = newWidth - oldWidth;
        var heightDiff = newHeight - oldHeight;

        var mouseXPercent = mouseX / containerRect.width;
        var mouseYPercent = mouseY / containerRect.height;

        var translateX = widthDiff * mouseXPercent;
        var translateY = heightDiff * mouseYPercent;

        scale *= zoomFactor;

        zoomableImage.style.transformOrigin = mouseXPercent * 100 + '% ' + mouseYPercent * 100 + '%';
        zoomableImage.style.transform = 'scale(' + scale + ') translate(' + translateX + 'px, ' + translateY + 'px)';
}

function smallScale():void {
    if(scale>0.4){
        scale-=0.4;
    }
    zoomableImage.style.transform = `scale(${scale}) rotate(${rotate}deg)`;
}

function bigScale():void {
    scale+=0.4;
    zoomableImage.style.transform = `scale(${scale}) rotate(${rotate}deg)`;
}
function transform (){
    rotate += 90;
    zoomableImage.style.transform = `scale(${scale}) rotate(${rotate}deg)`;
}
function backTransFrom() {
    rotate -= 90;
    zoomableImage.style.transform = `scale(${scale}) rotate(${rotate}deg)`;
}

function closePreview():void{
    emits("closeImagePreview");
}

</script>
<style type="less" scoped>
.image-preview-container{
    position:absolute;
    z-index:99999999;
    top:0px;
    left:0px;
    width:100%;
    height: 100%;
    margin:0px auto;
    background:rgba(0,0,0,0.4);
    overflow: hidden;
    #zoomableImage {
        position:relative;
        top:50%;
        left:50%;
        width:60%;
        cursor:default;
        display: block;
        max-width: none;
        max-height: none;
        transition: transform 0.2s ease-out; /* 添加平滑过渡效果 */
        transform: translate(-50%, -50%);
    }
    .operation-container{
        padding:0px 100px;
        width: calc( 100% - 0px);
        height:60px;
        position:absolute;
        top:0px;
        left:0px;
        background:rgba(0,0,0,0.3);
        display: flex;
        line-height: 60px;
        color:#fff;
        div {
            flex:1;
            text-align: center;
            cursor:pointer;
        }
    }
}



</style>