<template>
  <div class="top-message-container">
    <div class="message-icon__wrap" @click="$emit('msg-click')">
      <!-- class="icon-nav-message message-icon header-btn-icon" -->
      <i
        class="el-icon-bell header-btn-icon"
        :style="{
          color: $store.state.settings.messageColor ? 'var(--themeColor)' : '',
          fontWeight: $store.state.settings.messageColor ? 'bold' : '',
        }"
      ></i>
      <i
        v-show="messageCount > 0"
        class="message-count"
        :class="{ 'square-bg': outnumberShowCount }"
      >
        {{ outnumberShowCount ? '99+' : messageCount }}
      </i>
    </div>
    <!-- <span class="message-title">消息</span> -->
  </div>
</template>

<script>
  export default {
    name: 'HtMessage',
    props: {
      messageCount: {
        type: [Number, String],
        default: '',
      },
    },
    computed: {
      //数量超过99时
      outnumberShowCount() {
        return this.messageCount > 99
      },
    },
  }
</script>

<style lang="scss" scoped>
  .top-message-container {
    display: flex;
    .message-icon__wrap {
      position: relative;
      .message-icon {
        color: var(--topRightColor);
      }

      .message-count {
        position: absolute;
        display: inline-block;
        width: 20px;
        height: 20px;
        line-height: 18px;
        border-radius: 50%;
        top: -9px;
        left: 12px;
        color: $base-color-white;
        background: $base-color-red;
        zoom: 0.8;
        font-style: normal;
        text-align: center;
        cursor: pointer;
      }
      .square-bg {
        width: 30px;
        border-radius: 10px 10px;
      }
    }
  }
</style>
