<template>
<div class="flex">
  <div class="logo">YOS后端管理平台</div>
  <div class="right-operation">
    <el-dropdown>
      <span class="el-dropdown-link">
        <div class="flex">
          {{siteinfo.enterprisename}}<i class="el-icon-arrow-down el-icon--right"></i>
        </div>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item @click.native="$router.replace({path:'/user_center'})">个人中心</el-dropdown-item>
        <el-dropdown-item v-if="canChangeSite" @click.native="$router.replace({path:'/accounts'})">切换账号</el-dropdown-item>
        <el-dropdown-item divided @click.native="loginOut()">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</div>
</template>

<script>
export default {
  props:['siteinfo'],
  computed: {
    canChangeSite () {
      let accounts = JSON.parse(sessionStorage.getItem('account_list'))
      if (accounts.length > 1) return true
    }
  },
  data () {
    return {
      activeIndex:'',
      accountInfo:{}
    }
  },
  methods:{
    loginOut () {
      this.$confirm('是否要退出当前账号?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$router.push('/')
        sessionStorage.clear()
        // location.reload(true);
      }).catch((err) => {
        console.log(err)
        this.$message({
          type: 'info',
          message: '已取消'
        });          
      });
      
    },
    changeAccount () {
      this.$router.push('/accounts')
    }
  },
  mounted () {
    this.accountInfo = JSON.parse(sessionStorage.getItem('active_account'))
  },
}

</script>
<style>
.el-header{
  height: 50px !important;
}
</style>
<style scoped>
.flex{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo{
  width: calc(200px);
  height: 50px;
  line-height: 50px;
  text-align: center;
  /* border-right: 1px solid #f1f2f3; */
}
.right-operation{
  padding: 0 20px;
}
</style>