<template>
  <el-row class="mianBox">
    <el-row class="headerBox">
      <el-col class="title">
        <img src="../../../assets/image/arrow.png" alt="" />
         {{resInfo.typeName || ''}}
      </el-col>
    </el-row>
    <el-form ref="form" :model="form" inline label-width="40px" v-if="false">
      <el-form-item label="时间">
          <el-date-picker
          v-model="form.valueTime"
          class="dataComponent"
          type="daterange"
          align="right"
          range-separator="~"
          size="small"
          prefix-icon
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="dateTimeChange"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="form.region" placeholder="请选择类型" size="mini">
          <el-option label="类型一" value="shanghai"></el-option>
          <el-option label="类型二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-row class="threeBox">
      <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>
</template>

<script>
export default {
  props:['resInfo'],
  data() {
    return {
      ws: null,
      form:{
        region:'',
        valueTime: [],
      },
      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 = (res) => {
          this.resList.unshift(...JSON.parse(res.data).data).slice(0,100)
        };

        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);
      }
    },
    dateTimeChange() {
      
    },
  },
  destroyed(){
    // this.ws.close()
    // this.ws = null
  }
};
</script>

<style lang="scss" scoped>
.mianBox {
  background: url("../../../assets/image/view2.png") no-repeat;
  background-size: 100% 100%;
  .threeBox {
    flex: 1;
    width: 100%;
    height: inherit;
    display: flex;
  }
  .el-form{
    height: 40px;
    width: 100%;
    .el-select{
      width: 110px;
    }
  }
  /deep/.dataComponent {
    height: 26px;
    width: 230px;
    background: transparent;
    color: #fff;
    border: 1px solid;
    border-image: linear-gradient(0deg, #0461c2 0%, #0ecdf1 100%) 1 1;
    border-radius: 10px;
    padding: 5px;
    font-size: 14px;
    // .el-icon-date{
    // display: none;
    // }
    i,
    span {
      line-height: 100%;
      color: #fff;
      font-size: 14px;
    }
    input {
      width: 40%;
      font-size: 14px;
      background: transparent;
      color: #fff;
    }
  }
}
</style>