<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 ranking">操作</span>
    </template>
    <template #default="{ row, index }">
      <span class="item">{{ row.user_name }}</span>
      <span class="item">{{ row.dept_name }}</span>
      <div class="item status">
        <span :class="row.status">
          {{ row.dict_label }}
        </span>
      </div>
      <span class="item num">{{ row.check_in_time }}</span>
      <span class="item">{{ row.check_out_time || '-' }}</span>
      <span class="item ranking">
        <svg-icon icon-class="phone" style="fill: #2D5CF6" />
      </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('recently_absent_personnel', {}).then(res => {
      list.value = res.data;
    });
  });
</script>

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

    &.ranking {
      width: 10%;
    }

    &.status {
      span {
        padding: 4px 8px;
        border-radius: 20px;
      }
    }

    .NORMAL {
      background: rgba(144, 238, 144, .4);
      color: rgba(144, 238, 144, 1);
    }

    .OTHER {
      background: rgba(255, 255, 102, .4);
      color: rgba(255, 255, 102, 1);
    }

    // 事假
    .LEAVE_ABSENCE {
      background: rgba(255, 165, 0, .4);
      color: rgba(255, 165, 0, 1);
    }

    // 调休
    .LEAVE_COMPENCOMPENSATORY {
      background: rgba(173, 216, 230, .4);
      color: rgba(173, 216, 230, 1);
    }

    // 年假
    .LEAVE_ANNUAL {
      background: rgba(135, 206, 250, .4);
      color: rgba(135, 206, 250, 1);
    }

    // 病假
    .LEAVE_SICK {
      background: rgba(255, 0, 0, .4);
      color: rgba(255, 0, 0, 1);
    }

    // 迟到
    .LATE {
      background: rgba(255, 99, 71, .4);
      color: rgba(255, 99, 71, 1);
    }

    // 早退
    .EARLY {
      background: rgba(255, 127, 80, .4);
      color: rgba(255, 127, 80, 1);
    }

    // 旷工
    .ABSENTEE {
      background: rgba(128, 0, 0, .4);
      color: rgba(128, 0, 0, 1);
    }
  }
</style>