<template lang="pug">
  .flex.flex-col.gap-y-6.pt-6.pb-7.px-8.event-form.fixed.right-6.bottom-6(
    v-click-outside="closeForm"
  )
    .flex.justify-between
      span.title.text-xl.font-bold Замена смен
      .flex.pt-2
        .icon-cancel.close-icon.tesxt-xs.cursor-pointer(@click="closeForm")
    .flex.flex-col.gap-y-6
      base-input-date(label="Дата")
      base-custom-select(v-model="currentEmployee", label="Текущий сотрудник")
      base-custom-select(v-model="currentEmployee", label="Замена сотрудника")
      .time-wrapper.flex.justify-center
        base-input-time.px-4.item-input.text-base(label="Начало", v-model="timesShift.start_time")
        base-input-time.px-4.item-input.text-base(label="Конец", v-model="timesShift.end_time")
      .flex.justify-center
        base-button.font-semibold(:size="40") Сохранить
</template>

<script>
import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
import BaseInputDate from "@/components/base/BaseInputDate.vue";
import BaseInputTime from "@/components/base/BaseInputTime.vue";
import BaseButton from "@/components/base/BaseButton.vue";

export default {
  name: "FormChangeShift",
  components: { BaseCustomSelect, BaseInputDate, BaseInputTime, BaseButton },
  props: { closeForm: Function, timesShift: Object },
  data() {
    return {
      currentEmployee: { label: "", id: null },
    };
  },
};
</script>

<style lang="sass" scoped>
.event-form
  height: fit-content
  width: 534px
  background-color: var(--default-white)
  box-shadow: var(--default-shadow)
  border-radius: 4px
  z-index: 5
</style>
