<template>
  <div>
    <div class="banner">
      <div class="left" @click="toHome">
        {{ systemTitle }}
      </div>
      <div class="right">
        <div class="home">
          <span @click="toHome">首 页</span>
        </div>
        <div class="right-menu">
          <div class="name">
            <span style="margin-right:10px">
              <img src="../../assets/images/region.png" alt="">
            </span>
            <span>
              {{ orgName + unitName }}
            </span>
          </div>
          <div>|</div>
          <div>{{ name }}</div>
          <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
            <el-submenu index="1">
              <template slot="title">
                <el-avatar :src="circleUrl" />
              </template>
              <el-menu-item index="2-1">
                <div class="logout" @click="logout">退出登录</div>
              </el-menu-item>
            </el-submenu>
          </el-menu>

          <!-- <el-dropdown class="avatar-container" trigger="click">
        <div class="avatar-wrapper">
          <el-avatar size="small" :src="avatar" />&nbsp;
          <span>{{ orgName }}{{ unitName }} {{ name }}</span>
          <i class="el-icon-caret-bottom" />
        </div>
        <el-dropdown-menu slot="dropdown" class="user-dropdown">
          <router-link to="/">
            <el-dropdown-item>首 页</el-dropdown-item>
          </router-link>
          <el-dropdown-item divided>
            <span style="display:block;" @click="logout">退出登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      activeIndex: '',
      systemTitle: process.env.VUE_APP_SYSTEM_TITLE,
      circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
    }
  },
  computed: {
    ...mapGetters(['sidebar', 'avatar', 'name', 'unitName', 'orgName'])
  },
  methods: {
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
    },
    async logout() {
      await this.$store.dispatch('user/logout')
      // this.$router.push(`/login?redirect=${this.$route.fullPath}`)
      // location.reload()
      window.location.href = process.env.VUE_APP_ENV === 'dev' ? `/#/login` : `/integration/#/login`
    },
    toHome() {
      if (this.$store.state.user.unitName === '市局领导') {
        this.$router.push('/')
      } else {
        this.$router.push({ path: '/menuIndex' })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.banner {
  position: fixed;
  padding-left: 40px;
  top: 0;
  right: 0;
  left: 0;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* background: linear-gradient(66deg,#054dd3 0%, #3296fa 89%); */
  background-image: url('../../assets/images/banner.png') ;
  background-repeat: no-repeat;
  background-size: cover;
  /* box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16); */
  font-family: 'Source Han Sans CN';
  z-index: 2000;
  color: #fff;
  .left{
    float: left;
    font-size: 34px;
    cursor: pointer;
  }
  .right{
    display: flex;
    align-items: center;
    margin-right: 20px;
    .el-menu{
      /* margin-right: 20px; */
    }
    .right-menu{
      display: flex;
      align-items: center;
      width: 520px;
      justify-content: space-evenly;
    }
    .name{
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
  }
  .el-menu-demo {
    background: transparent!important;
  }
  /deep/.el-menu--horizontal>.el-submenu .el-submenu__title{
    border-bottom: 0!important;
  }
  .el-menu.el-menu--horizontal {
    border-bottom: 0!important;
  }
  /deep/.el-submenu__title{
    padding:0;
  }
  /deep/.el-submenu .el-submenu__title:hover:hover{
    background: transparent!important;
  }
  .home{
    margin-right: 20px;
    cursor: pointer;
  }
}
</style>
