<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(label="Дата", type="date", outlined)
      base-custom-select(v-model="currentEmployee", label="Текущий сотрудник")
      base-custom-select(v-model="currentEmployee", label="Замена сотрудника")
      .time-wrapper.flex.justify-center.gap-x-6
        base-input(
          type="time",
          label="Начало",
          v-model="timesShift.start_time",
          outlined
        )
        .flex.items-center.mt-4 —
        base-input(
          type="time",
          label="Конец",
          v-model="timesShift.end_time",
          outlined
        )
      .flex.justify-center
        q-btn(
          label="Сохранить",
          color="primary",
          padding="8px 24px",
          no-caps
        )
</template>

<script>
import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
import BaseInput from "@/components/base/BaseInput.vue";

export default {
  name: "FormChangeShift",
  components: { BaseCustomSelect, BaseInput },
  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>
