<template>
  <div id="root-app">
    <template v-if="oauthService.isLogin">
      <a-layout class="dc-main-container">
        <a-layout-header class="dc-main-header">
          <page-header :logoSvg="logoPngXml" :logoSlogan="logoSlogan" :companyZnName="companyZnName" :companyEnName="companyEnName" :dynamic="true" :enableSearch="true" :enableMsgNotice="true"></page-header>
        </a-layout-header>
        <a-layout class="dc-main">
          <a-layout-sider :width="140" collapsedWidth="60" class="dc-menu" v-model="collapsed" :trigger="null" collapsible theme="light">
            <left-menu :static-menus="menus" :collapsed.sync="collapsed" :dynamic="true"></left-menu>
          </a-layout-sider>
          <div class="d-flex flex-column">
            <a-divider class="m-0 p-0 dc-divider" />
          </div>
          <a-layout-content class="d-flex flex-column dc-main-content">
            <div class="dc-main-tabs">
              <breadcrumb-nav></breadcrumb-nav>
            </div>
            <div class="dc-main-box">
              <div class="dc-router-container">
                <router-link :to="{ path: '/test-a', query: { mark: 'a' } }">TestA</router-link> | <router-link :to="{ path: '/test-b', query: { name: '动态面包屑', mark: 'b' } }">TestB</router-link> | <router-link :to="{ path: '/test-c', query: { mark: 'c' } }">TestC</router-link> | <router-link :to="{ path: '/test-d', query: { mark: 'd' } }">TestD</router-link> |
                <router-link :to="{ path: '/test-e', query: { mark: 'e' } }">TestE</router-link> | <router-link :to="{ path: '/test-f' }">TestF</router-link> | <router-link :to="{ path: '/test-g' }">TestG</router-link> | <router-link :to="{ path: '/test-h' }">TestH</router-link> | <router-link :to="{ path: '/test-i' }">TestI</router-link> |
                <router-link :to="{ path: '/test-j' }">TestJ</router-link> | <router-link :to="{ path: '/test-k' }">TestK</router-link> | <router-link :to="{ path: '/test-l' }">TestL</router-link> | <router-link :to="{ path: '/test-m' }">TestM</router-link> | <router-link :to="{ path: '/test-n' }">TestN</router-link> | <router-link :to="{ path: '/test-o' }">TestO</router-link> |
                <router-link :to="{ path: '/test-p' }">TestP</router-link>
                <div class="dc-router-view">
                  <router-view></router-view>
                </div>
              </div>
            </div>
          </a-layout-content>
        </a-layout>
      </a-layout>
    </template>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { MenuType } from "./constants/enum/menu-type.enum";
import { NavMenu } from "./model/NavMenu";
import { oauthService } from "./services/oauth.service";
import { Button, Divider, Icon, Layout } from "ant-design-vue";
import { LOGO_PNG_XML } from "./constants/encode-assets/svg";

@Component({
  name: "CoreApp",
  components: {
    [Icon.name]: Icon,
    [Button.name]: Button,
    [Layout.name]: Layout,
    [Layout.Header.name]: Layout.Header,
    [Layout.Sider.name]: Layout.Sider,
    [Layout.Content.name]: Layout.Content,
    [Divider.name]: Divider,
  },
})
export default class App extends Vue {
  oauthService = oauthService;
  collapsed = false;

  logoSlogan = "东华软件";
  companyZnName = "新一代办公平台";
  companyEnName = "NEW GEN OFFICE PLATFORM";
  logoPngXml = LOGO_PNG_XML;
  menus: NavMenu[] = [
    { key: "101", title: "应用管理", url: "/test-a", icon: "", type: MenuType.MENU.code },
    {
      key: "102",
      title: "组织管理",
      icon: "",
      type: MenuType.BUTTON.code,
      children: [
        { key: "2", title: "用户管理", url: "/test-b", icon: "", type: MenuType.MENU.code },
        { key: "3", title: "机构管理", url: "/test-c", icon: "", type: MenuType.MENU.code },
        { key: "4", title: "公司管理", url: "/test-d", icon: "", type: MenuType.MENU.code },
        { key: "5", title: "岗位管理", url: "/test-e", icon: "", type: MenuType.MENU.code },
      ],
    },
    {
      key: "103",
      title: "权限管理",
      icon: "",
      type: MenuType.BUTTON.code,
      children: [
        { key: "7", title: "角色管理", url: "/test-f", icon: "", type: MenuType.MENU.code },
        { key: "8", title: "租户管理", url: "/test-g", icon: "", type: MenuType.MENU.code },
        { key: "9", title: "通知模板", url: "/test-h", icon: "", type: MenuType.MENU.code },
      ],
    },
    {
      key: "104",
      title: "系统设置",
      icon: "",
      type: MenuType.BUTTON.code,
      children: [
        { key: "11", title: "菜单管理", url: "/test-i", icon: "", type: MenuType.MENU.code },
        { key: "12", title: "字典管理", url: "/test-j", icon: "", type: MenuType.MENU.code },
        { key: "13", title: "字典管理", url: "/test-k", icon: "", type: MenuType.MENU.code },
      ],
    },
    {
      key: "105",
      title: "测试",
      icon: "",
      type: MenuType.BUTTON.code,
      children: [{ key: "14", title: "通用测试", url: "/test-l", icon: "", type: MenuType.MENU.code }],
    },
  ];

  multipleIns: string[] = [""]; // 多实例白名单

  onLogout(event: any): void {
    console.log(event);
  }
  /**
   * @description: 路由缓存key
   * @author ChenRui
   * @date 2021/2/26 10:20
   */
  /*get routerViewKey(): string {
    return this.multipleIns.indexOf(this.$route.path) != -1 ? this.$route.fullPath : this.$route.path;
  }

  test(): void {
    this.$breadcrumbNavService.remove("/test-b");
    const pane: Pane = {
      key: "/test-n",
      title: "测试啊哈哈哈",
      path: "/test-n",
      params: { id: 1 },
    };
    this.$breadcrumbNavService.add(pane);
  }
  setStatus() {}*/
}
</script>

<style lang="scss" scoped>
#root-app {
  margin: 0;
  padding: 0;
  .dc-main-container {
    height: 100vh;
    .dc-main-header {
      width: 100%;
      color: #ffffff;
      padding: 0;
      line-height: normal;
      height: 50px;
      min-height: 50px;
    }
    .dc-main {
      .dc-menu {
        height: 100%;
        scrollbar-width: none; /* firefox */
        -ms-overflow-style: none; /* IE 10+ */
        overflow-x: hidden;
        overflow-y: auto;
        &::-webkit-scrollbar {
          display: none; /* Chrome Safari */
        }
      }
      .dc-main-content {
        background: #fff;
        overflow: hidden;
        .dc-main-tabs {
          height: 38px;
          min-height: 38px;
        }
        .dc-main-box {
          background-color: #f1f2f5;
          padding: 10px;
          .dc-router-container {
            background-color: white;
            height: calc(100vh - 108px);
            overflow-y: auto;
          }
        }
      }
    }
  }
}
</style>
