<template lang="pug">
  .modal.pt-6
    .flex.gap-x-4.mb-4
      base-input-date(
        v-model="protocolData.date"
        label="Дата осмотра",
        placeholder="Выберите дату"
        :width="202",
        type="date",
        textColor="var(--font-dark-blue-color)"
        outlined,
      )
      base-input-time(
        v-model="protocolData.startTime"
        label="Время осмотра",
        :width="202",
        outlined,
        type="time",
        textColor="var(--font-dark-blue-color)",
        placeholder="Выберите время"
      )
    .flex.flex-col.gap-y-6px
      span.color-grey.line-height.text-sm.font-semibold Врач
      .flex.gap-x-2
        base-avatar(:size="40")
          img.object-cover.h-full(
            v-if="userData?.photo",
            :src="userData?.photo",
            alt="avatar"
          )
          span.text-sm.color-blue(v-else) {{ avatar }}
        .flex.flex-col
          span.text-sm.color-blue.line-height.mb-2px {{ employeeName }}
          span.color-grey.line-height.text-sm {{ userData?.job_title ? userData?.job_title : "Терапевт" }}
    .flex.gap-2.mt-8
      q-btn(
        color="primary",
        outline,
        size="16px",
        no-caps,
        label="Отменить"
        :style="{width: '126px', height: '40px'}",
        padding="0",
        @click="changeShownCreateModal(false)"
      )
      q-btn(
        color="primary",
        size="16px",
        no-caps,
        label="Создать осмотр"
        :style="{width: '174px', height: '40px'}",
        padding="0",
        @click="saveProtocol"
      )
</template>

<script>
import BaseInput from "@/components/base/BaseInput.vue";
import BaseAvatar from "@/components/base/BaseAvatar.vue";
import BaseInputDate from "@/components/base/BaseInputDate.vue";
import BaseInputTime from "@/components/base/BaseInputTime.vue";
import * as moment from "moment/moment";
import { mapGetters, mapActions } from "vuex";
export default {
  name: "MedicalProtocolCreateModal",
  components: {
    BaseInput,
    BaseAvatar,
    BaseInputDate,
    BaseInputTime,
  },
  props: {
    changeShownCreateModal: Function,
    createInspection: Function,
  },
  data() {
    return {
      protocolData: {
        date: new Date(),
        startTime: moment().format("HH:mm"),
      },
    };
  },
  computed: {
    ...mapGetters({
      userData: "getUserData",
    }),
    avatar() {
      let firstName = this.userData?.first_name
        ? this.userData?.first_name[0]
        : this.userData?.last_name[1];
      return this.userData?.last_name[0] + firstName;
    },
    employeeName() {
      let firstName = this.userData?.first_name
        ? ` ${this.userData?.first_name}`
        : "";
      let patronymic = this.userData?.patronymic
        ? ` ${this.userData?.patronymic}`
        : "";
      return this.userData?.last_name + firstName + patronymic;
    },
  },
  methods: {
    ...mapActions({
      createProtocol: "createProtocol",
    }),
    saveProtocol() {
      if (
        !Object.keys(this.protocolData).every((key) => this.protocolData[key])
      ) {
        return;
      }
      let time = this.protocolData.startTime.split(":");
      let start = moment(this.protocolData.date).hour(time[0]).minute(time[1]);
      let createdProtocol = {
        start: start.isValid() ? start.format() : null,
        end: start.isValid() ? start.add(30, "m").format() : null,
        status: null,
      };
      this.createProtocol(createdProtocol);
      this.changeShownCreateModal(false);
      this.createInspection();
    },
  },
};
</script>

<style lang="sass" scoped>
.modal
  width: 422px
.color-grey
  color: var(--font-grey-color)
.line-height
  line-height: 135%
</style>
