<template>
  <!-- 头部 -->
  <div class="taskbar-wrapper" :style="{display:display}">
    <div class="taskbar-left-wrapper">
      <div class="show-all-button"></div>
      <div class="start-button" @click.stop="openAppView">
        <button class="start-button-img">
          <div class="sds-notify-badge-num"></div>
        </button>
      </div>
    </div>
    <div class="taskbar-buttons-container">
      <div class="taskbar-buttons-wrapper" style="display: none"></div>
    </div>
    <div class="tray-container">
      <span class="system-tray-wrapper">
        <button class="tray-item notify-button system" @click.stop="openOrHiddenNotify">
          <div :class="notifyMessaggeCls"></div>
        </button>
        <button class="tray-item user-button system">
          <div></div>
        </button>
        <button
          class="tray-item widget-button system"
          @click="showOrHiddenWidget"
        >
          <div></div>
        </button>
        <button class="tray-item search-button system">
          <div></div>
        </button>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      display: 'flex',
      notifyMessaggeCls: 'tray-notify-badge',
    };
  },
  mounted(){
    this.$bus.on('appViewIsOpen',this.appViewIsOpen)
    this.$bus.on('notifyMessageRead',this.notifyMessageRead)
  },
  methods: {
    showOrHiddenWidget(e) {
      this.$bus.emit("showOrHiddenWidget",e);
    },
    openAppView(){
      this.$bus.emit("showAppView")
    },
    //appView是否打开
    appViewIsOpen(bol){
      console.log(bol)
      if(bol){
        this.display = 'none'
      }else{
        this.display = 'flex'
      }
    },
    //打开或者关闭信息页面
    openOrHiddenNotify(e){
      this.$bus.emit('openOrHiddenNotify',e)
    },
    // 笔记消息已读
    notifyMessageRead(){
      this.notifyMessaggeCls = ''
    }
  },
  name: "Header",
};
</script>
<style lang="">
</style>
