<template lang="pug">
  .wrapper.flex.w-full.relative.mx-2
    .schedule-wrapper.relative.flex.flex-col.px-6.py-6.h-full.w-full.gap-y-5
      schedule-header
      schedule-body(
        :employee-list="employeeList",
        :schedules-employee="fetchSchedulesEmployee",
        :schedule-list="scheduleList",
        :serialized="serialized",
        :data-schedule="dataSchedule",
        :buttons="buttons"
      )
      schedule-bar(:data-schedule="dataSchedule", :select-work="selectWork", :buttons="buttons")
</template>

<script>
import ScheduleHeader from "@/pages/schedule/components/ScheduleHeader.vue";
import ScheduleBar from "@/pages/schedule/components/ScheduleBar.vue";
import ScheduleBody from "@/pages/schedule/components/ScheduleBody.vue";
import { fetchWrapper } from "@/shared/fetchWrapper.js";
export default {
  name: "TheSchedule",
  components: { ScheduleHeader, ScheduleBar, ScheduleBody },
  data() {
    return {
      employeeList: [],
      scheduleList: [],
      serialized: [],
      dataSchedule: {
        status: "",
        date: null,
        startTime: "",
        endTime: "",
      },
      buttons: [
        {
          class: "button-work",
          name: "Работает",
          work: "WORKS",
          active: false,
          color: "#55CD76",
          text: "Р",
        },
        {
          class: "button-status",
          name: "Отпуск/больничный",
          work: "VACATION",
          active: false,
          color: "#D7D9FF",
          text: "О",
        },
        {
          class: "button-free",
          name: "Статусы",
          work: "DAY_OFF",
          active: false,
          color: "#9294A7",
          text: "В",
        },
      ],
    };
  },
  methods: {
    fetchSchedules() {
      fetchWrapper
        .get("general/employee/")
        .then((res) => {
          this.employeeList = res.results;
        })
        .then(() => this.fetchSchedulesEmployee());
    },
    fetchSchedulesEmployee() {
      this.employeeList.forEach((e) => {
        fetchWrapper
          .get(`accounts/schedules/?employee=${e.id}`)
          .then((data) => {
            this.scheduleList.push(...data.results);
          })
          .then(() => this.filterScheduleEmployee());
      });
    },
    filterScheduleEmployee() {
      let serialized = [];
      this.scheduleList.forEach((e) => {
        let foundedElem = serialized.find((elem) => elem.id === e.employee.id);
        if (!foundedElem) {
          serialized.push({
            first_name: e.employee.first_name,
            id: e.employee.id,
            last_name: e.employee.last_name,
            patronymic: e.employee.patronymic,
            schedules: [
              {
                date: e.date,
                end_time: e.end_time,
                start_time: e.start_time,
                status: e.status,
                id: e.id,
                title: e.title,
                name: e.name,
              },
            ],
          });
        } else {
          foundedElem.schedules.push({
            date: e.date,
            end_time: e.end_time,
            start_time: e.start_time,
            status: e.status,
            id: e.id,
            title: e.title,
            name: e.name,
          });
        }
      });
      this.serialized = serialized;
    },
    selectWork(work) {
      this.dataSchedule.status = work;
    },
  },
  mounted() {
    this.fetchSchedules();
  },
};
</script>

<style lang="sass" scoped>
.wrapper
  overflow: auto
  border-top-left-radius: 4px
  border-top-right-radius: 4px

.schedule-wrapper
  background-color: var(--default-white)
  height: calc(100vh - 64px)
</style>
