<!-- 表格：单位隐患分布 -->
<script lang="ts" setup name="DeptDangerTable">
// 表格隔行变色
function tableRowClassName(rowIndex: any) {
  if (rowIndex.rowIndex % 2 != 0) {
    console.log('rowIndex', rowIndex.rowIndex)
    return 'evenRow'
  }
  return 'oddRow'
}
const tableData = [
  {
    department: '1',
    totalNumber: '1',
    orderNumber: '1',
    orderRate: '1',
  },
  {
    department: '2',
    totalNumber: '2',
    orderNumber: '2',
    orderRate: '2',
  },
  {
    department: '3',
    totalNumber: '3',
    orderNumber: '3',
    orderRate: '3',
  },
]
</script>

<template>
  <div class="dept-danger-table">
    <el-table
      :data="tableData"
      style="width: 100%;margin:0 auto; padding: 8px 0;
      --el-table-border-color: none;
      --el-table-bg-color: none;
      --el-table-tr-bg-color: none"
      :row-class-name='tableRowClassName'
      :cell-style="{ 'color': '#FFFFFF', 'text-align': 'center' }"
      :header-cell-style="{ 'background': '#375A88', 'color': 'rgba(2,217,253,0.8)', 'text-align': 'center' }"
    >
      <el-table-column prop="department" label="科室" />
      <el-table-column prop="totalNumber" label="总号源数"  />
      <el-table-column prop="orderNumber" label="预约数" />
      <el-table-column prop="orderRate" label="预约率(%)" />
    </el-table>
  </div>
</template>

<style lang="scss" scoped>
.evenRow {
  background: #0C385E !important;
}
.oddRow{
  background:#062340 !important;
}
</style>

<style lang="scss">
.dept-danger-table{
  .el-input__wrapper{
    background-color: 	rgba(15,112,169,0.5) !important;
    border-radius: 50px;
    box-shadow: 0 0 0 0;
    padding: 0;
    border: 1px solid #0F70A9;
    width: 118px;
  }
  .el-input__inner {
    padding-left: 15px;
    line-height: 32px;
    font-size: 16px;
    color: #02D9FD;
  }
  .el-input__suffix{
    padding-right: 15px;
  }
  .el-select .el-input__wrapper.is-focus {
    box-shadow: 0 0 0 0 !important;
  }
  .el-select .el-input.is-focus .el-input__wrapper{
    box-shadow: 0 0 0 0 !important;
  }
}
</style>