<template lang="pug">
  .flex.flex-col.pt-6.gap-y-4(:style="{maxWidth: '682px'}")
    header-record-form(
      :current-status="currentStatus",
      :statuses="patientData.statuses",
      :choice-status="choiceStatus"
    )
    .flex.items-center.gap-x-3.text-smm
      .text.font-semibold Услуги:
      .flex.gap-x-1
        .services.flex.items-center.px-4.font-medium.text-smm.gap-x-1.h-9.rounded-md(
          :class="{'other-serivices': services.length}"
        )
          .service.flex.gap-x-1.items-center.rounded.relative(
            :style="{ width: otherColor ? '415px' : 'full'}"
          )
            span(v-if="!services.length") Выберите услуги
            .dark-blue.flex.px-4.items-center.rounded.h-7(
              id="service",
              v-else,
              v-for="service in services",
              :style="{background: service.color}"
            ) {{service.name}}
            .gradient.flex.absolute(
              :style="{background: `linear-gradient(270deg, ${otherColor} 0%, rgba(247, 217, 255, 0) 100%)`}"
            )
          .other.flex.h-7.items-center.justify-center.rounded(v-if="otherColor") {{`+${otherServices.length}`}}
        .price.flex.items-center.items-center.justify-center.rounded-md(v-if="services.length") {{sumService}}
        q-btn.change.flex.w-7.h-9.rounded-md(dense, padding="4px 4px")
          img(:src="folder")
    base-input-full-name(:info-client="patientData")
    .flex.flex-col.flex-auto.l.gap-y-8
      .flex
        button.title-info.px-6.py-2.cursor-pointer.w-full.text-sm(
          v-for="form in forms",
          @click="selectForm(form.component)",
          :class="{active: form.component === currentForm}",
          :key="form.id",
          :id="form.id"
        ) {{form.title}}
      component(
        v-bind:is="currentForm",
        :basic-info="patientData.basic",
        :phone="patientData.phone",
        :email="patientData.email",
        :add-network="addNewNetwork",
        :priority-list="patientData.priorityList",
        :identity-document="patientData.identity_document",
        :addresses="patientData.addresses",
        :save-file="saveDocFile",
        :networks-list="getNetworksList",
      )
  .footer.flex.gap-2
    base-button(type="secondary", label="Отменить", width="126px", @click="closeForm")
    base-button(width="168px", label="Создать запись", @click="closeForm")
</template>

<script>
import folder from "@/assets/icons/folder.svg";
import { column } from "@/pages/clients/utils/tableConfig";
import { v_model } from "@/shared/mixins/v-model";
import FormCreateBasicInfo from "@/pages/clients/components/FormCreateBasicInfo";
import FormCreateIdentityDocuments from "@/pages/clients/components/FormCreateIdentityDocuments";
import FormCreateAddresses from "@/pages/clients/components/FormCreateAddresses";
import FormCreateAttachments from "@/pages/clients/components/FormCreateAttachments.vue";
import BaseInputFullName from "@/components/base/BaseInputFullName.vue";
import { patientData } from "@/pages/newCalendar/utils/calendarConfig.js";
import HeaderRecordForm from "./HeaderRecordForm.vue";
import BaseCalendar from "@/components/base/Calendar/BaseCalendar.vue";
import BaseButton from "@/components/base/BaseButton.vue";

