import html2Image from '@/modules/utils/screenshot/Html2canvas';
/**
 * @function screenShot
 * @description 鼠标拖拽区域截图保存下载
 */
const area = { downX: 0, downY: 0, upX: 0, upY: 0 };
let isMouseDown = false;
// 鼠标绘制拖拽框
const screenShot = () => {
    addScreenshotMask();
    document.addEventListener('mousedown', mousedown);
    document.addEventListener('mousemove', mousemove);
    document.addEventListener('mouseup', mouseup);
};
// 截图时添加遮罩层
const addScreenshotMask = () => {
    const div = document.createElement('div');
    div.id = 'screenshotMask';
    div.style.position = 'fixed';
    const windowWidth = window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth;
    const windowHeight = window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight;
    div.style.width = windowWidth + 'px';
    div.style.height = windowHeight + 'px';
    div.style.left = 0 + 'px';
    div.style.top = 0 + 'px';
    document.body.appendChild(div);
    document.documentElement.style.cursor = 'crosshair';
};
// 移除截图时遮罩层
const removeScreenshotMask = () => {
    const screenshotMask = document.getElementById('screenshotMask');
    document.body.removeChild(screenshotMask);
    document.documentElement.style.cursor = 'auto';
};
const mousedown = (event) => {
    isMouseDown = true;
    event.stopPropagation();
    area.downX = event.clientX;
    area.downY = event.clientY;
};
const mouseup = (event) => {
    isMouseDown = false;
    // @ts-ignore
    setMaskPosition();
    html2Image(getArea(event));
    removeScreenshotMask();
    document.removeEventListener('mousedown', mousedown);
    document.removeEventListener('mousemove', mousemove);
    document.removeEventListener('mouseup', mouseup);
};
const mousemove = (event) => {
    if (isMouseDown) {
        setMaskPosition(getArea(event));
    }
};
// 返回所需参数
const getArea = (event) => {
    const windowWidth = window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth;
    const windowHeight = window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight;
    const xmin = clamp(Math.min(area.downX, event.clientX), 0, windowWidth);
    const xmax = clamp(Math.max(area.downX, event.clientX), 0, windowWidth);
    const ymin = clamp(Math.min(area.downY, event.clientY), 0, windowHeight);
    const ymax = clamp(Math.max(area.downY, event.clientY), 0, windowHeight);
    const obj = {
        offsetX: xmin,
        offsetY: ymin,
        width: xmax - xmin,
        height: ymax - ymin
    };
    return obj;
};
const clamp = (value, from, to) => {
    return value < from ? from : value > to ? to : value;
};
// 设置鼠标拖拽框
const setMaskPosition = (area) => {
    const maskDiv = document.getElementById('maskDiv');
    if (area) {
        maskDiv.style.display = 'block';
        maskDiv.style.left = area.offsetX + 'px';
        maskDiv.style.top = area.offsetY + 'px';
        maskDiv.style.width = area.width + 'px';
        maskDiv.style.height = area.height + 'px';
    }
    else {
        maskDiv.style.display = 'none';
    }
};
export default screenShot;
