<template>
  <dashboard-container hide>
    <div class="container">
      <div class="total-container wow bounceInDown">
        <total-container />
      </div>
      <div class="chart-container statistics-container">
        <div class="w66-container wow slideInLeft">
          <!-- 主管平均工作时长 -->
          <department-attendance />
        </div>
        <div class="w33-container ml16 wow slideInRight">
          <!-- 出勤趋势分析 -->
          <attendance-trend />
        </div>
      </div>
      <div class="chart-container staff-container">
        <div class="w33-container wow slideInLeft">
          <!-- 出勤状态分布 -->
          <attendance-status />
        </div>
        <div class="w66-container wow slideInRight">
          <!-- 最近缺勤人员 -->
          <number-of-absences />
        </div>
      </div>
      <div class="chart-container department-container">
        <div class="w33-container wow slideInLeft">
          <!-- 主管详情 -->
          <department-details />
        </div>
        <div class="w33-container wow fadeIn">
          <!-- 工作时长和查获量的散点图表 -->
          <working-hours-and-seizure-volume />
        </div>
        <div class="w33-container wow slideInRight">
          <!-- 连续出勤天数 -->
          <continuous-attendance />
        </div>
      </div>
      <div class="chart-container proportion-container">
        <div class="w33-container wow slideInLeft">
          <!-- 排班时长统计 -->
          <overtime-hours />
        </div>
        <div class="w33-container wow fadeIn">
          <!-- 请假类型占比 -->
          <leave-type />
        </div>
        <div class="w33-container wow slideInRight">
          <!-- 不同时间段出勤情况 -->
          <attendance-status-time />
        </div>
      </div>
    </div>
  </dashboard-container>
</template>

<script setup>
  import DashboardContainer from '@/views/dataBigScreen/dashboard/components/DashboardContainer.vue';
  import TotalContainer from '@/views/dataBigScreen/attendance/TotalContainer.vue';
  import DepartmentAttendance from '@/views/dataBigScreen/attendance/DepartmentAttendance.vue';
  import AttendanceTrend from '@/views/dataBigScreen/attendance/AttendanceTrend.vue';
  import AttendanceStatus from '@/views/dataBigScreen/attendance/AttendanceStatus.vue';
  import NumberOfAbsences from '@/views/dataBigScreen/attendance/NumberOfAbsences.vue';
  import DepartmentDetails from '@/views/dataBigScreen/attendance/DepartmentDetails.vue';
  import ContinuousAttendance from '@/views/dataBigScreen/attendance/ContinuousAttendance.vue';
  import OvertimeHours from '@/views/dataBigScreen/attendance/OvertimeHours.vue';
  import LeaveType from '@/views/dataBigScreen/attendance/LeaveType.vue';
  import AttendanceStatusTime from '@/views/dataBigScreen/attendance/AttendanceStatusTime.vue';
  import WorkingHoursAndSeizureVolume from '@/views/dataBigScreen/attendance/WorkingHoursAndSeizureVolume.vue';
</script>

<style lang="scss" scoped>
  .container {
    width: 100%;
    padding: 20px;

    .chart-container {
      display: flex;
      height: 400px;
      margin: 16px 0;

      .w66-container {
        width: 66.66%;
      }

      .w33-container {
        width: calc(33.33% - 16px);
        margin-right: 16px;

        &.ml16 {
          margin: 0 0 0 16px !important;
        }

        &:nth-last-child(1) {
          width: 33.33%;
          margin: 0;
        }
      }
    }
  }
</style>
