<!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>
    <style>
      body{
          margin:0;
      }
      .containner{
          display: flex;
          flex-direction: column;
          height: 100vh;
      } 
      .content{
          flex: 1;
      }
      .yee-portal-nav {
        position: relative;
        display: flex;
        box-sizing: border-box;
        align-items: center;
        user-select: none;
        height: 6.5rem;
        /* width: 1920px; */
        width: 100vw;
          padding: 1.75rem;
          background: #000000;
        }
      .yee-portal-nav .left-logo {
        margin-right: 1rem;
        position: relative;
        background-image: url("/api/snb/server/wsFile/view/0242ac110008-11ee7241-48ccbbd6-8930?fileName=logo-bg.png");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        width: 34.5rem;
        min-width: 34.5rem;
        height: 3.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .yee-portal-nav .left-logo img {
        width: 25.68rem;
        height: 1.875rem;
      }
      .yee-portal-nav .right-menu {
        font-size: 1.125rem;
        display: flex;
        height: 3rem;
        border-top: 1px solid #575759;
        border-bottom: 1px solid #575759;
        background-image: url("/api/snb/server/wsFile/view/0242ac110008-11ee7241-4cbaa726-b383?fileName=menu-bg.png");
        flex: 1;
      }
      .yee-portal-nav .right-menu .menu {
        width: calc(100% - 6rem);
        display: flex;
        align-items: center;
        overflow: auto;
      }
      .line{
          width: 1px;
          height: 1rem;
          background: #575759;
          margin-right: 1rem;
      }
      .line:last-child{
          margin-left: 1rem;
      }
      .yee-portal-nav .right-menu .setting {
        display: flex;
        align-items: center;
        min-width: 6rem;
      }
      .avatar {
        width: 1.5rem;
        height: 1.5rem;
        margin-right: 1rem;
        border-radius: 50%;
      }
      .menu-btn {
        font-size: 1.125rem;
        color: white;
        padding: 0 1.0625rem;
        background-color: #231f20;
        margin-right: 1rem;
        border-radius: 0 !important;
        height: 1.5625rem;
        border: none;
        line-height: 1.5625rem;
        cursor: pointer;
      }
      .menu-btn.active-btn {
        height: 100%;
        font-weight: 700;
        border: 1px solid #ee1e23;
        background: rgba(238, 30, 35, 0.3);
      }
      .dropdown {
        position: relative;
        display: inline-block;
      }
      .dropdown-toggle {
        color: #D1D2D4;
        cursor: pointer;
        display: inline-block;
        font-size: 1rem;
      }

      .dropdown-menu {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        width: 7.5rem;
        font-size: 0.9rem;
        box-shadow: 0px .5rem 1rem 0px rgba(0, 0, 0, 0.2);
        padding: 0.625rem 0;
        text-align: center;
        z-index: 1;
        left: -2.5rem;
        top: 0.9375rem;
      }

      .dropdown-menu li {
        list-style: none;
      }
      .dropdown-menu li a {
        text-decoration: none;
        color: #575759;
        display: block;
        padding: 0.3125rem;
      }
      .dropdown-menu li a:hover {
        background-color: #ddd;
      }
      .icon{
        width: 1.5rem; 
        height: 1.5rem; 
        margin-right: 2rem
      }
      iframe{
        width: 100%;
      }
      #nprogress .bar{
       background: #EB4E52 !important;
      }

      #nprogress .peg {
        box-shadow: 0 0 10px #EB4E52, 0 0 5px #EB4E52 !important;
      }
  </style>
  </head>
  <body>
    <div class="containner">
        <div class="yee-portal-nav">
            <div class="left-logo">
              <img class="logo" src="/api/snb/server/wsFile/view/0242ac110008-11ee7241-502b75c0-b383?fileName=left-logo.png" alt="" />
            </div>
            <div class="right-menu">
              <div class="menu">
                <div class="line"></div>
                 {% for menu in menues %}
                    {% if loop.first %}
                         <button onclick="changeMenu(event,'{{menu.url}}')" class="menu-btn active-btn">{{menu.label}}</button>
                    {% else %}
                        <button onclick="changeMenu(event,'{{menu.url}}')" class="menu-btn">{{menu.label}}</button>
                    {% endif %}
                {% endfor %}
                <div class="line"></div>
              </div>
              <div class="setting">
                <img class="avatar" src="{{user_logo}}" alt="" />
                <div class="dropdown">
                  <span class="dropdown-toggle" onclick="toggleDropdown()">{{user_name}}</span>
                  <ul class="dropdown-menu" id="dropdownMenu">
                      {% if user_role != 'PORTALVIEWER' %}
                    <li><a href="/#/workspace">进入管理界面</a></li>
                      {% endif %}
                    <li><a onclick="localStorage.removeItem('SMARTNOTEBOOK__DEVELOPMENT__1.0.0__COMMON__LOCAL__KEY__');localStorage.removeItem('SMARTNOTEBOOK__PRODUCTION__1.0.0__COMMON__LOCAL__KEY__');" href="/api/snb/server/logout/?redirect=/%23/login">退出登录</a></li>
                  </ul>
                </div>
                <!--img style="height: 60%; margin: 0 1rem" src="/api/snb/server/wsFile/view/0242ac11001b-11ed258b-2697c2bc-91bd/0242ac110008-11ee69a4-c4403108-8222?path.png" alt="" />
                <img
                  class="icon"
                  src="/api/snb/server/wsFile/view/0242ac11001b-11ed258b-2697c2bc-91bd/0242ac110008-11ee69a4-c8e54e1e-8905?setting.png"
                  alt=""
                /-->
              </div>
            </div>
          </div>
        <iframe class="content" src="{{menues[0].url}}" frameborder="0" onLoad="iframe_onload(this.contentWindow.location);" ></iframe>
    </div>
    <script>
        all_menues_dict={{all_menues_dict}};

        function  iframe_onload(src)
        {
            is_hide =0;
            url=src.pathname+src.hash
            for(k in all_menues_dict){
                if(url.startsWith(k))
                {
                    is_hide = all_menues_dict[k]
                }
            }
             if(is_hide ==1) {
                 console.log('隐藏');
                 document.getElementsByClassName('yee-portal-nav')[0].style.display = 'none';
             } else{
                 console.log('不隐藏');
                 document.getElementsByClassName('yee-portal-nav')[0].style.display = '';
             }

            console.log(url);
        }

        function toggleDropdown() {
          var dropdownMenu = document.getElementById("dropdownMenu");
          if (dropdownMenu.style.display !== "block") {
            dropdownMenu.style.display = "block";
          } else {
            dropdownMenu.style.display = "none";
          }
        }
        function changeMenu(e,url) {
          var dropdownMenu = document.querySelectorAll;
          const menuItems = document.querySelectorAll('.menu .menu-btn');
          const frame = document.querySelector('iframe');
          frame.setAttribute("src",url);
          menuItems.forEach((item) => {
            item.classList.remove('active-btn');
          });
          e.target.classList.add('active-btn') 
        }
        function resize(){
          const scaleRate = document.documentElement.clientWidth/1920;
          var scale = `scale(${scaleRate})`
          document.querySelector(".yee-portal-nav").style.height = 104 * scaleRate+'px';
          document.querySelector("html").style.fontSize = 16 * scaleRate+'px';
          // document.querySelector(".yee-portal-nav").style.transform = scale;
        }
        window.onload = ()=>{
          resize();
        }
        window.onbeforeunload = ()=>{
          if(timer){
            clearInterval(timer);
            window.onbeforeunload = null;
          }
        }
        let timer = null
        window.addEventListener('resize',function(){
          timer = setInterval(() => {
            resize()
          }, 500)
        })
        window
      </script>
  </body>
</html>
