<template>
  <!-- userAbout -->
  <div
    class="
      v-layout
      sds-user-about-window
      layout-window-modal
      v-window
    "
    syno-id="about-window"
    style="
      position: absolute;
      width: 520px;
      height: 288px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    "
    :style="{ visibility: visibility ,zIndex:zIndex}"
    :class="cls"
  >
    <div class="v-window-body">
      <div class="v-trap-focus-indicator"></div>
      <div class="v-trap-focus-body">
        <div role="dialog" class="v-trap-focus-indicator"></div>
        <div class="title">DiskStation Manager</div>
        <div class="version">版本 7.1-42661</div>
        <div class="links-info">
          <div class="link-block">
            <a
              href="https://sy.to/dsm7legal"
              target="_blank"
              rel="noopener noreferrer"
              class="link link-font"
              >法律条款</a
            >
          </div>
          <div class="link-block">
            <a
              href="https://www.synology.com"
              target="_blank"
              rel="noopener noreferrer"
              class="link link-font"
              >www.synology.com</a
            >
          </div>
        </div>
        <div class="footer-info">
          <div class="copyright">
            版权所有 © 2022 Synology Inc. 保留一切权利。
          </div>
          <div class="logo"></div>
        </div>
        <div class="window-header-tool-wrapper light">
          <div class="tool close" @click.stop="closeUserAbout"></div>
        </div>
      </div>
      <div class="v-trap-focus-indicator"></div>
    </div>
  </div>
</template>

<script>
export default {
  props:['defaultZIndex'],
  mounted() {
    this.$bus.on("openUserAbout", this.openUserAbout);
    this.zIndex = this.defaultZIndex + 11
  },
  data() {
    return {
      visibility: "hidden",
      zIndex:0,
      cls:''
    };
  },
  methods: {
    //   打开本页面
    openUserAbout() {
      this.zIndex = this.defaultZIndex + 11
      this.visibility = "visible";
      this.cls = 'active-win'
      this.$bus.emit("openMask",'sds-user-about-mask')
    },
    //   关闭本页面
    closeUserAbout() {
      this.visibility = "hidden";
      this.cls = 'deactive-win'
      this.$bus.emit("closeMask")
    },
  },
  components: {},
  name: "UserAbout",
};
</script>