
<template>
  <div class="navbar flex-l-r">
    <div class="left flex">
      <LogoVue v-if="config.logo.show ==='navbar'" :style="{'max-width':config.menu.width+'px'}"></LogoVue>
      <hamburger v-if="!config.menu.trigger && config.menu.showOpen" :is-active="config.menu.opened" @toggleClick="toggleSideBar" class="hamburger-container" />
      <!-- breadcrumbTop true 配置 面包屑在header里面 -->
      <breadcrumb class="breadcrumb-container" :class="{'m-l-15':config.menu.trigger}" v-if="config.breadcrumb.position === 'navbar'" />
      <div class="navbarTitle" v-else-if="config.navbarTitle">
        {{ config.navbarTitle }}
      </div>
    </div>
    <div class="right-menu">
      <!-- <navbarRight v-if="config.navbarRight"></navbarRight> -->
      <div class="system-center flex">
        <!-- <span class="center">
          <a-tooltip class="hover-operator  ">
            <template #title>缩放</template>
            <i class="iconfont icon-fullscreen  "></i>
          </a-tooltip>
        </span> -->
        <span class="center">
          <a-tooltip class="hover-operator  ">
            <template #title>通知</template>
            <i class="iconfont icon-notice  "></i>
          </a-tooltip>
        </span>
        <a-dropdown>
          <a class="flex-l-a center ant-dropdown-link m-r-10" @click.prevent>
            <i class="iconfont m-r-10 " :class="'icon-'+appInfo.appIcon"></i>
            <span v-if="appInfo.appCode==='SYSTEM'">{{choiceApp.appName ||'切换应用'}}</span>
            <span v-else>欢迎 {{ userInfo.account }} </span>
          </a>
          <template #overlay>
            <a-menu>
              <!-- <template v-if="appInfo.appCode==='SYSTEM'">
                <a-menu-item v-for="item in appList" :key="item.appCode" @click="choiceItem(item)">
                  <a href="javascript:;">
                    <i class="iconfont    p-r-5" :class="'icon-'+item.appIcon"></i>
                    {{item.appName}}</a>
                </a-menu-item>
                <a-menu-divider />
              </template>
              <a-menu-item>
                <a href="javascript:;" v-if="config.auth.appHome" @click="toCenter">
                  <i class="iconfont icon-switch p-r-5"></i>切换应用
                </a>
                <a-menu-divider />
              </a-menu-item> -->
              <a-menu-item>
                <a href="javascript:;" @click="logout">
                  <i class="iconfont icon-dengchu p-r-5"></i>登出
                </a>
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
// import config from '@/config/config'
import Breadcrumb from './../../components/bread-crumb/bread-crumb.vue'
import Hamburger from './../../components/Hamburger/index.vue'
import { userRole, logout } from './../../utils/auth.js'
import { useStore, mapGetters } from 'vuex'
import { computed, getCurrentInstance, inject, onMounted, reactive, toRefs } from 'vue'
import LogoVue from './Sidebar/Logo.vue'
import { useRoute, useRouter } from 'vue-router'
// import { Dropdown ,Tooltip,Menu} from 'ant-design-vue'

export default {
  components: {
    Breadcrumb,
    Hamburger, LogoVue
    // ,ADropdown:Dropdown ,ATooltip:Tooltip,AMenu:Menu,AMenuItem:Menu.Item
  },
  setup () {
    let http = inject('http')
    let { proxy } = getCurrentInstance()
    let store = useStore()
    let router = useRouter()
    let route = useRoute()
    let config = store.state.settings
    let _data = reactive({
      appList: []
    })
    let _computed = {
      config: computed(() => config),
      appInfo: computed(() => store.state.user.app),
      choiceApp: computed(() => store.state.user.choiceApp),
      userInfo: computed(() => store.getters['user/userInfo']),
    }
    let _methods = {
      choiceItem (item) {
        store.commit('user/setChoiceApp', item)
        location.reload();
      },
      toCenter () {
        proxy.$appModal({ close: true })
      },
      toggleSideBar () {
        store.commit('settings/setMenuToggle')
      },
      async logout () {
        logout(router)
        // document.location.href = `${location[0]}${config.auth.loginURL}`
        // this.$router.push(`${config.auth.loginURL}?redirect=${this.$route.fullPath}`)
      },
    }
    onMounted(() => {
      let rs = JSON.parse(localStorage.getItem('rs'))
      if (rs && rs.permission) {
        // http.getUserAppList().then(res => {
        //   _data.appList = res
        // })
      }

    })
    return {
      ...toRefs(_data),
      ..._computed,
      ..._methods
    }
  },

}
</script>

<style lang="less"  >
.navbar {
  height: 50px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  border-bottom: 1px solid @border;
  .navbarTitle {
    display: inline-block;
    height: 100%;
    line-height: 50px;
    font-size: 18px;
  }
  .bread-item {
    display: inline-block;
    .ant-breadcrumb-link,
    .ant-breadcrumb-separator {
      display: inline-block;
    }
  }
  .hamburger-container {
    line-height: 50px;
    height: 100%;
    // float: left;
    cursor: pointer;
    transition: background 0.3s;
    -webkit-tap-highlight-color: transparent;
    &:hover {
      background: rgba(0, 0, 0, 0.025);
    }
  }
  // .breadcrumb-container {
  //   float: left;
  // }
  .right-menu {
    float: right;
    height: 100%;
    line-height: 50px;
    display: flex;
    &:focus {
      outline: none;
    }
    .system-center {
      padding-right: 10px;
      .center {
        padding: 0 10px;
        transition: all 0.5s;
        color: @headColor;
      }
      .center:hover {
        // background: #f6f6f6;
      }
      .icon {
        width: 40px;
        height: 40px;
        display: inline-block;
      }
      .iconfont {
        font-size: 18px;
        cursor: pointer;
      }
    }
    .userName {
      height: 100%;
      line-height: 50px;
      float: left;
      padding-right: 15px;
    }
    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      color: #5a5e66;
      vertical-align: text-bottom;
      &.hover-effect {
        cursor: pointer;
        transition: background 0.3s;

        &:hover {
          background: rgba(0, 0, 0, 0.025);
        }
      }
    }
    .avatar-container {
      margin-right: 30px;
      .avatar-wrapper {
        margin-top: 5px;
        position: relative;
        .user-avatar {
          cursor: pointer;
          width: 40px;
          height: 40px;
          border-radius: 10px;
        }
        .el-icon-caret-bottom {
          cursor: pointer;
          position: absolute;
          right: -20px;
          top: 25px;
          font-size: 12px;
        }
      }
    }
  }
}
</style>
