yvan-window/src/component/Container/Desktop/NotifySetting/index.vue

<template>
  <!-- notifySetting -->
  <div>
    <div
      class="
        x-window
        sds-notify-setting-dialog sds-window-v5
        x-resizable-pinned
      "
      style="position: absolute"
      :style="{
        display: notifySettingContant.display,
        zIndex: notifySettingContant.zIndex,
        left: notifySettingContant.left,
        top: notifySettingContant.top,
        width: notifySettingContant.width,
      }"
      :class="notifySettingContant.cls"
      @mousedown="clickNotifySetting"
    >
      <div class="x-dlg-focus"></div>
      <div
        class="x-window-tl"
        @mousedown.capture="mousedownNotifyTrayPanelDetail"
      >
        <div class="x-window-tr">
          <div class="x-window-tc">
            <div class="x-window-header x-panel-icon x-window-draggable">
              <div class="x-window-toolCt">
                <div class="x-tool x-tool-close" @click="closeNotifySetting">
                  &nbsp;
                </div>
              </div>
              <span class="x-window-header-text">通知设置</span>
            </div>
          </div>
        </div>
      </div>
      <div class="x-window-bwrap">
        <div class="x-window-ml">
          <div class="x-window-mr">
            <div class="x-window-mc">
              <div
                class="x-window-body x-border-layout-ct"
                style="width: 626px; height: 394px"
              >
                <div
                  class="
                    x-panel
                    syno-ux-formpanel
                    syno-ux-formpanel-gradient
                    syno-ux-formpanel-no-fbar
                    syno-ux-formpanel-no-tbar
                    x-panel-noborder x-form-label-left x-border-panel
                    scroll-at-top
                    scroll-at-bottom
                    scroll-at-left
                    scroll-at-right
                  "
                  style="left: 12px; top: 8px; width: 601px"
                >
                  <div class="x-panel-bwrap">
                    <form
                      class="
                        x-panel-body
                        x-panel-body-noheader
                        x-panel-body-noborder
                        x-form
                        flexcrollactive
                      "
                      method="POST"
                      style="
                        height: 55px;
                        width: 585px;
                        overflow: hidden;
                        border-width: 0px;
                        position: relative;
                        text-align: left;
                        padding: 8px 8px 0px;
                      "
                    >
                      <div
                        class="mcontentwrapper"
                        style="
                          width: 585px;
                          height: 55px;
                          top: -8px;
                          left: -8px;
                          border-bottom: 0px solid black;
                          text-align: start;
                          padding: 8px 8px 0px;
                          position: relative;
                          overflow: hidden;
                          z-index: 2;
                        "
                      >
                        <div
                          class="contentwrapper"
                          style="
                            position: relative;
                            top: 0px;
                            width: 100%;
                            display: block;
                            padding: 0px;
                            left: 0px;
                          "
                        >
                          <div class="x-form-item x-hide-label">
                            <label
                              style="width: 180px"
                              class="x-form-item-label syno-ux-item-label"
                            ></label>
                            <div
                              class="x-form-element"
                              style="padding-left: 185px"
                            >
                              <div
                                class="
                                  x-form-display-field
                                  syno-ux-displayfield
                                "
                                style="margin-left: 0px; height: 40px"
                              >
                                控制是否为下列每个服务接收 DSM
                                桌面通知。您还可更改未读服务通知的顺序，并手动或按时间排序
                              </div>
                              <div class="x-form-hidden-error-msg"></div>
                            </div>
                            <div class="x-form-clear-left"></div>
                          </div>
                        </div>
                      </div>
                      <div
                        class="scrollwrapper"
                        style="
                          width: 601px;
                          height: 63px;
                          position: absolute;
                          top: 0px;
                          left: 0px;
                        "
                      >
                        <div
                          class="zoomdetectdiv"
                          style="
                            font-size: 12px;
                            height: 1em;
                            width: 1em;
                            position: absolute;
                            z-index: -999;
                            visibility: hidden;
                          "
                        ></div>
                        <div
                          class="vscrollerbase scrollgeneric flexinactive"
                          style="height: 63px; left: 601px; visibility: hidden"
                        >
                          <div
                            class="vscrollerbar scrollgeneric"
                            style="
                              padding: 0px;
                              height: 62px;
                              top: 0px;
                              z-index: 2;
                              visibility: hidden;
                            "
                          >
                            <div
                              class="vscrollerbarbeg scrollgeneric"
                              style="height: 62px"
                            ></div>
                            <div
                              class="vscrollerbarend scrollgeneric"
                              style="top: 62px"
                            ></div>
                          </div>
                          <div
                            class="vscrollerbasebeg scrollgeneric"
                            style="height: 63px"
                          ></div>
                          <div
                            class="vscrollerbaseend scrollgeneric"
                            style="top: 63px"
                          ></div>
                        </div>
                        <div
                          class="hscrollerbase scrollgeneric flexinactive"
                          style="width: 601px; top: 63px; visibility: hidden"
                        >
                          <div
                            class="hscrollerbar scrollgeneric"
                            style="
                              padding: 0px;
                              width: 594px;
                              left: 0px;
                              z-index: 2;
                              visibility: hidden;
                            "
                          >
                            <div
                              class="hscrollerbarbeg scrollgeneric"
                              style="width: 594px"
                            ></div>
                            <div
                              class="hscrollerbarend scrollgeneric"
                              style="left: 594px"
                            ></div>
                          </div>
                          <div
                            class="hscrollerbasebeg scrollgeneric"
                            style="width: 601px"
                          ></div>
                          <div
                            class="hscrollerbaseend scrollgeneric"
                            style="left: 601px"
                          ></div>
                        </div>
                        <div
                          class="scrollerjogbox scrollgeneric"
                          style="visibility: hidden"
                        ></div>
                        <div class="domfixdiv" style="display: none"></div>
                        <div
                          class="copyholder"
                          style="
                            border: 0px solid blue;
                            visibility: hidden;
                            padding: 8px 8px 0px;
                            display: none;
                          "
                        ></div>
                      </div>
                    </form>
                  </div>
                </div>
                <div
                  class="
                    x-panel
                    sds-notify-setting-grid
                    without-dirty-red-grid
                    syno-ux-gridpanel
                    x-panel-noborder x-grid-panel
                    hide-org-hd-menu
                    x-border-panel
                  "
                  style="left: 20px; top: 79px; width: 585px"
                >
                  <div class="x-panel-bwrap">
                    <div
                      class="
                        x-panel-body x-panel-body-noheader x-panel-body-noborder
                      "
                      style="width: 585px; height: 303px"
                    >
                      <div
                        class="x-grid3"
                        hidefocus="true"
                        style="width: 585px; height: 302px"
                      >
                        <div class="x-grid3-viewport">
                          <div class="x-grid3-header">
                            <div
                              class="x-grid3-header-inner"
                              style="width: 585px"
                            >
                              <div
                                class="x-grid3-header-offset"
                                style="width: 585px"
                              >
                                <table
                                  border="0"
                                  cellspacing="0"
                                  cellpadding="0"
                                  style="width: 585px"
                                >
                                  <thead>
                                    <tr class="x-grid3-hd-row">
                                      <td
                                        class="
                                          x-grid3-hd
                                          x-grid3-cell
                                          x-grid3-td-ext-gen650
                                          x-grid3-cell-first
                                          x-grid3-cell-first-visible
                                        "
                                        style="width: 403px"
                                        :class="
                                          notifySettingDetail
                                            .tableHeaderContant1.cls
                                        "
                                        @click="changeSort"
                                      >
                                        <div
                                          class="
                                            x-grid3-hd-inner
                                            x-grid3-hd-ext-gen650
                                          "
                                          style=""
                                        >
                                          {{
                                            notifySettingDetail
                                              .tableHeaderContant1.title
                                          }}<img
                                            alt=""
                                            class="x-grid3-sort-icon"
                                            src="../../../../../public/image/index/s.gif"
                                          />
                                        </div>
                                      </td>
                                      <td
                                        class="
                                          x-grid3-hd
                                          x-grid3-cell
                                          x-grid3-td-1
                                          x-grid3-cell-disable-sort
                                          x-grid3-cell-last-visible
                                        "
                                        style="width: 178px; text-align: center"
                                      >
                                        <div
                                          class="x-grid3-hd-inner x-grid3-hd-1"
                                          style=""
                                        >
                                          <input
                                            type="button"
                                            class="syno-ux-checkbox-icon"
                                            :class="
                                              notifySettingDetail
                                                .tableHeaderContant2.cls
                                            "
                                            style="
                                              vertical-align: middle;
                                              top: -1px;
                                            "
                                            @click="clickCheckAll"
                                          />{{
                                            notifySettingDetail
                                              .tableHeaderContant2.title
                                          }}<img
                                            alt=""
                                            class="x-grid3-sort-icon"
                                            src="../../../../../public/image/index/s.gif"
                                          />
                                        </div>
                                      </td>
                                      <td
                                        class="
                                          x-grid3-hd
                                          x-grid3-cell
                                          x-grid3-td-2
                                          x-grid3-cell-last
                                          x-grid3-cell-disable-sort
                                        "
                                        style="width: 178px; display: none"
                                      >
                                        <div
                                          class="x-grid3-hd-inner x-grid3-hd-2"
                                          style=""
                                        >
                                          <input
                                            type="button"
                                            class="
                                              syno-ux-checkbox-icon
                                              syno-ux-cb-checked
                                            "
                                            style="
                                              vertical-align: middle;
                                              top: -1px;
                                            "
                                          />Badge<img
                                            alt=""
                                            class="x-grid3-sort-icon"
                                            src="../../../../../image/index/s.gif"
                                          />
                                        </div>
                                      </td>
                                    </tr>
                                  </thead>
                                </table>
                              </div>
                            </div>
                            <div class="x-grid3-header-bwrap">
                              <div
                                class="syno-ux-grid-hd-btn x-hide-display"
                              ></div>
                            </div>
                            <div class="x-clear"></div>
                          </div>
                          <div
                            class="x-grid3-scroller flexcrollactive"
                            style="
                              width: 585px;
                              height: 273px;
                              overflow: hidden;
                              border-width: 0px;
                              position: relative;
                              text-align: left;
                              padding: 0px;
                            "
                          >
                            <div
                              class="mcontentwrapper"
                              style="
                                width: 585px;
                                height: 273px;
                                top: 0px;
                                left: 0px;
                                border-bottom: 0px solid black;
                                text-align: start;
                                padding: 0px;
                                position: relative;
                                overflow: hidden;
                                z-index: 2;
                              "
                            >
                              <div
                                class="contentwrapper"
                                style="
                                  position: relative;
                                  top: 0px;
                                  width: 100%;
                                  display: block;
                                  padding: 0px;
                                  left: 0px;
                                "
                              >
                                <a
                                  href="#"
                                  class="x-grid3-focus"
                                  style="left: 0px; top: 0px"
                                  ><div class="syno-ux-gridpanel-empty-hint">
                                    {{
                                      notifySettingDetail.tableBodyContantList
                                        .length
                                    }}
                                    个项目。
                                  </div></a
                                >
                                <div class="x-grid3-body" style="width: 585px">
                                  <div
                                    class="x-grid3-row"
                                    :class="tableBodyContant.cls"
                                    style="width: 585px"
                                    v-for="(
                                      tableBodyContant, tableBodyContantIndex
                                    ) in notifySettingDetail.tableBodyContantList"
                                    :key="tableBodyContant.id"
                                  >
                                    <table
                                      class="x-grid3-row-table"
                                      border="0"
                                      cellspacing="0"
                                      cellpadding="0"
                                      style="width: 585px"
                                    >
                                      <tbody>
                                        <tr
                                          @click.capture="
                                            clickTr(tableBodyContantIndex)
                                          "
                                          @mouseenter="
                                            mouseenterTr(tableBodyContantIndex)
                                          "
                                          @mouseleave="
                                            mouseleaveTr(tableBodyContantIndex)
                                          "
                                        >
                                          <td
                                            class="
                                              x-grid3-col
                                              x-grid3-cell
                                              x-grid3-td-ext-gen650
                                              x-grid3-cell-first
                                              x-grid3-cell-first-visible
                                            "
                                            style="width: 403px"
                                          >
                                            <div
                                              class="
                                                x-grid3-cell-inner
                                                x-grid3-col-ext-gen650
                                              "
                                              :class="tableBodyContant.cls1"
                                            >
                                              <div>
                                                {{ tableBodyContant.title }}
                                              </div>
                                            </div>
                                          </td>
                                          <td
                                            class="
                                              x-grid3-col
                                              x-grid3-cell
                                              x-grid3-td-1
                                              x-grid3-cell-last-visible
                                            "
                                            style="
                                              width: 178px;
                                              text-align: center;
                                            "
                                          >
                                            <div
                                              class="
                                                x-grid3-cell-inner
                                                x-grid3-col-1
                                                x-unselectable
                                              "
                                            >
                                              <div
                                                :class="tableBodyContant.cls2"
                                                @click="
                                                  clickCheckItem(
                                                    tableBodyContantIndex
                                                  )
                                                "
                                              ></div>
                                            </div>
                                          </td>
                                          <td
                                            class="
                                              x-grid3-col
                                              x-grid3-cell
                                              x-grid3-td-2
                                              x-grid3-cell-last
                                            "
                                            style="width: 178px; display: none"
                                          >
                                            <div
                                              class="
                                                x-grid3-cell-inner
                                                x-grid3-col-2
                                                x-unselectable
                                              "
                                            >
                                              <div></div>
                                            </div>
                                          </td>
                                        </tr>
                                      </tbody>
                                    </table>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <!-- <div
                              class="scrollwrapper"
                              style="
                                width: 585px;
                                height: 273px;
                                position: absolute;
                                top: 0px;
                                left: 0px;
                              "
                            >
                              <div
                                class="zoomdetectdiv"
                                style="
                                  font-size: 12px;
                                  height: 1em;
                                  width: 1em;
                                  position: absolute;
                                  z-index: -999;
                                  visibility: hidden;
                                "
                              ></div>
                              <div
                                class="vscrollerbase scrollgeneric"
                                style="
                                  height: 273px;
                                  left: 585px;
                                  visibility: visible;
                                "
                              >
                                <div
                                  class="vscrollerbar scrollgeneric"
                                  style="
                                    padding: 0px;
                                    height: 142px;
                                    top: 0px;
                                    z-index: 2;
                                    visibility: visible;
                                  "
                                >
                                  <div
                                    class="vscrollerbarbeg scrollgeneric"
                                    style="height: 142px"
                                  ></div>
                                  <div
                                    class="vscrollerbarend scrollgeneric"
                                    style="top: 142px"
                                  ></div>
                                </div>
                                <div
                                  class="vscrollerbasebeg scrollgeneric"
                                  style="height: 273px"
                                ></div>
                                <div
                                  class="vscrollerbaseend scrollgeneric"
                                  style="top: 273px"
                                ></div>
                              </div>
                              <div
                                class="hscrollerbase scrollgeneric flexinactive"
                                style="
                                  width: 585px;
                                  top: 273px;
                                  visibility: hidden;
                                "
                              >
                                <div
                                  class="hscrollerbar scrollgeneric"
                                  style="
                                    padding: 0px;
                                    width: 579px;
                                    left: 0px;
                                    z-index: 2;
                                    visibility: hidden;
                                  "
                                >
                                  <div
                                    class="hscrollerbarbeg scrollgeneric"
                                    style="width: 579px"
                                  ></div>
                                  <div
                                    class="hscrollerbarend scrollgeneric"
                                    style="left: 579px"
                                  ></div>
                                </div>
                                <div
                                  class="hscrollerbasebeg scrollgeneric"
                                  style="width: 585px"
                                ></div>
                                <div
                                  class="hscrollerbaseend scrollgeneric"
                                  style="left: 585px"
                                ></div>
                              </div>
                              <div
                                class="scrollerjogbox scrollgeneric"
                                style="visibility: hidden"
                              ></div>
                              <div
                                class="domfixdiv"
                                style="display: none"
                              ></div>
                              <div
                                class="copyholder"
                                style="
                                  border: 0px solid blue;
                                  visibility: hidden;
                                  padding: 0px;
                                  display: none;
                                "
                              ></div>
                            </div> -->
                          </div>
                        </div>
                        <div class="x-grid3-resize-marker">&nbsp;</div>
                        <div class="x-grid3-resize-proxy">&nbsp;</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="x-window-bl">
          <div class="x-window-br">
            <div class="x-window-bc">
              <div class="x-window-footer x-panel-btns" style="width: 626px">
                <div
                  class="
                    x-panel-fbar x-small-editor x-statusbar x-toolbar-layout-ct
                  "
                  style="width: auto"
                >
                  <table cellspacing="0" class="x-toolbar-ct">
                    <tbody>
                      <tr>
                        <td class="x-toolbar-left" align="left">
                          <table cellspacing="0">
                            <tbody>
                              <tr class="x-toolbar-left-row"></tr>
                            </tbody>
                          </table>
                        </td>
                        <td class="x-toolbar-right" align="right">
                          <table cellspacing="0" class="x-toolbar-right-ct">
                            <tbody>
                              <tr>
                                <td>
                                  <table cellspacing="0">
                                    <tbody>
                                      <tr class="x-toolbar-right-row">
                                        <td class="x-toolbar-cell">
                                          <span
                                            cellspacing="0"
                                            class="
                                              x-btn
                                              syno-ux-button
                                              syno-ux-button-default
                                              x-btn-noicon
                                            "
                                            style="
                                              width: auto;
                                              margin-left: 0px;
                                            "
                                            ><em class="x-unselectable"
                                              ><button
                                                type="button"
                                                class="x-btn-text"
                                                @click="closeNotifySetting"
                                              >
                                                取消
                                              </button></em
                                            ></span
                                          >
                                        </td>
                                        <td class="x-toolbar-cell">
                                          <span
                                            cellspacing="0"
                                            class="
                                              x-btn
                                              syno-ux-button syno-ux-button-blue
                                              x-btn-noicon
                                            "
                                            style="
                                              width: auto;
                                              margin-left: 0px;
                                            "
                                            ><em class="x-unselectable"
                                              ><button
                                                type="button"
                                                class="x-btn-text"
                                                @click="confirmChangeSetting"
                                              >
                                                确定
                                              </button></em
                                            ></span
                                          >
                                        </td>
                                        <td class="x-toolbar-cell">
                                          <div
                                            class="xtb-text x-status-text"
                                            style="max-width: none"
                                          ></div>
                                        </td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </td>
                                <td>
                                  <table cellspacing="0">
                                    <tbody>
                                      <tr class="x-toolbar-extras-row"></tr>
                                    </tbody>
                                  </table>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div class="x-clear"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="
          x-resizable-handle
          x-resizable-handle-north
          x-unselectable
          x-window-handle
        "
      ></div>
      <div
        class="
          x-resizable-handle
          x-resizable-handle-south
          x-unselectable
          x-window-handle
        "
      ></div>
      <div
        class="
          x-resizable-handle
          x-resizable-handle-east
          x-unselectable
          x-window-handle
        "
      ></div>
      <div
        class="
          x-resizable-handle
          x-resizable-handle-west
          x-unselectable
          x-window-handle
        "
      ></div>
      <div
        class="
          x-resizable-handle
          x-resizable-handle-northeast
          x-unselectable
          x-window-handle
        "
      ></div>
      <div
        class="
          x-resizable-handle
          x-resizable-handle-northwest
          x-unselectable
          x-window-handle
        "
      ></div>
      <div
        class="
          x-resizable-handle
          x-resizable-handle-southeast
          x-unselectable
          x-window-handle
        "
      ></div>
      <div
        class="
          x-resizable-handle
          x-resizable-handle-southwest
          x-unselectable
          x-window-handle
        "
      ></div>
    </div>
  </div>
