<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>胶片预览</title>
    <script src="./js/hammer.js"></script>
    <script src="./js/cornerstone.js"></script>
    <script src="./js/cornerstoneMath.min.js"></script>
    <script src="./js/cornerstoneWADOImageLoader.bundle.min.js"></script>
    <script src="./js/cornerstoneWebImageLoader.min.js"></script>
    <script src="./js/cornerstoneTools.js"></script>
    <!-- https://unpkg.com/cornerstone-tools@6.0.7/dist/cornerstoneTools.js -->
    <script src="./js/dicomParser.min.js"></script>
    <script src="./js/jquery-1.12.2.min.js"></script>
    <script src="./js/html2canvas.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- 可选的 Bootstrap 主题文件(一般不用引入) -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap-theme.min.css"
        integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
    <script src="./js/dicomViewPc.js"></script>
    <link rel="stylesheet" href="./css/iconfont/iconfont.css">
    <style>
        .info {
            position: relative;
            left: 0;
            top: 0;
            font-size: 20px;
            display: none;
            width: 100px;
            height: 100px;
            border: 1px solid red;
            z-index: 100;
            color: white;
            margin-top: -100px;
        }

        /***/
        body {
            margin: 0;
            height: 100vh;
            padding: 0px;
        }

        #app {
            height: 100%;
            width: 100%;
        }

        #container {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        #top-menu {
            background-color: rgb(54, 54, 54);
            /*height: 180px;
            display: flex;
            flex-direction: row;*/
            border: 0px solid red;
            /*  overflow-x: hidden;
            overflow-y: hidden; */
            position: relative;
            /* 确保下拉菜单相对于这个元素定位 */
        }

        #body-part {
            width: 100%;
            display: flex;
            flex-direction: row;
            flex-grow: 1;
        }

        #dicom-continer {
            display: flex;
            flex-direction: column;
            height: 100%;
            flex-grow: 1;
        }

        #dicom-list {
            background-color: black;
            width: 150px;
            /*height: 100%;*/
            display: flex;
            /* overflow: auto; */
            overflow-y: scroll;
            flex-direction: column;
            max-height: 550px;
        }

        .btn {
            margin: 5px 5px 5px 0;
        }

        /*   #dicomImage {
            flex-grow:1;
            height: 100%;
        }
        #dicomImage1 {
            flex-grow: 1;
            height: 100%;
        }*/

        .series_img {
            border: 1px solid black;
            height: 100%;
            width: 100%;
        }

        .series_img_active {
            border: 1px solid green;
            height: 100%;
            width: 100%;
        }

        .border-red {
            border: 1px solid red;
        }

        .left-top {
            position: absolute;
            top: 0px;
            right: 0px;
            text-align: right;
            width: 100px;
            height: 100px;
        }

        .left-bottom {
            position: relative;
            left: 0;
            bottom: 0;
            width: 100px;
            height: 100px;
        }

        .right-top {
            position: relative;
            right: 0;
            top: 0;
            width: 100px;
            height: 100px;
        }

        .right-bottom {
            position: relative;
            right: 0;
            bottom: 0;
            width: 100px;
            height: 100px;
        }

        .cornerstone-tool-active {
            stroke: #FF0000 !important;
            /* 红色 */
        }

        .dicom-img-box {
            flex-grow: 1;
            width: 0;
            height: 100%;
            margin: 0 1px 0 1px;
            display: flex;
            flex-direction: row;
            align-items: center;
            background-color: black;
            border: 1px solid white;
            position: relative;
        }

        .dicom-img-box-active {
            flex-grow: 1;
            width: 0;
            height: 100%;
            margin: 0 1px 0 1px;
            border: 1px solid red;
            display: flex;
            flex-direction: row;
            align-items: center;
            background-color: black;
            position: relative;
        }

        .dicom-img {
            flex-grow: 1;
            width: 0;
            height: 100%;
            margin: 0 1px 0 1px;
        }

        .dicom-img-active {
            flex-grow: 1;
            width: 0;
            height: 100%;
            border: 1px solid red;
        }

        /*滚动条*/
        .slider-container {
            height: 100%;
            width: 3rem;
            background-color: black;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        /*滑块样式-开始*/
        /* range主体样式 */
        .lcmf-range {
            -webkit-appearance: none;
            position: relative;
            appearance: none;
            height: 0.5rem;
            /* outline设置为零防止点到空白区域时会出现边框影响美观性问题 */
            outline: 0;
            border: 0;
            /* 背景色设置为渐变色,有兼容性问题谨慎使用 */
            /*background: linear-gradient(to right,rgb(238,222,217),rgb(200,66,67));*/
            border-radius: 0 0.5rem 0.5rem 0;
        }

        .lcmf-range-date {
            /* 顺时针旋转90度作为y轴 */
            transform: rotate(90deg);
            width: 20rem !important;
            margin-left: -8.5rem;
            /*background: linear-gradient(to right,rgb(200,66,67),rgb(238,222,217));*/
            background: linear-gradient(to right, rgb(200, 66, 67), rgb(200, 66, 67));
        }

        /* 滑动块样式 */
        .lcmf-range::-webkit-slider-thumb {
            appearance: none;
            -webkit-appearance: none;
            height: 2rem;
            width: 2rem;
            border-radius: 0rem;
            background-color: white;
            border: 0.15rem solid rgb(245, 95, 95);
        }

        /*滑块样式-结束*/

        .icon-shang {
            color: red;
            height: 12rem;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .icon-xia:hover,
        .icon-shang:hover {
            color: white;
        }

        .icon-xia {
            color: red;
            height: 12rem;
            display: flex;
            flex-direction: column-reverse;
            align-items: center;
        }

        .flex-row {
            display: flex;
            flex-direction: row;
            align-items: center;
            flex-grow: 1;
            height: 0;
        }

        .around-info-left-top {
            position: absolute;
            top: 0px;
            left: 0px;
            color: white;
        }

        .around-info-right-top {
            position: absolute;
            top: 0px;
            right: 0px;
            color: white;
            display: flex;
            flex-direction: row-reverse;
        }

        .around-info-left-bottom {
            position: absolute;
            left: 0px;
            bottom: 0px;
            color: white;
        }

        .around-info-right-bottom {
            position: absolute;
            right: 0px;
            bottom: 0px;
            color: white;
            display: flex;
            flex-direction: column;
        }

        .around-info-right-bottom>.tag-item,
        around-info-right-top>.tag-item {
            display: flex;
            flex-direction: row-reverse;
        }

        .process-div {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-content: space-around;
            justify-content: center;
            align-items: center;
            font-size: 30px;
            color: red;
        }

        .icon-img-box {
            position: relative;
            width: 100%;
            height: 151px;
        }

        .icon-img-box>canvas {
            height: 149px !important;
            width: 149px !important;
        }

        /* 为图片设置过渡效果 */
        .img-checkbox {
            transition: transform 0.3s ease;
            cursor: pointer;
        }

        /*  点击时的效果 */
        .img-checkbox:active {
            transform: scale(0.95);
            opacity: 0.8;
        }

        .img-checkbox.active {
            border: 1px solid rgb(73, 121, 243);
            /* 添加边框 */
        }

        /* 下拉样式 */

        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-content {
            list-style-type: none;
            /* 去掉前面的点 */
            display: none;
            /* 默认隐藏 */
            position: absolute;
            background-color: #f9f9f9;
            min-width: 61px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            z-index: 1000;
            /* 确保在最上层 */
            padding: 5px;
            /* 去掉内边距 */
            margin: 0;
            /* 去掉外边距 */
        }

        .dropdown-content a {
            color: black;
            padding: 5px;
            text-decoration: none;
            display: block;
        }

        .dropdown-content a:hover {
            background-color: rgb(196, 213, 255);
        }

        .dropdown:hover .dropdown-content {
            display: block;
            /* 悬停显示下拉内容 */
        }

        .dropdown:hover .dropbtn {
            background-color: #3e8e41;
            /* 悬停时的按钮颜色 */
        }
    </style>

</head>

<body>
    <div id="container">
        <div id="top-menu">
            <img title="放大镜" style="width: 35px;height: 35px; margin-left: 5px;" id="Magnify" class="img-checkbox"
                onclick="switchAction('Magnify',1,this)" src="/static/放大镜.jpg" />
            <img title="平移" style="width: 50px;height: 50px;" id="Pan" class="img-checkbox"
                onclick="switchAction('Pan',1,this)" src="/static/平移.jpg" />
            <img title="左键缩放" style="width: 50px;height: 50px;" id="Zoom" class="img-checkbox"
                onclick="switchAction('Zoom',1,this)" src="/static/缩放.jpg" />
            <img title="滚轮缩放" style="width: 50px;height: 50px;" id="ZoomMouseWheel" class="img-checkbox"
                onclick="switchAction('ZoomMouseWheel',1,this)" src="/static/滚轮缩放.jpg" />
            <img title="对比度" style="width: 50px;height: 50px;" id="Wwwc" class="img-checkbox"
                onclick="switchAction('Wwwc',1,this)" src="/static/对比度.jpg" />
            <img title="选区对比度" style="width: 50px;height: 50px;" id="WwwcRegion" class="img-checkbox"
                onclick="switchAction('WwwcRegion',1,this)" src="/static/选区对比度.jpg" />
            <img title="比例尺" style="width: 50px;height: 50px;" id="ScaleOverlay" class="img-checkbox"
                onclick="switchAction('ScaleOverlay',1,this)" src="/static/比例尺.jpg" />
            <img title="旋转" style="width: 50px;height: 50px;" id="Rotate" class="img-checkbox"
                onclick="switchAction('Rotate',1,this)" src="/static/旋转.jpg" />
            <img title="方向标记" style="width: 50px;height: 50px;" id="OrientationMarkers" class="img-checkbox"
                onclick="switchAction('OrientationMarkers',1,this)" src="/static/方向标记.jpg" />
            <img title="角度" style="width: 50px;height: 50px;" id="Angle" class="img-checkbox"
                onclick="switchAction('Angle',1,this)" src="/static/角度.jpg" />
            <img title="箭头注释" style="width: 50px;height: 50px;" id="ArrowAnnotate" class="img-checkbox"
                onclick="switchAction('ArrowAnnotate',1,this)" src="/static/箭头注释.jpg" />
            <img title="长宽尺" style="width: 50px;height: 50px;" id="Bidirectional" class="img-checkbox"
                onclick="switchAction('Bidirectional',1,this)" src="/static/长宽尺.jpg" />
            <img title="科布角" style="width: 50px;height: 50px;" id="CobbAngle" class="img-checkbox"
                onclick="switchAction('CobbAngle',1,this)" src="/static/科布角.jpg" />
            <img title="椭圆选区" style="width: 50px;height: 50px;" id="EllipticalRoi" class="img-checkbox"
                onclick="switchAction('EllipticalRoi',1,this)" src="/static/椭圆选区.jpg" />
            <img title="自由选区" style="width: 50px;height: 50px;" id="FreehandRoi" class="img-checkbox"
                onclick="switchAction('FreehandRoi',1,this)" src="/static/自由选区.jpg" />
            <img title="长度尺" style="width: 50px;height: 50px;" id="Length" class="img-checkbox"
                onclick="switchAction('Length',1,this)" src="/static/长度尺.jpg" />
            <img title="探针" style="width: 50px;height: 50px;" id="Probe" class="img-checkbox"
                onclick="switchAction('Probe',1,this)" src="/static/探针.jpg" />
            <img title="矩形选区" style="width: 50px;height: 50px;" id="RectangleRoi" class="img-checkbox"
                onclick="switchAction('RectangleRoi',1,this)" src="/static/矩形选区.jpg" />
            <img title="文本标记" style="width: 50px;height: 50px;" id="TextMarker" class="img-checkbox"
                onclick="switchAction('TextMarker',1,this)" src="/static/箭头注释.jpg" />
            <img title="左键翻页" style="width: 50px;height: 50px;" id="StackScroll" class="img-checkbox"
                onclick="switchAction('StackScroll',1,this)" src="/static/左键翻页.jpg" />
            <img title="滚轮翻页" style="width: 50px;height: 50px;" id="StackScrollMouseWheel" class="img-checkbox"
                onclick="switchAction('StackScrollMouseWheel',1,this)" src="/static/鼠标翻页.jpg" />
            <img title="反转色" style="width: 50px;height: 50px;" id="invert" class="img-checkbox" onclick="invert(1,this)"
                src="/static/反转色.jpg" />
            <img title="色彩对比" style="width: 50px;height: 50px;" id="changeColorx" class="img-checkbox"
                onclick="changColor(1,this)" src="/static/色彩对比.jpg" />
            <img title="截图" id="screenshot" style="width: 50px;height: 50px;" onclick="screenshotTool()"
                class="img-checkbox" src="/static/相机.jpg" />
            <img title="重置" id="reset" style="width: 50px;height: 50px;" onclick="resetTool()" class="img-checkbox"
                src="/static/重置.jpg" />
            <div class="dropdown">
                <img style="width: 36px;height: 36px;" class="dropbtn" src="/static/布局2x.jpg" />
                <ul class="dropdown-content">
                    <li><a data-value="1x1"><img src="/static/1.1.jpg" />1x1</a></li>
                    <li><a data-value="1x2"><img src="/static/1.2.jpg" />1x2</a></li>
                    <li><a data-value="2x1"><img src="/static/2.1.jpg" />2x1</a></li>
                    <li><a data-value="2x2"><img src="/static/2.2.jpg" />2x2</a></li>
                    <li><a data-value="2x3"><img src="/static/2.3.jpg" />2x3</a></li>
                    <li><a data-value="3x2"><img src="/static/3.2.jpg" />3x2</a></li>
                    <li><a data-value="3x3"><img src="/static/3.3.jpg" />3x3</a></li>
                </ul>
            </div>

            <input style="display: none;" type="text" id='row-count' placeholder="行数" value='1' /> x <input
                style="display: none;" type="text" id='column-count' placeholder="列数" value='1' /> <input
                style="display: none;" type='button' onclick="doCreate()" value="生成" />

        </div>

        <div id="body-part">
            <div id="dicom-continer">
            </div>
            <div id="dicom-list">
            </div>
        </div>
    </div>
    <script>
        //url参数与请求
        var methodStr = GetQueryString("method");
        document.getElementById("screenshot").style.display = "none";
        if (methodStr && methodStr == "PathologyView") {
            document.getElementById("screenshot").style.display = "";
        }

        //获取下拉菜单的父元素
        var dropdownMenu = document.querySelector('.dropdown-content');
        dropdownMenu.addEventListener('click', function (event) {
            var target = event.target;
            while (target != dropdownMenu) {
                if (target.tagName === 'A') {
                    var value = target.getAttribute('data-value');
                    var parts = value.split('x');

                    // 更新输入框的值
                    document.getElementById('row-count').value = parts[0].trim();
                    document.getElementById('column-count').value = parts[1].trim();
                    console.log('Clicked item value:', value);
                    doCreate();
                    break;
                }
                target = target.parentElement;
            }
        });

        // 获取容器元素
        var container = document.getElementById('top-menu');
        var activeImg = null; // 存储当前激活的图片元素

        container.addEventListener('click', function (event) {
            var target = event.target;
            //要排除的图片元素的id
            var excludeIds = ['reset', 'screenshot'];
            if (target.id && excludeIds.includes(target.id)) {
                // 如果点击的是排除的图片,直接返回不执行任何操作
                return;
            }
            // 检查点击的是否是图片元素
            if (target.classList.contains('img-checkbox')) {
                if (activeImg === target) {
                    // 如果当前点击的图片已经是激活状态,则移除边框
                    target.classList.remove('active');
                    activeImg = null; // 重置当前激活的图片引用
                } else {
                    // 如果当前点击的图片不是激活状态
                    if (activeImg) {
                        // 移除之前激活的图片的边框
                        activeImg.classList.remove('active');
                    }
                    // 给当前点击的图片添加边框,并更新激活图片的引用
                    target.classList.add('active');
                    activeImg = target;
                }
            }
        });
    </script>
</body>

</html>