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

<head>
  <title>{$ htmlEncode .teaTitle}</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
  {$if eq .teaFaviconFileId 0}
  <link rel="shortcut icon" href="/images/favicon.png" />
  {$else}
  <link rel="shortcut icon" href="/ui/image/{$.teaFaviconFileId}" />
  {$end}
  <link rel="stylesheet" type="text/css" href="/_/@default/@layout.css" media="all" />
  {$TEA.SEMANTIC}

  {$TEA.VUE} {$echo "header"}
  <script type="text/javascript" src="/js/sweetalert2/dist/sweetalert2.all.min.js" async></script>
  <script src="/js/antd/DomHandler.js"></script>
  <script src="/js/antd/connectedoverlayscrollhandler.umd.js"></script>
  <link href="/js/resources/themes/saga-blue/theme.css " rel="stylesheet">
  <link href="/js/resources/primevue.min.css " rel="stylesheet">
  <script src="/js/antd/primevue.min.js"></script>
  <script src="/js/antd/calendar.umd.min.js"></script>
  <script src="/js/antd/inputswitch.umd.js"></script>
  <script src="/js/antd/radiobutton.umd.js"></script>
  <script src="/js/antd/checkbox.umd.js"></script>
  <script src="/js/moment.min.js"></script>
  <script src="/js/antd/antd.min.js"></script>
  <script type="text/javascript" src="/_/@default/@layout.js?v=v{$.teaVersion}"></script>
  <script type="text/javascript" src="/js/components.js?v=v{$.teaVersion}"></script>
  <script type="text/javascript" src="/js/utils.min.js"></script>
  <script type="text/javascript" src="/js/date.tea.js"></script>
  <script type="text/javascript" src="/js/langs/base.js?v={$ .teaVersion}"></script>
  <script type="text/javascript" src="/js/langs/{$.teaLang}.js?v={$ .teaVersion}"></script>
  <link rel="stylesheet" type="text/css" href="/css/antd.min.css" />
  <link rel="stylesheet" type="text/css" href="/js/langs/{$.teaLang}.css?v={$ .teaVersion}" />
  <link rel="stylesheet" type="text/css" href="/_/@default/@layout_override.css" media="all" />
  <link rel="stylesheet" href="/primeicons/primeicons.min.css" />
  <link rel="stylesheet" type="text/css" href="/_/@default/antdReset.css" media="all" />
  <link rel="stylesheet" type="text/css" href="/_/@default/ui_override.css" media="all" />
</head>