</template>

<script>
import { moveWindow, windowResize } from "../../../../common/common";
export default {
  props: ["defaultZIndex", "notifySettingData"],
  mounted() {
    this.$bus.on("openNotifySetting", this.openNotifySetting);
    this.notifySettingContant = this.notifySettingData;
    window.addEventListener("resize", () => {
      if (this.notifySettingContant.display === "block") {
        let el = document.querySelector(".x-window.sds-notify-setting-dialog");
        let { elTop, elLeft } = windowResize(el);
        this.notifySettingContant.top = elTop;
        this.notifySettingContant.left = elLeft;
      }
    });
  },
  data() {
    return {
      windowFirstClick: {
        layerX: 0,
        layerY: 0,
        screenX: 0,
        screenY: 0,
      },
      notifySettingContant: {
        display: "none",
        zIndex: 9050,
        cls: "active-win",
        top: 0,
        left: 0,
        width: "626px",
      },
      notifySettingDetail: {
        tableHeaderContant1: {
          title: "服务",
          cls: "sort-asc",
        },
        tableHeaderContant2: {
          title: "信息",
          cls: "syno-ux-cb-checked",
        },
        tableBodyContantList: [
          {
            id: 0,
            title: "Codec Pack",
            cls: "",
            cls1: "syno-ux-cb-checked",
            cls2: "syno-ux-grid-enable-column-checked",
          },
          {
            id: 1,
            title: "Download Station ",
            cls: "",
            cls1: "syno-ux-cb-checked",
            cls2: "syno-ux-grid-enable-column-checked",
          },
          {
            id: 2,
            title: "File Station",
            cls: "",
            cls1: "syno-ux-cb-checked",
            cls2: "syno-ux-grid-enable-column-checked",
          },
          {
            id: 3,
            title: "Hyper Backup",
            cls: "",
            cls1: "syno-ux-cb-checked",
            cls2: "syno-ux-grid-enable-column-checked",
          },
          {
            id: 4,
            title: "Note Station",
            cls: "",
            cls1: "syno-ux-cb-checked",
            cls2: "syno-ux-grid-enable-column-checked",
          },
          {
            id: 5,
            title: "PDF Viewer",
            cls: "",
            cls1: "syno-ux-cb-checked",
            cls2: "syno-ux-grid-enable-column-checked",
          },
          {
            id: 6,
            title: "Synology Drive",
            cls: "",
            cls1: "syno-ux-cb-checked",
            cls2: "syno-ux-grid-enable-column-checked",
          },
          {
            id: 7,
            title: "Synology Drive ShareSync",
            cls: "",
            cls1: "syno-ux-cb-checked",
            cls2: "syno-ux-grid-enable-column-checked",
          },
          {
            id: 8,
            title: "Synology MailPlus",
            cls: "",
            cls1: "syno-ux-cb-checked",
            cls2: "syno-ux-grid-enable-column-checked",
          },
          {
            id: 9,
            title: "Synology Universal Search",
            cls: "",
            cls1: "syno-ux-cb-checked",
            cls2: "syno-ux-grid-enable-column-checked",
          },
          {
            id: 10,
            title: "Video Station",
            cls: "",
            cls1: "syno-ux-cb-checked",
            cls2: "syno-ux-grid-enable-column-checked",
          },
          {
            id: 11,
            title: "外部存储",
            cls: "",
            cls1: "syno-ux-cb-checked",
            cls2: "syno-ux-grid-enable-column-checked",
          },
          {
            id: 12,
            title: "套件中心",
            cls: "",
            cls1: "syno-ux-cb-checked",
            cls2: "syno-ux-grid-enable-column-checked",
          },
          {
            id: 13,
            title: "存储",
            cls: "",
            cls1: "syno-ux-cb-checked",
            cls2: "syno-ux-grid-enable-column-checked",
          },
          {
            id: 14,
            title: "安全顾问",
            cls: "",
            cls1: "syno-ux-cb-checked",
            cls2: "syno-ux-grid-enable-column-checked",
          },
          {
            id: 15,
            title: "日志中心",
            cls: "",
            cls1: "syno-ux-cb-checked",
            cls2: "syno-ux-grid-enable-column-checked",
          },
          {
            id: 16,
            title: "盗版检测",
            cls: "",
            cls1: "syno-ux-cb-checked",
            cls2: "syno-ux-grid-enable-column-checked",
          },
          {
            id: 17,
            title: "系统",
            cls: "",
            cls1: "syno-ux-cb-checked",
            cls2: "syno-ux-grid-enable-column-checked",
          },
        ],
      },
    };
  },
  created() {
    
  },
  methods: {
    // 打开本页面
    openNotifySetting() {
      if(this.notifySettingContant.display === "none"){
        this.notifySettingContant.display = "block";
        
        this.$nextTick(() => {
          let el = document.querySelector(".x-window.sds-notify-setting-dialog");
          let { elTop, elLeft } = windowResize(el);
          this.notifySettingContant.top = elTop;
          this.notifySettingContant.left = elLeft;
        });
        let left =
        (document.documentElement.clientWidth -
          parseInt(this.notifySettingContant.width.replace("px", ""))) /
        2;
        this.notifySettingContant.left = left + "px";
      }
      if (this.notifySettingContant.cls === "deactive-win") {
        this.notifySettingContant.zIndex = this.defaultZIndex + 10;
        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
      }
    },
    // 关闭本页面
    closeNotifySetting() {
      this.notifySettingContant.display = "none";
      this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
    },
    // 点击本页面
    clickNotifySetting() {
      if (this.notifySettingContant.zIndex < this.defaultZIndex) {
        this.notifySettingContant.zIndex = this.defaultZIndex + 10;
        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
      }
    },
    //  确认修改
    confirmChangeSetting() {
      this.closeNotifySetting();
    },
    // 点击列表每一行
    clickTr(tableBodyContantIndex) {
      this.notifySettingDetail.tableBodyContantList.forEach((item) => {
        item.cls = "";
      });
      this.notifySettingDetail.tableBodyContantList[tableBodyContantIndex].cls =
        "x-grid3-row-selected";
    },
    // 鼠标移入列表每一行
    mouseenterTr(tableBodyContantIndex) {
      if (
        !this.notifySettingDetail.tableBodyContantList[tableBodyContantIndex]
          .cls
      ) {
        this.notifySettingDetail.tableBodyContantList[
          tableBodyContantIndex
        ].cls = "x-grid3-row-over";
      }
    },
    // 鼠标移出列表每一行
    mouseleaveTr(tableBodyContantIndex) {
      if (
        this.notifySettingDetail.tableBodyContantList[
          tableBodyContantIndex
        ].cls.includes("x-grid3-row-over")
      ) {
        this.notifySettingDetail.tableBodyContantList[
          tableBodyContantIndex
        ].cls = "";
      }
    },
    // 改变排序方式
    changeSort() {
      if (this.notifySettingDetail.tableHeaderContant1.cls === "sort-asc") {
        this.notifySettingDetail.tableHeaderContant1.cls = "sort-desc";
      } else {
        this.notifySettingDetail.tableHeaderContant1.cls = "sort-asc";
      }
    },
    // 点击全选全不选
    clickCheckAll() {
      if (
        this.notifySettingDetail.tableHeaderContant2.cls ===
        "syno-ux-cb-checked"
      ) {
        this.notifySettingDetail.tableHeaderContant2.cls = "";
        this.notifySettingDetail.tableBodyContantList.forEach((item) => {
          item.cls2 = "syno-ux-grid-enable-column-unchecked";
        });
      } else {
        this.notifySettingDetail.tableHeaderContant2.cls = "syno-ux-cb-checked";
        this.notifySettingDetail.tableBodyContantList.forEach((item) => {
          item.cls2 = "syno-ux-grid-enable-column-checked";
        });
      }
    },
    // 点击每一行的复选框
    clickCheckItem(tableBodyContantIndex) {
      if (
        this.notifySettingDetail.tableBodyContantList[tableBodyContantIndex]
          .cls2 === "syno-ux-grid-enable-column-checked"
      ) {
        this.notifySettingDetail.tableBodyContantList[
          tableBodyContantIndex
        ].cls2 = "syno-ux-grid-enable-column-unchecked";
      } else {
        this.notifySettingDetail.tableBodyContantList[
          tableBodyContantIndex
        ].cls2 = "syno-ux-grid-enable-column-checked";
      }
      let countChecked = 0;
      this.notifySettingDetail.tableBodyContantList.forEach((item) => {
        if (item.cls2 === "syno-ux-grid-enable-column-checked") {
          countChecked++;
        }
      });
      if (!countChecked) {
        this.notifySettingDetail.tableHeaderContant2.cls = "";
      } else if (
        countChecked < this.notifySettingDetail.tableBodyContantList.length
      ) {
        this.notifySettingDetail.tableHeaderContant2.cls = "syno-ux-cb-grayed";
      } else {
        this.notifySettingDetail.tableHeaderContant2.cls = "syno-ux-cb-checked";
      }
    },
    // 鼠标按下该页面头部
    mousedownNotifyTrayPanelDetail(e) {
      // document.documentElement.click()
      this.windowFirstClick.layerX = e.layerX;
      this.windowFirstClick.screenX = document.documentElement.clientWidth;
      this.windowFirstClick.layerY = e.layerY;
      this.windowFirstClick.screenY = document.documentElement.clientHeight;
      document.addEventListener("mousemove", this.moveWindowPosition);
      document.addEventListener("mouseup", this.upWindowPosition);
    },
    // 移动弹出框窗口位置
    moveWindowPosition(e) {
      let window = document.querySelector(
        ".sds-notify-setting-dialog.sds-window-v5"
      );
      let obj = moveWindow(
        e,
        window,
        this.windowFirstClick.layerX,
        this.windowFirstClick.layerY,
        this.windowFirstClick.screenX,
        this.windowFirstClick.screenY
      );
      this.notifySettingContant.left = obj.moveX + "px";
      this.notifySettingContant.top = obj.moveY + "px";
      if (!window.className.includes(" x-panel-ghost")) {
        window.className = window.className + " x-panel-ghost";
      }
    },
    // 鼠标松开
    upWindowPosition(e) {
      let window = document.querySelector(
        ".sds-notify-setting-dialog.sds-window-v5"
      );
      if (window.className.includes(" x-panel-ghost")) {
        window.className = window.className.replace(" x-panel-ghost", "");
      }
      document.removeEventListener("mousemove", this.moveWindowPosition);
      document.removeEventListener("mouseup", this.upWindowPosition);
    },
  },
  components: {},
  name: "NotifySetting",
};
</script>