<template>
  <div class="header-box">
    <div class="header-left-box">
      <div class="name">
        <div class="icon"></div>
        <span class="title">{{ channelInfo.channelName }}</span>
      </div>
    </div>
    <div class="header-right-box">
      <div class="user" v-if="userInfo.id" @click="_goMyCenter">
        <span class="name">{{ userInfo.userNick }}</span>
        <img class="head" :src="userInfo.userHeadImg" alt />
      </div>
      <div class="login" v-else @click="_goMyCenter">登录</div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  name: 'pc-header-box',
  computed: {
    ...mapGetters({
      channelInfo: 'channelInfo',
      userInfo: 'userInfo',
      jumpUrls: 'jumpUrls'
    })
  },
  methods: {
    _goMyCenter() {
      if (!this.userInfo.id) {
        this.$Bus.$emit('bus-showLogin', true);
      } else if (Number(this.$route.query.corpId) === 1421) {
        return false;
      } else {
        window.location.href = this.jumpUrls.center;
      }
    }
  }
};
</script>
<style lang="less" scoped>
.header-box {
  height: 100%;
  display: flex;
  align-items: center;
  .header-left-box {
    flex: 1;
    .name {
      .icon {
        vertical-align: middle;
        margin-right: 12px;
        display: inline-block;
        width: 24px;
        height: 24px;
        background: url(./img/icon-zb.png) no-repeat center center;
        background-size: 100% 100%;
      }
      .title {
        vertical-align: middle;
        font-size: 22px;
      }
    }
  }
  .header-right-box {
    flex: 0 0 auto;
    .user {
      cursor: pointer;
      .name {
        vertical-align: middle;
        margin-right: 5px;
        font-size: 18px;
      }
      .head {
        vertical-align: middle;
        width: 40px;
        height: 40px;
        border-radius: 4px;
      }
    }
    .login {
      width: 104px;
      height: 36px;
      line-height: 36px;
      background: var(--main-color);
      text-align: center;
      border-radius: 36px;
      font-size: 18px;
      cursor: pointer;
    }
  }
}
</style>
