<template lang="pug">
  .wrapper.flex.flex-col.pt-6.dark-blue.font-medium
    .flex.flex-col.gap-y-4
      base-input.search(
        placeholder="Поиск",
        :width="422",
        iconLeft
        size="M"
      )
        template(v-slot:iconLeft)
          q-icon(name="app:search", size="20px", style="color: var(--font-grey-color)")
      .flex.gap-x-2
        base-button(
          @click="choiceService(item.name)",
          v-for="item in baseServices",
          size="S",
          width="100px",
          type="grey"
        ) {{item.name}}
      template(v-for="item in baseServices")
        .serice-wrapper.flex.flex-col(v-if="item.check")
          .service.flex.items-center(v-for="serve in item.data")
            q-checkbox(v-model="serve.checked")
            .info-block.flex.justify-between.w-full
              .flex.flex-col.gap-y-1
                .text-m {{serve.title}}
                .grey-color.text-smm {{item.name}}
              .flex.flex-col.gap-y-1
                .text-m.font-bold {{serve.price}}
                .grey-color.text-smm {{serve.time}}
    .footer.flex.gap-2
      base-button(type="secondary", label="Отменить", width="125px", @click="closeServices")
      base-button(width="132px", label="Сохранить", @click="closeServices", disabled)
</template>

<script>
import BaseInput from "@/components/base/BaseInput.vue";
import BaseButton from "@/components/base/BaseButton.vue";

export default {
  name: "SevicesModal",
  components: { BaseInput, BaseButton },
  props: {
    closeServices: Function,
  },
  data() {
    return {
      baseServices: [
        {
          name: "Терапия",
          check: true,
          data: [
            {
              title: "Пломбирование кариеса",
              price: "350 ₽",
              time: "1 ч. 30 мин.",
              checked: false,
            },
            {
              title: "Консультация стоматолога",
              price: "1 350 ₽",
              time: "1 ч. 30 мин.",
              checked: false,
            },
            {
              title: "Пломбирование кариеса",
              price: "2 350 ₽",
              time: "1 ч. 30 мин.",
              checked: false,
            },
            {
              title: "Пломбирование кариеса",
              price: "3 350 ₽",
              time: "1 ч. 30 мин.",
              checked: false,
            },
            {
              title: "Пломбирование кариеса",
              price: "5 350 ₽",
              time: "1 ч. 30 мин.",
              checked: false,
            },
            {
              title: "Пломбирование кариеса",
              price: "50 ₽",
              time: "1 ч. 30 мин.",
              checked: false,
            },
            {
              title: "Пломбирование кариеса",
              price: "3 350 ₽",
              time: "1 ч. 30 мин.",
              checked: false,
            },
            {
              title: "Пломбирование кариеса",
              price: "5 350 ₽",
              time: "1 ч. 30 мин.",
              checked: false,
            },
            {
              title: "Пломбирование кариеса",
              price: "50 ₽",
              time: "1 ч. 30 мин.",
              checked: false,
            },
          ],
        },
        {
          name: "Хирургия",
          check: false,
          data: [
            {
              title: "Пломбирование кариеса",
              price: "2 350 ₽",
              time: "1 ч. 30 мин.",
              checked: false,
            },
            {
              title: "Консультация стоматолога",
              price: "1 350 ₽",
              time: "1 ч. 30 мин.",
              checked: false,
            },
          ],
        },
        {
          name: "Ортопедия  ",
          check: false,
          data: [
            {
              title: "Пломбирование кариеса",
              price: "2 350 ₽",
              time: "1 ч. 30 мин.",
              checked: false,
            },
            {
              title: "Консультация стоматолога",
              price: "1 350 ₽",
              time: "1 ч. 30 мин.",
              checked: false,
            },
          ],
        },
        {
          name: "Ортодонтия",
          check: false,
          data: [
            {
              title: "Пломбирование кариеса",
              price: "2 350 ₽",
              time: "1 ч. 30 мин.",
              checked: false,
            },
            {
              title: "Консультация стоматолога",
              price: "1 350 ₽",
              time: "1 ч. 30 мин.",
              checked: false,
            },
          ],
        },
      ],
    };
  },
  methods: {
    choiceService(name) {
      this.baseServices.forEach((e) => {
        e.check = false;
        if (e.name === name) e.check = true;
      });
    },
  },
};
</script>

<style lang="sass" scoped>
.wrapper
  width: 422px

.search :deep(path)
  fill: var(--font-grey-color)

.search :deep(.q-field__prepend)
  padding-right: 4px

.base-service
  border-radius: 4px
  border: 1px solid var(--gray-secondary)
  background: var(--gray-thirdly)

.serice-wrapper
  overflow: auto
  max-height: 546px
  margin-right: -18px
  &::-webkit-scrollbar
    width: 4px
  &::-webkit-scrollbar-track:vertical
    margin-bottom: 16px

.service
  height: 67px
  margin-right: 14px
  &:last-child .info-block
    border-bottom: none

.info-block
  padding: 11px 0px
  border-bottom: 1px solid var(--gray-secondary)

.footer
  border-top: 1px solid var(--gray-secondary)
  margin: 0px -32px -12px
  padding: 16px 32px 0px 32px

.dark-blue
  color: var(--font-dark-blue-color)

.grey-color
  color: var(--font-grey-color)
</style>