export default {
  name: "RecordCreationForm",
  components: {
    FormCreateBasicInfo,
    FormCreateIdentityDocuments,
    FormCreateAddresses,
    FormCreateAttachments,
    BaseInputFullName,
    BaseCalendar,
    HeaderRecordForm,
    BaseButton,
  },
  props: { isShowForm: Boolean, closeForm: Function },
  mixins: [v_model],
  data() {
    return {
      folder,
      isPhoto: false,
      patientData: patientData,
      currentStatus: patientData.statuses.find((e) => e.name === "Не принят"),
      services: [
        { id: 0, name: "Чистка зубов", price: 500, color: "#D8E3FF" },
        { id: 1, name: "Осмотр", price: 1300, color: "#FFF0CA" },
        {
          id: 2,
          name: "Лечение среднего кариеса",
          price: 500,
          color: "#F7D9FF",
        },
        { id: 3, name: "Осмотр зубов", price: 1300, color: "#FFF0CA" },
      ],
      forms: [
        {
          title: "Основное",
          id: "basic",
          component: "form-create-basic-info",
        },
        {
          title: "ДУЛ",
          id: "doc",
          component: "form-create-identity-documents",
        },
        {
          title: "Адрес",
          id: "address",
          component: "form-create-addresses",
        },
        {
          title: "Дополнительное",
          id: "additional",
          component: "form-create-attachments",
        },
      ],
      currentForm: "form-create-basic-info",
      networksSettings: column.find((el) => el.name === "networks")?.settings,
      otherColor: null,
      otherServices: [],
    };
  },
  computed: {
    getNetworksList() {
      let contacts = [];
      this.patientData.basic.contacts.forEach((elem) =>
        contacts.push(elem.kind.id)
      );
      let filteredNetworks = this.networksSettings.filter(
        ({ id }) => !contacts.includes(id)
      );
      return filteredNetworks;
    },
    sumService() {
      let sum = this.services.reduce((acc, el) => acc + el.price, 0) + " ₽";
      return sum.length >= 5
        ? sum.replace(/(\d{1,3}(?=(?:\d\d\d)+(?!\d)))/g, "$1" + " ")
        : sum;
    },
  },
  methods: {
    changePhoto() {
      this.isPhoto = true;
    },
    selectForm(componentName) {
      this.currentForm = this.forms.find(
        (elem) => elem.component === componentName
      )?.component;
    },
    saveDocFile(e) {
      this.patientData.doc = e.target.files;
    },
    addNewNetwork() {
      const newNetwork = this.getNetworksList;
      if (newNetwork[0])
        this.patientData.basic.contacts.push({
          kind: {
            id: newNetwork[0].id,
            icon: newNetwork[0].icon,
          },
          username: "",
        });
    },
    choiceStatus(e) {
      this.currentStatus = e;
    },
    addShadow() {
      let defaultWidth = 415;
      const target = document.querySelectorAll("#service");
      target.forEach((e) => {
        defaultWidth = defaultWidth - e.offsetWidth;
        if (defaultWidth <= 10) return this.otherServices.push(e);
      });
      this.otherColor = this.otherServices[0]?.style.background;
    },
  },
  mounted() {
    this.addShadow();
  },
};
</script>

<style lang="sass" scoped>
.dark-blue
  color: var(--font-dark-blue-color)
  min-width: 50px

.text
  color: var(--font-grey-color)
  width: 76px

.change
  background: var(--bg-light-grey)
  color: var(--font-grey-color)

.services
  background: var(--bg-light-grey)
  color: var(--font-grey-color)
  width: 560px

.service
  display: -webkit-box
  overflow: hidden

.gradient
  width: 10%
  height: 28px
  right: 0

.other-serivices
  width: 474px
  padding: 4px
  border: 1px solid var(--border-light-grey-color)
  background: var(--default-white)

.other
  width: 46px
  background: var(--bg-light-grey)

.price
  background: var(--bg-light-grey)
  width: 82px
  color: var(--font-grey-color)

.title-info
  color: var(--font-grey-color)
  border-bottom: 1.5px solid var(--font-grey-color)
  &:hover
    color: var(--btn-blue-color)
    border-bottom: 1.5px solid var(--btn-blue-color)
  &.active
    color: var(--btn-blue-color)
    border-bottom: 1.5px solid var(--btn-blue-color)

.footer
  border-top: 1px solid var(--border-light-grey-color)
  margin: 40px -32px 0px
  padding: 16px 32px 0px 32px
</style>
