<template>
    <header class="app-header" :class="classObj">
      
      <el-row  :class="{'drawer-header': appTheme=='two'|| appTheme=='three'|| appTheme=='four'}">
        
        
         
        <el-col :span="20" class="header-left">
            <template  v-if="appTheme=='one'">
               <div class="title">{{headerTitle}}</div>
            </template>
            <template  v-else>
                <div class="logo">
                  <div v-if="appTheme=='four'"  class="drawer-header-icon" @click="toggleDrawerMenu">
                      <IconFont  icon="zhankai"  size="20px" />
                  </div>
                  <span></span>
                </div>
                <div v-if="device!='mobile'" class="title">{{headerTitle}}</div>
                <topBar v-if="appTheme =='two'"/>
            </template>
        </el-col>
        <el-col :span="4" class="manage">
          <div v-if="userblockShow" class="manage-block">
            <div class="zoomOut" @click="showFullScreen" title="放大">
                    <!-- <svg-icon icon-class="fangda"></svg-icon> -->
                    <IconFont icon="fangda" />
            </div>
            <div  v-if="fullScreenShow" class="manage-user" @click="showUserSet">
                <span></span>
                <em>{{userName}}</em>
            </div>
          </div>
        </el-col>
      </el-row>
    </header>
</template>

<script>
import {mapState, mapGetters } from 'vuex'
import topBar from '../topBar/index.vue'

export default {
  name: 'baseHeader',
  components: {
    topBar,
  },
  props:{
   "userSetIsShow":{
     type: Boolean,
     require: true
   }
  },
  computed: {
    ...mapGetters(['isFullScreen','sidebar']),
    ...mapState('settings',['headerTitle','userblockShow', 'fullScreenShow']),
    ...mapState('user',['appTheme','appStyle','isFixedHeader']),
    userName(){
      return this.$store.getters.name
    },
    classObj(){
      return {
        'dark': this.appStyle=='dark' && this.appTheme != 'one',
        'dark-oneTheme': this.appStyle=='dark' && this.appTheme=='one',
        'light': this.appStyle=='light',
        'el-hide': this.isFullScreen,
        'fixed-header-one-open': this.isFixedHeader&& this.appTheme=='one'&& this.sidebar.opened== true,
        'fixed-header-one-close': this.isFixedHeader&& this.appTheme=='one'&& this.sidebar.opened== false,
        'fixed-header-two': this.isFixedHeader&& this.appTheme!='one',
      }
    },
    device() {
      return this.$store.state.app.device
    },
  },
  data:()=>{
    return {
      isVisible: false,
      themeOpen: false,
    }
  },
  mounted() {

  },
  methods: {
    handleDrawerBar(){
       this.themeOpen=true;
    },
    showUserSet(){
      this.$emit("changeUserSet",true)
    },
    toggleDrawerMenu(){
      console.log(11111)
      this.$emit('handleDrawerBar')
    },
    showFullScreen() {
        console.log("showFullScreen")
        this.$store.dispatch('settings/handleFullScreen',true)
    }
  }
}
</script>
<style lang="scss" scoped>
// 黑白主题色切换
.dark{
  background-color: #030E1D;
  color:#AFB3B6;
  .drawer-header-icon{
    color: #AFB3B6 ;
    .icon-font:hover{
      color: #fff;
    }
  }
}
.dark-oneTheme{
  background-color: #fff;
}
.light{
  background-color: #fff;
  color:#333;
  .drawer-header-icon{
    color: #A5A5A5 ;
  }
}
.drawer-header-icon{
  position: absolute;
  left: -40px;
  top: 20px;
  cursor: pointer;
}

.header-left{
  display: flex;
  height: 55px;
  .logo {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 40px 0 0;
    span {
      display: inline-block;
      width: 129px;
      height: 26px;
      background: url(/static/img/logo.dcfab4cc.png) no-repeat center center;
      background-size: 100% auto;
    }
  }
}
.manage-block{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 130px;
  height: 100%;
  .manage-user{
    padding: 0 10px;
    cursor: pointer;
    height: 100%;
    line-height: 55px;
    transition: background-color .3s;
    &:hover{
      background-color: #e5eaef;
    }
    span {
      display: inline-block;
      width: 26px;
      height: 26px;
      background: url("~@/assets/layout/user-small.png") no-repeat left top;
      background-size: 100% 100%;
      
    }
    em{ 
        display: inline-block;
        max-width: 60px;
        margin-left: 5px;
        vertical-align: -15px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
  }
  .zoomOut{
    position: relative;
    top: -3px;
    margin-right: 10px;
    font-size: 22px;
    cursor: pointer;
  }

}
</style>