<body>
  <div id="app" :class="(teaTheme == null || teaTheme.length == 0) ? 'theme10': teaTheme">
    <!-- 顶部导航 -->
    <div class="ui menu top-nav inverted borderless"
      :class="(teaTheme == null || teaTheme.length == 0) ? 'theme10': teaTheme" v-cloak="">
      <a href="/" class="item logo">
        <i class="ui icon leaf" v-if="teaLogoFileId == 0"></i><img alt="logo" v-if="teaLogoFileId > 0"
          :src="'/ui/image/' + teaLogoFileId" style="width: auto; height: 1.6em" />
        &nbsp; {{teaTitle}}&nbsp;<sup v-if="teaShowVersion">v{{teaVersion}}<span
            v-if="teaVersion.split('.').length == 4" title="当前版本为测试版，再次感谢您参与测试">
            beta</span></sup>
        &nbsp;
      </a>

      <i class="ui icon bars mobile-menu-btn" :class="{'menu-open': menuVisible}" @click="triggerMobileMenu"></i>

      <div class="right menu">
        <!-- 消息 -->
        <a href="" class="item" :class="{active:teaMenu == 'message'}" @click.prevent="showMessages()">
          <span v-if="globalMessageBadge > 0">
            <i class="pi pi-bell"></i>
            <span class="message-badge">消息({{globalMessageBadge}}) </span>
          </span>
          <span v-if="globalMessageBadge == 0">
            <i class="pi pi-bell "></i>
            <span class="message-badge">消息(0)</span>
          </span>
        </a>

        <!-- 用户信息 -->
        <a href="/settings/profile" class="item">
          <span>
            <i class="pi pi-user" v-if="teaUserAvatar.length == 0"></i>
            <img class="avatar" alt="" :src="teaUserAvatar" v-if="teaUserAvatar.length > 0" />
            <span class="message-badge">{{teaUsername}}</span>
          </span>
        </a>

        <!-- 文档 -->
        <a href="/docs" class="item">
          <span>
            <i class="pi pi-book"></i>
            <span class="message-badge">文档</span>
          </span>
        </a>
        <!-- 背景颜色 -->
        <div class="color-palette-container">
          <a href="" class="item menu-button" title="点击切换界面风格" @click.prevent="showThemePanel">
            <i class="pi pi-palette"></i>
          </a>
          <div class="popover" v-if="themePanelVisible" :style="{
              left: themePanelPosition.left + 'px',
              top: themePanelPosition.top + 'px',
            }">
            <div class="popover-arrow">
            </div>
            <div class="color-palette">
              <span v-for="(color,index) in [
                  getCssVariable('--color-theme-1'),
                  getCssVariable('--color-theme-2'),
                  getCssVariable('--color-theme-3'),
                  getCssVariable('--color-theme-4'),
                  getCssVariable('--color-theme-5'),
                  getCssVariable('--color-theme-6'),
                  getCssVariable('--color-theme-7'),
                  getCssVariable('--color-theme-8'),
                  getCssVariable('--color-theme-9'),
                  getCssVariable('--color-theme-10'),
                  getCssVariable('--color-theme-11'),
                  getCssVariable('--color-theme-12'),
                  getCssVariable('--color-theme-13'),
                  getCssVariable('--color-theme-14'),
                  getCssVariable('--color-theme-15'),
                  getCssVariable('--color-theme-16'),
                  getCssVariable('--color-theme-17'),
                  getCssVariable('--color-theme-18'),
                ]" class="palette-item" :style="{
                    borderColor: teaTheme === 'theme'+(index+1)? color:'',
                  }" @click="changeTheme('theme'+(index+1))">
                <span class="palette-item-color" :style="{
                    backgroundColor: color,
                  }"></span>
              </span>
            </div>
          </div>
        </div>

        <a href="" class="item" title="switch dark mode" @click.prevent="switchDarkMode">
          <i :class="{'pi pi-moon':!isDarkMode, 'pi pi-sun':isDarkMode}" style="margin-right: 0.5em;"></i>
          <span>
            <span class="message-badge">{{isDarkMode ? '亮色' : '暗色'}}</span>
          </span>
        </a>

        <!-- 企业版 -->
        <!-- <a :href="'/settings/authority'" class="item" title="商业版" :v-if="teaIsPlus"><i class="icon gem outline yellow"></i></a>-->
        <a
            href=""
            class="item"
            title="switch language"
            @click.prevent="switchLang"
            ><i class="icon language"></i>
          </a>
        <!-- 退出登录 -->
        <a :href="Tea.url('logout')" class="item" title="安全退出登录">
          <span>
            <i class="pi pi-sign-out"></i>
            <span class="message-badge">退出登录</span>
          </span>
        </a>
      </div>
    </div>

    <div class="app-main-container">
      <!-- 左侧主菜单 -->
      <div class="b-main-menu-shadow" v-if="menuVisible"></div>
      <div class="b-main-menu-container" :class="{visible: menuVisible}">
        <div class="b-main-menu" :class="[teaTheme||'theme-0']" v-cloak="">
          <!-- 模块 -->
          <template v-for="(module) in teaModules.filter(m=>m.isOn!=false)">
            <!-- no sub menu -->
            <div v-if="module.subItems == null || module.subItems.length == 0" class="module" :key="module.code" :class="{
                    active: isMenuExpanded(module.code),
                  }">
              <a class="item" :href="Tea.url(module.code)">
                <span class="left">
                  <i class="pi" v-if="module.icon != null" :class="iconMap[module.icon]"></i>
                  <span class="module-name">{{module.name}}</span>
                  <span v-if="module.subtitle" class="subtitle">
                    {{module.subtitle}}
                  </span>
                </span>
              </a>
            </div>

            <!-- 其他模块 -->
            <div v-else class="module" :key="module.code" :class="{
                    active: isMenuExpanded(module.code),
                    expend: isMenuExpanded(module.code),
                  }">
              <div class="item" @click="toggleMenu(module.code)">
                <span class="left">
                  <i class="pi" v-if="module.icon != null" :class="iconMap[module.icon]"></i>
                  <span class="module-name">{{module.name}}</span>
                  <span v-if="module.subtitle" class="subtitle">
                    {{module.subtitle}}
                  </span>
                </span>

                <i v-if="module.subItems?.length" class="right-arrow pi" :class="{
                      'pi-angle-up': isMenuExpanded(module.code),
                      'pi-angle-down': !isMenuExpanded(module.code),
                    }"></i>
              </div>
              <div class="sub-items" :class="{'open-sub-menu': isMenuExpanded(module.code)}">
                <a v-if="module.subItems.find(subItem=>subItem.url === Tea.url(module.code)) == null" class="item"
                  :class="{
                        active: isSubMenuActive(Tea.url(module.code), teaSubMenu),
                      }" :href="Tea.url(module.code)">
                  <span>{{module.name}}</span>
                </a>
                <a class="item" :class="{
                        separator: subItem.name == '-',
                        active: isSubMenuActive(subItem.url, teaSubMenu),
                      }" v-for="subItem in module.subItems" v-if="subItem.isOn !== false" :key="subItem.code"
                  :href="subItem.url">
                  <span v-if="subItem.name != '-'">{{subItem.name}}</span>
                </a>
              </div>
            </div>
          </template>
        </div>
      </div>

      <!-- 右侧主操作栏 -->
      <div class="main"
        :class="{'without-menu':teaSubMenus.menus == null || teaSubMenus.menus.length == 0 || (teaSubMenus.menus.length == 1 && teaSubMenus.menus[0].alwaysActive), 'without-secondary-menu':teaSubMenus.alwaysMenu == null || teaSubMenus.alwaysMenu.items.length <= 1, 'without-footer':!teaShowPageFooter}"
        v-cloak="">
        <!-- 功能区 -->
        <div class="main-box">
          <!-- 操作菜单 -->
          <!-- <div class="ui top menu tabular tab-menu small" v-if="teaTabbar.length > 0">
            <a class="item" v-for="item in teaTabbar" :class="{'active':item.active,right:item.right}" :href="item.url">
              <var>{{item.name}}<span v-if="item.subName.length > 0">({{item.subName}})</span><i class="icon small"
                  :class="item.icon" v-if="item.icon != null && item.icon.length > 0"></i>
              </var>
            </a>
          </div> -->

          {$TEA.VIEW}
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <div id="footer" class="ui menu inverted light-blue borderless small"
      v-if="teaShowPageFooter && teaPageFooterHTML.length == 0">
      <a class="item" title="点击进入检查版本更新页面">{{teaName}} v{{teaVersion}}</a>
    </div>
    <div id="footer" class="ui menu inverted light-blue borderless small"
      v-if="teaShowPageFooter && teaPageFooterHTML.length > 0" v-html="teaPageFooterHTML"></div>
  </div>

  {$echo "footer"}
</body>

</html>