<template>
  <div class="warehouse-right container-wrap">
    <span class="right-top-line" />
    <span class="left-bottom-line" />
    <h3 class=" table-title">
      <p class="title-arrow">
        <svg-icon icon-class="alerm" class-name="warehouse-svg" />报警记录
      </p>
    </h3>
    <!--表格渲染-->
    <el-table ref="table" style="min-width: 100%;" :width="width" :height="height" :data="tableData" class="warehose-el-table" :row-class-name="rowBgColor">
      <el-table-column prop="alarm_time" label="时间" align="center" min-width="60" />
      <el-table-column prop="area_name" label="库房" align="center" :show-overflow-tooltip="true" min-width="30" />
      <el-table-column prop="event_name" label="警情" align="center" :show-overflow-tooltip="true" min-width="85" />
    </el-table>
  </div>
</template>

<script>
import alarmApi from '@/api/home/alarm'
export default {
  name: 'WarehouseWarning',
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    storeroomId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tableData: [], // 正在展示的警情数据
      scrollTimer: null
    }
  },
  watch: {
    // 如果 `tableData` 发生改变，这个函数就会运行
    tableData: function(newData, oldData) {
      this.tableRefScroll()
    }
  },
  created() {
    this.getAlarmInfo()
  },
  destroyed() {
    clearInterval(this.scrollTimer)
    this.scrollTimer = null
  },
  methods: {
    // 表格隔行变色
    rowBgColor({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'light-blue'
      } else {
        return ''
      }
    },
    // table滚动
    tableRefScroll() {
      clearInterval(this.scrollTimer) // 清除定时器
      const table = this.$refs.table // 获取DOM元素
      this.wrapperHeight = table.$el.offsetHeight - 30
      // 组件一页能完整展示的数据条数
      this.displayNum = Math.floor(this.wrapperHeight / 40)
      if (this.tableData.length > this.displayNum) {
        const bodyWrapper = table.bodyWrapper // 获取表格中承载数据的div元素
        this.addTableRefScroll(bodyWrapper)
        // 鼠标移入
        bodyWrapper.onmouseover = () => {
          clearInterval(this.scrollTimer)
        }
        // 鼠标移出
        bodyWrapper.onmouseout = () => {
          this.addTableRefScroll(bodyWrapper)
        }
      } else {
        this.scrollTimer = setInterval(() => {
          this.getAlarmInfo()
        }, 1000 * 3 * this.tableData.length)
      }
    },
    addTableRefScroll(bodyWrapper) {
      // let scrollTop = bodyWrapper.scrollTop
      if (this.displayNum && this.displayNum > 0) {
        this.scrollTimer = setInterval(() => {
          // scrollTop = bodyWrapper.scrollTop
          if (bodyWrapper.scrollTop + this.wrapperHeight >= this.tableData.length * 40) {
            bodyWrapper.scrollTop = 0
            this.getAlarmInfo()
          } else {
            bodyWrapper.scrollTop += this.displayNum * 40
          }
          // if (scrollTop === bodyWrapper.scrollTop) {
          //   if (this.isScroll) {
          //     scrollTop = 0
          //     bodyWrapper.scrollTop = 0
          //   } else {
          //     if (this.flag === 1) {
          //       this.currentPage++
          //       this.handleSearch() // 函数中需要清楚定时器
          //     }
          //   }
          // }
        }, 1000 * 3 * this.displayNum)
      }
    },
    getAlarmInfo() {
      alarmApi.info({ storeroomId: this.storeroomId }).then((data) => {
        if (data && data.length > 0) {
          this.tableData.splice(0, data.length, ...data)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.warehouse-left {
  position: relative;
  h2 {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    color: #fff;
    font-size: 16px;
  }
}
</style>
