<!DOCTYPE html>
<html>
  <head>
    <title>企云在线</title>
     <% include utils.ejs %>
      <style type="text/css">
        .pt-page {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          visibility: hidden;
          overflow: hidden;
          -webkit-backface-visibility: hidden;
          -moz-backface-visibility: hidden;
          backface-visibility: hidden;
          -webkit-transform: translate3d(0, 0, 0);
          -moz-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
          -webkit-transform-style: preserve-3d;
          -moz-transform-style: preserve-3d;
          transform-style: preserve-3d;
        } 
        .pt-page-current,
        .no-js .pt-page {
          visibility: visible;
          z-index: 1;
        }
     </style>
  </head>
  <body class="home-hr"> 
    <div class="menu-hr ">
      <div class="menu-hr-wrap">
        <div class="login-user" id="login-user-menu"> 
            <img class="user-photo" src="imgs/touxiang.jpg" alt="头像" />
            <h3>登录用户</h3>
            <span class="login-user-name">fanwh</span> 
        </div>
      </div>
      <div class="menu-items-wrap">
        <ul class="primary-items">
          <li><a href="#userInfo"><i class="fa fa-home blue-icon fa-fw"></i>主页</a></li>
          <li><a href="#formEditor"><i class="fa fa-user green-icon fa-fw"></i>表单设置</a></li>
          <li><a href="#approvalEditor"><i class="fa fa-plug yellow-icon fa-fw"></i>自动化</a></li>
          <li><a href="#"><i class="fa fa-inbox purple-icon fa-fw"></i>消息历史纪录</a></li>
          <li><a href="#"><i class="fa fa-file blue-icon fa-fw"></i>文件管理</a></li>
          <li><a href="#"><i class="fa fa-group red-icon fa-fw"></i>团队目录</a></li>
          <li><a href="#"><i class="fa fa-dashboard green-icon fa-fw"></i>统计资料</a></li>
          <li><a href="#"><i class="fa fa-magic yellow-icon fa-fw"></i>个性化设置</a></li>
        </ul>
        <h3>管理设置</h3>
        <ul class="secondary-items" >
          <li><a href="#">团队设置</a></li>
          <li><a href="#">团队管理</a></li>
          <li><a href="#">邀请他人</a></li>
          <li><a href="#">付费用户</a></li>
          <li><a href="#">认证</a></li>
        </ul>
      </div>
      <div class="menu-footer"> 
        <ul class="menu-footer-wrap">
          <li><a href="#/is">产品介绍</a></li>
          <li><a href="#/apps">轻松HR Apps</a></li>
          <li><a href="#/brand-guidelines">品牌指导</a></li>
          <li><a href="#/help">帮助中心</a></li>
          <li><a target="_blank" href="#">应用接口<i class="ts_icon ts_icon_external_link small_left_margin ts_icon_inherit"></i></a></li>
          <li><a href="#/account/gateways">网关设置</a></li> 
        </ul>  
      </div>
    </div>
    <div class="container-hr">
      <div class="head-hr z-depth-1">
        <div class="menu-toggle" id="show-menu">
          <span class="menu-icon fa fa-reorder"></span>
          <span class="menu-label">菜单</span>  
        </div>
        <div class="vert-divider"></div>
        <div class="header-team-name" id="header-team-name">
          <a href="#/home">
            <i class="fa fa-home"></i>
            谈华芳项目组
          </a>
        </div>
        <div class="header-nav">
          <div class="header-btns float-right">
            <a id="team-switcher" href="/signOut">
              <i class="fa fa-sign-out"></i>
              <span class="block label">退出</span>
            </a>
            <a id="team-switcher">
              <i class="fa fa-th-large"></i>
              <span class="block label">团队</span>
            </a>
            <a id="help-link" href="#/help">
              <i class="fa fa-support"></i>
              <span class="block label">帮助</span>
            </a>
            <a href="/chat">
              <img class="photo-sm" src="imgs/touxiang.jpg" >
              <span class="block label">企信</span>
            </a>
          </div>                    
        </div> 
      </div>
      <div class="content-hr">
        <!-- < include forms/editor.ejs%> -->
        <!-- < include forms/formOperation.ejs%> -->
        <!-- < include initialization/addEmployee.ejs%> -->
        <!-- < include initialization/importEmployee.ejs%>  -->
        <div class="content-body pt-page pt-page-current"> 
        </div>
        <div class="content-body pt-page pt-page-next"> 
        </div>
        <div class="overlay hide"></div>
      </div>
    </div>
  
    <script  type="text/javascript">
        $('#login-user-menu').click(function(e){
            $('.menu-hr').removeClass("open-menu");
            $('.container-hr').removeClass("open-container-menu");
            $('#show-menu').removeClass("show-menu");
            $('.overlay').removeClass('hide');
        });
        $('#show-menu').click(function(e){
            if(!$('#show-menu').hasClass('show-menu')){
              $('.menu-hr').addClass("open-menu");
              $('.container-hr').addClass("open-container-menu");
              $('#show-menu').addClass("show-menu"); 
              $('.overlay').removeClass('hide');
            }else{
              $('.menu-hr').removeClass("open-menu");
              $('.container-hr').removeClass("open-container-menu");
              $('#show-menu').removeClass("show-menu");
              $('.overlay').addClass('hide');
            } 
        });
        $('.overlay').click(function(e){
            $('.menu-hr').removeClass("open-menu");
            $('.container-hr').removeClass("open-container-menu");
            $('#show-menu').removeClass("show-menu");
            $('.overlay').addClass('hide');
        });
        var loader=new Loader({ 
            routes:{
              '/userInfo':userInfo,
              '/formEditor':formEditor,
              '/approvalEditor':approvalEditor
            },
            defaults:'/userInfo'  
        });
        loader.init();  
        function userInfo(){ 
          loader.import('/views/hr/userInfo.html').then(function(p){
              $('.pt-page-next').html(p);
              loader.page.nextPage();
          });
        }
        function approvalEditor(){ 
            loader.import('/views/approval/editor.html').then(function(p){
              $('.pt-page-next').html(p);
              loader.page.nextPage();
            });
        }
        function formEditor(){
            loader.import('/views/form/editor.html').then(function(p){
              $('.pt-page-next').html(p);
              loader.page.nextPage();
            });
        } 
           
    </script>
  </body>
</html>