<template>
  <dashboard-item-container title="不同时间段出勤情况">
    <div class="attendance-status-time">
      <template v-for="item in list" style="width: 100%">
        <div class="top">
          {{ item.shift_name }}{{ item.start_time }}-{{ item.end_time }}
          <span class="day">{{ item.normal_percentage }}%</span>
        </div>
        <el-progress
          :color="item.color"
          :percentage="item.normal_percentage"
          :show-text="false"
          :stroke-width="10"
          :text-inside="true"
        />
      </template>
    </div>

    <p style="padding: 0 20px; color: #fbffff;">各时间段缺勤人员分布</p>
    <div class="personnel-distribution-container">
      <div v-for="item in list" class="personnel-distribution">
        <span>{{ item.shift_name }}</span>
        <span class="personnel">{{ item.normal_count }}人</span>
      </div>
    </div>
  </dashboard-item-container>
</template>

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

  let list = ref({
    shift1: { color: '#165DFF' },
    shift2: { color: '#00B42A' },
    shift3: { color: '#FF7D00' },
  });

  onMounted(() => {
    executeSqlByKeyAndParam('attendance_at_different_time_periods', {}).then(res => {
      res.data.forEach(el => {
        list.value[el.shift_id] = { ...list.value[el.shift_id], ...el };
      });
    });
  });
</script>

<style lang="less" scoped>
  .attendance-status-time {
    padding: 20px;
    font-size: 12px;
    color: #fbffff;
  }

  .top {
    display: flex;
    justify-content: space-between;
    margin: 8px 0;

    .day {
      color: #00B42A;
    }
  }

  .personnel-distribution-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fbffff;
  }

  .personnel-distribution {
    width: 33.33%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;

    span {
      color: rgba(251, 255, 255, .6)
    }

    .personnel {
      margin: 8px 0;
      font-size: 18px;
      color: #fbffff;
    }
  }
</style>