<!-- @format -->

<template>
  <div id="root-app">
    <template v-if="oauthService.isLogin">
      <t-layout class="dc-main-container">
        <t-header class="dc-main-header">
          <page-header :setting="setting" :dynamic="true" :enableSearch="true" :enableMsgNotice="true" @logout="onLogout"></page-header>
        </t-header>
        <t-layout class="dc-main">
          <!-- <a-layout-sider :width="232" collapsedWidth="60" class="dc-menu" v-model="collapsed" :trigger="null" collapsible theme="light"> </a-layout-sider>
          <div class="d-flex flex-column">
          </div> -->
          <t-aside :width="collapsed ? '64px' : '232px'" :class="`dc-menu ${collapsed ? 'dc-menu-collapsed' : ''}`" v-model="collapsed" :trigger="null" collapsible theme="light">
            <left-menu :static-menus="menus" :collapsed.sync="collapsed" :dynamic="true"></left-menu>
          </t-aside>

          <t-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>
          </t-content>
        </t-layout>
      </t-layout>
    </template>
    <template v-else-if="oauthService.authConfig.enableNoticeMode">
      <login @login-success="onLoginSuccess"></login>
    </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, oauthService } from "./services/oauth.service";
import { DialogPlugin } from "tdesign-vue";
// import { LOGO_PNG_XML } from "./constants/encode-assets/svg";
import LOGO_PNG_XML from "./assets/cloud-logo-full.svg";
import { eventService } from "./services/event.service";
import { AuthEventType } from "./constants/enum/auth-event-type.enum";
import { PageHeaderSetting } from "./model/PageHeaderSetting";

@Component({
  name: "CoreApp",
  components: {},
})
export default class App extends Vue {
  oauthService = oauthService;
  collapsed = false;

  setting: PageHeaderSetting = new PageHeaderSetting({
    // logoSlogan: "东华软件",
    // companyZnName: "新一代办公平台",
    // companyEnName: "NEW GEN OFFICE PLATFORM",
    logoImg: 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[] = [""]; // 多实例白名单

  mounted(): void {
    this.initAuthEventListener();
  }

  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
  destroyed() {
    eventService.removeAll();
  }

  /**
   * @description: 本地授权事件监听
   * @author ChenRui
   * @date 2022/1/26 17:39
   */
  initAuthEventListener(): void {
    if (oauthService.authConfig.enableNoticeMode) {
      eventService.on(OauthService.AUTH_EVENT_NAME, (res: any) => {
        console.log(res);
        if (res && res.type) {
          if (res.type === AuthEventType.LOGOUT.code) {
            const dialog: any = DialogPlugin.confirm({
              header: "连接已断开",
              body: "连接已断开，请重新登录",
              theme: "warning",
              confirmBtn: "确定",
              closeBtn: false,
              onConfirm: () => {
                dialog.hide();
                oauthService.isLogin = false;
              },
            });
          }
        }
      });
    }
  }

  onLoginSuccess(event: any): void {
    if (oauthService.authConfig.enableNoticeMode) {
      oauthService.isLogin = true;
    }
  }

  onLogout(event: any): void {
    const user = localStorage.getItem("core:user");
    const { tenantId } = JSON.parse(user || "{}");

    if (oauthService.authConfig.enableNoticeMode) {
      const dialog: any = DialogPlugin.confirm({
        header: "退出成功",
        body: "退出成功，请重新登录",
        theme: "warning",
        confirmBtn: "确定",
        closeBtn: false,
        onConfirm: () => {
          dialog.hide();
          oauthService.isLogin = false;
          this.$router.push(`/login?tenantId=${tenantId}`);
        },
      });
    }
  }

  /**
   * @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: rgba(0, 0, 0, 0.9);
      padding: 0;
      line-height: normal;
      height: 61px;
      min-height: 61px;
    }
    .dc-main {
      height: calc(100% - 61px);
      .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-menu-collapsed {
          overflow-y: inherit;
          ::v-deep {
            .dc-left-menu-container .dc-left-menu-box {
              overflow-y: inherit;
            }
          }
        }
      }
      .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 - 118px);
            overflow-y: auto;
          }
        }
      }
    }
  }
}
</style>
