<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 引入自定义的CSS文件 -->
    <!-- <link rel="stylesheet" href="/css/page_common.css"> -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电子证明</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
        }
        .container {
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        .btn-group {
            display: flex;
            justify-content: flex-end;
            padding: 10px;
            background-color: #f8f9fa;
        }
        .btn {
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            border: none;
            cursor: pointer;
            margin-left: 10px;
        }
        #pdfViewer {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: auto;
            width: 100%;
            height: 100%;
        }
        #pdfViewer canvas {
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="btn-group">
        <button class="btn" id="copyBtn">复制链接</button>
        <button class="btn" id="downloadBtn" >下载PDF</button>
    </div>
    <div id="pdfViewer"></div>
    <div id="notification" style="position: fixed; width: 90%; font-size: 12px; bottom: 100px; left: 50%; transform: translateX(-50%); text-align: center; background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; border-radius: 5px; padding: 10px; z-index: 1000;">
        由于低版本的IOS或安卓手机系统限制，可能出现无法查看及下载的情况。若出现该情况，您可将此链接复制到电脑端浏览器或其他高版本系统的手机上进行操作。谢谢！
    </div>
</div>

<script src="/js/jquery-3.2.1.min.js"></script>
<script src="/js/main.js"></script>
<script src="/js/pdf/pdf.min.js"></script>
<script src="/js/pdf/pdf.worker.min.js"></script>
<script>

$(document).ready(function () {
    const params = getQueryParams();
    fetchPdf(params);

    document.getElementById('downloadBtn').addEventListener('click', function() {
        // var sole = 'your_sole_value_here'; // 替换为实际的 sole 值
        // var fname = 'your_fname_value_here'; // 替换为实际的 fname 值
        window.location.href = `/proof/downPdfFile?sole=${params.sole}&fname=${params.fname}`;
    });


    // 复制链接按钮
    document.getElementById('copyBtn').onclick = function() {
        const downloadLink = `https://shr.gooeto.com:8043/exeTools/vElecFile.jsp?sole=${params.sole}&fname=${params.fname}`;
        navigator.clipboard.writeText(downloadLink).then(function() {
            alert('链接已复制到剪贴板');
        }, function(err) {
            console.error('无法复制链接: ', err);
            alert('复制链接失败，请尝试手动复制');
        });
    };
});

function fetchPdf(params) {
    const sole = params.sole  ;
    const fname = params.fname  ;
    $.ajax({
        url: '/proof/getPdfFile?sole='+sole+'&fname='+fname,
        method: 'GET',
        xhrFields: {
            responseType: 'blob' // 设置响应类型为blob
        },
        success: function(responseBlob) {
            viewPdf(responseBlob);
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.error('Error fetching PDF:', textStatus, errorThrown);
        }
    });
}

function getQueryParams() {
    const params = {};
    const queryString = window.location.search.slice(1);
    const pairs = queryString.split('&');
    for (const pair of pairs) {
        const [key, value] = pair.split('=');
        params[key] = decodeURIComponent(value || '');
    }
    return params;
}

function viewPdf(responseBlob) {
    var blob = responseBlob; // 直接使用后端返回的Blob对象
    var loadingTask = pdfjsLib.getDocument(URL.createObjectURL(blob));
    loadingTask.promise.then(function(pdf) {
        var pdfViewer = document.getElementById('pdfViewer');
        pdfViewer.innerHTML = ''; // 清空之前的PDF内容
        for (var pageNumber = 1; pageNumber <= pdf.numPages; pageNumber++) {
            pdf.getPage(pageNumber).then(function(page) {
                var scale = calcScale(page); // 计算适应屏幕的缩放比例
                var viewport = page.getViewport({ scale: scale });
                var canvas = document.createElement('canvas');
                var context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;

                pdfViewer.appendChild(canvas);
                var renderContext = {
                    canvasContext: context,
                    viewport: viewport
                };
                page.render(renderContext);
            });
        }
    }, function (reason) {
        console.error(reason);
    });
}

function calcScale(page) {
    var viewport = page.getViewport({ scale: 1.0 });
    var pdfViewer = document.getElementById('pdfViewer');
    var containerWidth = pdfViewer.clientWidth;
    var containerHeight = pdfViewer.clientHeight;
    var scaleX = containerWidth / viewport.width;
    var scaleY = containerHeight / viewport.height;
    return Math.min(scaleX, scaleY);
}

</script>
</body>
</html>
