<template>
  <a-layout-header :class="[headerTheme, 'app-header']">
    <div :class="['app-header-wide', layout, pageWidth]">
      <router-link
        v-if="isMobile || layout === 'head'"
        to="/home"
        :class="['logo', isMobile ? null : 'pc', headerTheme]"
      >
        <div
          v-if="homeLogoUrl"
          class="header-logo-img"
          :style="{
            backgroundImage: `url(${homeLogoUrl})`,
          }"
        />
        <span v-else class="anticon header-logo">
          <svg-icon
            icon-class="logo"
            style="width: 74px; height: 26px; margin-top: 0"
          />
        </span>
      </router-link>
      <a-divider v-if="isMobile" style="top: 1.88em" type="vertical" />

      <a-icon
        v-if="layout !== 'head'"
        class="trigger"
        :type="defaultLayout.collapsed ? 'menu-unfold' : 'menu-fold'"
        @click="defaultLayout.toggleCollapse"
      />

      <!-- 模块切换 -->
      <div class="module">
        <div v-if="isModule" class="mask" @click="handMouseleave"></div>
        <div>
          <div class="module_title" @click="handMouseover">
            <Icon type="icon-cur-a-t-Menupermissions--" :size="16" />
            <span class="module_name">{{ moduleName }}</span>
            <Icon
              :type="isModule ? 'icon-dir-f-caret-up' : 'icon-dir-f-caret-down'"
              :size="14"
            />
          </div>
          <div v-show="isModule" ref="module_content" class="module_content">
            <div class="module_menu">
              <div class="cloud_application">
                <span class="title">{{ $t("META_APPLICATION") }}</span>
                <ul v-if="cloudList.length > 0">
                  <li
                    v-for="(module, index) in modules"
                    v-show="module.appSource !== 'elf'"
                    :key="module.code"
                    @click="toggleModule(module, index)"
                  >
                    <div
                      class="icon_menu"
                      :style="{
                        background: `${module.backgroundColor}`,
                      }"
                    >
                      <Icon
                        :type="
                          module.icon
                            ? module.icon
                            : 'icon-cur-a-t-Menupermissions--'
                        "
                        :size="20"
                      />
                    </div>
                    <span>{{ $t(module.menuName) }}</span>
                  </li>
                </ul>
                <div v-else-if="cloudList.length === 0" class="comingSoon">
                  <img
                    src="@/assets/images/expect.png"
                    width="260"
                    height="205"
                    alt=""
                  />
                </div>
              </div>
              <div class="light_application">
                <span class="title">{{ $t("LIGHT_APPLICATION") }}</span>
                <ul v-if="lightList.length > 0">
                  <li
                    v-for="(module, index) in modules"
                    v-show="module.appSource === 'elf'"
                    :key="module.code"
                    @click="toggleModule(module, index)"
                  >
                    <div
                      class="icon_menu"
                      :style="{
                        background: `${module.backgroundColor}`,
                      }"
                    >
                      <Icon
                        :type="
                          module.icon
                            ? module.icon
                            : 'icon-cur-a-t-Menupermissions--'
                        "
                        :size="20"
                      />
                    </div>
                    <span>{{ $t(module.menuName) }}</span>
                  </li>
                </ul>
                <div v-else-if="lightList.length === 0" class="comingSoon">
                  <img
                    src="@/assets/images/expect.png"
                    width="260"
                    height="205"
                    alt=""
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="app-header-menu">
        <i-menu
          v-show="layout !== 'side' && !isMobile"
          class="head-menu"
          mode="horizontal"
          :menu-theme="menuTheme"
          :options="defaultLayout.headMenuData"
          :default-selected-keys="selectActivatedFirst"
          @select="onSelect"
        />
      </div>
      <div :class="['app-header-right', headerTheme]">
        <div class="newsBell" @click.stop="handNotice">
          <span v-if="noticeData.unReadQty" class="unread">{{
            noticeData.unReadQty
          }}</span>
          <a-icon type="bell" style="font-size: 16px" />
        </div>
        <div v-if="isNotice" id="bellBox" class="bellBox">
          <a-tabs default-active-key="NOTICE">
            <a-tab-pane
              v-for="item in sourceTypeList"
              :key="item.value"
              :tab="`${item.label}${
                item.value === 'NOTICE'
                  ? `(${noticeObj.unReadQty})`
                  : item.value === 'MESSAGE'
                  ? `(${messageObj.unReadQty})`
                  : `(${todoObj.unReadQty})`
              }`"
            >
              <template v-if="item.value === 'NOTICE'">
                <ul v-if="noticeObj.dataList.length > 0" class="notice">
                  <li
                    v-for="(elment, index) in noticeObj.dataList"
                    :key="index"
                    @click="handView(elment)"
                  >
                    <div class="title">
                      <p>
                        【{{
                          formatData(moticeTypeList, elment.msgCategory)
                        }}】{{ elment.msgTitle }}
                      </p>
                      <p>{{ elment.publishTime }}</p>
                    </div>
                  </li>
                </ul>
                <ul v-else class="noticeEmpty">
                  {{
                    $t("NO_DATA")
                  }}
                </ul>
                <div class="footer">
                  <span @click="handClear(item.value)">{{
                    $t("EMPTY_NOTIFICATION")
                  }}</span>
                  <span @click="handNoticeView(item.value)">{{
                    $t("SEE_MORE")
                  }}</span>
                </div>
              </template>
              <template v-if="item.value === 'MESSAGE'">
                <ul v-if="messageObj.dataList.length > 0" class="notice"></ul>
                <ul v-else class="noticeEmpty">
                  {{
                    $t("NO_DATA")
                  }}
                </ul>
                <div class="footer">
                  <span>{{ $t("EMPTY_NOTIFICATION") }}</span>
                  <span @click="handNoticeView(item.value)">{{
                    $t("SEE_MORE")
                  }}</span>
                </div>
              </template>
              <template v-if="item.value === 'TODO'">
                <ul v-if="todoObj.dataList.length > 0" class="notice"></ul>
                <ul v-else class="noticeEmpty">
                  {{
                    $t("NO_DATA")
                  }}
                </ul>
                <div class="footer">
                  <span>{{ $t("EMPTY_NOTIFICATION") }}</span>
                  <span @click="handNoticeView(item.value)">{{
                    $t("SEE_MORE")
                  }}</span>
                </div>
              </template>
            </a-tab-pane>
          </a-tabs>
        </div>
        <!-- 搜素 -->
        <div class="header-search">
          <a-icon
            :title="$t('SEARCH')"
            type="search"
            class="search-icon"
            @click="enterSearchMode"
          />
          <a-auto-complete
            ref="headerSearchInput"
            :value="searchMenuKey"
            :get-popup-container="
              (e) => {
                return e.parentNode || document.body;
              }
            "
            :class="['search-input', searchMode ? 'enter' : 'leave']"
            :placeholder="$t('PLACEENTER')"
            @search="onSearch"
            @blur="leaveSearchMode"
          >
            <template slot="dataSource">
              <a-select-option
                v-for="item in dataSource"
                :key="item.id"
                style="z-index: 100; height: 200px"
                @click.native="searchResultClick"
              >
                {{ $t(item.menuName) }}
              </a-select-option>
            </template>
          </a-auto-complete>
        </div>
        <!-- 工厂 -->
        <a-dropdown
          v-if="sitePermission !== null && sitePermission.length > 0"
          class="header-item"
          overlay-class-name="header-item-dropdown"
        >
          <span class="toggle-site">
            <Icon
              type="icon-jichushuju06-gongchangjianmo"
              :size="18"
              style="margin-right: 4px"
            />
            <span class="hidden lg:inline">
              {{ siteName }}
              <a-icon class="ml-0.5 text-xs" type="down" />
            </span>
          </span>
          <a-menu
            slot="overlay"
            :selected-keys="selectedSite"
            @click="toggleSite"
          >
            <a-menu-item v-for="site in sitePermission" :key="site.siteCode">
              <div class="factory-list">
                <div class="name">{{ site.siteName }}</div>
                <div class="code">{{ site.siteCode }}</div>
              </div>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
        <!-- 全屏 -->
        <div
          :title="$t('FULL_SCREEN')"
          class="fullScreen"
          @click="onFullOrSmall"
        >
          <Icon v-if="!isFullOrSmall" type="icon-dir-f-fullscreen" :size="20" />
          <Icon v-else type="icon-dir-f-fullscreen-exit" :size="20" />
        </div>
        <!-- 用户 -->
        <a-dropdown class="header-item">
          <div class="header-avatar" style="cursor: pointer">
            <a-avatar
              v-if="user.avatar"
              class="avatar"
              size="small"
              shape="circle"
              alt="avatar"
              :src="`${userAvatarUrl}`"
            />
            <img
              v-else
              src="~assets/images/avatar.png"
              class="mr-2"
              width="24"
              height="24"
              alt="avatar"
            />
            <span class="hidden lg:inline">{{ user.userName }}</span>
          </div>
          <a-menu slot="overlay" :class="['avatar-menu']">
            <a-menu-item @click="goPersonCenter">
              <a-icon type="user" />
              <span>{{ $t("PERSONAL_CENTER") }}</span>
            </a-menu-item>
            <a-menu-item @click="goMessageCenter">
              <a-icon type="bell" />
              <span>{{ $t("MESSAGE_CENTER") }}</span>
            </a-menu-item>
            <a-menu-item @click="refreshPage">
              <Icon
                type="icon-cur-reload"
                :size="12"
                style="margin-right: 8px"
              />
              <span>{{ $t("REFRESH_CACHE") }}</span>
            </a-menu-item>
            <a-sub-menu key="language" @click="languageCommand">
              <template slot="title">
                <a-icon type="global" />
                <span> {{ $t("LANGUAGE_SETTING") }}&nbsp;&nbsp; </span>
              </template>
              <a-menu-item v-for="item in languages" :key="item.value">
                <span>
                  {{ item.label }}
                </span>
              </a-menu-item>
            </a-sub-menu>
            <a-menu-divider />
            <a-menu-item @click="logout">
              <a-icon style="margin-right: 8px" type="poweroff" />
              <span>{{ $t("EXIT_SYSTEM") }}</span>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </div>
    </div>
  </a-layout-header>
</template>

<script>
import { debounce, reduce } from "lodash";
import { mapState, mapMutations, mapGetters } from "vuex";
import { Icon } from "@mega-design/ui-vue";
import Settings from "@/config/settings";
import IMenu from "@/components/AppMenu/menu";
import ApiConstant from "@/api/ApiConstant";
import { fetchFileUrl } from "@/utils/file";

export default {
  name: "AdminHeader",
  components: { IMenu, Icon },
  inject: ["defaultLayout"],
  data() {
    return {
      isModule: false,
      langList: [
        { key: "CN", name: "简体中文", alias: "简体" },
        { key: "HK", name: "繁體中文", alias: "繁體" },
        { key: "US", name: "English", alias: "English" },
      ],
      searchActive: false,
      isNotice: false,
      sites: [],
      searchMenuKey: undefined,
      dataSource: [],
      noticeData: [],
      sourceTypeList: [],
      moticeTypeList: [], // 通知的類型
      cloudList: [], // 云应用数组
      lightList: [], // 轻应用数组
      noticeObj: {
        unReadQty: 0,
        dataList: [],
      }, // 通知列表
      messageObj: { unReadQty: 0, dataList: [] }, // 消息列表
      todoObj: { unReadQty: 0, dataList: [] }, // 代办列表
      searchMode: false,
    };
  },
  computed: {
    ...mapState("setting", [
      "theme",
      "isMobile",
      "layout",
      "lang",
      "pageWidth",
    ]),
    ...mapState({
      systemConfig: (state) => state.app.systemConfig,
      user: (state) => state.auth?.user?.user || {},
      isFullOrSmall: (state) => state.app.isFullOrSmall,
      activatedModule: (state) => state.activatedModule,
      activatedFirst: (state) => state.activatedFirst,
      activatedSite: (state) => state.activatedSite,
      languages: (state) => state.app.languages,
      locale: (state) => state.app.locale,
      menus: (state) => state.account.menus,
      sitePermission: (state) => state.auth?.user?.sitePermission || [],
    }),
    ...mapGetters(["modules"]),
    homeLogoUrl() {
      if (this.systemConfig.FILE_SERVER && this.systemConfig.HOME_LOGO) {
        return fetchFileUrl(this.systemConfig.HOME_LOGO, this);
      }
      return "";
    },
    userAvatarUrl() {
      if (this.systemConfig.FILE_SERVER && this.user.avatar) {
        return fetchFileUrl(this.user.avatar, this);
      }
      return "";
    },
    menuTheme() {
      if (this.theme.mode === "mix") {
        return "dark";
      }
      if (
        this.layout === "side" &&
        this.theme.mode === "dark" &&
        !this.isMobile
      ) {
        return "light";
      }
      return this.theme.mode;
    },
    selectActivatedFirst() {
      if (this.activatedFirst) {
        return [this.activatedFirst];
      }
      return [];
    },
    moduleName() {
      let name = "";
      const module = this.modules.find(
        (item) => item.id === this.activatedModule
      );
      if (module) {
        name = module.menuName ? this.$t(module.menuName) : module.remark || "";
      }
      return name;
    },
    siteName() {
      return this.getAttrValue(
        this.sitePermission,
        this.activatedSite,
        "siteCode",
        "siteName"
      );
    },
    selectedModule() {
      return this.activatedModule ? [this.activatedModule] : [];
    },
    selectedSite() {
      return this.activatedSite ? [this.activatedSite] : [];
    },
    headerTheme() {
      if (
        this.layout === "side" &&
        this.theme.mode === "dark" &&
        !this.isMobile
      ) {
        return "light";
      }
      return this.theme.mode;
    },
    menuWidth() {
      const { layout, searchActive } = this;
      const headWidth = layout === "head" ? "100% - 188px" : "100%";
      const extraWidth = searchActive ? "600px" : "600px";
      return `calc(${headWidth} - ${extraWidth})`;
    },
    currentLocale() {
      return this.locale ? [this.locale] : [];
    },
    langAlias() {
      const lang = this.languages.find((item) => item.value === this.locale);
      return lang?.label || "";
    },
  },
  // watch: {
  //   "user.userName": function (val) {
  //     val && this.initWebsokt();
  //   },
  // },
  mounted() {
    this.init();
    this.$nextTick(() => {
      this.$EventBus.$on("isInit", () => {
        this.init();
      });
      this.$EventBus.$on("noticeInit", () => {
        this.init();
      });
    });
    document.addEventListener("click", (e) => {
      const box = document.getElementById("bellBox");
      if (!box?.contains(e.target)) {
        this.isNotice = false;
      }
    });
    if (this.user.userName) {
      this.initWebsokt();
    }
  },
  methods: {
    ...mapMutations("setting", ["setLang"]),
    ...mapMutations([
      "setActivatedFirst",
      "setActivatedModule",
      "setActivatedSite",
    ]),
    init() {
      this.getDictByCode("DIC:MSG:SOURCE_TYPE").then((res) => {
        this.sourceTypeList = res.data.data;
      });
      this.getDictByCode("DIC:MSG:NOTICE_CATEGORY").then((res) => {
        this.moticeTypeList = res.data.data;
      });
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/center/user-message`)
        .then((res) => {
          this.noticeData = res.data.data;
          if (this.noticeData.centerUserDetailBPOS.length > 0) {
            this.noticeData.centerUserDetailBPOS.forEach((item) => {
              if (item.type === "NOTICE") {
                this.noticeObj = item;
                this.noticeObj.unReadQty = this.noticeObj.unReadQty || 0;
              } else if (item.type === "MESSAGE") {
                this.messageObj = item;
                this.messageObj.unReadQty = this.messageObj.unReadQty || 0;
              } else if (item.type === "TODO") {
                this.todoObj = item;
                this.todoObj.unReadQty = this.todoObj.unReadQty || 0;
              }
            });
          } else {
            this.noticeObj = { unReadQty: 0, dataList: [] }; // 通知列表
            this.messageObj = { unReadQty: 0, dataList: [] }; // 消息列表
            this.todoObj = { unReadQty: 0, dataList: [] }; // 代办列表
          }
        });
    },
    initWebsokt() {
      const str = window.location.href.substr(
        0,
        window.location.href.indexOf("://")
      );
      const prot = str === "https" ? "wss" : "ws";
      this.wsuri = `${prot}://${window.location.host}/ws?cid=MEGA_NOTICE&uid=${this.user.id}`;
      this.websock = new WebSocket(this.wsuri);
      this.websock.onmessage = this.onMessageSocketCallback;
      this.websock.onopen = this.onOpenSocketCallback;
      // 错误函数必须写，否则错误之后，终止程序
      this.websock.onerror = (event) => {};
    },
    onMessageSocketCallback(res) {
      const respon = JSON.parse(res.data);
      if (
        respon.type === "NOTICE" ||
        respon.type === "MESSAGE" ||
        respon.type === "TODO"
      ) {
        this.init();
      }
    },
    onOpenSocketCallback(open) {
      window.setInterval(() => {
        setTimeout(this.keepalive, 0);
      }, 20000);
    },
    keepalive() {
      // 发送心跳时，确保websocket连接正常
      if (this.websock?.readyState === 1) {
        // 构建对象
        const dataContent = '{"type":"KEEPALIVE","content":"123"}';
        // 发送心跳
        this.websock.send(dataContent);
      }
    },
    // 格式化数据
    formatData(data, status) {
      const result = data.find((item) => item.value === status.toString());
      return result ? result.label : "";
    },
    // 刷新缓存
    refreshPage() {
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/sys/refresh`)
        .then((res) => {
          this.$message.success(this.$t("REFRESH_SUCCESS"));
          // 国际化信息获取成功
          this.$store.commit("app/SET_I18N_READY", true);
          this.$store.commit("app/SET_SYSTEM_CONFIG", {
            ...res.data.data?.SYSTEM_CONFIG,
            SYSTEM_TITLE: res.data.data.SYSTEM_TITLE || Settings.title,
          });
          this.$store.commit(
            "app/SET_SYSTEM_CODE_RULE",
            res.data.data?.CODE_RULE
          );
          this.$store.state.app.languages
            .map((item) => item.value)
            .forEach((lang) => {
              const reg = new RegExp(`_${lang}$`);
              this.$i18n.setLocaleMessage(lang, {
                // 本地国际化
                ...this.$i18n.messages[lang],
                // 接口国际化
                ...reduce(
                  res.data.data?.I18N,
                  function (result, value, key) {
                    if (reg.test(key)) {
                      // eslint-disable-next-line
                  result[key.replace(reg, "")] = value;
                    }
                    return result;
                  },
                  {}
                ),
              });
            });
        });
    },
    handMouseover() {
      this.modules.forEach((item) => {
        if (item.appSource !== "elf") {
          this.cloudList.push(item);
        } else {
          this.lightList.push(item);
        }
      });
      this.isModule = true;
      // eslint-disable-next-line camelcase
      const { module_content: moduleContent } = this.$refs;
      moduleContent.style.minHeight = `260px`;
      moduleContent.style.opacity = 1;
    },
    handMouseleave() {
      this.isModule = false;
      // eslint-disable-next-line camelcase
      const { module_content: moduleContent } = this.$refs;
      moduleContent.style.minHeight = "";
      moduleContent.style.opacity = 0;
    },
    // 所有菜单搜索
    onSearch: debounce(function (value) {
      this.searchMenuKey = value;
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/sys/menu/list-of-query`, {
          params: {
            size: 20,
            searchKey: this.searchMenuKey,
          },
        })
        .then((res) => {
          this.dataSource = res.data.data;
        });
    }, 500),
    searchResultClick({ item }) {
      this.leaveSearchMode();
      this.searchMenuKey = undefined;
      const { index } = item;
      this.defaultLayout.goRoute(this.dataSource[index]);
    },
    enterSearchMode() {
      this.searchMode = true;
      this.defaultLayout.updateSearchActive(true);
      this.dataSource = [];
      setTimeout(() => this.$refs.headerSearchInput.focus(), 300);
    },
    leaveSearchMode() {
      this.searchMode = false;
      setTimeout(() => this.defaultLayout.updateSearchActive(false), 300);
    },
    onSelect(obj) {
      this.setActivatedFirst(obj.key);
    },
    toggleModule(item, index) {
      this.setActivatedModule(item.code);
      this.defaultLayout.headMenuData?.length &&
        this.setActivatedFirst(this.defaultLayout.headMenuData[0].id);
      this.defaultLayout.goRoute(this.modules[index]);
      this.handMouseleave();
    },
    toggleSite({ key }) {
      if (key !== this.activatedSite) {
        this.setActivatedSite(key);
        // 清空tabsview数据
        this.$store.dispatch("tagsView/delAllViews");
        // 进入首页
        this.$router.push({ path: "/home" });
      }
    },
    goPersonCenter() {
      this.$router.push({ path: "/personal-center" });
    },
    goMessageCenter() {
      this.$router.push({
        path: "/messageCenter",
        query: {
          type: "NOTICE",
        },
      });
    },
    languageCommand({ key }) {
      this.$nextTick(() => {
        this.$i18n.locale = key;
        this.$store.commit("app/SET_LOCALE", key);
      });
      this.$EventBus.$emit("nextRefresh");
      this.$axios
        .get(
          `${ApiConstant.PREFIX_CORE}/api/sys/dict-data/DIC:CORE:I18N_LANGUAGE?enableFlag=Y`
        )
        .then((res) => {
          this.$store.commit(
            "app/SET_LANGUAGES",
            res.data.data?.map((item) => ({
              label: item.label,
              value: item.value,
            }))
          );
        });
    },
    handNoticeView(type) {
      this.isNotice = false;
      this.$router.push({
        path: "/messageCenter",
        query: {
          type,
        },
      });
    },
    handView(record) {
      this.isNotice = false;
      this.$router.push({
        path: "/messageCenter/view",
        query: {
          id: record.id,
        },
      });
    },
    handClear(type) {
      this.$axios
        .put(`${ApiConstant.PREFIX_CORE}/api/center/clear/${type}`)
        .then((res) => {
          this.$message.success(this.$t("STATUS_EDIT_SUCCESS"));
          this.init();
        });
    },
    // 全屏
    onFullOrSmall() {
      const dom = document.documentElement;
      this.defaultLayout?.fullScreen(dom);
    },
    handNotice() {
      this.isNotice = !this.isNotice;
    },
    logout() {
      this.$confirm({
        title: this.$t("LOGOUT"),
        content: this.$t("LOGOUT_INFO"),
        okType: "warning",
        okText: this.$t("CONFIRM"),
        cancelText: this.$t("CANCEL"),
        icon: "exclamation-circle",
        onOk: () => {
          this.$store.commit("app/SET_IS_APPEND_ROUTE", false);
          if (process.env.SSO === "1") {
            const coreAddress = this.systemConfig.SSO_URL;
            const windowIp = window.location.href.split("?")[0] || "";
            const loginUrl = `${coreAddress}/login?boundUrl=${windowIp}&client_id=client_core`;
            this.$auth.logout().then(() => {
              window.location.href = loginUrl;
            });
          } else {
            this.$auth.logout().then(() => {
              this.$router.push("/login");
            });
          }
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import (optional, once) "../../theme/index.less";
.app {
  .app-header {
    position: relative;
    height: 50px;
    padding: 0;
    top: 0;
    right: 0;
    box-shadow: 0 0 0 0;
    background: @base-bg-color;
    transition: all 0s ease 0s;
    z-index: 1;
    /deep/.head-menu {
      height: 50px;
      line-height: 50px;
      vertical-align: middle;
      box-shadow: none;
      border: none;
      &.ant-menu-dark {
        .ant-menu-submenu-active {
          color: @white;
        }
      }
    }
    &.fixed-header {
      position: fixed;
      z-index: 3;
    }
    &.dark,
    &.mix {
      background: @primary-color;
      color: white;
      /deep/.head-menu {
        background: @primary-color;

        &.ant-menu-dark .ant-menu-item-selected,
        &.ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected {
          background: @primary-7;
        }
      }
    }
    &.light {
      .head-menu {
        background: @base-bg-color;
      }
      .app-header-wide .logo .header-logo {
        color: #005087;
      }
    }
    .app-header-wide {
      padding-left: 24px;
      height: 100%;
      display: flex;
      &.head.static {
        max-width: 1400px;
        margin: auto;
        padding-left: 0;
      }
      &.side {
        padding-right: 12px;
      }
      .logo {
        display: inline-flex;
        height: 50px;
        line-height: 50px;
        padding: 0 12px 0 24px;
        cursor: pointer;
        font-size: 30px;
        align-items: center;
        &.pc {
          padding: 0 12px 0 0;
        }
        .header-logo {
          color: @menu-dark-highlight-color;
        }
        .header-logo-img {
          width: 136px;
          height: 36px;
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
        }
      }
      .trigger {
        font-size: 20px;
        line-height: 50px;
        cursor: pointer;
        transition: color 0.3s;
        margin-top: 1px;
        // &:hover {
        //   color: @primary-color;
        // }
      }
      .app-header-menu {
        flex: 1;
        /deep/.ant-menu-item .svg-icon {
          font-size: 16px;
        }
      }
      .app-header-right {
        float: right;
        display: flex;
        color: inherit;
        padding-right: 24px;
        .fullScreen {
          display: flex;
          align-items: center;
          padding: 0 5px;
        }
      }
      .newsBell {
        height: 50px;
        line-height: 50px;
        margin-right: 10px;
        cursor: pointer;
        position: relative;
      }
      .bellBox {
        position: absolute;
        top: 50px;
        right: 95px;
        z-index: 999;
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 0 2px 8px rgba(120, 131, 136, 0.4);
        width: 298px;
        margin-top: 10px;
        /deep/.ant-tabs-nav .ant-tabs-tab {
          padding: 12px 10px;
        }
        /deep/.ant-tabs-top-bar {
          padding-left: 18px;
        }
      }
      .notice {
        margin-bottom: 0;
        min-height: 200px;
        width: 100%;
        li {
          display: flex;
          align-content: center;
          cursor: pointer;
          margin: 0 17px;
          width: 100%;
          border-bottom: 1px solid #f0f0f0;
          padding-top: 12px;
          .title {
            width: 90%;
            p {
              color: #999;
              font-size: 14px;
              margin-bottom: 8px;
            }
            p:first-child {
              color: #333;
              font-size: 14px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              margin-left: -8px;
            }
          }
        }
        li:first-child {
          padding-top: 0;
        }
        li:last-child {
          margin-bottom: 0;
          // border-bottom: none;
        }
      }
      .noticeEmpty {
        min-height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .footer {
        display: flex;
        border-top: 1px solid #f0f0f0;
        span {
          display: inline-block;
          width: 50%;
          text-align: center;
          height: 46px;
          line-height: 46px;
          cursor: pointer;
          font-size: 14px;
          font-weight: 400;
          color: #333;
        }
        span:first-child {
          border-right: 1px solid #f0f0f0;
        }
      }
      .unread {
        display: inline-block;
        min-width: 20px;
        height: 20px;
        border-radius: 10px;
        padding: 0 8px;
        background: #fe5d58;
        line-height: 20px;
        text-align: center;
        position: absolute;
        top: 5px;
        left: 5px;
      }
      .header-item {
        color: inherit;
        padding: 0 12px;
        cursor: pointer;
        align-self: center;
        height: 50px;
        line-height: 50px;
        a {
          color: inherit;
          i {
            font-size: 16px;
          }
        }
      }
    }
    .header-search {
      display: flex;
      align-items: center;
      .search-icon {
        font-size: 16px;
        cursor: pointer;
      }
      /deep/svg {
        vertical-align: 0.4em;
      }
      /deep/.search-input {
        vertical-align: 0.4em;
        transition: width 0.2s linear;
        input {
          box-shadow: 0 0 0 0;
        }
        &.leave {
          width: 0;
          input {
            display: none;
          }
        }
        &.enter {
          width: 200px;
          input:focus {
            box-shadow: 0 0 0 0;
          }
        }
      }
      /deep/.ant-select-dropdown {
        z-index: 99;
      }
    }
    .header-avatar {
      display: flex;
      align-items: center;
      .avatar {
        margin-right: 6px;
      }
    }
    &.fixed-tabs.multi-page:not(.fixed-header) {
      height: 0;
    }
    /deep/.anticon {
      font-size: 16px;
    }
  }
}
/deep/.ant-dropdown-menu-submenu-arrow {
  display: none;
}
/deep/.module {
  position: relative;
  padding-right: 24px;
  background-color: transparent;
}
/deep/.module_title {
  display: flex;
  align-items: center;
  height: 50px;
  line-height: 50px;
  color: inherit;
  padding: 0 12px;
  cursor: pointer;
  opacity: 0.6;
  .module_name {
    margin: 0 5px;
  }
  .anticon {
    margin-top: 2px;
  }
}
/deep/.module_title:hover {
  opacity: 1;
}
/deep/.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  background-color: rgba(0, 0, 0, 0.45);
}
/deep/.module_content {
  position: fixed;
  left: 57px;
  right: 57px;
  margin: auto;
  width: 85%;
  // height: 100%;
  background: #f6f8f9;
  border-radius: 6px 6px 6px 6px;
  z-index: 50;
  padding: 0 23px 23px 23px;
  overflow: auto;
  opacity: 0;
  transition: height 0.2s cubic-bezier(0.215, 0.61, 0.355, 1),
    opacity 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);

  .module_menu {
    display: flex;
    color: #666;
    height: 100%;
    .cloud_application {
      width: 48%;
      margin-right: 4%;
      height: 100%;
      .title {
        width: 100%;
        display: inline-block;
        border-bottom: 1px solid #dbe0e6;
        color: #333;
        font-size: 20px;
        line-height: 20px;
        padding-bottom: 12px;
        font-weight: 500;
      }
      ul {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height: 100%;
        overflow: auto;
        padding: 0;
        li {
          display: flex;
          align-items: center;
          width: 240px;
          height: 52px;
          line-height: 52px;
          margin-right: 10px;
          padding-left: 13px;
          cursor: pointer;
          .icon_menu {
            width: 36px;
            height: 36px;
            line-height: 36px;
            text-align: center;
            background: #009f60;
            color: #fff;
            margin-right: 12px;
            border-radius: 6px 6px 6px 6px;
          }
        }
        li:hover {
          background: #dfeff7;
        }
      }
    }
    .light_application {
      width: 48%;
      .title {
        width: 100%;
        display: inline-block;
        border-bottom: 1px solid #dbe0e6;
        color: #333;
        font-size: 20px;
        line-height: 20px;
        padding-bottom: 12px;
        font-weight: 500;
      }
      ul {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        li {
          display: flex;
          align-items: center;
          width: 240px;
          height: 52px;
          line-height: 52px;
          margin-right: 10px;
          padding-left: 13px;
          cursor: pointer;
          .icon_menu {
            width: 36px;
            height: 36px;
            line-height: 36px;
            text-align: center;
            background: #009f60;
            color: #fff;
            margin-right: 12px;
            border-radius: 6px 6px 6px 6px;
          }
        }
        li:hover {
          background: #dfeff7;
        }
      }
    }
    .comingSoon {
      text-align: center;
      img {
        margin: auto;
      }
    }
  }
}
</style>
