<template>
  <el-row class="mianBox-af">
    <el-row class="headerBox">
      <el-col class="title">
        <img src="../../../assets/image-af/title3.png" alt="" />
        告警信息
      </el-col>
    </el-row>
    <el-row class="contentBox">
      <el-row style="width: 100%;height: 100%; margin: 0 auto">
      <el-table :data="resList" class="transparentTableRow" height="100%" style="width: 100%; margin: 0 auto">
        <!-- min-width="20" -->
        <el-table-column show-overflow-tooltip v-for="item in headerData" :key="item.prop" :prop="item.prop" align="center" :label="item.name"></el-table-column>
      </el-table>
      </el-row>
    </el-row>
  </el-row>
</template>

<script>
export default {
  props:['resInfo'],
  data() {
    return {
      isCheck: "info",
      option: null,
      resList: [],
      headerData: [
        { name: "点位", prop: "alarmDeviceName" },
        { name: "告警时间", prop: "alarmTime" },
        { name: "类型", prop: "deviceType" },
        { name: "内容详情", prop: "alarmContent" },
      ],
    };
  },
  watch: {
    resInfo(){
      this.getData()
    } 
  },
  mounted(){
    this.getData()
  },
  methods: {
    async getData(){
      if ("WebSocket" in window) {
        this.ws = new WebSocket("ws://" + this.$store.state.wsUrl + this.resInfo.apiAddr);
        this.ws.onopen =  ()=> {
          console.log("websocket连接成功");
          this.sendWs({aa:22});
        };

        this.ws.onmessage = (resJson) => {
          let res = JSON.parse(resJson.data)
          res.type === 0 && this.resList.unshift(...res.data)
          if(res.type === 1) {
            console.log(res.data.map(val=>val.url))
            this.$emit('changeImage',res.data.map(val=>val.url))
          }
          if(res.type === 2) {
            console.log(res.data)
            this.$emit('footerImage',res.data)
          }
        };

        this.ws.onclose = ()=> {
          // 关闭 websocket
          console.log("连接已关闭...");

          //断线重新连接
          setTimeout(() => {
            this.getData();
          }, 2000);
        };
      } else {
        // 浏览器不支持 WebSocket
        console.log("您的浏览器不支持 WebSocket!");
      }
      //  let res = await this.$axios.get(this.resInfo.apiAddr + '?' +this.$qs.stringify({
      //   applicationCode: this.resInfo.applicationCode
      // }))
      // if(res.success){
      //   this.resList = res.data
      // }
    },
    sendWs(val){
      if (this.ws && this.ws.readyState == 1) {
        this.ws.send(JSON.stringify(val));
        console.log('发送成功')
      } else {
        setTimeout(() => {
          this.sendWs(val);
        }, 100);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.mianBox-af {
  .contentBox{
    width: 100%;
    display: flex;
    padding: 10px;
    box-sizing: border-box;
    
  }
}
</style>