<template>
  <div class="wrapper" id="Header">
    <div class="logo fl">
      <img src="@/assets/logo2.png" alt />
      &nbsp;
      安全生产风险监测预警系统-
      <span class="tileTip">{{Tiletxt}}</span>
    </div>
    <div class="haeder_r fr">
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link un">
          <span>{{unitName}}&nbsp;&nbsp;{{userData.account}}</span>
          <img :src="require('@/assets/avatar4.png')" alt width="40" />
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="personal">个人中心</el-dropdown-item>
          <el-dropdown-item command="logoff" divided>注销登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Provide, Watch } from "vue-property-decorator";
import METHOD from "@/utils/methods";
@Component({
  components: {},
})
export default class Header extends Vue {
  @Provide() userData: any = {};
  @Provide() Tiletxt: string = "";
  @Provide() enterpriseId: string = "";
  @Provide() unitName: string = "";
  handleCommand(command: String) {
    switch (command) {
      case "personal":
        this.$router.push("/personal");
        break;
      case "logoff":
        sessionStorage.removeItem("userInfo");
        sessionStorage.removeItem("token");
        this.$router.push("/");
    }
  }
  getDetail() {
    let that = this;
    METHOD.axiosGet(
      that,
      `/enterpriseInfo/queryEnterpriseInfoById/${that.enterpriseId}`,
      function (res: any) {
        if (res.code == 0) {
          that.unitName = res.data.unitName;
        }
      }
    );
  }
  created() {
    let usd = sessionStorage.getItem("userInfo");
    if (usd) {
      this.userData = JSON.parse(usd);
      if (this.userData.accountType == 2) {
        METHOD.enterpriseId = JSON.parse(usd).deptId;
        this.enterpriseId = JSON.parse(usd).deptId;
        this.Tiletxt = "企业端";
        this.getDetail();
      } else {
        METHOD.enterpriseId = "";
        this.Tiletxt = "政府端";
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/utils/public.scss";
#Header {
  width: 100%;
  height: 50px;
  overflow: hidden;
  background-color: $theme-color;
  padding: 0 10px;
  color: #e9f2ff;
  > div {
    height: 100%;
    overflow: hidden;
  }
  .logo {
    font-size: 1.5rem;
    font-family: "黑体", Arial, Helvetica, sans-serif;
    color: #ffffff;
    font-weight: 700;
    display: flex;
    align-items: center;
    img {
      height: 40px;
      vertical-align: middle;
    }
  }
  .haeder_r {
    font-size: 1.2em;
    color: #ffffff;
    i {
      font-size: 1.5em;
    }
    padding-right: 20px;
  }
  .el-dropdown {
    color: #ffffff;
    padding-top: 5px;
  }
  .un img {
    vertical-align: middle;
  }
}
.tileTip {
  display: inline-block;
  background: #c50ae7;
  border-radius: 5px;
  padding: 4px 5px;
}
</style>
