<template lang="pug">
  .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.rounded-md
            img(:src="currentStatus.icon")
            .dark-blue.font-medium {{currentStatus.name}}
          q-btn.change.flex.w-7.h-7.rounded-md(dense, padding="4px 4px")
            q-icon.icon(name="app:folder", size="20px")
            q-menu(:offset="[140, 8]")
              .flex.p-2.flex-col
                .status.flex.items-center.gap-x-1.font-medium.text-smm.rounded.h-7(
                  v-for="status in 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.rounded-md
            .dark-blue.font-medium {{currentDate.format("DD MMMM YYYY")}}
          q-btn.change.flex.w-7.h-7.rounded-md(dense, padding="4px 4px")
            q-icon.icon(name="app:calendar", size="20px")
            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.rounded-md
            .dark-blue.font-medium 13:00 - 14:00
          q-btn.change.flex.w-7.h-7.rounded-md(@click="isShowTime = true", dense, padding="4px 4px")
            q-icon.icon(name="app:time", size="20px")
          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.rounded-md
          .photo.flex.h-10.w-10.items-center.justify-center
            q-icon.icon(name="app:noname", size="24px")
          .flex.flex-col.font-medium
            .dark-blue Имя Фамилия
            .grey-color.text-xsx.rounded-md Дата
        .change.flex.items-center.rounded-md
          q-btn(dense, padding="18px 4px")
            q-icon.icon(name="app:folder", size="20px")
</template>

<script>
import noname from "@/assets/icons/noname.svg";
import BaseCalendar from "@/components/base/Calendar/BaseCalendar.vue";
import BaseModal from "@/components/base/BaseModal.vue";
import BaseTimeModal from "@/components/base/BaseTimeModal.vue";
import * as moment from "moment/moment";

export default {
  name: "HeaderRecordForm",
  components: { BaseCalendar, BaseModal, BaseTimeModal },
  props: { currentStatus: Object, statuses: Array, choiceStatus: Function },
  data() {
    return {
      noname,
      currentDate: moment().clone(),
      isShowTime: false,
      times: { from: "8:30", to: "10:30" },
    };
  },
  methods: {
    closeModalTime() {
      this.isShowTime = false;
    },
  },
};
</script>

<style lang="sass" scoped>
.input
  width: 200px
  border: 1px solid var(--gray-secondary)

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

.dark-blue
  color: var(--font-dark-blue-color)
  min-width: 50px

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

.status
  width: 160px
  height: 40px
  padding: 8px 10px
  &:hover
    background: var(--bg-light-grey)
    cursor: pointer

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

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

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

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