<template>
  <div class="wrapper" id="Header">
    <div class="logo fl">
      <img src="@/assets/logo.png" alt />
      应急联动综合管理服务平台
    </div>
    <div class="haeder_r fr">
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link un">
          <span>{{userInfo.account}}</span>&nbsp;
          <img :src="require('@/assets/avatar' +   userInfo.avatar + '.png')" alt width="40" />
        </span>
        <el-dropdown-menu slot="dropdown">
          <!-- <el-dropdown-item command="personal">个人中心</el-dropdown-item> -->
          <el-dropdown-item command="toMain">返回主页</el-dropdown-item>
          <el-dropdown-item command="logoff">注销登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <!--<FloatBar />-->
  </div>
</template>
<style lang="scss" scoped>
@import "@/utils/default.scss";
#Header {
  width: 100%;
  height: 60px;
  line-height: 60px;
  overflow: hidden;
  //background: $theme-color;
  background-image:url('../../assets/headbackground.png');
  padding: 0 10px;
  > div {
    height: 100%;
    overflow: hidden;
    padding-right: 20px;
  }
}
.logo {
  font-size: 1.5em;
  color: #ffffff;
  font-weight: 700;
  margin-left: 12px;
  img {
    height: 40px;
    vertical-align: middle;
  }
}
.haeder_r {
  font-size: 1.2em;
  color: #ffffff;
  padding-right: 20px;
}
.haeder_r i {
  font-size: 1.5em;
}
.el-dropdown {
  color: #ffffff;
  height: 60px;
}
.un {
  img {
    position: relative;
    top: 10px;
  }
  > span {
    color: #ffffff;
  }
}
</style>
<script lang="ts">
import { Component, Vue, Provide, Watch } from "vue-property-decorator";
import { State, Getter, Mutation, Action } from "vuex-class";
import FloatBar from './floatBar.vue'
import METHOD from "@/utils/methods";
@Component({
  components: { FloatBar }
})
export default class Header extends Vue {
  @Getter("user") getUser: any; //获取vuex中存储的数据

  @Provide() userData: Object = {};
  @Provide() sysTITLE: string =  '';
  @Provide() userInfo = {
    userInfo: "",
    avatar: "1"
  };
  @Watch("$route") handleRouteChange(router:any): any {
    this.sysTITLE = router.matched[0].meta.title
  } 

  beforeCreate() {
   
  }
  created() {
    let userInfo = sessionStorage.getItem("userInfo");
    if (userInfo) {
      this.userInfo = { ...JSON.parse(userInfo) };
    }
    this.sysTITLE = this.$route.matched[0].meta.title; //父级title 
    //sessionStorage存储的时候是String,刷新后Vuex存储的是Object;
    // if(typeof this.getUser == 'string'){
    //    this.userData = JSON.parse(this.getUser)
    //  } else if(typeof this.getUser == 'object'){
    //    this.userData = this.getUser;
    //  }
  }
  handleCommand(command: String) {
    switch (command) {
      case "personal":
        this.$router.push("/percenter");
        break;
      case "logoff":
        sessionStorage.removeItem("userData");
        sessionStorage.removeItem("token");
        this.$router.push(process.env.BASE_URL + "login");
        break;
      case "toMain":
        this.$router.push(process.env.BASE_URL + "alls");
        break;
    }
  }
}
</script>
