<template lang="pug">
  .flex.flex-col.pt-6.gap-y-4(:style="{maxWidth: '682px'}")
    .flex.gap-x-10
      .flex.flex-col.gap-y-4.text-smm
        .flex.gap-x-3.items-center
          .text.font-semibold Статус
          .flex.gap-x-1
            .input.flex.items-center.pl-4.gap-x-1
              img(:src="currentStatus.icon")
              .text-input.font-medium {{currentStatus.name}}
            q-btn.change.flex.w-7.h-7(dense, padding="4px 4px")
              img(:src="folder")
              q-menu
                .status.flex.items-center.gap-x-1.font-medium.text-smm(
                  v-for="status in patientData.statuses",
                  @click="choiceStatus(status)",
                  v-close-popup
                )
                  img(:src="status.icon")
                  span {{status.name}}
        .flex.gap-x-3.items-center
          .text.font-semibold Дата:
          .flex.gap-x-1
            .input.flex.items-center.pl-4
              .text-input.font-medium {{currentDate.format("DD MMMM YYYY")}}
            q-btn.change.flex.w-7.h-7(dense, padding="4px 4px")
              img(:src="calendar")
              q-menu(
                transition-show="scale",
                transition-hide="scale",
                self="top middle",
                :offset="[118, 14]",
              )
                base-calendar(v-model="currentDate")
        .flex.gap-x-3.items-center
          .text.font-semibold Время:
          .flex.gap-x-1
            .input.flex.items-center.pl-4
              .text-input.font-medium 13:00 - 14:00
            q-btn.change.flex.w-7.h-7(@click="isShowTime = true", dense, padding="4px 4px")
              img(:src="time")
            base-modal(v-model="isShowTime", title="Время", modal-padding)
              base-time-modal(:times="times", :close-modal-time="closeModalTime")
      .flex.h-14.gap-x-3.items-center.text-smm
        .text.font-semibold Медкарта:
        .flex.gap-x-1 
          .name.flex.items-center.px-4.pt-2.pb-1.gap-x-2
            .photo.flex.h-10.w-10.items-center.justify-center
              img(:src="noname")
            .flex.flex-col.font-medium
              .text-input Имя Фамилия
              .name-date.text-xsx Дата
          .change.flex.items-center
            q-btn(dense, padding="24px 8px")
              q-icon(name="app:icon-plus", size="12px")
    .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(
          :class="{'other-serivices': services.length}"
        )
          span(v-if="!services.length") Выберите услуги
          .service.flex.px-4.items-center(
            id="miDuv",
            v-else,
            v-for="service in services",
            :style="{background: service.color, display: service.id <=2 ? 'flex' : 'none'}"
          ) {{service.name}}
          .other.flex.h-7.items-center.justify-center(
            v-if="services.length > 3"
          ) {{`+${services.length - 3}`}}
        .price.flex.items-center.items-center.justify-center {{sumService}}
        q-btn.change.flex.w-7.h-7(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
    q-btn(
      color="primary",
      outline,
      size="16px",
      no-caps,
      label="Отменить"
      :style="{width: '126px', height: '40px'}",
      padding="0",
      @click="closeForm"
    )
    q-btn(
      color="primary",
      size="16px",
      no-caps,
      label="Создать запись"
      :style="{width: '174px', height: '40px'}",
      padding="0",
      @click="closeForm"
    )
</template>

<script>
import { column } from "@/pages/clients/utils/tableConfig";
import { v_model } from "@/shared/mixins/v-model";
import BaseModal from "@/components/base/BaseModal.vue";
import noname from "@/assets/icons/noname.svg";
import folder from "@/assets/icons/folder.svg";
import time from "@/assets/icons/time.svg";
import calendar from "@/assets/icons/calendar-grey.svg";
import FormCreateBasicInfo from "@/pages/clients/components/FormCreateBasicInfo";
import FormCreateIdentityDocuments from "@/pages/clients/components/FormCreateIdentityDocuments";
import FormCreateAddresses from "@/pages/clients/components/FormCreateAddresses";
import BaseInput from "@/components/base/BaseInput.vue";
import BaseInputFullName from "@/components/base/BaseInputFullName.vue";
import { patientData } from "@/pages/newCalendar/utils/calendarConfig.js";
import BaseCalendar from "@/components/base/BaseCalendar.vue";
import BaseTimeModal from "@/components/base/BaseTimeModal.vue";
import * as moment from "moment/moment";

export default {
  name: "RecordCreationForm",
  components: {
    BaseModal,
    FormCreateBasicInfo,
    FormCreateIdentityDocuments,
    FormCreateAddresses,
    BaseInput,
    BaseInputFullName,
    BaseCalendar,
    BaseTimeModal,
  },
  props: { isShowForm: Boolean, closeForm: Function },
  mixins: [v_model],
  data() {
    return {
      noname,
      folder,
      time,
      calendar,
      isPhoto: false,
      patientData: patientData,
      currentStatus: patientData.statuses.find((e) => e.name === "Не принят"),
      currentDate: moment().clone(),
      isShowTime: false,
      times: { from: "8:30", to: "10:30" },
      services: [
        { id: 0, name: "Чистка зубов", price: 500, color: "#D8E3FF" },
        { id: 1, name: "Осмотр", price: 300, 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",
        },
      ],
      currentForm: "form-create-basic-info",
      networksSettings: column.find((el) => el.name === "networks")?.settings,
    };
  },
  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() {
      return this.services.reduce((acc, el) => acc + el.price, 0) + "₽";
    },
  },
  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;
    },
    closeModalTime() {
      this.isShowTime = false;
    },
  },
};
</script>

<style lang="sass" scoped>
.input
  width: 200px
  background: var(--bg-light-grey)
  border-radius: 6px

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

.name-date
  color: var(--font-grey-color)

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

.change
  background: var(--bg-light-grey)
  border-radius: 6px
  color: var(--font-grey-color)

.name
  background: var(--bg-light-grey)
  border-radius: 6px
  border-bottom-color: var(--border-light-grey-color)
  border-bottom-width: 4px
  width: 200px

.photo
  background: var(--border-light-grey-color)
  border-radius: 50%

.services
  background: var(--bg-light-grey)
  border-radius: 6px
  height: 28px
  width: 560px

.service
  color: var(--font-dark-blue-color)
  border-radius: 4px
  height: 28px

.other-serivices
  width: 474px
  padding: 4px
  border: 1px solid #D3D4DC
  background: var(--default-white)
  height: 36px

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

.price
  background: var(--bg-light-grey)
  border-radius: 6px
  width: 82px
  color: #9294A7

.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

.status
  border-radius: 4px
  height: 28px
  padding: 8px 8px 8px 5px
  &:hover
    background: var(--bg-light-grey)
    cursor: pointer
</style>
