<!--
  @description: 招标投标交易平台  头部
  @author: Adrian
-->
<template>
  <section class="headerBar">
    <div class="headerBarView clearfix">
      <div class="h-wrap fl">
        <div class="h-second fl">
          <img :src="WebConfig.imgMajor" draggable="false" class="img_p pointer" @click="backHomepage"> <!--页面logo-->
          <!--<span>{{ WebConfig.title }}</span>&lt;!&ndash;页面标题&ndash;&gt;-->
        </div>
      </div>
      <div class="header-index-right fr">
        <!--        <template v-if="token">
          <div class="font pointer">
            <i class="iconfont icon-customservice" />
          </div>
          <div class="font pointer">
            <i class="iconfont icon-task" />
          </div>
          <div class="font pointer">
            <i class="iconfont icon-message" />
          </div>
        </template>
        &lt;!&ndash;国际化切换按钮&ndash;&gt;
        <div class="arrow_down">
          <el-dropdown @command="setLanguage">
            <div class="info pointer">
              <span class>
                {{ languageName }}
                <i class="el-icon-arrow-down el-icon&#45;&#45;right" />
              </span>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="item in languageList" :key="item.code" :command="item.code">
                {{ item.name }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>-->
        <!-- 账号信息 -->
        <template v-if="token">
          <!-- 消息通知 -->
          <!--          <headerNotice notice-class="font" />-->
          <div class="arrow_down">
            <div class="info">
              <!-- 用户机构/公司名称 -->
              <!-- <span class="user">{{ info.companyName }}</span> -->
            </div>
          </div>
          <div class="arrow_down">
            <div class="info">
              <img src="@assets/img/common/avatar2.png" style="width: 26px;height: 26px">
              <!--用户名称-->
              <!-- <span class="user">{{ info.userName }}</span> -->
              <!-- 姓名 -->
              <span class="user">{{ info.realName }}</span>
            </div>
          </div>
          <div class="arrow_down">
            <el-dropdown @command="handleCommand">
              <!--角色 -->
              <span class="info pointer">
                {{ info.currentRol&&info.currentRol.roleName }}<i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="01">
                  切换角色
                </el-dropdown-item>
                <el-dropdown-item command="02">
                  个人信息
                </el-dropdown-item>
                <el-dropdown-item command="03">
                  修改密码
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="logOut font pointer" @click="logoutRest">
            <i class="el-icon-switch-button" />退出登录
          </div>
        </template>
        <!--返回桌面-->
        <div v-if="info.id" tag="div" class="back font pointer" @click="backHome">
          <i class="iconfont icon-back" />
        </div>
      </div>
    </div>
    <!--切换角色部门弹框组件-->
    <switchRoleDepartDialog ref="switchRoleDepart" />
    <!--修改密码-->
    <userResetPasswordDialog ref="userResetPassword" />
    <!--个人信息-->
    <personalInfoDialog ref="personalInfo" />
  </section>
</template>
<script>
/* 组件*/
import switchRoleDepartDialog from '@views/common/user/switchRoleDepart-dialog'
import userResetPasswordDialog from '@views/common/user/retrievePassword/userResetPassword-dialog'
import personalInfoDialog from '@views/common/user/userPersonalInfo-dialog'
import headerNotice from '@views/common/userMessage/headerNotice'

import { mapGetters } from 'vuex'
import { getToken } from '@/assets/js/utils/auth'// Token
import { languageMixin } from '@/mixins/languageMixin'// 国际化
export default {
  name: 'HeaderBar',
  components: {
    switchRoleDepartDialog, // 切换角色
    userResetPasswordDialog, // 修改密码
    personalInfoDialog, // 个人信息
    headerNotice // 消息提醒
  },
  mixins: [languageMixin],
  data() {
    return {
      token: false // 是否已登录账号 布尔值
    }
  },
  computed: {
    /* langcommon 国际化 info 用户信息 isCollapse菜单栏状态 WebConfig 项目配置数据*/
    ...mapGetters(['language', 'info', 'isCollapse', 'WebConfig'])
  },
  created() {
    if (getToken()) { // 判断是否已登录账号
      this.token = true// 已登录
    }
  },
  methods: {
    // 返回第三方首页
    backHomepage() {
      this.$store.dispatch('backHomepage')
      const [home] = window.location.href.split('/bidweb')
      window.location.href = home
    },
    // 返回本系统桌面
    backHome() {
      this.$store.dispatch('setHome')
    },
    // 当前账户-设置
    handleCommand(command) {
      // command 01为切换角色
      if (command === '01') {
        // 打开弹框操作切换用户角色
        this.$refs.switchRoleDepart.openSwitchRoleDepartDialog()
      }
      // command 02 为个人信息
      if (command === '02') {
        this.$refs.personalInfo.open()
      }
      // command 03 为修改密码
      if (command === '03') {
        this.$refs.userResetPassword.open(this.info)
      }
    },
    // 退出登录
    logoutRest() {
      this.$confirm('确认退出吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirmBtn',
        cancelButtonClass: 'cancelBtn',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('clearSysLoca')
        this.$store.dispatch('logoutRest')
      }).catch(() => {
      })
    }
  }
}
</script>
<style lang="less" scoped>
  @import url("~@/assets/style/common/public.less");
.headerBar {
  padding: 0 16px;
  background: @hyacinthine;
  .headerBarView {
    padding: 0;
    max-width: 1920px;
    margin: 0 auto;
    height: 56px;
    .left {
      font-size: 20px;
      line-height: 56px;
      color: #ffffff;
      font-weight: bold;
      height: 56px;
      width: 274px;
      position: relative;
      margin-left: 17px;
      margin-right: 8px;

      img {
        position: absolute;
        top: 50%;
        left: 0;
        margin-top: -13px;
      }
    }

    .header-index-right {
      .arrow_down{
        float: left;
        margin-right: 16px;
        /deep/.el-dropdown{
          height: 36px;
        }
      }
      .font {
        color: rgba(255, 255, 255, 1);
        line-height: 56px;
        text-align: center;
        padding: 0 12px;
        box-sizing: border-box;
        float: left;
      }
      .font:hover {
        // color: rgba(255, 255, 255, 1);
      }
      .info {
        color: #ffffff;
        line-height: 56px;

        img {
          width: 24px;
          height: 24px;
          border-radius: 50%;
          margin-right: 8px;
        }
      }
      .logOut{
        .el-icon-switch-button{
          margin-right: 3px;
        }
      }
      .back{
        font-size: 24px;
      }
    }
  }
}

.h-wrap {
  margin: 0 auto;
  color: @white;
  height: 56px;
  line-height: 56px;
  .img_p{
    max-height: 40px;
    margin-right: 10px;
  }
}
</style>
