<template>
  <div class="data-modal-warn">
    <el-table
      v-loading="tableLoading"
      :data="tableData"
      tooltip-effect="light"
      show-overflow-tooltip
      :header-cell-style="getHeaderStyle"
      :cell-style="getCellStyle"
      row-key="id"
      style="width: 100%;background-color: inherit">
      <el-table-column
        prop="warnTime"
        label="时间"
        align="center"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column
          prop="desc"
          label="对象名"
          align="center"
          width="110px"
      >
        <template slot-scope="scope">
          <el-tooltip v-if="scope.row.desc && scope.row.desc.length > 6" :content="scope.row.desc" placement="top">
            <div>
              {{ scope.row.desc.slice(0, 6) + '.' }}
            </div>
          </el-tooltip>
          <div v-else>
            {{ scope.row.desc }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="warnTypeText"
        label="报警类型"
        align="center"
      />
      <el-table-column
        prop="currentValue"
        label="当前值"
        align="center"
      />
      <el-table-column
        prop="limitValue"
        label="界限值"
        align="center"
      />
    </el-table>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import moment from 'moment'
import { v4 as uuidv4 } from 'uuid'

export default {
  name: 'DataModalWarn',
  data() {
    return {
      tableLoading: false,
      warnType: {
        1: '上限报警',
        2: '下限报警',
      },
      warnEvent: {
        1: '报警产生',
        2: '报警结束',
        3: '报警应答',
      },
      warnActive: false,
      interval: null,
      warnTime: null,
      dataList: [],
      tableData: [],
    }
  },
  computed: {
    ...mapState({
      warnRecordData: state => state.queue.warnRecordData,
    }),
  },
  mounted() {
    this.initWarnRecordData()
  },
  watch: {
    warnRecordData: {
      handler(newVal) {
        if (newVal) {
          this.dataList.push(newVal)
          this.setTableData()
        }
      },
      immediate: true
    },
  },
  beforeDestroy() {
    if (this.interval) {
      clearInterval(this.interval)
      this.interval = null
    }
  },
  methods: {
    ...mapActions(['initWarnRecordData']),
    setTableData() {
      const record = this.dataList.pop()
      if (record) {
        this.warnTime = moment().valueOf()
        this.warnActive = true
        const tableData = []
        for (const warnRecord of record) {
          tableData.push({
            ...warnRecord,
            warnTime: moment(Number(warnRecord.warnTime)).format('YYYY-MM-DD HH:mm:ss'),
            warnTypeText: this.warnType[warnRecord.warnType],
            warnEventText: this.warnEvent[warnRecord.warnEvent],
          })
        }
        this.tableData = this.sliceTableData(tableData)
      }
      if (this.dataList.length > 10) {
        this.dataList = []
      }
    },
    sliceTableData(tableData) {
      let data
      const len = tableData.length
      if (len < 5) {
        data = [...tableData]
        for (let i = 0; i < (5 - len); i++) {
          data.push({
            id: uuidv4(),
          })
        }
      } else if (len > 5) {
        data = tableData.slice(0, 5)
      } else {
        data = tableData
      }
      return data
    },
    getHeaderStyle(e) {
      return {
        color: '#FFF',
        // fontSize: '20px',
        background: 'inherit',
        borderBottom: 'none'
      }
    },
    getCellStyle({ row, column, rowIndex, columnIndex }) {
      const obj = {
        color: '#FFF',
        // fontSize: '18px',
      }
      if (rowIndex % 2 === 1) {
        obj.background = '#194364'
      } else {
        obj.background = ''
      }
      return obj
    },
  },
}
</script>

<style lang="less" scoped>
.data-modal-warn {
  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>
