<template lang="pug">
  .list-wrapper.h-full.flex.gap-y-1.flex-col
    .p-4.rounded.background
      q-btn(
        color="primary",
        size="16px",
        label="Создать осмотр",
        no-caps,
        icon="add",
        :style="{width: '100%', height: '40px'}"
        padding="0",
      )
    .p-4.rounded.background.list
      .flex
        base-select(
          :style="{flex: 1}",
          :items="sortingYears",
          v-model="sortingYear",
          clearable
        )
        q-btn.ml-2(
          icon="app:sort-number",
          :style="{width: '40px', height: '40px'}",
          padding="0",
          :class="sortingClass",
          @click="invertSorting"
        )
      .flex.py-4.w-full.color-grey.text-base.justify-center
        span.opacity-50 {{ `Осмотров: ${protocolsData?.length}` }}
      .flex.flex-col.gap-y-2
        medical-protocol-card(
          v-for="protocol in sortingProtocols", :key="protocol.id",
          :protocol-data="protocol",
          @click="openInspection"
        )
</template>

<script>
import BaseSelect from "@/components/base/BaseSelect.vue";
import BaseAvatar from "@/components/base/BaseAvatar.vue";
import MedicalProtocolCard from "@/pages/newMedicalCard/components/MedicalProtocolCard.vue";
export default {
  name: "MedicalProtocolsList",
  components: { BaseSelect, BaseAvatar, MedicalProtocolCard },
  props: { openInspection: Function },
  data() {
    return {
      sorting: false,
      sortingYear: "",
      activeProtocolId: 1,
      protocolsData: [
        {
          id: 1,
          employee: {
            last_name: "Захаров",
            first_name: "Алексей",
            patronymic: "Сергеевич",
            job_title: "Хирург",
            photo: "",
          },
          start: "2023-03-23T13:00:00+03:00",
          end: "2023-03-23T13:40:00+03:00",
          status: "filled",
        },
        {
          id: 2,
          employee: {
            last_name: "Лаврентьев",
            first_name: "Сергей",
            patronymic: "Анатольевич",
            job_title: "Терапевт",
            photo: "",
          },
          start: "2023-04-11T18:00:00+03:00",
          end: "2023-04-11T18:30:00+03:00",
          status: "partially filled",
        },
        {
          id: 3,
          employee: {
            last_name: "Захаров",
            first_name: "Алексей",
            patronymic: "Сергеевич",
            job_title: "Хирург",
            photo: "",
          },
          start: "2021-08-23T10:00:00+03:00",
          end: "2021-08-23T13:00:00+03:00",
          status: "filled",
        },
        {
          id: 4,
          employee: {
            last_name: "Щевьева",
            first_name: "Лариса",
            patronymic: "Николаевна",
            job_title: "Ортодонт",
            photo: "",
          },
          start: "2023-05-23T14:10:00+03:00",
          end: "2023-05-23T15:10:00+03:00",
          status: "",
        },
        {
          id: 5,
          employee: {
            last_name: "Захаров",
            first_name: "Алексей",
            patronymic: "Сергеевич",
            job_title: "Хирург",
            photo: "",
          },
          start: "2022-01-23T13:10:00+03:00",
          end: "2022-01-23T13:30:00+03:00",
          status: "filled",
        },
      ],
    };
  },
  computed: {
    sortingClass() {
      return this.sorting
        ? {
            "sort-icon-active": true,
          }
        : {
            "sort-icon-default": true,
          };
    },
    sortingYears() {
      let years = this.protocolsData
        .map((elem) => {
          return elem?.start.slice(0, 4);
        })
        .sort((first, second) => first - second);
      return [...new Set(years)];
    },
    sortingProtocols() {
      let protocols = [];
      this.protocolsData.forEach((elem) =>
        protocols.push({
          id: elem.id,
          employee: {
            last_name: elem.employee?.last_name,
            first_name: elem.employee?.first_name,
            patronymic: elem.employee?.patronymic,
            job_title: elem.employee?.job_title,
            photo: elem.employee?.photo,
          },
          start: elem.start,
          end: elem.end,
          status: elem.status,
        })
      );
      if (this.sortingYear) {
        protocols = protocols.filter(
          (elem) => elem.start.slice(0, 4) === this.sortingYear
        );
      }
      let sorted = protocols.sort((first, second) => {
        let firstDate = first?.start.split("T")[0];
        let secondDate = second?.start.split("T")[0];
        if (firstDate > secondDate) return 1;
        if (firstDate < secondDate) return -1;
        return 0;
      });
      if (this.sorting) return sorted;
      return sorted.reverse();
    },
  },
  methods: {
    invertSorting() {
      this.sorting = !this.sorting;
    },
  },
};
</script>

<style lang="sass" scoped>
.list-wrapper
  width: 19.6%
.list
  height: calc(100% - 76px)
  overflow-y: auto
  &::-webkit-scrollbar
    width: 0
.background
  background-color: var(--default-white)
.sort-icon-default
  background-color: var(--bg-light-grey)
  color: var(--font-grey-color)
.sort-icon-active
  background-color: var(--btn-blue-color)
  color: var(--default-white)
.color-grey
  color: var(--font-grey-color)
</style>
