<template>
  <div
    class="nav-bar-container"
    :style="{ background: variables[`${style}-top-bar-background`] }"
  >
    <el-row :gutter="15">
      <el-col :xs="4" :sm="12" :md="12" :lg="12" :xl="12">
        <div class="left-panel">
          <i
            :class="[collapse ? 'icon-fold' : 'icon-unfold']"
            :title="collapse ? '展开' : '收起'"
            class="fold-unfold"
            @click="handleCollapse"
          ></i>
          <ht-breadcrumb class="hidden-xs-only" />
          <!-- <ht-other-portals></ht-other-portals> -->
        </div>
      </el-col>

      <el-col :xs="20" :sm="12" :md="12" :lg="12" :xl="12">
        <div
          class="right-panel"
          :style="{
            '--topRightColor': variables[`${style}-top-right-color`],
          }"
        >
          <!-- <i v-if="showPortalApp" class="iconMune" @click="meunClick">
            <img
              :src="`data:image/svg+xml;base64,${src}`"
              alt=""
              width="18"
              height="18"
            />
          </i> -->

          <!-- <ht-message
            v-if="MessageIcon"
            :message-count="messageCount"
            @msg-click="linkToMessage"
          ></ht-message> -->

          <!-- <ht-error-log /> -->
          <!-- <ht-full-screen-bar @refresh="refreshRoute" /> -->
          <!-- <ht-apps /> -->
          <!-- <ht-theme-bar class="hidden-xs-only" /> -->
          <!-- <i
            v-if="showEmailCenter"
            :style="{
              color: $store.state.settings.emailColor
                ? 'var(--themeColor)'
                : '',
            }"
            class="icon-mail-unread header-btn-icon iconEmail"
            @click="emailClick"
          ></i>
          <el-divider direction="vertical"></el-divider> -->
          <ht-avatar />
        </div>
      </el-col>
    </el-row>

    <el-dialog
      append-to-body
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="1200px"
      top="45px"
      class="elDialog"
      custom-class="batch-box"
    >
      <AppSelector></AppSelector>
    </el-dialog>
  </div>
</template>

<script>
  import AppSelector from '@/views/app/center/AppSelector.vue'
  import { mapActions, mapGetters } from 'vuex'
  import variables from '@/styles/variables.scss'
  import { yyzx } from '@/icon/index.js'
  import { portalApp } from '@/api/portal.js'
  export default {
    name: 'HtNavBar',
    components: { AppSelector },
    data() {
      return {
        src: yyzx,
        showPortalApp: false,
        MessageIcon: false,
        showEmailCenter: false,
        dialogVisible: false,
      }
    },
    computed: {
      ...mapGetters({
        messageCount: 'navHeader/getUnreadMsgCount',
        collapse: 'settings/collapse',
        visitedRoutes: 'tabsBar/visitedRoutes',
        device: 'settings/device',
        routes: 'routes/routes',
        style: 'settings/style',
      }),
      variables() {
        return variables
      },
    },
    mounted() {
      this.$store.dispatch('navHeader/setUnreadMsgCount')
      portalApp().then((res) => {
        if (res && res.length > 0) {
          res.forEach((item) => {
            if (item.alias == 'Message') {
              this.MessageIcon = true
            }
            if (item.alias == 'AppCenter') {
              this.showPortalApp = true
            }
            if (item.alias == 'EmailCenter') {
              this.showEmailCenter = true
            }
          })
        }
      })
    },
    methods: {
      ...mapActions({
        changeCollapse: 'settings/changeCollapse',
      }),
      linkToMessage() {
        this.$router.push('/personal/message')
      },
      handleCollapse() {
        this.changeCollapse()
      },
      emailClick() {
        this.$router.push('/personal/mail')
      },
      meunClick() {
        this.dialogVisible = true
        // let routesList = this.$store.state.routes.routes
        // if (routesList && routesList.length > 0) {
        //   routesList.forEach((item) => {
        //     if (
        //       (item.path == '/appCenter' || item.path == '//appCenter') &&
        //       item.children &&
        //       item.children.length > 0
        //     ) {
        //       item.children.forEach((item) => {
        //         if (item.path) {
        //           this.$router.push(`/appCenter/${item.path}`)
        //         }
        //       })
        //     }
        //   })
        // }
      },
      async refreshRoute() {
        this.$baseEventBus.$emit('reload-router-view')
      },
    },
  }
</script>

<style lang="scss" scoped>
  .nav-bar-container {
    position: relative;
    height: $base-nav-bar-height;
    padding-right: $base-padding;
    padding-left: 24px;
    overflow: hidden;
    user-select: none;
    // background: $base-color-white;
    box-shadow: $base-box-shadow;

    .left-panel {
      display: flex;
      align-items: center;
      justify-items: center;
      height: $base-nav-bar-height;

      .fold-unfold {
        color: var(--topColor);
        cursor: pointer;
        font-size: $base-font-size-big;
      }

      ::v-deep {
        .breadcrumb-container {
          margin-left: 10px;
        }
      }
    }

    .right-panel {
      display: flex;
      align-content: center;
      align-items: center;
      justify-content: flex-end;
      height: $base-nav-bar-height;

      div:not(.el-divider--vertical),
      span {
        padding: 0 10px;
      }

      ::v-deep {
        svg {
          width: 18px;
          height: 18px;
          font-size: $base-font-size-small;
          color: $base-color-gray;
          cursor: pointer;
          fill: var(--topRightColor);
        }

        button {
          svg {
            margin-right: 0;
            color: $base-color-white;
            cursor: pointer;
            fill: var(--topRightColor);
          }
        }

        .el-badge {
          margin-right: 15px;
        }
        .el-divider--vertical {
          margin: 0 20px;
          background-color: var(--topRightColor);
        }
        .message-title {
          color: var(--topRightColor);
        }
      }
    }
  }
  .iconEmail,
  .iconMune {
    padding: 8px;

    cursor: pointer;
  }
</style>

<style>
  .batch-box {
    min-width: 1260px;
  }
  .batch-box .el-dialog__body {
    border: none !important;
    height: calc(70vh - 48px);
    /* padding: 24px 18.7% 24px 16.5%; */
    min-width: 1260px;
    display: flex;
    padding: 0 !important;
  }
  .batch-box .el-dialog__header {
    padding: 0;
  }
  .batch-box .app-center {
    height: 100% !important;
    width: 100% !important;
  }

  .batch-box .el-icon-close {
    font-size: 20px;
  }
</style>