<template>
    <div class="layout">
        <div class="topNav">
        <el-row class="topNavBar">
            <el-col :span="3">
            <div class="logoBar">
              <img src="./assets/image/logo.9578b50f.png" alt="" class="logo">
            </div>
            
            </el-col>
            <div class="login">   
                <!-- <el-button @click="logOut"></el-button>           -->
                <!-- <el-avatar style="width:30px;height:30px;margin-top:5px" :src="img"  ></el-avatar> -->
                <el-dropdown class="btn"  @command="handleCommand">
                  <!-- <span class="el-dropdown-link ">
                    {{userName}}<i class="el-icon-arrow-down el-icon--right"></i>
                  </span> -->
                  <el-avatar style="width:30px;height:30px;margin-top:5px" :src="img" ></el-avatar>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item  command='username'>{{userName}}</el-dropdown-item>
                    <el-dropdown-item  command='logout'>退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <!-- <el-button type="text" class="">{{userName}}</el-button> -->
            </div>
        </el-row>
        </div>
       
        <el-row class="tac">
        <el-col :span="3">
            <Nav />
        </el-col>
        <!-- <router-link to="/">Home</router-link> |
        <router-link to="/about">About</router-link> -->
        <el-col :span="21">
            <router-view />
        </el-col>
        </el-row>
        
    </div>
</template>

<script>
import Nav from './components/Nav.vue';
import { postAction } from '@/utils/api/http'
import { mapActions } from 'vuex'
import { Notification } from 'element-ui';
// import { timeFix } from '@/utils/util'
import qs from 'qs'
import Vue from 'vue'
    export default {
        components:{
            Nav
        },
        data() {
          return {
              userName:'',
              img:''
          }
        },
        methods: {
           ...mapActions(['Login', 'Logout', 'PhoneLogin', 'wxLogin']),
          logOut(){
              // console.log(1)
              localStorage.removeItem('Login_Userinfo');
              localStorage.removeItem('Access-Token');
              this.Logout();
              this.$router.replace({path:'/login'})
          },
          handleCommand(command) {
            if(command=='username'){
              this.$message({
                message:'你好啊，'+this.userName,
                type: 'warning'
                
              })
            }
            if(command=='logout'){              
                localStorage.removeItem('Login_Userinfo');
                localStorage.removeItem('Access-Token');
                this.Logout();
                this.$router.replace({path:'/login'})
            }
          }
        },
        mounted() {
            let userInfo=JSON.parse(localStorage.getItem('Login_Userinfo'))
            if(userInfo){
              this.userName=userInfo.value.name
              this.img=userInfo.value.thumbAvatar
            }
        },
    }
</script>

<style lang="less" >
.layout{
    width: 100%;
    height:100%;
    min-height: 720px;
    box-sizing: border-box;
}
.tac{
  height:100%;
  padding-top: 41px;
  box-sizing: border-box;
}
.el-col,.el-menu{
  height: 100%;
  overflow: hidden;
}
.topNav{
  background: fff;
  height: 20px;
  width: 100%;
  color:#333;
  padding:10px 0px;
  position: fixed;
  top: 0;
  background-color: #fff;
  border-bottom: 1px solid #E4EBF0;
  font-family: "Helvetica Neue",Tahoma,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",STHeitiSC,sans-serif;
  box-shadow: 1px 3px 11px rgba(0,0,0,.2);
  -moz-box-shadow: 1px 3px 11px rgba(0,0,0,.2);
  -webkit-box-shadow: 1px 3px 11px rgba(0,0,0,.2);
  z-index: 100;
 
  .login{
    width: 150px;
    display: inline-block;
    position:absolute;
    right: 20px;
    top: -10px;
    box-sizing: border-box;
    
    .btn{
      position: absolute;
      top: 0;
      right: 10px;
    }
  }
}
.el-submenu,.el-menu-item{
  text-align: left;
}

.logo{
  height: 24px;
  margin:0 auto
}
</style>