<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"
      :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
          .icon.flex.rounded.w-10.h-10.items-center.justify-center
            q-icon(
              name="print",
              size="20px",
              style="color: var(--font-grey-color)"
            )
          .icon.flex.rounded.w-10.h-10.items-center.justify-center
            q-icon(
              name="app:basket", 
              size="20px",
              style="color: var(--font-grey-color)"
            )
      .protocol-body.flex.flex-col.p-6(v-for="item in list[0].data")
        .header.flex.justify-between.items-center
          .flex.font-bold.text-xm {{item.name}}
          .flex.items-center.h-5(:style="{color: 'var(--btn-blue-color)'}")
            q-btn(flat, no-caps)
              q-icon(left, name="app:plus", size="10px")
              span.text-smm.font-medium Создать шаблон
        .flex.gap-x-4(:style="{height: '300px'}")
          .textarea.flex.flex-col.gap-y-1
            .tag-wrap.flex.gap-x-1.gap-y-1
              .tag.flex.items-center.px-3.cursor-pointer(v-for="tag in item.tags") {{tag.label}}
            base-input.px-3(type="textarea", autogrow, borderless placeholder="Введите жалобу...")
          .filter.flex
            .flex.gap-x-2
              base-input(
                placeholder="Поиск",
                outlined,
                :width="232",
                iconLeft
              )
                q-icon(
                  name="app:icon-search",
                  size="20px",
                  style="color: var(--font-grey-color)"
                )
              .button
                q-btn(
                  icon="filter_alt"
                  :style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}",
                  padding="0"
                )
              .button
                q-btn(
                  icon="app:sort-number"
                  :style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}",
                  padding="0"
                )
      .protocol.flex.justify-between.p-6
        .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 BaseButton from "@/components/base/BaseButton.vue";
import BaseInput from "@/components/base/BaseInput.vue";

export default {
  name: "MedicalProtocolsInspection",
  components: { BaseButton, BaseInput },
  props: { inspection: Boolean },
  data() {
    return {
      list: [
        {
          id: 1,
          label: "Первичный осмотр 2023 года",
          data: [
            {
              id: 1,
              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: 2,
              name: "Алергологический анамнез",
              tags: [],
            },
            {
              id: 3,
              name: "Принимаемые лекарственные препараты",
              tags: [],
            },
          ],
        },
      ],
    };
  },
};
</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

.icon
  background: var(--bg-light-grey)

.protocol-body
  min-height: 394px
  background: var(--default-white)
  border-radius: 4px
  row-gap: 26px

.tag-wrap
  flex-wrap: wrap !important

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

.tag
  height: 32px
  background: var(--bg-light-grey)
  border-radius: 4px

.textarea
  width: 800px
  padding: 4px
  border: 1px solid var(--border-light-grey-color)
  border-radius: 4px

.filter
  border: 1px solid var(--border-light-grey-color)
  border-radius: 4px
  padding: 16px 16px 0
  width: 360px
</style>
