<template>
  <!-- 菜单弹窗 -->
  <div v-if="resizablePinnedDetail.detailMessageList.length" :style="{display:display}">
    <div
      class="x-window synopkg-window sds-window-v5 x-resizable-pinned"
      style="
        position: absolute;
        visibility: visible;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
      "
      :style="{
        width: detailMessage.width,
        height: detailMessage.height,
        minHeight: detailMessage.minHeight,
        display: detailMessage.display,
        zIndex: detailMessage.zIndex,
      }"
      :class="detailMessage.cls"
      v-for="detailMessage in resizablePinnedDetail.detailMessageList"
      :key="detailMessage.id"
      @click.capture="changeDialogMenuWindow(detailMessage.id)"
    >
      <div class="x-dlg-focus tjCenter" tabindex="0" role="application"></div>
      <div class="x-window-tl" @click.capture="moveWindowPosition">
        <div class="x-window-tr">
          <div class="x-window-tc">
            <div
              class="x-window-header x-panel-icon x-window-draggable"
              :style="{ backgroundImage: `url(${detailMessage.titleImgUrl})` }"
            >
              <div class="x-window-toolCt" role="listbox">
                <div
                  class="x-tool x-tool-close"
                  role="option"
                  @click.capture="closeWindow(detailMessage.id)"
                >
                  &nbsp;
                </div>
                <div
                  class="x-tool x-tool-restore"
                  role="option"
                  :style="{ display: `${detailMessage.iconRestore}` }"
                  @click.capture="restoreMizeWindow(detailMessage.id)"
                >
                  &nbsp;
                </div>
                <div
                  class="x-tool x-tool-maximize"
                  role="option"
                  @click.capture="maxiSizeWindow(detailMessage.id)"
                  :style="{ display: `${detailMessage.iconMaximize}` }"
                >
                  &nbsp;
                </div>
                <div
                  class="x-tool x-tool-minimize"
                  role="option"
                  @click.capture="miniMizeWindow(detailMessage.id)"
                >
                  &nbsp;
                </div>
                <div
                  class="x-tool x-tool-help"
                  role="option"
                  @click.capture="openDSMWindow()"
                >
                  &nbsp;
                </div>
              </div>
              <span class="x-window-header-text">{{
                detailMessage.title
              }}</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-tbar" style="width: 100%">
                <div
                  class="
                    x-toolbar x-small-editor
                    synopkg-toolbar
                    syno-ux-toolbar
                    x-toolbar-layout-ct
                  "
                  style="height: 40px; width: 1230px"
                >
                  <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"><span cellspacing="0"
                                                                        class="x-btn synopkg-toolbar-back-btn synopkg-icon-btn syno-ux-button syno-ux-button-default x-btn-icon x-item-disabled"
                                                                        style="margin-left: 0px; height: 28px;"><em
                                                                            class=" x-unselectable"><button
                                                                                type="button"
                                                                                class=" x-btn-text synopkg-toolbar-back-icon synopkg-btn-icon"
                                                                                ></button></em></span>
                                                                </td>
                                                                <td class="x-toolbar-cell"><span cellspacing="0"
                                                                        class="x-btn synopkg-toolbar-next-btn synopkg-icon-btn syno-ux-button syno-ux-button-default x-btn-icon x-item-disabled"
                                                                        style="margin-left: 0px; height: 28px;"><em
                                                                            class=" x-unselectable"><button
                                                                                type="button"
                                                                                class=" x-btn-text synopkg-toolbar-next-icon synopkg-btn-icon"
                                                                                ></button></em></span>
                                                                </td>
                                                                <td class="x-toolbar-cell"><span cellspacing="0"
                                                                        class="x-btn syno-ux-button syno-ux-button-default x-btn-icon"
                                                                        style="margin-left: 0px; height: 26px;"><em
                                                                            class=" x-unselectable"><button
                                                                                type="button"
                                                                                class=" x-btn-text synopkg-toolbar-refresh-icon synopkg-btn-icon"
                                                                                ></button></em></span>
                                                                </td>
                                                                <td class="x-toolbar-cell syno-ux-textfilter">
                                                                    <div class="x-form-field-wrap x-form-field-trigger-wrap"
                                                                        style="width: 100%;">
                                                                        <input type="text" size="16"
                                                                            autocomplete="off"
                                                                            class="x-form-text x-form-field syno-ux-textfilter-text x-form-empty-field"
                                                                            placeholder="搜索"
                                                                            style="width: calc((100% - 30px) - 3px);"><button
                                                                            type="button"
                                                                            class="x-form-trigger syno-ux-textfilter-trigger"
                                                                            style="visibility: hidden;"></button>
                                                                    </div>
                                                                    <div role="presentation"
                                                                        class="x-form-hidden-error-msg"></div>
                                                                </td>
                                                                <td class="x-toolbar-cell">
                                                                    <div class="x-form-display-field"
                                                                        style="width: 16px;">
                                                                    </div>
                                                                    <div role="presentation"
                                                                        class="x-form-hidden-error-msg"></div>
                                                                </td>
                                                                <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; height: 26px;"><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 syno-ux-button-default x-btn-noicon"
                                                                        style="width: auto; margin-left: 0px; height: 26px;"><em
                                                                            class=" x-unselectable"><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">
                                                                            </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>
              <div
                class="x-window-body x-border-layout-ct"
                style="width: 100%; height: 484px"
              ></div>
            </div>
          </div>
        </div>
        <div class="x-window-bl x-panel-nofooter">
          <div class="x-window-br">
            <div class="x-window-bc"></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>
