<template>
  <div ref="navbarWidth" style="width: 100%;background: #ffffff;height: 56px;" >
    <div id="navBar" class="navbar" :style="{width: navbarWidth}">
      <div class="left-menu" :style="{width: scrollerWidth}">
        <tags-view />
      </div>
      <div ref="rightMenu" class="flex-box right-menu">
        <!--      <div class="menu-bells"><img src="@/assets/images/message.png"><i /></div>-->
        <!--      <i class="menu-line" />-->
        <el-dropdown class="avatar-container" trigger="hover" ref="mydrodown" :hide-on-click="false" placement="bottom-start">
          <div class="flex-box avatar-wrapper">
            <img v-if="avatar" class="pic-avatar" :src="avatar">
            <span v-else class="user-avatar">{{ name&&name.slice(0, 1).toUpperCase() }}</span>
            {{ name.length>10?name.slice(0, 10)+'...':name}}
          </div>
          <el-dropdown-menu slot="dropdown" class="user-dropdown">
            <el-dropdown-item v-if="tenanlist.length>1">
              <span>我的企业 <img class="dir" src="@/assets/images/direction.png"> </span>
              <div class="mycom">
                <div class="bg">
                  <div @click="getorther(item.tenantId)" v-for="(item,index) in tenanlist" :class="{'choose':tenantId == item.tenantId}">
                    <img src="@/assets/images/enter.png" class="logos"><span>{{item.companyName}}</span><img class="on" src="@/assets/images/tips.png">
                  </div>
                </div>
              </div>
            </el-dropdown-item>
            <router-link to="/user/profile">
              <el-dropdown-item>用户中心</el-dropdown-item>
            </router-link>
            <el-dropdown-item divided @click.native="logout">
              <span><font color="#FF3C3C">退出登录</font></span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>

</template>

<script>
  import store from "@/store";
import { mapGetters } from 'vuex'
import elementResizeDetectorMaker from "element-resize-detector"
import TagsView from './TagsView'
import { getTenants ,changeTenants} from "@/api/login";
import { getTenantid,setTenantid,setToken} from '@/utils/auth'
export default {
  props:['offsetWidth'],
  components: {
    TagsView
  },
  data() {
    return {
      tenantId:-1,
      tenanlist:[],
      scrollerWidth: null,
      navbarWidth: null
    }
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'name'
    ])
  },
  watch: {
    offsetWidth(newValue, oldValue){
      this.navbarWidth=`calc(100% - ${newValue}px)`
    }
  },
  mounted() {
    const _this = this, erd = elementResizeDetectorMaker(), navBar = document.getElementById("navBar")
    erd.listenTo(navBar, element => {
      _this.$nextTick(() => {
        const nvWidth = navBar.offsetWidth
        const rtWidth = _this.$refs.rightMenu.offsetWidth
        this.scrollerWidth = (nvWidth - rtWidth - 100)+'px' || '800px'
      })
    })
    this.navbarWidth=`calc(100% - ${this.offsetWidth}px)`
    // this.$refs.mydrodown.show()
    this.getTetant()
  },
  methods: {
    getTetant(){
      this.tenantId = getTenantid()
      getTenants().then(res=>{
        if(res.code == 200){
          this.tenanlist = res.data
        }
      })
    },
    async logout() {
      this.$confirm('确定退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          sessionStorage.removeItem('views')  //清空导航栏上的数据
          location.href = '/index';
        })
      }).catch(() => {});
    },
    getorther(id){
      if(id != this.tenantId){
        changeTenants(id).then(res=>{
          if(res.code == 200){
            setToken(res.data.token)
            setTenantid(id)
            store.commit('SET_TOKEN', res.data.token)
            sessionStorage.removeItem('views')  //清空导航栏上的数据
            if(this.$route.path == '/index'){
              location.reload();
            }else{
              this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
            }
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.navbar {
  height: 56px;
  overflow: inherit;
  /*position: relative;*/
  background: #fff;
  /*box-shadow: 0 1px 4px rgba(0,21,41,.08);*/
  position: fixed;
  top:0;
  z-index: 999;

  .left-menu{
    float: left;
  }
  .right-menu {
    float: right;
    height: 100%;

    &:focus {
      outline: none;
    }

    .menu-bells{
      position: relative;
      margin-right: 16px;
      cursor: pointer;
      img{
        width: 24px;
        height: 24px;
      }
      i{
        width: 6px;
        height: 6px;
        background: #FF4545;
        border-radius: 50%;
        position: absolute;
        right: 0;
        top: 0;
      }
    }
    .menu-line{
      display: inline-block;
      width: 1px;
      height: 24px;
      background: #EEEEEE;
      margin-right: 16px;
    }
    .avatar-container {
      margin-right: 24px;
      margin-top: -5px;
      .avatar-wrapper {
        font-size: 12px;
        color: #232323;
        line-height: 20px;
        cursor: pointer;
        .pic-avatar{
          width: 20px;
          height: 20px;
          border-radius: 50%;
          margin-right: 4px;
          overflow: hidden;
        }
        .user-avatar {
          display: inline-block;
          cursor: pointer;
          width: 24px;
          height: 24px;
          line-height: 24px;
          text-align: center;
          background: #E3EEF9;
          color: #0081FF;
          border-radius: 50%;
          margin-right: 4px;
        }
      }
    }
  }
}
.user-dropdown {
  padding: 12px 0;
  width: 147px;
  /*height: 138px;*/
  box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.1);
  border-radius: 4px;
  .el-dropdown-menu__item{
    font-size: 14px;
    color: #232323;
    width: 147px;
    height: 38px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 38px;
    padding: 0 12px 0 24px;
    border-top: 0;
    text-align: left;
    margin: 0;
    &:focus, &:not(.is-disabled):hover{
      background: rgba(0, 0, 0, 0.04);
      .mycom{
        display: block;
      }
    }
    &:before{
      height: 0;
      margin: 0;
    }
  }
  .dir{
    width: 16px;
    float: right;
    margin-top: 11px;
  }
}
  .mycom{
    width: 258px;
    position: absolute;
    left: -258px;
    height: auto;
    top: 0;
    display: none;
    .bg{
      width: 244px;
      /*height: 176px;*/
      background: #FFFFFF;
      box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.1);
      border-radius: 4px;
      padding: 12px 0;
      >div{
        width: 244px;
        height: 38px;
        padding: 0 20px;
        cursor: pointer;
        .on{
          width: 16px;
          display: none;
          margin: 11px -4px 0 0;
          float: right;
        }
        &:hover{
          background: rgba(0,0,0,0.04);
        }
        &.choose{
          background: rgba(0, 129, 255, 0.04);
          .on{
            display: inline-block;
          }
        }
        >span{
          width: 160px;
          display: inline-block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .logos{
          width: 16px;
          float: left;
          margin: 11px 8px 0 0;
        }
      }
    }
  }
</style>
