<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}"
    @click="clickUserTrayPanel"
  >
    <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" @click.stop="openUserSetting">
        <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" @click.stop="openUserPoweroff">
        <span class="menu-icon poweroff"></span>
        关机
      </div>
      <div class="v-menu-item-divider"></div>
      <div class="v-menu-item" @click.stop="openUserAbout">
        <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",
            ""
          );
        }
      }
    },
    // 点击本页面
    clickUserTrayPanel(){
       this.display = "block";
       let el = document.querySelector(".tray-item.user-button");
       el.className = el.className + " pressed"
       window.addEventListener('click',this.hiddenUserAndchangeIconColor,true)
    },
    // 隐藏本页面并更新页面对应的图标颜色
    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)
    },
    // 打开个人设置页面
    openUserSetting(e){
      this.hiddenUserAndchangeIconColor(e)
      this.$bus.emit('openUserSetting')
    },
    // 打开关机页面
    openUserPoweroff(e){
      this.$bus.emit("hiddenOrShowOtherWindow", true);
      this.hiddenUserAndchangeIconColor(e)
      let obj = {
        cls: "",
        icon:'',
        title: "",
        text: "您确定要关机吗？",
        buttonList:[
          {
            id:0,
            text:'取消',
            cls:'v-btn-cancel',
            event:this.cancelPoweroff
          },
          {
            id:1,
            text:'确定',
            cls:'v-btn-main',
            event:this.confirmPoweroff
          }
        ]
      };
      this.$bus.emit("openMessage", obj);
      this.$bus.emit("openMask");

    },
    // 打开关于页面
    openUserAbout(e){
      this.hiddenUserAndchangeIconColor(e)
      this.$bus.emit('openUserAbout')
    },
    // 取消关机
    cancelPoweroff(){
      this.$bus.emit("hiddenOrShowOtherWindow", false);
      this.$bus.emit("closeMessage");
      this.$bus.emit("closeMask")

    },
    // 确认关机
    confirmPoweroff(){
      this.$bus.emit("closeMessage");
      this.$bus.emit("closeMask")
    }
  },
  components: {},
  name: "User",
};
</script>