export default {
  props: ["defaultZIndex", "detailMessageList"],
  data() {
    return {
      display:'block',
      resizablePinnedDetail: {
        detailMessageList: [],
      },
      lastCheckIndex: -1,
      openWindowNum: 0,
      detailMessageWidthList: [],
      // 已经被打开的弹出窗口
      openedmenuList: [],
    };
  },
  mounted() {
    this.$bus.on("showDialogWindow", this.showDialogWindow);
    this.$bus.on("hiddenDialogWindow", this.hiddenDialogWindow);
    this.$bus.on("clickAppViewItem", this.clickAppViewItem);
    this.$bus.on("openDSMWindow", this.openDSMWindow);
    this.$bus.on("changeDialogMenuWindow", this.changeDialogMenuWindow);
    this.$bus.on("menuItemChanged", this.menuItemChanged);
    this.$bus.on("clickMenuItem", this.clickMenuItem);
    this.$bus.on('hiddenOrShowOtherWindow',this.hiddenDialogWindow)
    // this.$bus.on("fixWindowZIndexchange", this.fixWindowZIndexchange);
    this.resizablePinnedDetail.detailMessageList = JSON.parse(
      JSON.stringify(this.detailMessageList)
    );
    JSON.parse(JSON.stringify(this.detailMessageList)).forEach(
      (item, index) => {
        this.detailMessageWidthList[index] = item.width;
      }
    );
  },
  methods: {
    // 显示本页面
    showDialogWindow(){
      if(this.display === 'none'){
        this.display = 'block'
      }
    },
    // 隐藏本页面
    hiddenDialogWindow(){
      if(this.display === 'block'){
        this.display = 'none'
      }
    },
    // 点击大菜单图标
    clickAppViewItem(id) {
      this.showDialogWindow()
      this.changeDialogMenuWindow(id)
    },
    // 点击小菜单图标
    clickMenuItem(id) {
      let detailMessageIndex =
        this.resizablePinnedDetail.detailMessageList.findIndex((item) => {
          return item.id === id;
        });
      if (detailMessageIndex != -1) {
        this.openDialogWindow(detailMessageIndex);
      }
    },
    // 打开弹出窗口
    openDialogWindow(detailMessageIndex) {
      this.resizablePinnedDetail.detailMessageList[detailMessageIndex].display =
        "block";
      if (
        (!detailMessageIndex && detailMessageIndex != 0) ||
        detailMessageIndex == -1 ||
        this.resizablePinnedDetail.detailMessageList[detailMessageIndex].cls ===
          "active-win"
      ) {
        return;
      }
      // this.resizablePinnedDetail.detailMessageList[detailMessageIndex].cls =
      //   "active-win";
      this.resizablePinnedDetail.detailMessageList.forEach((item) => {
        item.cls = "deactive-win";
      });
      this.resizablePinnedDetail.detailMessageList[detailMessageIndex].cls =
        "active-win";
      let defaultZIndex = this.defaultZIndex + 10;
      this.resizablePinnedDetail.detailMessageList[detailMessageIndex].zIndex =
        defaultZIndex;
      this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
      this.resizablePinnedDetail.detailMessageList[detailMessageIndex].zIndex =
        defaultZIndex;
      this.lastCheckIndex = detailMessageIndex;
    },
    // 切换弹出的menu窗口
    changeDialogMenuWindow(id) {
      let menuIndex = this.resizablePinnedDetail.detailMessageList.findIndex(
        (item) => {
          return item.id === id;
        }
      );
      if ((menuIndex || menuIndex == 0) && menuIndex != -1) {
        this.openDialogWindow(menuIndex);
      }
      // this.$bus.emit('dialogWindowZIndexIsMax',true)  
    },
    // 打开DSM 说明
    openDSMWindow() {
      let detailMessageIndex =
        this.resizablePinnedDetail.detailMessageList.findIndex((item) => {
          return item.id === 1;
        });
      if (detailMessageIndex || detailMessageIndex === 0 && detailMessageIndex !== -1) {
        this.openDialogWindow(detailMessageIndex);
      }
      let obj = {
        imgUrl:
          this.resizablePinnedDetail.detailMessageList[detailMessageIndex]
            .titleImgUrl,
        spacialCls:
          this.resizablePinnedDetail.detailMessageList[detailMessageIndex]
            .spacialCls,
        title:
          this.resizablePinnedDetail.detailMessageList[detailMessageIndex]
            .title,
        zIndex:
          this.resizablePinnedDetail.detailMessageList[detailMessageIndex]
            .zIndex,
        id:this.resizablePinnedDetail.detailMessageList[detailMessageIndex]
            .id,
      };
      this.$bus.emit("changeDialogWindow", obj);
    },
    // 最小化弹出框口
    miniMizeWindow(id) {
      let detailMessageIndex = this.resizablePinnedDetail.detailMessageList.findIndex(item=>{
        return item.id === id
      })
      this.resizablePinnedDetail.detailMessageList[detailMessageIndex].display =
        "none";
      // let detailMessageList =
      //   this.resizablePinnedDetail.detailMessageList.filter((item) => {
      //     return item.display == "block";
      //   });
      // if (detailMessageList.length) {
      //   detailMessageList = JSON.parse(
      //     JSON.stringify(this.arraySort(detailMessageList, "zIndex"))
      //   );
        this.resizablePinnedDetail.detailMessageList[
          detailMessageIndex
        ].zIndex = this.defaultZIndex - 10;
        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);

      // }
      this.countOpenWindowNum();
    },
    //最大化弹出窗口
    maxiSizeWindow(id) {
      let detailMessageIndex = this.resizablePinnedDetail.detailMessageList.findIndex(item=>{
        return item.id === id
      })
      this.resizablePinnedDetail.detailMessageList[detailMessageIndex].width =
        "100%";
      this.resizablePinnedDetail.detailMessageList[
        detailMessageIndex
      ].iconRestore = "block";
      this.resizablePinnedDetail.detailMessageList[
        detailMessageIndex
      ].iconMaximize = "none";
      if (detailMessageIndex || detailMessageIndex === 0 && detailMessageIndex !== -1) {
        this.openDialogWindow(detailMessageIndex);
      }
    },
    //恢复弹出窗口宽度
    restoreMizeWindow(id) {
      let detailMessageIndex = this.resizablePinnedDetail.detailMessageList.findIndex(item=>{
        return item.id === id
      })
      this.resizablePinnedDetail.detailMessageList[detailMessageIndex].width =
        this.detailMessageWidthList[detailMessageIndex];
      this.resizablePinnedDetail.detailMessageList[
        detailMessageIndex
      ].iconRestore = "none";
      this.resizablePinnedDetail.detailMessageList[
        detailMessageIndex
      ].iconMaximize = "block";
      // this.countOpenWindowNum();
      // if (detailMessageIndex || detailMessageIndex === 0 && detailMessageIndex !== -1) {
      //   this.openDialogWindow(detailMessageIndex);
      // }
    },
    //关闭弹出窗口
    closeWindow(id) {
      let detailMessageIndex = this.resizablePinnedDetail.detailMessageList.findIndex(item=>{
        return item.id === id
      })
      this.resizablePinnedDetail.detailMessageList[detailMessageIndex].display =
        "none";
      this.$bus.emit("closeDialogWindow", id);
      // let detailMessageList =
      //   this.resizablePinnedDetail.detailMessageList.filter((item) => {
      //     return item.display === "block";
      //   });
      // if (detailMessageList.length) {
      //   detailMessageList = JSON.parse(
      //     JSON.stringify(this.arraySort(detailMessageList, "zIndex"))
      //   );
        this.resizablePinnedDetail.detailMessageList[
          detailMessageIndex
        ].zIndex = this.defaultZIndex - 10;
        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
      // }
      this.countOpenWindowNum();
    },
    //统计打开的弹出窗口
    countOpenWindowNum() {
      this.openWindowNum = 0;
      this.resizablePinnedDetail.detailMessageList.forEach((item) => {
        if (item.display === "block") {
          this.openWindowNum++;
        }
      });
      if (! this.openWindowNum) {
        this.resizablePinnedDetail.detailMessageList.forEach((item) => {
          item.zIndex = 9050;
          item.cls = 'deactive-win'
        });
        // this.$bus.emit("changeDefaultZIndex", 9050);
      }
    },
    // 按z-index 给menuItem排序
    arraySort(array, key) {
      return array.sort(function (a, b) {
        var x = a[key]; //如果要从大到小,把x,y互换就好
        var y = b[key];
        return x < y ? -1 : x > y ? 1 : 0;
      });
    },
    // 当固定窗口的zIndex改变时
    fixWindowZIndexchange(){},
    // 移动弹出框窗口位置
    moveWindowPosition(e) {},
    // 小图标被改变了
    menuItemChanged(menuList) {
      this.openedmenuList = menuList;
    },
  },

  watch: {
    
    defaultZIndex() {
      // this.dialogZIndexMaxIndex =
      //   this.resizablePinnedDetail.detailMessageList.findIndex((item) => {
      //     return item.zIndex >= this.defaultZIndex && item.display === "block";
      //   });
      // if (
      //   this.dialogZIndexMaxIndex != -1 &&
      //   this.dialogZIndexMaxIndex != undefined
      // ) {
      //   let obj = {
      //     imgUrl:
      //       this.resizablePinnedDetail.detailMessageList[
      //         this.dialogZIndexMaxIndex
      //       ].titleImgUrl,
      //     zIndex:
      //       this.resizablePinnedDetail.detailMessageList[
      //         this.dialogZIndexMaxIndex
      //       ].zIndex,
      //     spacialCls:
      //       this.resizablePinnedDetail.detailMessageList[
      //         this.dialogZIndexMaxIndex
      //       ].spacialCls,
      //     title:
      //       this.resizablePinnedDetail.detailMessageList[
      //         this.dialogZIndexMaxIndex
      //       ].title,
      //     id:
      //       this.resizablePinnedDetail.detailMessageList[
      //         this.dialogZIndexMaxIndex
      //       ].id,
      //   };
      //   this.$bus.emit("changeDialogWindow", obj);
      // }
    },
    detailMessageList(){
     this.resizablePinnedDetail.detailMessageList =this.detailMessageList
    }
  },
  beforeDestroy() {
    this.$bus.off("clickShortcutItem", this.clickShortcutItem);
    this.$bus.off("clickMenuItem", this.clickMenuItem);
  },
  components: {},
  name: "AppViewItem",
};
</script>
<style scoped lang="css">
@media screen and (max-height: 600px) {
  .x-window.synopkg-window {
    top: 0 !important;
    transform: translate(-50%, 0px) !important;
  }
}
</style>  
