<!--
 * @Author: haoqiuzhi
 * @Date: 2022-05-16 08:28:51
 * @LastEditors: haoqiuzhi
 * @LastEditTime: 2022-06-29 21:42:07
 * @Description:
-->
<template>
  <div class="nav-bar">
    <!-- <img class="info-icon" src="@/assets/icons/icon-setting.svg" /> -->
    <!-- 消息提醒 -->
    <el-badge :is-dot="messageList.length > 0" class="badge">
      <img class="info-icon message" src="@/assets/icons/icon-message.svg" @mouseover="msgClick()" />
    </el-badge>
    <!-- 角色切换 -->
    <img v-if="changeRoleVisible" @mouseover="roleClick()" class="info-icon" src="@/assets/icons/icon-change.svg" />
    <!-- 判断是否显示角色信息 -->
    <div v-if="changeRoleVisible" class="info-text">
      <span>( {{ roleName }}</span>
      <span>{{ orgName }} )</span>
    </div>
    <div class="splite"></div>
    <!-- 用户信息 -->
    <div class="info-name" @mouseover="userClick()">{{ name.slice(-2) }}</div>
    <HeaderMessage
      v-if="messageVisible"
      :message-list="messageList"
      :messageVisible.sync="messageVisible"
      @getMessageDataList="getMessageDataList"
      @handleAllRead="handleAllRead"
    ></HeaderMessage>
    <HeaderUser v-if="userVisible" :userVisible.sync="userVisible" />
    <HeaderRole v-if="roleVisible" :roleVisible.sync="roleVisible" />
  </div>
</template>

<script>
import HeaderUser from './header-user.vue'
import HeaderMessage from './header-message.vue'
import HeaderRole from './header-role.vue'
import { mapState } from 'vuex'
import { api } from '@/apis/header-message'

export default {
  data() {
    return {
      userVisible: false,
      roleVisible: false,
      messageVisible: false,
      messageList: []
    }
  },
  components: {
    HeaderUser,
    HeaderMessage,
    HeaderRole
  },
  computed: {
    ...mapState('user', ['name', 'applyDetail', 'roleDetail', 'partyOrgDetail']),
    changeRoleVisible() {
      return this.applyDetail.roleFlag === 0
    },
    roleName() {
      return this.roleDetail.roleName || '角色名称'
    },
    orgName() {
      return this.partyOrgDetail.partyOrgName || '组织名称'
    }
  },
  mounted() {
    this.getMessageDataList()
  },
  methods: {
    getMessageDataList() {
      const param = {
        current: 1,
        size: 100,
        type: 0
      }
      api.getMessageByPage(param).then(res => {
        this.messageList = res.data.records
      })
    },
    handleAllRead() {
      api.readAllMessage().then(() => {
        this.getMessageDataList()
      })
    },
    msgClick() {
      this.messageVisible = true
      this.roleVisible = false
      this.userVisible = false
      this.getMessageDataList()
    },
    roleClick() {
      this.roleVisible = true
      this.userVisible = false
      this.messageVisible = false
    },
    userClick() {
      this.userVisible = true
      this.roleVisible = false
      this.messageVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
// 禁止用户选中 鼠标变为手形
%unable-select {
  user-select: none;
  cursor: pointer;
}
.open {
  transform: rotateX(180deg);
}
.nav-bar {
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 500;
  color: #ffffff;
  display: flex;
  align-items: center;

  .info-icon {
    width: 22px;
    height: 22px;
    margin: 0 10px;
    @extend %unable-select;
  }

  .splite {
    margin-left: 12px;
    height: 20px;
    width: 1px;
    background-color: #fff;
  }

  .info-text {
    min-width: 42px;
    height: 20px;
    font-size: 14px;
    line-height: 20px;
    span {
      margin-left: 12px;
    }
  }
  .info-name {
    margin-left: 24px;
    margin-right: 28px;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    background: #f6dddf;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #dc1a36;
    font-weight: 700;
    font-size: 12px;
    user-select: none;
    cursor: pointer;
  }
  .info-icon-down {
    margin: 0 32px 0 8px;
  }

  ::v-deep .el-badge__content.is-dot {
    top: 15px;
    left: 15px;
  }

  .badge {
    ::v-deep .el-badge__content.is-dot {
      margin-right: 10px;
      top: 0;
    }
  }
}

.notice-point {
  display: block;
  z-index: 100000;
  background: #dc1a36;
  border-radius: 50%;
  width: 0.4em;
  height: 0.4em;
  top: 25px;
  left: 35px;
  position: absolute;
}
</style>
