<template>
  <div class="main_container p-20" id="main_container">
    <header-view />
    <div class="main_content">
      <div class="left">
        <risk-management />
        <troubleshooting-type />
        <user-usage />
        <task-processing />
      </div>
      <div class="center">
        <situation />
        <div class="flex">
          <assignment-type class="mr-5" />
          <video-center class="ml-5" />
        </div>
      </div>
      <div class="right">
        <hidden-danger-situation />
        <full-staff-training />
        <exam-statistics />
      </div>
    </div>
  </div>
</template>

<script setup>
import { onBeforeUnmount, onMounted } from "vue";
import autofit from "autofit.js";
import HeaderView from "./components/header.vue";
import RiskManagement from "./components/risk_management.vue";
import TroubleshootingType from "./components/troubleshooting_type.vue";
import UserUsage from "./components/user_usage.vue";
import TaskProcessing from "./components/task_processing.vue";
import Situation from "./components/situation.vue";
import AssignmentType from "./components/assignment_type.vue";
import VideoCenter from "./components/video_center.vue";
import HiddenDangerSituation from "./components/hidden_danger_situation.vue";
import FullStaffTraining from "./components/full_staff_training.vue";
import ExamStatistics from "./components/exam_statistics.vue";

onMounted(() => {
  autofit.init({
    dh: document.querySelector("#main_container").offsetHeight,
    dw: 1920,
    el: "#main_container",
    resize: true,
  });
});
onBeforeUnmount(() => {
  autofit.off();
});
</script>

<style scoped lang="scss">
.main_container {
  background-image: url("/src/assets/images/bi/bg.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 100vh;
  font-size: 14px;

  .main_content {
    margin-top: -50px;
    display: flex;

    .left {
      flex-basis: 25%;
    }

    .center {
      flex-basis: 50%;
      margin-left: 15px;
      margin-right: 15px;

      .flex {
        display: flex;
        justify-content: space-between;
      }
    }

    .right {
      flex-basis: 25%;
    }
  }
}
</style>
