<template>
  <el-table
    :data="resData"
    class="transparentTableRow scroll"
    height="280"
    :cell-class-name="tableRowClassName"
    :cell-style="cellStyle"
    style="margin-top:10px"
  >
    <el-table-column
      show-overflow-tooltip
      min-width="20"
      v-for="item in headerData"
      :key="item.prop"
      :prop="item.prop"
      align="center"
      :label="item.name"
    ></el-table-column>
  </el-table>

</template>
<script>
export default {
  props: {
    resData: { type: Array, default: () => [] },
    headerData: { type: Array, default: () => [] },
  },
  data() {
    return {
      resData:[]
    };
  },
  mounted() {
    this.initWebSocket()
  },
  methods: {
    initWebSocket() {
      console.log(111)
      let arrData = [];
      let wsUri = "wss://iot.usky.cn:55120";
      console.log(typeof MozWebSocket )
      try {
          // if (typeof MozWebSocket == 'function')
          //     console.log(2)
              // WebSocket = MozWebSocket;
              let websocket = new WebSocket(wsUri);
              websocket.onopen = function(evt) {
                var json = {};
                json.agentid = 'admin';
                websocket.send(JSON.stringify(json));
              };
          websocket.onclose = function(evt) {
              this.initWebSocket();
          };
          websocket.onmessage = function(evt) {
              console.log(evt)
              var warningInfo = eval('(' + evt.data + ')');
              console.log(warningInfo)
              // if (warningInfo.dwtype) {
              //     arrData.push(warningInfo)
              //     console.log('arrData')
              //         // console.log(arrData)
              // }
              // var items = '';
              // arrData.forEach(function(item, index) {
              //     items += ` <tr>
              //     <td >${index+1}</td>
              //     <td >${item.time}</td>
              //     <td >${item.dwtype} </td>
              //     <td title="${item.evtname}"> ${item.evtname}</td>
              //     <td >${item.insertid} </td>
              // </tr>`
              // })
              // $('.warning-info').html(items)
          };
          websocket.onerror = function(evt) {
              // console.log("Error:", evt.data);
              (function() {})()
          };
      } catch (exception) {
          // console.log("Exception:", exception);
          (function() {})()
      }
    },
    tableRowClassName({row, column, rowIndex, columnIndex}) {
      if (column.property === 'deathToll' && row.deathToll > 0) {
        return "death";
      }
    },
    cellStyle (row, column, rowIndex, columnIndex) {
    //列的label的名称
      if (row.column.label === "告警" || row.column.label === "离线") {
        return 'color:#2280D9' //修改的样式
      }
    },

  },
};
</script>
<style>
</style>
