<!-- 单位隐患分布 -->
<script lang="ts" setup>
import type { Ref } from 'vue'
import { onMounted, ref } from 'vue'
import { getDeptDangerList } from '@/api/bs'
const tableRef: Ref<HTMLElement | any> = ref(null) // 表格实例
const tableData = ref<any[]>([]) // 定义表格list
const loading = ref(false)

// 表格表头
const columns = [
  { text: '单位', value: 'deptName', align: 'center' },
  { text: '危险点地名', value: 'placeName', align: 'center', width: '95' },
  // { text: '分类', value: 'category', align: 'center' },
  { text: '等级', value: 'grade', 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 - 8) {
        // console.log('表格重新轮播', tableDom.scrollTop)
        tableDom.scrollTop = 0
      } else {
        // console.log('正常轮播', tableDom.scrollTop)
        // console.log('tableDom.clientHeight + tableDom.scrollTop', tableDom.clientHeight + tableDom.scrollTop)
        // console.log('tableDom.scrollHeight', tableDom.scrollHeight)
      }
    }
  }, 100)
}

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

// 获取单位隐患分布数据
const fetchDeptDangerList = () => {
  loading.value = true
  getDeptDangerList().then((res) => {
    tableData.value = res.data
    loading.value = false
  }).catch(() => {
    loading.value = false
  })
}

onMounted(() => {
  fetchDeptDangerList()
  scroll(tableRef.value.$refs.bodyWrapper) // 设置滚动
})
</script>

<template>
  <div v-loading="loading" 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 {
  .el-loading-mask {
    background-color: rgba(30, 90, 142, 0.7); /* 更改为你想要的颜色 */
  }
  .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;
    white-space: nowrap !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>