<template>
  <scroll-seamless :list="list" class="dashboard-bg" title="主管详情">
    <template #thead>
      <span class="item">主管</span>
      <span class="item">总人数</span>
      <span class="item">出勤人数</span>
      <span class="item">出勤率</span>
      <span class="item">迟到</span>
      <span class="item">请假</span>
      <span class="item">矿工</span>
    </template>
    <template #default="{ row, index }">
      <span class="item">{{ row.dept_name }}</span>
      <span class="item">{{ row.total_count }}</span>
      <span class="item">{{ row.normal_count }}</span>
      <span class="item">{{ row.normal_percentage }}</span>
      <span class="item">{{ row.late_count }}</span>
      <span class="item">{{ row.leave_count }}</span>
      <span class="item">{{ row.absentee_count }}</span>
    </template>
  </scroll-seamless>
</template>

<script setup>
  import { onMounted, ref } from 'vue';
  import { executeSqlByKeyAndParam } from '@/api/system/sql.js';
  import ScrollSeamless from '@/views/dataBigScreen/dashboard/components/ScrollSeamless.vue';
  import SvgIcon from '@/components/SvgIcon/index.vue';

  let list = ref([]);
  onMounted(() => {
    executeSqlByKeyAndParam('department_details', {}).then(res => {
      list.value = res.data;
    });
  });
</script>

<style lang="less" scoped>
  .item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14.28%;
    white-space: nowrap;

    &.ranking {
      width: 10%;
    }
  }
</style>