<!-- 单位隐患分布 -->
<script lang="ts" setup>
import type { Ref } from 'vue'
import { onMounted, ref } from 'vue'
const tableRef: Ref<HTMLElement | any> = ref(null) // 表格实例
const tableData = ref<any[]>([]) // 定义表格list
// 表格测试数据
const getTableData = (): any => {
  const data = []
  for (var i = 0; i <= 10; i++) {
    data.push({
      deptName: i,
      wxddm: `Tom${i}`,
      fl: `地区${i}地区${i}地区${i}地区${i}地区${i}`,
      dj: '1',
    })
  }
  return data
}

// 表格表头
const columns = [
  { text: '单位', value: 'deptName', align: 'center' },
  { text: '危险点地名', value: 'wxddm', align: 'center' },
  { text: '分类', value: 'fl', align: 'center' },
  { text: '等级', value: 'dj', align: 'center', width: '60' },
]
const scroll = (tableBody: any) => {
  let isScroll = true // 滚动
  const tableDom = tableBody.getElementsByClassName('el-scrollbar__wrap')[0]

  // 鼠标放上去，停止滚动；移开，继续滚动
  tableDom.addEventListener('mouseover', () => {
    isScroll = false
  })
  tableDom.addEventListener('mouseout', () => {
    isScroll = true
  })

  setInterval(() => {
    if (isScroll) {
      tableDom.scrollTop += 2 // 设置滚动速度
      if (tableDom.clientHeight + tableDom.scrollTop >= tableDom.scrollHeight) {
        tableDom.scrollTop = 0
      }
    }
  }, 100)
}

const tableRowClassName = ({ row, rowIndex }: any) => {
  if (rowIndex % 2 === 1) {
    return 'warning-row'
  }
  else {
    return 'success-row'
  }
}

onMounted(() => {
  tableData.value = getTableData() // 表格数据赋值
  scroll(tableRef.value.$refs.bodyWrapper) // 设置滚动
})
</script>

<template>
  <div class="table-bs" style="height: 100%;">
    <el-table ref="tableRef" :data="tableData" style="height: 100%;">
      <el-table-column
        v-for="column of columns"
        :key="column.value"
        :width="column.width"
        :label="column.text"
        :prop="column.value"
        :align="column.align"
      />
    </el-table>
  </div>
</template>

<style lang="scss">
  .table-bs {
  .warning-row {
    background: #000f1c !important;
    color: #ffffff !important;
    border: 0 !important;
  }

  .success-row {
    background: #041628 !important;
    color: #ffffff !important;
  }
  // 表格背景色
  .el-table {
    background-color: #03144a !important; /* 使用!important来覆盖其他样式 */
  }
  // 表头背景
  .el-table .el-table__header-wrapper th {
    background-color: rgba($color: #050b2d, $alpha: .6) !important;
    color: #c2f9fa;
    border-bottom: 0.1rem solid #289b73 !important;
  }

  // 表中背景
  .el-table tr, .el-table__body tr:hover>td {
    background-color: transparent !important;
    color: #c2f9fa;
  }

  .el-table th.el-table__cell,
  .el-table th.el-table__cell.is-leaf {
    border: none !important;
  }

  .el-table__inner-wrapper::before {
    background-color: rgba(0, 62, 90, 0.5);
  }

  .el-table td.el-table__cell,
  .el-table th.el-table__cell.is-leaf {
    border-bottom-color: #003E5A !important;
  }
}
</style>