<!--
  <vue-api-header></vue-api-header>
-->
<template>
  <div class="api-header">
    <div class="api-header-wrap border-box flex flex-space-between">
      <div class="api-header-left"><img src="../assets/logo.png" alt="" /><span class="color-fff ">API网关管理后台</span></div>
      <div class="api-header-right">
        <div class="api-header-right_info">
          <span class="api-header-message">消息</span>
          <el-popover placement="bottom" title="" width="95" trigger="hover" popper-class="user-header-pop" style="min-width: 95px; margin-left: 10px;">
            <ul class="navsuerwrap">
              <!-- <li class="user-item">
                <div class="flex flex-row flex-align-center user-info-wrap">
                  <div class="user-right-info flex flex-column" style="margin-left: 10px">
                    <p>{{ 123 }}</p>
                    <p>{{ 456 }}</p>
                  </div>
                </div>
              </li> -->
              <li class="user-item loginout" style="text-align: center" @click.stop="toLoginOut"><a class="usertext ">退出登录</a></li>
              <!-- href="javascript:void(0)" -->
            </ul>
            <div class="nav-user-name" slot="reference" style="display: inline-block;">
              <a class="user-left-img flex flex-align-center"
                ><img :src="baseInfo.avatar" style="width: 30px; height: 30px; border-radius: 15px; padding-right: 2px;" alt=""/><span class="color-fff font-14 p-r-14">{{ baseInfo.userName }}</span
                ><i class="el-icon-arrow-down font-14 color-fff"></i
              ></a>
            </div>
          </el-popover>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getRequest } from '@/api/api';
import errMsg from '@/assets/js/error';
import showMsg from '@/assets/js/showmsg';
export default {
  name: 'vue-api-header',
  data() {
    return {
      baseInfo: {}
    };
  },

  methods: {
    //退出登录
    toLoginOut() {
      const that = this;
      that
        .$confirm('确认退出吗?', '提示', {
          type: 'warning'
        })
        .then(() => {
          that.postLoginOut();
        })
        .catch(error => {});
    },
    /**
     *  post 退出
     */
    postLoginOut() {
      const that = this;
      getRequest('/gateway-manage/invalidate', {})
        .then(res => {
          const resData = res.data;
          if (resData.code == '0000') {
            showMsg.showmsg('退出成功', 'success');
            // 跳转登录页
            that.$store.dispatch('clearUserInfo');
            that.$router.push('/login');
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    getUserInfo() {
      const that = this;
      getRequest('/gateway-manage/get-login-userInfo', {})
        .then(res => {
          const resData = res.data;
          if (resData.code == '0000') {
            that.baseInfo = resData.result;
            localStorage.removeItem('userInfo');
            localStorage.setItem('userInfo', JSON.stringify(resData.result));
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  watch: {
    $route: {
      handler: function(val, oldVal) {
        // console.log('获取当前路由:', val);
      },
      // 深度观察监听
      deep: true
    }
  },
  /* 接收数据 */
  mounted() {
    var that = this;
    // console.log(that.$store);
    that.pathName = that.$route.path;
    that.getUserInfo();
  }
};
</script>

<style lang="less" scoped>
.api-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  min-width: 1400px;
  height: 56px;
  line-height: 56px;
  background: #3e71f7;
  z-index: 3;
  &-wrap {
    padding: 0 30px 0 26px;
    height: 56px;
    line-height: 56px;
    .api-header-left {
      img {
        display: inline-block;
        vertical-align: middle;
        padding-right: 7px;
        -webkit-transform: translateY(-4px);
        -moz-transform: translateY(-4px);
        -ms-transform: translateY(-4px);
        transform: translateY(-4px);
      }
      span {
        font-size: 17px;
      }
    }
    .api-header-right {
      height: 56px;
      line-height: 56px;
      .api-header-right_info {
        height: 56px;
        line-height: 56px;
        .api-header-message {
          position: relative;
          display: inline-block;
          vertical-align: top;
          margin-top: 18px;
          margin-right: 13px;
          width: 28px;
          height: 20px;
          line-height: 20px;
          font-size: 14px;
          color: #fff;
          &::before {
            content: '';
            position: absolute;
            top: -2px;
            right: -2px;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #ff6383;
          }
          &::after {
            content: '';
            position: absolute;
            top: 5px;
            right: -13px;
            width: 1px;
            height: 12px;
            background: #fff;
          }
        }
        .user-left-img {
          .el-icon-arrow-down {
            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            transition: all 0.3s;
          }
          &:hover {
            .el-icon-arrow-down {
              -webkit-transform: rotate(180deg);
              -moz-transform: rotate(180deg);
              transform: rotate(180deg);
            }
          }
        }
      }
    }
  }
}
</style>
