<template>
  <div class="e-notification-alarm">
    <audio
      controls="controls"
      hidden
      autoplay
      src="/images/alarm_tips.mp3"
      ref="audio"
      v-if="audioHidden"
    ></audio>
    <div class="e-dialog-div" v-show="dialogShow">
      <div class="dialog-top">
        <span class="info-title">报警提醒</span>
        <img class="info-close" @click="handleCloseDialog" src="@/assets/images/big/clors_map.png" />
      </div>
      <div class="dialog-center">
        <div class="info-label">
          <div class="t1">项目<span class="tt">:</span></div>
          <div class="t1">地址<span class="tt">:</span></div>
        </div>
        <div class="info-value">
          <div class="v1">
            <span
              style="
                width: 100%;
                display: inline-block;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                letter-spacing: 1px;
              "
            >
              {{ alarmInfo['projectName'] }}
            </span>
          </div>
          <div class="v1">
            <marquee
              style="margin: 0"
              behavior="alternate"
              scrollamount="1"
              width="100%"
            >
              <span style="letter-spacing: 1px">
                {{ alarmInfo['address'] }}
              </span>
            </marquee>
          </div>
        </div>
        <div class="alarm-info">
          <img class="alarm-icon" src="@/assets/images/big/map_alarm.png" />
          <span
            >{{ alarmInfo['alarmContent'] }}</span
          >
        </div>
      </div>

      <div class="dialog-footer"></div>
    </div>
  </div>
</template>
<script>
import { webSocketProjectGatewayUrl } from "@/config/env";
export default {
  name: "NotificationAlarm",
  props: {},
  data() {
    return {
      stompClient: null,
      socket_flag: true,
      timeout_flag: null,
      dialogShow: false,
      audioHidden: false,
      interval: null,
      intervalTime: 10,
      alarmInfo: {
        projectName: '中海创项目',
        address: '福建省福州市闽侯县高新区软件园二',
        alarmContent: '电池异常高温告警'
      }
    };
  },
  watch: {},
  created() {
    setTimeout(this.handleTextSend, 5000);
  },
  methods: {
    handleTextSend() {
      console.log('handleTextSend-')
      this.dialogShow = true;
      this.handlePlayAudio();
    },
    handleCloseDialog() {
      this.dialogShow = false;
      this.handlePauseAudio();
    },
    // 告警 声音 关闭
    handlePauseAudio() {
      if (this.$refs.audio) {
        this.$refs.audio.pause()
        if(this.interval) {
          clearInterval(this.interval)
        };
        this.audioHidden = false;
        setTimeout(this.handleTextSend, 5000);
      };
    },
    // 告警 方法 触发情况
    handlePlayAudio() {
      // this.$refs.audio.currentTime = 0; //从头开始播放提示音
      // this.$refs.audio.play(); //播放
      this.audioHidden = true;
      if (this.interval) {
        clearInterval(this.interval);
      }
      this.interval = setInterval(this.handlePauseAudio, this.intervalTime * 1000);
    },
    // 创建一个ws 监听获取报警实时数据
    connection() {
      if (this.stompClient) {
        return;
      }
      if (!webSocketProjectGatewayUrl) {
        return;
      }
      if (!this.list || this.length <= 0) {
        return;
      }
      let deviceIds = this.list.map((v) => v["deviceId"]);
      this.stompClient = new WebSocket(
        `${webSocketProjectGatewayUrl}/${this.getGuid()}/${deviceIds.toString()}`
      );
      this.stompClient.onmessage = this.socket_message;
      this.stompClient.onclose = this.socket_onclose;
    },
    socket_message(evt) {
      console.log("wsljcg:=", evt);
      const data = JSON.parse(evt.data);
      console.log("socket-message:", data);
      // this.handleDeviceInfo(data)
      this.$forceUpdate();
    },
    socket_onclose(e) {
      this.stompClient = null;
      if (this.socket_flag) {
        this.socket_flag = false;
        let _this = this;
        this.timeout_flag = setTimeout(function () {
          _this.socket_flag = true;
          _this.connection();
        }, 10000);
      }
    },
    closeSocket() {
      if (this.stompClient) {
        this.stompClient.close();
      }
      this.socket_flag = false;
      this.stompClient = null;
      clearTimeout(this.timeout_flag);
    },
    getGuid() {
      return "xxxxxxx_xxxxx_4xxx_yxxx_xxxxxxxxxxxx".replace(
        /[xy]/g,
        function (c) {
          var r = (Math.random() * 16) | 0,
            v = c == "x" ? r : (r & 0x3) | 0x8;
          return v.toString(16);
        }
      );
    },
  },
  destroyed() {
    this.closeSocket();
  },
};
</script>
<style lang="scss">
.e-notification-alarm {
  .e-dialog-div {
    top: calc(calc((100vh - 130px) / 2));
    width: 300px;
    height: 120px;
    position: absolute;
    left: calc(calc((100% - 260px) / 2));
    font-size: 16px;
    justify-content: center;
    align-items: center;
    display: flex;
    z-index: 999;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    .dialog-top {
      width: 100%;
      height: 40px;
      background-image: url("../../../../assets/images/big/map_top.png");
      background-size: 100% 100%;
      .info-title {
        font-size: 16px;
        font-family: "Microsoft YaHei";
        font-weight: 400;
        color: #ff3739;
        line-height: 24px;
        z-index: 1;
        position: relative;
        left: calc((100% - 60px) / 2);
        top: -3px;
      }
      .info-close {
        position: relative;
        top: 5px;
        z-index: 1;
        width: 25px;
        height: 25px;
        left: calc(100% - 75px);
      }
    }
    .dialog-center {
      color: #07beff;
      letter-spacing: 7px;
      width: 100%;
      height: 100%;
      background-image: url("../../../../assets/images/big/mapbj_c_1.png");
      background-size: 100% 100%;
      display: flex;
      flex-wrap: wrap;
      .info-label {
        color: #07beff;
        margin-right: 8px;
        margin-left: 25px;
        letter-spacing: 7px;
        width: 60px;
        .t1 {
          height: 29px;
          display: flex;
          align-items: flex-end;
          .tt {
            margin-left: -6px;
          }
        }
      }
      .info-value {
        width: calc(100% - 115px);
        text-overflow: ellipsis;
        overflow: hidden;
        .v1 {
          display: flex;
          align-items: flex-end;
          height: 29px;
        }
      }
      .alarm-info {
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: flex-start;
        padding: 0 5px;
        > img {
          width: 35px;
          height: 40px;
          margin: 0 10px 0 20px;
        }
        > span {
          width: calc(100% - 75px);
          height: 40px;
          display: block;
          text-overflow: ellipsis;
          overflow: hidden;
          font-size: 22px;
          color: #ff3739;
          letter-spacing: 0px;
          white-space: nowrap;
          font-weight: 600;
          line-height: 43px;
        }
      }
    }
    .dialog-footer {
      width: 100%;
      height: 30px;
      background-image: url("../../../../assets/images/big/map_bottom.png");
      background-size: 100% 100%;
    }
  }
}
</style>
