<!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={`${__PREFIX__}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>