<template>
  <div class="realtime-table">
    <!--&lt;!&ndash;    :span-method="objectSpanMethod262"&ndash;&gt;  合并单元格-->
    <el-table
        v-loading="tableData.length <= 0"
        element-loading-background="inherit"
        :span-method="objectSpanMethod"
        :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
          prop="remark"
          label="操作间"
          align="center"
      >
        <template slot-scope="scope">
          <div :style="getStyle(scope.$index)">
            <el-tooltip :content="scope.row.remark" placement="top" v-if="scope.row.remark.length > 4">
              <div>
                {{ scope.row.remark.slice(0, 4) + '.' }}
              </div>
            </el-tooltip>
            <div v-else>
              {{ scope.row.remark }}
            </div>
          </div>
        </template>
      </el-table-column>-->
      <!--          <el-tooltip :content="scope.row.remark" placement="top" v-if="scope.row.remark.length > 4">-->
      <!--            <div :style="objectSpanMethod261">-->
      <!--              {{ scope.row.remark.slice(0, 4) + '.' }}-->
      <!--            </div>-->
      <!--          </el-tooltip>-->
      <!--          <div v-else :style="{ color: scope.row.status ? '#5daf34' : '#f19409' }" >-->
      <!--            {{ scope.row.remark }}-->
      <!--          </div>-->
      <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>-->
          <el-tooltip :content="scope.row.second" placement="top" v-if="scope.row.second.length > 4">
            <div :style="{ color: scope.row.status ? '#5daf34' : '#f19409' }">
              {{ scope.row.second.slice(0, 4) + '..' }}
            </div>
          </el-tooltip>
          <div v-else :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: [],
      color: '',
      style0: { color: '#f19409' },
      style1: { color: '#f19409' },
      style2: { color: '#f19409' },
      style3: { color: '#f19409' },
      style4: { color: '#f19409' },
      style5: { color: '#f19409' },
      style6: { color: '#f19409' },
      style7: { color: '#f19409' },
      style8: { color: '#f19409' },
      style9: { color: '#f19409' },
    }
  },
  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: {
    getStyle(index) {
      return this['style' + index]
    },
    objectSpanMethod275({row, column, rowIndex, columnIndex}) {
      if (columnIndex === 0) {
        // 根据 rowIndex 判断应用的合并规则
        if (rowIndex === 1) {
          // 合并第二三条，只保留第二条数据
          return {rowspan: 2, colspan: 1};
        } else if (rowIndex === 2) {
          // 第三条数据，不需要渲染，返回空对象
          return {rowspan: 0, colspan: 0};
        } else if (rowIndex === 5) {
          // 合并第六七条，只保留第六条数据
          return {rowspan: 2, colspan: 1};
        } else if (rowIndex === 6) {
          // 第七条数据，不需要渲染，返回空对象
          return {rowspan: 0, colspan: 0};
        } else if (rowIndex === 7) {
          // 合并第八九条，只保留第八条数据
          return {rowspan: 2, colspan: 1};
        } else if (rowIndex === 8) {
          // 第九条数据，不需要渲染，返回空对象
          return {rowspan: 0, colspan: 0};
        } else {
          return {rowspan: 1, colspan: 1}; // 默认情况，不合并
        }
      }
      if (columnIndex === 4) {
        // 根据 rowIndex 判断应用的合并规则
        if (rowIndex === 1) {
          // 合并第二三条，只保留第二条数据
          return {rowspan: 2, colspan: 1};
        } else if (rowIndex === 2) {
          // 第三条数据，不需要渲染，返回空对象
          return {rowspan: 0, colspan: 0};
        } else if (rowIndex === 5) {
          // 合并第六七条，只保留第六条数据
          return {rowspan: 2, colspan: 1};
        } else if (rowIndex === 6) {
          // 第七条数据，不需要渲染，返回空对象
          return {rowspan: 0, colspan: 0};
        } else if (rowIndex === 7) {
          // 合并第八九条，只保留第八条数据
          return {rowspan: 2, colspan: 1};
        } else if (rowIndex === 8) {
          // 第九条数据，不需要渲染，返回空对象
          return {rowspan: 0, colspan: 0};
        } else {
          return {rowspan: 1, colspan: 1}; // 默认情况，不合并
        }
      }
    },
    // objectSpanMethod261({row, column, rowIndex, columnIndex }){
    //   if (columnIndex === 0) {
    //     // 根据 rowIndex 判断应用的合并规则
    //     if (rowIndex === 0) {
    //       return {rowspan: 2, colspan: 1};
    //     }else if (rowIndex===1){
    //       return {rowspan: 0, colspan: 0};
    //     }
    //     else if (rowIndex === 3) {
    //
    //       return {rowspan: 2, colspan: 1};
    //     } else if (rowIndex === 4) {
    //
    //       return {rowspan: 0, colspan: 0};
    //     }  else {
    //       return {rowspan: 1, colspan: 1}; // 默认情况，不合并
    //     }
    //   }
    //   if (columnIndex === 4) {
    //     // 根据 rowIndex 判断应用的合并规则
    //     if (rowIndex === 0) {
    //       return {rowspan: 2, colspan: 1};
    //     }else if (rowIndex===1){
    //       return {rowspan: 0, colspan: 0};
    //     }
    //     else if (rowIndex === 3) {
    //
    //       return {rowspan: 2, colspan: 1};
    //     } else if (rowIndex === 4) {
    //
    //       return {rowspan: 0, colspan: 0};
    //     }  else {
    //       return {rowspan: 1, colspan: 1}; // 默认情况，不合并
    //     }
    //   }
    // },
    objectSpanMethod261({row, column, rowIndex, columnIndex}) {
      if (columnIndex === 0) {
        if (rowIndex === 0) {
          return {rowspan: 2, colspan: 1};
        } else if (rowIndex === 1) {
          return {rowspan: 0, colspan: 0};
        } else if (rowIndex === 3) {
          return {rowspan: 2, colspan: 1};
        } else if (rowIndex === 4) {
          return {rowspan: 0, colspan: 0};
        } else {
          return {rowspan: 1, colspan: 1}; // 默认情况，不合并
        }
      }
      if (columnIndex === 4) {
        if (rowIndex === 0) {
          return {rowspan: 2, colspan: 1};
        } else if (rowIndex === 1) {
          return {rowspan: 0, colspan: 0};
        } else if (rowIndex === 3) {
          return {rowspan: 2, colspan: 1};
        } else if (rowIndex === 4) {
          return {rowspan: 0, colspan: 0};
        } else {
          return {rowspan: 1, colspan: 1}; // 默认情况，不合并
        }
      }
    },
    objectSpanMethod262({row, column, rowIndex, columnIndex}) {

      if (columnIndex === 0) {
        // 根据 rowIndex 判断应用的合并规则
        if (rowIndex === 0) {
          return {rowspan: 2, colspan: 1};
        } else if (rowIndex === 1) {
          return {rowspan: 0, colspan: 0};
        } else if (rowIndex === 2) {
          return {rowspan: 3, colspan: 1};
        } else if (rowIndex === 3) {
          return {rowspan: 0, colspan: 0};
        } else if (rowIndex === 4) {
          return {rowspan: 0, colspan: 0};
        } else {
          return {rowspan: 1, colspan: 1}; // 默认情况，不合并
        }
      }

      if (columnIndex === 4) {
        // 根据 rowIndex 判断应用的合并规则
        if (rowIndex === 0) {

          return {rowspan: 2, colspan: 1};
        } else if (rowIndex === 1) {
          return {rowspan: 0, colspan: 0};
        } else if (rowIndex === 2) {
          return {rowspan: 3, colspan: 1};
        } else if (rowIndex === 3) {

          return {rowspan: 0, colspan: 0};
        } else if (rowIndex === 4) {

          return {rowspan: 0, colspan: 0};
        } else {
          return {rowspan: 1, colspan: 1}; // 默认情况，不合并
        }
      }
    },
    // 表格方法开始
    async getTableData() {
      const handleData = (dataArr, data) => {
        for (const item of data) {
          const obj = {
            id: item.id,
            first: item.collectStationName,
            remark: item.remark,
            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
      })
    },
    setWorkspaceStyle261() {
      this.style0 = this.tableData[0].status || this.tableData[1].status ? {color: '#5daf34'} : {color: '#f19409'}
      this.style2 = this.tableData[2].status ? {color: '#5daf34'} : {color: '#f19409'}
      this.style3 = this.tableData[3].status || this.tableData[4].status ? {color: '#5daf34'} : {color: '#f19409'}
      this.style5 = this.tableData[5].status ? {color: '#5daf34'} : {color: '#f19409'}
    },
    setWorkspaceStyle262() {
      this.style0 = this.tableData[0].status || this.tableData[1].status ? {color: '#5daf34'} : {color: '#f19409'}
      this.style2 = this.tableData[2].status || this.tableData[3].status ||this.tableData[4].status ? {color: '#5daf34'} : {color: '#f19409'}
      this.style5 = this.tableData[5].status ? {color: '#5daf34'} : {color: '#f19409'}
      this.style6 = this.tableData[6].status ? {color: '#5daf34'} : {color: '#f19409'}
      this.style7 = this.tableData[7].status ? {color: '#5daf34'} : {color: '#f19409'}
      this.style8 = this.tableData[8].status ? {color: '#5daf34'} : {color: '#f19409'}

    },
    setWorkspaceStyle275() {
      this.style0 = this.tableData[0].status ? {color: '#5daf34'} : {color: '#f19409'}
      this.style1 = this.tableData[1].status || this.tableData[2].status? {color: '#5daf34'} : {color: '#f19409'}
      this.style3 = this.tableData[3].status ? {color: '#5daf34'} : {color: '#f19409'}
      this.style4 = this.tableData[4].status ? {color: '#5daf34'} : {color: '#f19409'}
      this.style5 = this.tableData[5].status || this.tableData[6].status? {color: '#5daf34'} : {color: '#f19409'}
      this.style7 = this.tableData[7].status || this.tableData[8].status? {color: '#5daf34'} : {color: '#f19409'}
    },
    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'
      // #194364
      // #04091F
      // #133453
      } else {
        obj.background = ''
      }
      return obj
    },
    getCellStyle261({row, column, rowIndex, columnIndex}) {

      const obj = {
        color: '#FFF',
        fontSize: '18px',
      }
      if (rowIndex === 0 || rowIndex === 1 || rowIndex === 3 || rowIndex === 4) {
        obj.background = '#194364'
      } else {
        obj.background = ''
      }

      return obj
    },
    getCellStyle262({row, column, rowIndex, columnIndex}) {
      const obj = {
        color: '#FFF',
        fontSize: '18px',
      }
      if (rowIndex === 0 || rowIndex === 1 || rowIndex === 5 || rowIndex === 7) {
        obj.background = '#194364'
      } else {
        obj.background = ''
      }
      return obj
    },
    getCellStyle275({row, column, rowIndex, columnIndex}) {
      const obj = {
        color: '#FFF',
        fontSize: '18px',
      }
      if (rowIndex === 0 || rowIndex === 3 || rowIndex === 5 || rowIndex === 6) {
        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
        // this.setWorkspaceStyle261()
        // this.setWorkspaceStyle262()
        this.setWorkspaceStyle275()
      }
      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>
