<template>
  <div class="realtime-table">
    <el-table
      v-loading="tableData.length <= 0"
      element-loading-background="inherit"
      :data="tableData"
      :header-cell-style="{
        color: '#FFF',
        fontSize: '16px',
        background: 'inherit',
        borderBottom: 'none'
      }"
      :cell-style="getCellStyle"
      row-key="id"
      :border="false"
      style="background-color: inherit">
      <el-table-column
        column-key="second"
        prop="second"
        label="设备名称"
        align="center"
      >
        <template slot-scope="scope">
          <div :style="{ color: scope.row.status ? '#5daf34' : '#f19409' }">{{ scope.row.second }}</div>
        </template>
      </el-table-column>
      <el-table-column
        v-if="item.prop !== 'second'"
        v-for="item in tableColumns"
        :key="item.id"
        :column-key="item.prop"
        :prop="item.prop"
        :label="item.label"
        :align="item.align ? item.align : 'center'"
      >
        <template slot-scope="scope">
          <span>{{ Number(scope.row[item.prop]).toFixed(2) === 'NaN' ? '' : Number(scope.row[item.prop]).toFixed(2) }}</span>
        </template>
      </el-table-column>
      <!--
      <el-table-column
        column-key="ELECTRIC"
        prop="ELECTRIC"
        label="电流"
        align="center"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.ELECTRIC && scope.row.status ? Number(scope.row.ELECTRIC).toFixed(2) : 0 }}</div>
        </template>
      </el-table-column>
      <el-table-column
        column-key="VIBRATION"
        prop="VIBRATION"
        label="振动"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.VIBRATION && scope.row.status ? Number(scope.row.VIBRATION).toFixed(2) : 0 }}</span>
        </template>
      </el-table-column>
      <el-table-column
        column-key="NOISE"
        prop="NOISE"
        label="噪声"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.NOISE && scope.row.status ? Number(scope.row.NOISE).toFixed(2) : 0 }}</span>
        </template>
      </el-table-column>-->
    </el-table>
  </div>
</template>

<script>
import { findEntityByAcqId } from '@/api/CollectEntity'
import { findTableColumnsNotStatus } from '@/api/TableConfig'
import { mapState } from 'vuex'

export default {
  name: 'RealtimeTable',
  data() {
    return {
      realtimeDataArray: [],
      tableDataWrapper: [],
      tableColumns: [],
      tableData: [],
    }
  },
  computed: {
    ...mapState({
      realtimeData: (state, getter) => state.queue.realtimeData,
      acquisitionStationId: state => state.company.acquisitionStationId,
    }),
  },
  watch: {
    realtimeData: {
      handler(newVal) {
        if (newVal) {
          this.realtimeDataArray.push(newVal)
          this.setTableData()
        }
      },
    },
  },
  methods: {
    // 表格方法开始
    async getTableData() {
      const handleData = (dataArr, data) => {
        for (const item of data) {
          const obj = {
            id: item.id,
            first: item.collectStationName,
            second: item.entityName,
            startType: item.startType,
            limitValue: item.limitValue,
            tagList: item.collectEntityTagVoList,
          }
          if (item.collectEntityTagVoList && item.collectEntityTagVoList.length > 0) {
            for (const e of item.collectEntityTagVoList) {
              obj[e.tableColumn] = '0.9'
            }
            dataArr.push(obj)
          }
        }
      }
      await findTableColumnsNotStatus().then(res => {
        if (res && res.code === '200') {
          this.tableColumns = res.data.filter(e=>e.prop!=='remark')
        }
      })
      const params = {
        acquisitionStationId: this.acquisitionStationId,
      }
      await findEntityByAcqId(params).then(res => {
        // 按照实体分类, 对应第二列
        const tableDataWrapper = []
        handleData(tableDataWrapper, res.data)
        this.tableDataWrapper = tableDataWrapper
      })
    },
    getCellStyle({ row, column, rowIndex, columnIndex }) {
      const obj = {
        color: '#FFF',
        fontSize: '18px',
      }
      const a = this.tableDataWrapper.length / 2 === 0 ? 0 : 1
      if (rowIndex % 2 === a) {
        obj.background = '#194364'
      } else {
        obj.background = ''
      }
      return obj
    },
    // 表格方法结束
    setTableData() {
      const record = this.realtimeDataArray.pop()
      const tableData = this.tableDataWrapper || []
      if (record) {
        for (const item of tableData) {
          for (const msg of record) {
            if (msg.collectEntityId === item.id + '') {
              item[msg.tableColumn] = msg.value
            }
          }
          item.status = item.FEEDBACK === 1
        }
        this.tableData = tableData
      }
      if (this.realtimeDataArray.length > 10) {
        this.realtimeDataArray = []
      }
    },
  },
}
</script>

<style lang="less" scoped>
  .realtime-table {
    width: 100%;

    /deep/ .el-table tr {
      background-color: inherit;
    }

    /deep/ .el-table--border::after, .el-table--group::after, .el-table::before {
      content: '';
      position: absolute;
      background-color: inherit;
      z-index: 1;
    }

    /deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
      background-color: inherit;
      cursor: pointer;
    }

    /deep/ .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
      border-bottom: none;
    }
  }
</style>
