<template lang="pug">
  .protocols-wrapper.h-full.flex.flex-col.gap-y-2
    .flex.font-bold.text-6xl.items-center.h-full.justify-center(
      v-if="!inspection && !fillInspection"
      :style="{color: 'var(--font-grey-color)'}"
    ) Выберите осмотр
    .flex.flex-col.gap-y-2(v-else)
      .protocol.flex.justify-between.p-6(v-for="elem in list")
        .flex.font-bold.text-6xl {{elem.label}}
        .flex.gap-x-4
          .button
            q-btn(
              icon="print",
              size="20px",
              :style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}",
              padding="0"
            )
          .button
            q-btn(
              icon="app:basket",
              size="20px",
              :style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}",
              padding="0"
            )
    
      div(v-for="form in protocolForms", :key="form.key", v-if="inspection || fillInspection")  
        component(v-bind:is="form.component", :data="form", :fill-inspection="fillInspection", :abc="abc")
      .protocol.flex.justify-between.p-6(v-if="fillInspection")
        .flex.h-fit.w-fit.gap-2
          base-button.text-base.font-semibold(outlined, :size="40") Отменить
          base-button.text-base.font-semibold(:size="40") Сохранить
        .flex.items-center.gap-x-3(:style="{color: 'var(--font-grey-color)'}")
          .flex.font-semibold.text-7xl 0%
          .flex.font-medium.text-smm.w-20 заполнение осмотра
</template>

<script>
import MedicalFormTag from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormTag.vue";
import DataForm from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DataForm.vue";
import DiseaseForm from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DiseaseForm.vue";
import BaseButton from "@/components/base/BaseButton.vue";
import IndexForm from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/IndexForm.vue";
import MainFactorsForm from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MainFactorsForm.vue";
import { protocolForms } from "@/pages/newMedicalCard/utils/medicalConfig.js";

export default {
  name: "MedicalProtocolsInspection",
  components: {
    MedicalFormTag,
    DataForm,
    DiseaseForm,
    BaseButton,
    IndexForm,
    MainFactorsForm,
  },
  props: { inspection: Boolean, fillInspection: Boolean },
  data() {
    return {
      protocolForms: protocolForms,
      list: [
        {
          id: 1,
          label: "Первичный осмотр 2023 года",
        },
      ],
      abc: [
        "А",
        "Б",
        "В",
        "Г",
        "Д",
        "Е",
        "Ё",
        "Ж",
        "З",
        "И",
        "Й",
        "К",
        "Л",
        "М",
        "Н",
        "О",
        "П",
        "Р",
        "С",
        "Т",
        "У",
        "Ф",
        "Х",
        "Ц",
        "Ч",
        "Ш",
        "Щ",
        "Ы",
        "Э",
        "Ю",
        "Я",
      ],
    };
  },
};
</script>

<style lang="sass" scoped>
.protocols-wrapper
  flex: 1
  overflow-y: auto
  &::-webkit-scrollbar
    width: 0

.protocol
  background: var(--default-white)
  width: 100%
  height: 80px
  border-radius: 4px

.button
  display: flex
  align-items: center
  width: 40px
  height: 40px
  justify-content: center
  cursor: pointer
  border-radius: 4px
  background: var(--bg-light-grey)
</style>
