<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 v-for="item in breadcrumbList" :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`],
          }"
        >
          <i class="iconMenu" @click="dialogVisible = true">
            <img
              :src="`data:image/svg+xml;base64,${appCenterIcon}`"
              alt=""
              width="18"
              height="18"
            />
          </i>
          <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>
    <el-dialog
      append-to-body
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="1200px"
      top="45px"
      class="elDialog"
      custom-class="batch-box"
    >
      <app-selector
        open-type="router"
        @after-select="dialogVisible = false"
      ></app-selector>
    </el-dialog>
  </div>
</template>

<script>
  import { mapActions, mapGetters } from 'vuex'
  import variables from '@/styles/variables.scss'
  import AppThemeBar from '../themeBar/index.vue'
  import AppSelector from '@/views/app/center/AppSelector.vue'
  import { yyzx } from '@/icon/index.js'
  import getValue from 'lodash/get'

  export default {
    name: 'Index',
    components: {
      AppThemeBar,
      AppSelector,
    },
    data() {
      return {
        appCenterIcon: yyzx,
        dialogVisible: false,
        breadcrumbList: [],
      }
    },
    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',
        menus: 'app/menus',
      }),
      variables() {
        return variables
      },
      breadcrumb() {
        return this?.activeMenu?.path || []
      },
    },
    watch: {
      activeMenu: {
        handler(val) {
          if (val) {
            this.breadcrumbList = []
            this.getBreadcrumb(this.menus)
          }
        },
        immediate: true,
      },
    },
    mounted() {
      this.$store.dispatch('navHeader/setUnreadMsgCount')
    },
    methods: {
      ...mapActions({
        changeCollapse: 'settings/changeCollapse',
      }),
      addBreadcrumb(item) {
        const name = getValue(item, 'name', null)
        name && this.breadcrumbList.unshift(name)
      },
      // 获取面包屑
      getBreadcrumb(menus) {
        if (getValue(menus, 'id', null) === this.activeMenu.id) {
          this.addBreadcrumb(menus)
          return true
        }
        if (Array.isArray(menus)) {
          return menus.some((item) => {
            return this.getBreadcrumb(item)
          })
        } else if (menus.children) {
          if (this.getBreadcrumb(menus.children)) {
            this.addBreadcrumb(menus)
            return true
          }
          return false
        }
        return this.getBreadcrumb(menus)
      },
      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>