<template>
  <div
    class="
      v-layout
      sds-notify-showall-dialog
      layout-window-app
      v-window
    "
    :class="cls"
    style="position: absolute; left: 10px;"
    :style="{ display: display, width: width, height: height, top: top ,zIndex: zIndex}"
    @click="clickNotifyShowall"
  >
    <div class="v-window-header-wrapper draggable">
      <div class="app-icon"></div>
      <div class="v-window-header-text">
        <div class="v-window-header-title">消息</div>
      </div>

      <div class="window-header-tool-wrapper light">
        <div class="tool maximize" @click="maxWindow" v-if="!windowIsMax"></div>
        <div class="tool restore" @click="minWindow" v-else></div>
        <div class="tool close" @click="closeNotifyShowall"></div>
      </div>
    </div>
    <div class="v-window-body">
      <div class="v-trap-focus-indicator"></div>
      <div class="v-trap-focus-body">
        <div class="v-trap-focus-indicator"></div>
        <div
          class="v-layout show-all-panel layout-panel-content v-panel"
          style="--svc-layout-height: 100%"
        >
          <div class="v-spin-wrapper circle v-panel-wrapper">
            <div class="v-spin-wrapper-masking" style="display: none"></div>
            <div
              class="v-layout layout-body-wrapper layout-panel-body"
              style="
                --panel-in-tabs-padding-top: 8px;
                --svc-layout-padding: 16px 20px 6px 20px;
                --svc-layout-margin: 0 0 0 0;
              "
            >
              <div class="v-toolbar tbar-wrapper default-tbar">
                <button type="button" class="v-btn v-btn-grey" @click="reload">
                  <span> 刷新 </span>
                </button>
                <button type="button" class="v-btn v-btn-grey">
                  <span> 清除全部 </span>
                </button>
                <button type="button" class="v-btn v-btn-grey v-btn-disabled">
                  <span> 查看 </span>
                </button>
                <button
                  type="button"
                  class="i-filter v-btn v-btn-grey v-btn-dropdown"
                >
                  <div class="v-btn-dropdown-btn"></div>
                </button>
                <div class="right-wrapper"></div>
              </div>
              <div class="body-wrapper">
                <div class="all-notification-table-wrapper">
                  <div
                    class="
                      all-notification-table
                      v-spin-wrapper
                      circle
                      v-table-wrapper
                    "
                  >
                    <div
                      class="v-spin-wrapper-masking"
                      :style="{ display: maskDisplay }"
                    ></div>

                    <div class="v-table">
                      <div class="v-table-header">
                        <table>
                          <colgroup>
                            <col
                              name="51d8198d-fd9d-4986-9532-b8a0a3962c1f"
                              width="100"
                            />
                            <col
                              name="5b742784-0a51-436e-89d0-1a0b2f31fed0"
                              width="160"
                            />
                            <col
                              name="e034d4a6-59d9-4fda-b9d6-e7cbd2293991"
                              width="380"
                            />
                            <col
                              name="3b0b169b-2410-4f64-b3f9-790f94f9c6db"
                              width="160"
                            />
                          </colgroup>
                          <thead class="v-table-thead">
                            <tr class="row">
                              <th
                                colspan="1"
                                rowspan="1"
                                class="cell-first"
                                :class="thContant.cls"
                                v-for="(thContant,thContantIndex) in thContantArray"
                                :key="thContant.id"
                                @click.stop="sort(thContantIndex)"
                              >
                                <div class="inner-cell">
                                  <div class="head-cell cell">
                                    <span class="cell-title">{{thContant.text}}</span>
                                    <span
                                      class="v-table-column-sorter"
                                      :class="thContant.cls1"
                                    ></span>
                                  </div>
                                </div>
                              </th>
                              <!-- <th
                                colspan="1"
                                rowspan="1"
                                class=""
                                @click.stop="sort"
                              >
                                <div class="inner-cell">
                                  <div class="head-cell cell">
                                    <span class="cell-title">类别</span>
                                    <span
                                      class="v-table-column-sorter down"
                                    ></span>
                                  </div>
                                </div>
                              </th>
                              <th
                                colspan="1"
                                rowspan="1"
                                class=""
                                @click.stop="sort"
                              >
                                <div class="inner-cell">
                                  <div class="head-cell cell">
                                    <span class="cell-title">主题</span>
                                    <span
                                      class="v-table-column-sorter down"
                                    ></span>
                                  </div>
                                </div>
                              </th>
                              <th
                                colspan="1"
                                rowspan="1"
                                class="last-th-cell"
                                @click.stop="sort"
                              >
                                <div class="inner-cell">
                                  <div class="head-cell cell">
                                    <span class="cell-title">时间</span>
                                    <span
                                      class="v-table-column-sorter down"
                                    ></span>
                                  </div>
                                </div>
                              </th> -->
                            </tr>
                          </thead>
                        </table>
                        <div class="hd-menu-btn-wrapper"></div>
                      </div>
                      <div class="v-ps ps">
                        <div class="v-table-content">
                          <div class="v-table-body">
                            <table role="none">
                              <colgroup>
                                <col width="100" />
                                <col width="160" />
                                <col width="380" />
                                <col width="160" />
                              </colgroup>
                              <tbody role="none" class="v-table-tbody">
                                <tr
                                  class="row"
                                  @click.stop="clickTr(detailMessageIndex)"
                                  @mouseenter="mouseenterTr(detailMessageIndex)"
                                  @mouseleave="mouseleaveTr(detailMessageIndex)"
                                  v-for="(
                                    detailMessage, detailMessageIndex
                                  ) in notifyShowallDetail.detailMessageList"
                                  :key="detailMessage.id"
                                  :class="detailMessage.cls1"
                                >
                                  <td class="cell-first">
                                    <div class="inner-cell">
                                      <div class="cell content-cell">
                                        <div class="level-info">信息</div>
                                      </div>
                                    </div>
                                  </td>
                                  <td class="">
                                    <div class="inner-cell">
                                      <div class="cell content-cell">
                                        <div>{{ detailMessage.title }}</div>
                                      </div>
                                    </div>
                                  </td>
                                  <td class="">
                                    <div class="inner-cell">
                                      <div class="cell content-cell">
                                        <div>
                                          {{ detailMessage.showMessage }}
                                        </div>
                                      </div>
                                    </div>
                                  </td>
                                  <td class="last-td-cell">
                                    <div class="inner-cell">
                                      <div class="cell content-cell">
                                        <div>{{ detailMessage.time1 }}</div>
                                      </div>
                                    </div>
                                  </td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                        <div class="ps__rail-x" style="left: 0px; bottom: 0px">
                          <div
                            class="ps__thumb-x"
                            style="left: 0px; width: 0px"
                          ></div>
                        </div>
                        <div class="ps__rail-y" style="top: 0px; right: 0px">
                          <div
                            class="ps__thumb-y"
                            style="top: 0px; height: 0px"
                          ></div>
                        </div>
                      </div>
                      <div
                        class="
                          col-resizable-indicator
                          col-resizable-indicator--hidden
                        "
                      ></div>
                      <div
                        class="
                          col-resizable-indicator
                          col-resizable-indicator--hidden
                        "
                      ></div>
                      <div
                        class="
                          col-resizable-indicator
                          col-resizable-indicator--hidden
                        "
                      ></div>
                    </div>
                    <div class="v-pagination">
                      <div class="v-pagination-left">
                        <ul class="left-paging">
                          <li class="v-pagination-first disabled"></li>
                          <li class="v-pagination-prev disabled"></li>
                          <li
                            class="
                              v-pagination-item
                              v-pagination-item-1
                              v-pagination-item-active
                            "
                            v-if="notifyShowallDetail.detailMessageList.length"
                          >
                            1
                          </li>
                          <li class="v-pagination-next disabled"></li>
                          <li class="v-pagination-last disabled"></li>
                        </ul>
                      </div>
                      <div class="v-pagination-right">
                        <div class="v-pagination-total">
                          {{ notifyShowallDetail.detailMessageList.length }}
                          个项目
                        </div>
                        <div class="v-pagination-refresh" @click="reload"></div>
                      </div>
                    </div>
                    <div
                      class="v-spin"
                      :style="{ display: loading ? 'block' : 'none' }"
                    >
                      <div class="v-spin-text has-icon">加载中...</div>
                      <div class="v-spin-icon">
                        <i>
                          <i></i>
                        </i>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="
                v-layout
                layout-panel-fbar
                fbar-wrapper fbar-wrapper--fluid
              "
            >
              <div class="pull-right">
                <button
                  type="button"
                  class="v-btn v-btn-footbar v-btn-grey"
                  @click="closeNotifyShowall"
                >
                  <span> 关闭 </span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div tabindex="0" class="v-trap-focus-indicator"></div>
    </div>
    <div class="v-window-resizable">
      <div class="handler v-window-resizable-nw"></div>
      <div class="handler v-window-resizable-ne"></div>
      <div class="handler v-window-resizable-sw"></div>
      <div class="handler v-window-resizable-se"></div>
      <div class="handler v-window-resizable-n"></div>
      <div class="handler v-window-resizable-s"></div>
      <div class="handler v-window-resizable-w"></div>
      <div class="handler v-window-resizable-e"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["defaultZIndex"],
  data() {
    return {
      display: "none",
      loading: false,
      maskDisplay: "none",
      width: "840px",
      height: "480px",
      top: "10px",
      zIndex: 9050,
      cls:'active-win',
      thContantArray: [
        {
          id: 0,
          text:'层级',
          cls:'',
          cls1:'down',
        },
        {
          id: 1,
          text:'类别',
          cls:'',
          cls1:'down',
        },
        {
          id: 1,
          text:'主题',
          cls:'',
          cls1:'down',
        },
        {
          id: 1,
          text:'时间',
          cls:'',
          cls1:'down',
        },
      ],
      notifyShowallDetail: {
        detailMessageList: [],
      },
      windowIsMax: false
    };
  },
  mounted() {
    this.$bus.on("openNotifyShowall", this.openNotifyShowall);
    this.$bus.on("closeNotifyShowall", this.closeNotifyShowall);
  },
  methods: {
    // 打开本页面
    openNotifyShowall(detailMessageList) {
      this.display = "block";
      let detailMessageList1 = JSON.parse(JSON.stringify(detailMessageList));
      detailMessageList1.forEach((item) => {
        item.cls1 = "";
      });
      this.notifyShowallDetail.detailMessageList = detailMessageList1;
      this.clickNotifyShowall()
    },
    // 关闭本页面
    closeNotifyShowall() {
      this.display = "none";
      this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
    },
    // 点击本页面
    clickNotifyShowall(){
      if(this.zIndex < this.defaultZIndex){
        this.zIndex = this.defaultZIndex + 10;
        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
      }
    },
    // 重新加载数据
    reload() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 1000);
    },
    // 点击每一行
    clickTr(detailMessageIndex) {
      this.notifyShowallDetail.detailMessageList.forEach((item) => {
        item.cls1 = "";
      });
      this.notifyShowallDetail.detailMessageList[detailMessageIndex].cls1 =
        "row-selected";
    },
    // 鼠标移入表格每一行
    mouseenterTr(detailMessageIndex) {
      if (
        !this.notifyShowallDetail.detailMessageList[detailMessageIndex].cls1
      ) {
        this.notifyShowallDetail.detailMessageList[detailMessageIndex].cls1 =
          "row-hover";
      }
    },
    // 鼠标移出表格每一行
    mouseleaveTr(detailMessageIndex) {
      if (
        this.notifyShowallDetail.detailMessageList[
          detailMessageIndex
        ].cls1.includes("row-hover")
      ) {
        this.notifyShowallDetail.detailMessageList[detailMessageIndex].cls1 =
          "";
      }
    },
    // 排序
    sort(thContantIndex) {
      this.thContantArray.forEach(item=>{
        item.cls = ''
      })
      console.log(thContantIndex);
      if(this.thContantArray[thContantIndex].cls === ''){
        this.thContantArray[thContantIndex].cls = 'sorting'
      }
      console.log(this.thContantArray[thContantIndex].cls1)
      if(this.thContantArray[thContantIndex].cls1 === 'down'){
        this.thContantArray[thContantIndex].cls1 = 'up'
      }else{
        this.thContantArray[thContantIndex].cls1 = 'down'
      }
      this.maskDisplay = "block";
      this.loading = true;

      setTimeout(() => {
        this.maskDisplay = "none";
        this.loading = false;
      }, 1000);
    },
    // 页面最大化
    maxWindow() {
      this.top = "40px";
      this.width = "100%";
      this.height = "calc(100vh - 40px)";
      this.windowIsMax = true
    },
    // 页面最小化
    minWindow(){
      this.top = "10px";
      this.width = "840px";
      this.height = "480px";
      this.windowIsMax = false
      this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
    }
  },
  watch:{
    defaultZIndex(newVal){
      if(this.zIndex < newVal){
        this.cls = 'deactive-win'
      }else{
        this.cls = 'active-win'
      }
    }
  },
  components: {},
  name: "NotifyShowall",
};
</script>

<style lang="css" scoped>
.v-window .v-window-body {
  height: calc(100% - 40px);
}
</style>