<template>
  <!-- userSetting -->
  <div
    class="v-layout sds-personal-settings-window layout-window-app v-window"
    style="
      position: absolute;
      height: 574px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    "
    :style="{
      zIndex: openUserSettingDetail.zIndex,
      width: openUserSettingDetail.width,
    }"
    :class="openUserSettingDetail.cls"
    @click="clickUserSetting"
    v-if="openUserSettingDetail.display === 'block'"
  >
    <div class="v-window-header-wrapper draggable">
      <div
        class="app-icon"
        :style="{backgroundImage: `url(${openUserSettingDetail.titleImgUrl})`}
          
        "
      ></div>
      <div class="v-window-header-text">
        <div class="v-window-header-title">
          {{ openUserSettingDetail.title }}
        </div>
      </div>
      <div class="window-header-tool-wrapper light">
        <div class="tool help" @click.stop="openDSMWindow"></div>
        <div class="tool minimize" @click.stop="minUserSetting"></div>
        <div
          class="tool maximize"
          :style="{ display: openUserSettingDetail.iconMaximize }"
          @click="maxiMizeUserSetting"
        ></div>
        <div
          class="tool restore"
          :style="{ display: openUserSettingDetail.iconRestore }"
          @click="RestoreUserSetting"
        ></div>
        <div class="tool close" @click.stop="closeUserSetting"></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["defaultZIndex", "userSettingData"],
  mounted() {
    this.$bus.on("openUserSetting", this.openUserSetting);
    this.openUserSettingDetail = this.userSettingData;
  },
  data() {
    return {
      openUserSettingDetail: {},
    };
  },
  methods: {
    // 打开本页面
    openUserSetting() {
      if (this.openUserSettingDetail.display) {
        this.openUserSettingDetail.zIndex = this.defaultZIndex + 10;
        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
        this.openUserSettingDetail.display = "block";
      }
    },
    // 关闭本页面
    closeUserSetting() {
      this.openUserSettingDetail.display = "none";
      this.openUserSettingDetail.zIndex = this.defaultZIndex - 10;
      this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
      this.$bus.emit(
        "closeDialogWindow",
        "../../../public/image/index/personalSetting.png"
      );
    },
    // 点击本页面
    clickUserSetting() {
      if (this.openUserSettingDetail.zIndex < this.defaultZIndex) {
        this.openUserSettingDetail.zIndex = this.defaultZIndex + 10;
        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
        this.$bus.emit(
          "changeDialogWindow",
          "../../../public/image/index/personalSetting.png"
        );
      }
    },
    // 打开DSM 说明
    openDSMWindow() {
      this.$bus.emit("openDSMWindow");
    },
    // 最小化本页面
    minUserSetting() {
      this.openUserSettingDetail.display = "none";
      this.openUserSettingDetail.zIndex = this.defaultZIndex - 10;
      this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
    },
    // 最大化本页面
    maxiMizeUserSetting() {
      this.openUserSettingDetail.iconRestore = "block";
      this.openUserSettingDetail.iconMaximize = "none";
      this.openUserSettingDetail.width = "100%";
    },
    // 重置本页面的宽度
    RestoreUserSetting() {
      this.openUserSettingDetail.iconRestore = "none";
      this.openUserSettingDetail.iconMaximize = "block";
      this.openUserSettingDetail.width =
        this.openUserSettingDetail.restoreWidth;
    },
  },
  watch: {
    userSettingData() {
      this.openUserSettingDetail = userSettingData;
    },
  },
};
</script>
<style lang="css" scoped>
@media screen and (max-height: 600px) {
  .sds-personal-settings-window {
    top: 0 !important;
    transform: translate(-50%, 0px) !important;
  }
}
</style>
