<template>
  <div style="border: 1px solid #938d8d;margin-left: 10px;margin-right: 10px;">
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple"><h2 style="margin-left: 30px;padding-top: 10px;">统计任务看板</h2></div>
      </el-col>

      <el-col :span="12">
        <div class="grid-content bg-purple-light">
          <h2 style="text-align:right;margin-right: 140px;">{{ getTime }}</h2>
        </div>
        <div class="grid-content bg-purple-light">
          <p style="text-align:right;margin-right: 110px;"><b>{{ getDate }}</b></p>
        </div>

      </el-col>
    </el-row>
    <br>
    <br>
    <div>
      <!--表格渲染-->
      <el-table
        ref="table"
        :data="tableData"
        size="small"
        style="width: 100%;"
        border
        :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
      >
        <el-table-column type="index" label="序号" width="55" align="center" />
        <el-table-column prop="input_time" label="生成时间" />
        <el-table-column prop="repair_code" label="任务号" />
        <el-table-column prop="maintenancecycle" label="任务类型" />
<!--        <el-table-column prop="" label="部门" />-->
        <el-table-column prop="device_code" label="设备编码" />
        <el-table-column prop="device_name" label="设备名称" />
        <el-table-column prop="invstatus" label="状态" />
        <el-table-column prop="real_start_date" label="开始时间" />
        <el-table-column prop="real_end_date" label="结束时间" />
      </el-table>

      <!--分页组件-->

    </div>
  </div>

</template>

<script>
import crud from '@/mixins/crud'

export default {
  name: 'BigscreenTask',
  mixins: [crud],
  data() {
    return {
      path: 'ws://localhost:8010/webSocket/20',
      currentDate: new Date(),
      getTime: '',
      getDate: '',
      tableData: []
    }
  },
  created() {
  },
  mounted() {
    // 定时器
    const timer = setInterval(() => {
      this.settime()// 你所加载数据的方法
    }, 1000)
    // 销毁定时器
    this.$once('hook:beforeDestroy', () => {
      clearInterval(timer)
    })
    this.init()
  },
  methods: {
    settime() {
      const _this = this
      const yy = new Date().getFullYear()
      const mm = new Date().getMonth() + 1
      const dd = new Date().getDate()
      const hh = new Date().getHours()
      const mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
      const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
      _this.getDate = yy + '年' + mm + '月' + dd + '日 ' + '星期' + '日一二三四五六'.charAt(new Date().getDay())
      _this.getTime = hh + ':' + mf + ':' + ss
    },
    // webSocket
    init: function() {
      if (typeof (WebSocket) === 'undefined') {
        alert('您的浏览器不支持socket')
      } else {
        // 实例化socket
        this.socket = new WebSocket(this.path)
        // 监听socket连接
        this.socket.onopen = this.open
        // 监听socket错误信息
        this.socket.onerror = this.error
        // 监听socket消息
        this.socket.onmessage = this.getMessage
      }
    },
    open: function() {
      console.log('socket连接成功')
    },
    error: function() {
      console.log('连接错误')
    },
    getMessage: function(msg) {
      debugger
      const data = JSON.parse(msg.data)
      this.tableData = data.msg
    },
    send: function() {
      // eslint-disable-next-line no-undef
      this.socket.send(params)
    },
    close: function() {
      console.log('socket已经关闭')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>
