<template>
  <div
    class="
      v-layout
      sds-notify-detail-dialog
      layout-window-app
      v-window
    "
    style="
      position: absolute;
      width: 680px;
      height: 420px;
      top: 10px;
      left: 10px;
    "
    :style="{ display: display, zIndex: zIndex }"
    :class="cls"
    @click="openNotifyDetail"
  >
    <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 close" @click.stop="closeNotifyDetail"></div>
      </div>
    </div>
    <div
      class="v-window-body"
      v-if="notifyTrayPanelDetail.detailMessage.length"
    >
      <div class="v-trap-focus-indicator"></div>
      <div class="v-trap-focus-body">
        <div role="application" class="v-trap-focus-indicator"></div>
        <div
          class="v-layout detail-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: 0;
                --svc-layout-padding: 16px 20px 6px 20px;
                --svc-layout-margin: 0 0 0 0;
              "
            >
              <div class="body-wrapper">
                <div class="v-ps ps">
                  <form
                    class="v-layout layout-form v-form v-form-horizontal"
                    style=""
                  >
                    <div class="v-form-item">
                      <div class="v-form-item-label">
                        <label for="">类别：</label>
                      </div>
                      <div class="v-form-item-input">
                        <div class="v-form-item-control v-form-displayfield">
                          <div>
                            {{ notifyTrayPanelDetail.detailMessage[0].title }}
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="v-form-item">
                      <div class="v-form-item-label">
                        <label for="">主题：</label>
                      </div>
                      <div class="v-form-item-input">
                        <div class="v-form-item-control v-form-displayfield">
                          <div>
                            <div
                              v-html="
                                notifyTrayPanelDetail.detailMessage[0].text
                              "
                            ></div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="v-form-item">
                      <div class="v-form-item-label">
                        <label for="">时间：</label>
                      </div>
                      <div class="v-form-item-input">
                        <div class="v-form-item-control v-form-displayfield">
                          <div>
                            {{ notifyTrayPanelDetail.detailMessage[0].time1 }}
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="v-form-item">
                      <div class="v-form-item-input">
                        <div class="v-form-item-control v-form-displayfield">
                          <div>
                            <div
                              class="detail-mail-content"
                              v-html="
                                notifyTrayPanelDetail.detailMessage[0].message
                              "
                            ></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </form>
                  <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>
            </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.stop="closeNotifyDetail"
                >
                  <span> 关闭 </span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="v-trap-focus-indicator"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["defaultZIndex"],
  mounted() {
    this.$bus.on("openNotifyDetail", this.openNotifyDetail);
    this.$bus.on("closeNotifyDetail", this.closeNotifyDetail);
  },
  data() {
    return {
      display: "none",
      notifyTrayPanelDetail: {
        detailMessage: [],
      },
      zIndex: 9050,
      cls:'active-win',
    };
  },
  components: {},
  methods: {
    // 打开/点击本页面
    openNotifyDetail(detailMessage) {
      if(this.display === 'none'){
        this.display = "block";
      }
      if(this.zIndex < this.defaultZIndex){
        this.zIndex = this.defaultZIndex + 10;
        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
      }
      if(detailMessage.title){
        this.notifyTrayPanelDetail.detailMessage[0] = detailMessage;
      }
    },
    // 关闭本页面
    closeNotifyDetail() {
      console.log(111)
      this.display = "none";
    },
  },
  watch:{
    defaultZIndex(newVal){
      if(this.zIndex < newVal){
        this.cls = 'deactive-win'
      }else{
        this.cls = 'active-win'
      }
    }
  },
};
</script>
<style lang="css" scoped>
.v-window .v-window-body {
  height: 380px;
}
</style>