<template>
  <el-badge
    class="item"
    :value="total"
    max="99"
    type="danger"
    @click="jumpAlarm"
  >
    <el-link type="primary" :href="url" target="_blank" style="margin: 0 20px">
      {{ $t('device.xmdp') }}
    </el-link>
    <i class="el-icon-message-solid"></i>
    <!--    <el-button type="danger" size="mini" @click="jumpAlarm">报警</el-button>-->
  </el-badge>
  <el-dropdown
    style="margin-left: 20px"
    @command="handleCommand"
    @visible-change="handleVisibleChange"
  >
    <span class="avatar-dropdown">
      <el-avatar :src="tx" class="user-avatar" />
      <!--      <el-avatar :src="avatar" class="user-avatar" />-->
      <div class="user-name">
        <span class="hidden-xs-only">{{ username }}</span>
        <vab-remix-icon
          :class="{ 'vab-dropdown-active': active }"
          class="vab-dropdown"
          icon="arrow-down-s-line"
        />
      </div>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="userinfo">
          <vab-remix-icon icon="logout-circle-r-line" />
          {{ $t('defalult.grzx') }}
        </el-dropdown-item>
      </el-dropdown-menu>
      <el-dropdown-menu>
        <el-dropdown-item command="logout">
          <vab-remix-icon icon="logout-circle-r-line" />
          {{ $t('defalult.tcdl') }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';
import { getCurrentData } from '@/api/alarm';
export default {
  name: 'VabAvatar',
  data() {
    return {
      active: false,
      tx: require('@/assets/touxiang.png'),
      total: 0,
      url: '',
    };
  },
  computed: {
    ...mapGetters({
      avatar: 'user/avatar',
      username: 'user/username',
    }),
  },
  created() {
    this.getCurrentTotal();
    this.setUrl();
  },
  methods: {
    setUrl() {
      const userId = sessionStorage.getItem('projectId');

      this.url =
        'https://dp.lidinghb.com/chudy_visual/view/1699236499075239936?userId=' +
        userId;
    },
    ...mapActions({
      _logout: 'user/logout',
    }),
    async getCurrentTotal() {
      const { data } = await getCurrentData({
        page: 1,
        size: 1,
        projectId: '',
      });
      this.total = data.total;
    },
    jumpAlarm() {
      this.$router.push({
        name: '资产管理',
        path: 'assets',
        query: { type: 'six' },
      });
    },
    handleCommand(command) {
      switch (command) {
        case 'logout':
          this.logout();
          break;
        case 'userinfo':
          this.userinfo();
          break;
      }
    },
    handleVisibleChange(val) {
      this.active = val;
    },
    async logout() {
      await this._logout();
    },
    userinfo() {
      this.$router.push({
        name: '个人中心',
        params: {},
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.avatar-dropdown {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  justify-items: center;

  .user-avatar {
    width: 40px;
    height: 40px;
    margin-left: 15px;
    cursor: pointer;
    border-radius: 50%;
  }

  .user-name {
    position: relative;
    display: flex;
    align-content: center;
    align-items: center;
    height: 40px;
    margin-left: 6px;
    line-height: 40px;
    cursor: pointer;

    [class*='ri-'] {
      margin-left: 0 !important;
    }
  }
}
</style>
