<template>
  <div class="app-container">
    <el-table :key="tableKey" v-loading="loading" :data="device" border fit highlight-current-rows>
      <el-table-column align="center" label="ID" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="设备编号" width="150">
        <template slot-scope="scope">
          <span @click="handleCopy(scope.row.devicenum,$event)">{{ scope.row.devicenum }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="设备名称" width="170">
        <template slot-scope="scope">
          <span>{{ scope.row.username }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="设备详情">
        <template slot-scope="scope">
          <span>{{ scope.row.deviceinfo }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="设备类型" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.tname }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="检测介质" width="170">
        <template slot-scope="scope">
          <span>{{ scope.row.gas }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="检测值" width="170">
        <template slot-scope="scope">
          <span>{{ scope.row.nd }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="单位" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.danwei }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="设备实时状态" width="170">
        <template slot-scope="scope">
          <span>
            <el-tag :type=" scope.row.status_name=='正常' ? 'success' : 'warning' " effect="dark">{{ scope.row.status_name }}</el-tag>
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="状态" width="170">
        <template slot-scope="scope">
          <span v-if="scope.row.status_name=='正常' " :style="{color:( scope.row.devicestatus==1 ? '#67C23A' : '#F56C6C' )}">{{ scope.row.devicestatus==1 ? '正常' : '设备错误' }}</span>
          <span v-if="scope.row.status_name!='正常' " :style="{color:( scope.row.status_name=='正常' ? '#67C23A' : '#F56C6C' )}">{{ scope.row.status_name=='正常' ? '正常' : '设备异常' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="最后更新时间" width="170">
        <template slot-scope="scope">
          <span>{{ scope.row.update_time | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="page" :limit.sync="limit" @pagination="devicelist" />
  </div>
</template>

<script>
import { control } from '@/api/device';
import Pagination from '@/components/Pagination'; // 分页
import websocketurl from '@/api/configurl';
import clip from '@/utils/clipboard';
export default {
  name: 'Devicetype',
  components: { Pagination },
  data() {
    return {
      tableKey: 0,
      loading: true,
      device: [],
      page: 1,
      limit: 10,
      type: 2,
      total: 0,
      paper: undefined,
    };
  },
  created() {
    this.devicelist(); // 设备状态
    this.initWebSocket();
  },

  methods: {
    devicelist() {
      const limit = this.limit;
      const page = this.page;
      this.loading = true;
      control(page, limit, this.type)
        .then(response => {
          var devicetype = response.data['devicelist'];
          this.device = devicetype;
          this.device.forEach((element, index) => {
            element['index'] = (page - 1) * limit + index + 1;
          });
          this.total = response.data.count;
          this.loading = false;
        })
        .catch(err => {
          console.log(err);
        });
    },
    initWebSocket(){ // 初始化weosocket
      const wsuri = websocketurl.chemicalsUrl;
      this.websock = new WebSocket(wsuri);
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onopen = this.websocketonopen;
      this.websock.onerror = this.websocketonerror;
      this.websock.onclose = this.websocketclose;
    },
    websocketonopen(){ // 连接建立之后执行send方法发送数据
      console.log('连接成功');
    },
    websocketonerror(){ // 连接建立失败重连
      this.$notify({
        title: '警告',
        message: '建立链接失败,正在重连',
        type: 'warning',
      });
      this.initWebSocket();
    },
    websocketonmessage(e){ // 数据接收
      const redata = JSON.parse(e.data);
      this.device = redata.data.devicelist;
      this.total = redata.data.count;
    },
    websocketsend(){ // 数据发送
      this.websock.send(JSON.stringify(this.type));
    },
    websocketclose(e){ // 关闭
      console.log('断开连接', e);
      this.$notify({
        title: '警告',
        message: '危化监测长连接已断开',
        type: 'warning',
      });
    },
    handleClick(tab) {
      this.type = tab.$attrs.tid;
      this.devicelist();
    },
    handleCopy(text, event) {
      clip(text, event);
    },
    handleCopyphone(text, event){
      clip(text, event);
    },
  },
};
</script>

<style>
</style>
