<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>
          <el-breadcrumb class="breadcrumb-container" separator=">">
            <el-breadcrumb-item>
              {{ appInfo.name }}
            </el-breadcrumb-item>
            <el-breadcrumb-item v-for="item in breadcrumb" :key="item">
              {{ item }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </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`],
          }"
        >
          <ht-message
            :message-count="messageCount"
            @msg-click="linkToMessage"
          ></ht-message>

          <ht-full-screen-bar @refresh="refreshRoute" />
          <app-theme-bar class="hidden-xs-only" />
          <i
            :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 :is-app="true" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { mapActions, mapGetters } from 'vuex'
  import variables from '@/styles/variables.scss'
  import AppThemeBar from '../themeBar/index.vue'
  export default {
    name: 'Index',
    components: {
      AppThemeBar,
    },
    data() {
      return {
        src: require('@/assets/images/应用中心.svg'),
      }
    },
    computed: {
      ...mapGetters({
        messageCount: 'navHeader/getUnreadMsgCount',
        collapse: 'settings/collapse',
        visitedRoutes: 'tabsBar/visitedRoutes',
        device: 'settings/device',
        routes: 'routes/routes',
        style: 'app/style',
        activeMenu: 'app/activeMenu',
        tileMenus: 'app/tileMenus',
        appInfo: 'app/appInfo',
      }),
      variables() {
        return variables
      },
      breadcrumb() {
        return this?.activeMenu?.path || []
      },
    },
    mounted() {
      this.$store.dispatch('navHeader/setUnreadMsgCount')
    },
    methods: {
      ...mapActions({
        changeCollapse: 'settings/changeCollapse',
      }),
      linkToMessage() {
        this.$store.dispatch('app/addVisitedMenus', '164')
      },
      handleCollapse() {
        this.changeCollapse()
      },
      emailClick() {
        this.$store.dispatch('app/addVisitedMenus', '163')
      },
      menuClick() {
        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 == 'appCenterIndex') {
                  this.$router.push('/appCenter/appCenterIndex')
                }
                if (item.path == 'index') {
                  this.$router.push('/appCenter/index')
                }
              })
            }
          })
        }
      },
      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,
  .iconMenu {
    padding: 8px;

    cursor: pointer;
  }

  ::v-deep {
    .el-breadcrumb__item {
      .el-breadcrumb__inner {
        color: var(--topColor);
        a {
          display: flex;
          float: left;
          font-weight: normal;

          i {
            margin-right: 3px;
          }
        }
      }

      &:last-child {
        .el-breadcrumb__inner {
          color: var(--topColor);
        }
      }
    }
  }
</style>