<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"
            )
      medical-form-tag-wrapper(
        v-if="inspection || fillInspection",
        :list="list",
        :inspection="inspection",
        :fill-inspection="fillInspection"
        :open-card="openCard",
        :close-card="closeCard"
      )
      .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 MedicalFormTagWrapper from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormTagWrapper.vue";
import BaseButton from "@/components/base/BaseButton.vue";

export default {
  name: "MedicalProtocolsInspection",
  components: {
    MedicalFormTagWrapper,
    BaseButton,
  },
  props: { inspection: Boolean, fillInspection: Boolean },
  data() {
    return {
      list: [
        {
          id: 1,
          label: "Первичный осмотр 2023 года",
          data: [
            {
              id: 1,
              change: false,
              name: "Жалобы",
              tags: [
                { id: 1, label: "Боль при приеме сладкой пищи" },
                { id: 2, label: "Жжение языка" },
                { id: 3, label: "Кровоточивость десен" },
                { id: 4, label: "Лечение у ортодонта не проводилось" },
                { id: 5, label: "Ранее зубы лечили в ЛПУ" },
                { id: 6, label: "Удаление зуба" },
              ],
              complaints: [
                { id: 1, label: "Ранее зубы лечили в ЛПУ" },
                { id: 2, label: "Жжение языка" },
                { id: 3, label: "Кровоточивость десен" },
                { id: 4, label: "Лечение у ортодонта не проводилось" },
                { id: 5, label: "Уныние зуба" },
                { id: 6, label: "Боль при приеме сладкой пищи" },
                { id: 7, label: "Удаление зуба" },
                { id: 2, label: "Жжение языка" },
              ],
            },
            {
              id: 2,
              change: false,
              name: "Аллергологический анамнез",
              tags: [],
            },
            {
              id: 3,
              change: false,
              name: "Принимаемые лекарственные препараты",
              tags: [],
            },
          ],
        },
      ],
    };
  },
  methods: {
    openCard(index) {
      this.list[0].data[index].change = true;
    },
    closeCard(index) {
      this.list[0].data[index].change = false;
    },
  },
};
</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>
