<template>
  <div class="header">
    <div class="header-left">
      <img class="logo" src="../../../assets/logo.png" />
      <div class="system">武汉耀火科技flame框架</div>
    </div>
    <div class="header-right">
      <div class="login-name">{{ currentUserInfo.real_name }}</div>
      <div class="row2">
        <div class="info">
          <span v-if="currentUserInfo.login_name !== undefined">{{ '登陆账号:' + currentUserInfo.login_name }}</span>
        </div>
        <div class="divider"><el-divider direction="vertical"></el-divider></div>
        <div class="btn" @click="loginOut">退出登陆</div>
        <div class="divider"><el-divider direction="vertical"></el-divider></div>
        <div class="service">
          <el-popover placement="bottom" title="信息提示" width="200" trigger="hover">
            <div class="service-info">请扫码添加客服微信二维码</div>
            <img class="service-img" src="../../../assets/service.png" />
            <span slot="reference">联系客服</span>
          </el-popover>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapState, mapMutations } from 'vuex';
export default {
  name: 'Header',
  data() {
    return {};
  },
  computed: {
    ...mapGetters('global', ['currentUserInfo','flameTableInfos','flameTableInfoItems','flameQuerys','flameQueryItems'])
  },
  created() {},
  mounted() {
    let that = this;
    let user = that.user_name;
    that.setUserInfo({ fields: that.currentUserInfo });
    that.setFlameTableInfo({fields:that.flameTableInfos});
    that.setFlameTableInfoItem({fields:that.flameTableInfoItems});
    that.setflameQuery({fields:that.flameQuerys})
    that.setflameQueryItem({fields:that.flameQueryItems})
  },
  methods: {
    ...mapMutations('global', ['setUserInfo','setFlameTableInfo','setFlameTableInfoItem','setflameQuery','setflameQueryItem']),
    loginOut() {
      console.log('loginOut');
      let that = this;
      that.$store.dispatch('global/loginOut').then(res => {
        console.log('loginOut', res);
        if (res.success) {
          that.$router.push('/');
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.header {
  height: 100%;
  color: $font-color-5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: Microsoft YaHei;
  .header-left {
    display: flex;
    align-items: center;
    .logo {
      width: 40px;
      height: 40px;
      margin-right: $spacing-normal;
    }
    .system{
      font-weight: bold;
    }
  }
  .header-right {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-left: 10px;
    .login-name {
      color: $font-color-5;
      width: 100%;
      font-weight: bold;
      font-size: 14px;
    }
    .row2 {
      display: flex;
      color: $font-color-4;
      font-size: 12px;
      .info {
        margin: $spacing-mini;
      }
      .divider {
        color: $font-color-4;
        margin: $spacing-mini 0;
      }
      .btn {
        margin: $spacing-mini;
      }
      .btn:hover {
        cursor: pointer;
      }
      .service {
        margin: $spacing-mini;
      }
    }
  }
}

.service-info {
  margin: $spacing-normal;
}
.service-img {
  margin-left: 10px;
  width: 180px;
}
</style>
