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

const emits = defineEmits(["defineEmits"])


let scale = 1.0;
const scaleStep = 0.15;

let isDragging = false;
let initialMouseX;
let initialMouseY;
let initialImageX;
let initialImageY;



onMounted(()=>{
    const zoomableImage = document.getElementById("zoomableImage");
    zoomableImage.addEventListener('wheel', handleWheel);


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

    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';
    });


})


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})`;
    }

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

function bigScale():void {
    scale+=0.4;
    zoomableImage.style.transform = `scale(${scale})`;
}

function closePreview():void{
    emits("defineEmits");
}
</script>
<style type="less" scoped>
.image-preview-container{
    position:absolute;
    z-index:99999;
    width:500px;
    height:500px;
    margin:0px auto;
    background:rgba(0,0,0,0.1);
    overflow: hidden;
}

#zoomableImage{
    width:100%;
    position:absolute;
    cursor:default;
}
.operation-container{
    padding:0px 100px;
    width: calc( 100% - 200px);
    height:60px;
    position:absolute;
    bottom:0px;
    left:0px;
    background:rgba(0,0,0,0.2);
    display: flex;
    line-height: 60px;
    color:#fff;
}
.operation-container div{
    flex:1;
    text-align: center;
    cursor:pointer;
}
</style>