<template>
  <!-- userTrayPanel -->
  <div
    tabindex="-1"
    class="taskbar-menu user-menu v-menu"
    style="height: auto; width: 200px; right: 20px; top: 41px; z-index: 15000"
    :style="{display: display}"
  >
    <div class="v-trap-focus-indicator"></div>
    <div class="v-trap-focus-body">
      <div class="taskbar-title">{{userTrayPanelDetail.title}}</div>
      <div class="v-menu-item">
        <span class="menu-icon setting"></span>
        个人设置
      </div>
      <div class="v-menu-item-divider"></div>
      <div class="v-menu-item">
        <span class="menu-icon reboot"></span>
        重新启动
      </div>
      <div class="v-menu-item">
        <span class="menu-icon poweroff"></span>
        关机
      </div>
      <div class="v-menu-item-divider"></div>
      <div class="v-menu-item">
        <span class="menu-icon about"></span>
        关于
      </div>
      <div class="v-menu-item-divider"></div>
      <div class="v-menu-item">
        <span class="menu-icon logout"></span>
        退出
      </div>
    </div>
    <div class="v-trap-focus-indicator"></div>
  </div>
</template>

<script>
export default {
  mounted(){
    this.$bus.on('openUserTrayPanel',this.openUserTrayPanel)
  },
  data() {
    return {
      display: 'none',
      userTrayPanelDetail: {
        title:'synology',
        detailMessage: [],
      },
    };
  },
  methods:{
    openUserTrayPanel(e){
      if(this.display === 'none'){
        this.display = "block";
        e.srcElement.className = e.srcElement.className + " pressed";
        window.addEventListener('click',this.hiddenUserAndchangeIconColor,true)
      }else {
        this.display = "none";
        if (e.srcElement.className.includes(" pressed")) {
          e.srcElement.className = e.srcElement.className.replace(
            " pressed",
            ""
          );
        }
      }
    },
    // closeU
    // 隐藏本页面并更新页面对应的图标颜色
    hiddenUserAndchangeIconColor(e){
      let el = document.querySelector(".tray-item.user-button");
      if(e.srcElement !== el){
        this.display = "none";
      }
      if (el.className && el.className.includes(" pressed")) {
        el.className = el.className.replace(" pressed", "");
      }
      window.removeEventListener('click',this.hiddenUserAndchangeIconColor,true)
    }
  },
  components: {},
  name: "User",
};
</script>