<template>
  <!-- 清除全部弹出框 -->
  <div
    class="x-window x-window-dlg sds-window-v5 active-win"
    style="
      position: absolute;
      z-index: 11004;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 480px;
    "
    :style="{display: display}"
    :class="confirmDeleteDetail ? confirmDeleteDetail.cls : ''"
  >
    <div
      class="x-dlg-focus"
    ></div>
    <div class="x-window-tl">
      <div class="x-window-tr"><div class="x-window-tc"></div></div>
    </div>
    <div class="x-window-bwrap" v-if="confirmDeleteDetail">
      <div class="x-window-ml">
        <div class="x-window-mr">
          <div class="x-window-mc">
            <div
              class="x-window-body"
              style="padding: 24px 30px 0px; width: 420px; height: auto"
            >
              <div class="x-dlg-icon">
                <div class="ext-mb-content">
                  <div
                    class="ext-mb-title"
                    style="display: none"
                  ></div>
                  <span class="ext-mb-text"
                    >{{confirmDeleteDetail.text}}</span
                  ><br class="ext-mb-br" />
                  <div class="ext-mb-fix-cursor"></div>
                </div>
                <div
                  class="ext-mb-grid"
                  style="display: none"
                ></div>
                <div
                  class="x-progress-wrap syno-mb-progress x-hide-display"
                >
                  <div class="x-progress-inner">
                    <div
                      class="x-progress-bar"
                      style="height: 6px; width: 0px"
                    >
                      <div
                        class="x-progress-text"
                        style="z-index: 99; width: 0px"
                      >
                        <div style="width: 6px; height: 6px">
                          &nbsp;
                        </div>
                      </div>
                    </div>
                    <div
                      class="x-progress-text x-progress-text-back"
                    >
                      <div style="width: 6px; height: 6px">
                        &nbsp;
                      </div>
                    </div>
                  </div>
                </div>
                <div class="x-clear"></div>
                <span class="syno-mb-progress-status"></span>
                <div class="syno-mb-progress-info"></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: 428px"
            >
              <div
                class="x-panel-fbar x-small-editor 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">
                              <td
                                class="x-toolbar-cell x-hide-display"
                              >
                                <span
                                  cellspacing="0"
                                  class="
                                    x-btn
                                    syno-ux-button syno-ux-button-grey
                                    x-btn-noicon
                                  "
                                  style="margin-left: 0px"
                                  ><em class="x-unselectable" unselectable="on"
                                    ><button
                                      type="button"
                                      class="x-btn-text"
                                    ></button></em
                                ></span>
                              </td>
                            </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 x-hide-display"
                                      >
                                        <span
                                          cellspacing="0"
                                          class="
                                            x-btn
                                            syno-ux-button syno-ux-button-grey
                                            x-btn-noicon
                                          "
                                          style="width: auto; margin-left: 0px"
                                          ><em
                                            class="x-unselectable"
                                            ><button
                                              type="button"
                                              class="x-btn-text"
                                            >
                                              否
                                            </button></em
                                          ></span
                                        >
                                      </td>
                                      <td
                                        class="x-toolbar-cell x-hide-display"
                                      >
                                        <span
                                          cellspacing="0"
                                          class="
                                            x-btn
                                            syno-ux-button syno-ux-button-grey
                                            x-btn-noicon
                                          "
                                          style="width: auto; margin-left: 0px"
                                          ><em
                                            class="x-unselectable"
                                            unselectable="on"
                                            ><button
                                              type="button"
                                              class="x-btn-text"
                                            >
                                              取消
                                            </button></em
                                          ></span
                                        >
                                      </td>
                                      <td
                                        class="x-toolbar-cell"
                                      >
                                        <span
                                          cellspacing="0"
                                          class="
                                            x-btn
                                            syno-ux-button
                                            x-btn-noicon
                                            syno-ux-button-grey
                                          "
                                          style="width: auto; margin-left: 0px"
                                          ><em
                                            class="x-unselectable"
                                            ><button
                                              type="button"
                                              class="x-btn-text"
                                              @click="cancleClear"
                                            >
                                              取消
                                            </button></em
                                          ></span
                                        >
                                      </td>
                                      <td
                                        class="x-toolbar-cell x-hide-display"
                                      >
                                        <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"
                                            >
                                              确定
                                            </button></em
                                          ></span
                                        >
                                      </td>
                                      <td
                                        class="x-toolbar-cell"
                                      >
                                        <span
                                          cellspacing="0"
                                          class="
                                            x-btn
                                            syno-ux-button
                                            x-btn-noicon
                                            syno-ux-button-red
                                            syno-ux-button-blue
                                          "
                                          style="width: auto; margin-left: 0px"
                                          ><em
                                            class="x-unselectable"
                                            ><button
                                              type="button"
                                              class="x-btn-text"
                                              @click="confirmClear"
                                            >
                                              清除全部
                                            </button></em
                                          ></span
                                        >
                                      </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>
</template>

<script>
export default {
  data() {
    return {
      display:'none', 
      confirmDeleteDetail:''
    };
  },
  mounted(){
    this.$bus.on("openDeleteNotifyMessage",this.openDeleteNotifyMessage)
  },
  methods:{
    // 打开本页面
    openDeleteNotifyMessage(obj){
      this.display = 'block'
      this.confirmDeleteDetail = obj
    },
    // 关闭本页面
    closeDeleteNotifyMessage(){
      this.display = 'none'
      this.confirmDeleteDetail = ''
    },
    // 点击取消
    cancleClear(){
      this.closeDeleteNotifyMessage()
      this.$bus.emit("closeMask")
    },
    // 清除 
    confirmClear(){
      this.closeDeleteNotifyMessage()
      this.$bus.emit("closeMask")
      this.$bus.emit("clearAllNotifyMessage")
      this.$bus.emit("closeNotifyDetail")
      this.$bus.emit("closeNotifyShowall");
    }
  },
  components: {},
  name: "DeleteNotifyMessage",
};
</script>