<template>
  <div id="app">
    <router-view />
    <!-- <audio ref="audio" id="my_audio" src="./assets/audio/19000.wav" controls autoplay hidden="hidden"/> -->
    <transition name="tipalerm">
      <div class="tips" v-if="tflag">
        <p>提示</p>
        <span
          >系统新增{{ msg.count }}条<span
            v-text="msg.type == 1 ? '设备连接' : '漏缆监测'"
          ></span
          ><span id="alevel" :style="alevel">{{ msg.level }}</span
          >告警消息,请及时查看!</span
        >
      </div>
    </transition>
  </div>
</template>

<script>
import { receiveMessage } from "@/utils/websocket";
import socket from "@/utils/websocket";
import { mapState } from "vuex";
import EventBus from "@/utils/bus";
export default {
  name: "App",
  data() {
    return {
      websocket: null,
      tflag: false,
      msg: "",
      alevel: {
        color: "",
      },
    };
  },
  computed: {
    ...mapState("user", ["userBaseInfo", "token"]),
    userId() {
      return this.userBaseInfo.userId;
    },
    usertoken() {
      return this.token;
    },
  },
  methods: {
    receiveMessage,
    closeWebsocket() {
      if (this.websocket) {
        this.websocket.close();
      }
    },
    levelcolor() {
      if (this.msg.level == "正常" || this.msg.level == "连接正常") {
        this.alevel.color = "green";
      } else if (this.msg.level == "紧急" || this.msg.level == "连接异常") {
        this.alevel.color = "#f00";
      } else if (this.msg.level == "重要") {
        this.alevel.color = "#f89850";
      } else if (this.msg.level == "一般") {
        this.alevel.color = "#ead906";
      }
    },
  },
  mounted() {
    let audioPlay = document.getElementById("my_audio");
    this.websocket = socket({
      onmessage: this.receiveMessage,
    });
    EventBus.$on("dialogAlarm", (data) => {
      // 接收消息之后 声音弹窗显示
      // audioPlay.play();
      this.msg = data;

      this.levelcolor();
      // console.log(data);
      this.tflag = true;
      setTimeout(() => {
        this.tflag = false;
      }, 3000);
    });
    EventBus.$on("cancelWS", () => {
      this.websocket.close();
      console.log('关闭ws');
    });
    // EventBus.$on("wsOpen", () => {
    //   audioPlay.play()
    //   // this.websocket.onopen();
    // });
  },
  watch: {
    $route(to, from) {
      if (to.path == "/login") {
        this.websocket.close();
        console.log("在登录页");
      }
    },
    usertoken: {
      immediate: true,
      handler(newV) {
        if (newV) {
          this.closeWebsocket();
          this.websocket = socket({
            onmessage: this.receiveMessage,
          });
        }
      },
    },
    // userId: {
    //   immediate: true,
    //   handler(newV) {
    //     if (newV) {
    //       this.closeWebsocket();
    //       this.websocket = socket({
    //         onmessage: this.receiveMessage,
    //       });
    //     }
    //   },
    // },
  },
};
</script>
<style lang="scss" scoped>
#app {
  // & ::v-deep .el-table__body tr:hover>td{
  //   background-color: #bed5ff !important;
  // }

  // & ::v-deep .el-table__body tr.current-row>td{
  //   background-color: #bed5ff !important;
  // }
}
.tipalerm-enter-active {
  transition: 0.5s;
}
.tipalerm-enter {
  transform: translateX(200px);
}
.tips {
  width: 150px;
  height: 120px;
  font-size: 14px;
  letter-spacing: 1px;
  background: #fff;
  box-shadow: 0px 2px 14px #888888;
  border-radius: 5px;
  padding: 4px 16px 16px 16px;
  position: fixed;
  text-align: center;
  bottom: 0px;
  right: 0px;
}
</style>