<template>
  <div
    class="dialog"
    :style="baseDialogStyle"
    :id="id"
    v-show="isShow"
    ref="baseDialog"
  >
    <div class="dialog_one">
      <div class="dialog_header">
        <div class="dialog_title">
          <span>{{ alarm_title }}</span>
        </div>
        <img src="./img/dialog_close.svg" @click.stop="close" />
      </div>
    </div>

    <div class="dialog_two">
      <div class="dialog_body">
        <div class="top_decorate">
          <div class="top_decorate_one"></div>
          <div class="top_decorate_two"></div>
          <div class="top_decorate_three"></div>
        </div>
        <div class="left_decorate"></div>
        <div class="right_decorate"></div>
        <slot name="dialog_body"></slot>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "TslBaseDialog",
  props: {
    id: {
      type: String,
      default: "tsl-base-dilog-1",
    },
    dialogStyle: {
      type: Object,
      default: () => {
        return {
          width: "200px",
          height: "200px",
        };
      },
    },
    alarm_title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      isShow: true,
      baseDialogStyle: {
        width: "200px",
        height: "200px",
        left: 0,
        top: 0,
        zIndex: 99,
      },
    };
  },
  mounted() {
    this.center();
    window.addEventListener("resize", this.center);
  },
  methods: {
    getStyleLength(style) {
      if (style == "" || style == null) {
        return 0;
      }
      return Number(
        style
          .replace("px", "")
          .replace("rem", "")
          .replace("em", "")
      );
    },
    center() {
      let wh = document.documentElement.clientHeight;
      let ww = document.documentElement.clientWidth;
      ww = ww || this.$parent.$parent.$el.clientWidth;
      wh = wh || this.$parent.$parent.$el.clientHeight;
      this.baseDialogStyle.width = this.dialogStyle.width;
      this.baseDialogStyle.height = this.dialogStyle.height;
      this.baseDialogStyle.left =
        (ww - 2 - this.getStyleLength(this.dialogStyle.width)) / 2 + "px";
      this.baseDialogStyle.top =
        (wh - 2 - this.getStyleLength(this.dialogStyle.height)) / 2 + "px";
    },
    close() {
      this.isShow = false;

      if (window.pop != null) {
        window.pop.close();
      }
    },
    beforeDestroy() {
      window.removeEventListener("resize", this.close);
    },
  },
};
</script>
<style lang="scss" scoped>
.dialog {
  position: fixed;
  background: linear-gradient(135deg, transparent 8px, #06233d 0);
}

.dialog_one {
  padding: 11px;
  background: rgba(135, 208, 255, 0.15);
  margin: 5px 5px 0;
}

.dialog_two {
  padding: 4px;
}
.dialog_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  img {
    width: 30px;
    height: 30px;
    margin-left: 10px;
  }
  img:hover {
    cursor: pointer;
  }
}

.dialog_title {
  background: linear-gradient(135deg, transparent 8px, #06233d 0);
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  span {
    font-size: 16px;
    color: #cfecff;
    margin: 0 10px;
  }
}

.dialog_body {
  width: 100%;
  background: #06233d;
  border: 1px solid rgba(31, 159, 240, 0.10196078431372549);
  position: relative;
  display: flex;
}

.top_decorate {
  position: absolute;
  left: 20px;
  top: 1px;
  z-index: 99;
  display: flex;
  div {
    width: 8px;
    height: 4px;
    margin-left: 2px;
  }
  .top_decorate_one {
    background-color: #25e0f3;
  }
  .top_decorate_two {
    background-color: #db4c82;
  }

  .top_decorate_three {
    background-color: #f2cd48;
  }
}

.left_decorate {
  position: absolute;
  left: 0px;
  top: 14px;
  width: 3px;
  height: 40px;
  background: linear-gradient(-120deg, transparent 5px, #87d0ff 0) bottom right;
  z-index: 99;
}

.right_decorate {
  position: absolute;
  right: 0px;
  top: 14px;
  width: 3px;
  height: 40px;
  background: linear-gradient(-120deg, transparent 5px, #87d0ff 0) bottom right;
  z-index: 99;
}
</style>
