<template>
  <el-dropdown
    class="avatar-container"
    trigger="click"
  >
    <div class="avatar-wrapper">
      <img
        :src="avatar + '?imageView2/1/w/80/h/80'"
        class="user-avatar"
      >
      <i class="el-icon-right" />
    </div>
    <el-dropdown-menu
      slot="dropdown"
      class="user-dropdown"
    >
      <a
        href="http://zq.wozhangwan.com/DemandFeedback.html"
        target="_blank"
      >
        <el-dropdown-item>
          <span style="display:block;">需求反馈</span>
        </el-dropdown-item>
      </a>

      <el-dropdown-item @click.native="refreshPermission">
        <span style="display:block;">同步权限</span>
      </el-dropdown-item>
      <el-dropdown-item @click.native="logout">
        <span style="display:block;">返回认证中心</span>
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
import request from '../../utils/request/index.js'
export default {
  name: 'BiAvatar',
  props: {
    avatar: {
      type: String,
      default: ''
    }
  },
  methods: {
    logout() {
      this.$emit('logout')
    },
    async refreshPermission() {
      const res = await request({
        env: this.$BI.env,
        system: 'zq',
        api: '/api/index/reload',
        data: {
          system: this.$BI.system
        }
      })
      console.log(res, 'res')
      if (res.status_code === 1) {
        this.$message.success('权限已同步。页面即将刷新以应用最新权限。')
        setTimeout(() => {
          window.location.reload()
        }, 1000)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.avatar-container {
  .avatar-wrapper {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;

    .user-avatar {
      display: block;
      width: 34px;
      height: 34px;
      border-radius: 4px;
      margin-right: 12px;
    }

    .el-icon-right {
      // position: absolute;
      // right: -20px;
      color: #86909c;
      font-size: 16px;
      transform: rotate(90deg);
    }
  }
}
</style>