<template lang="pug">
  .wrapper-bar.flex.flex-col.gap-y-4.p-5.justify-between
    .flex.w-full.justify-around.gap-x-4
      .time-wrapper.flex.justify-between
        base-input-time.py-14px.px-4.justify-around.items-center(
          v-model="times.start_time",
          label="Начало"
        )
        base-input-time.py-14px.px-4.justify-around.items-center(
          v-model="times.end_time",
          label="Конец"
        )
      .status-wrapper.flex.flex-col.gap-y-3.p-3
        .flex.justify-center.items-center.h-10
          span.font-semibold Статусы
        .flex.justify-around.gap-x-4(class="py-2.5")
          base-button.font-semibold.border-none(
            v-for="item in buttons",
            :class="item.class",
            :key="item",
            :style="{minWidth: '190px', minHeight: '43px', border: item.active ? '1.5px solid #5E5E5E' : 'none'}",
            @click="choiceSchedule(item.class)"
          ) {{item.name}}
      .graph-template.flex.flex-col.items-center.gap-y-4
        base-custom-select(
          :items="templateList",
          center,
          v-model="template.item",
          placeholder="Шаблоны графиков"
        )
        base-input.w-28(
          v-if="template.item.id === 1"
          mask="#/#",
          placeholder="0/0",
          label="Введите график",
          v-model="template.item.label"
        )
    .flex.justify-center.gap-x-6
      base-button.font-semibold.w-36(:size="40", @click="createSchedules") Сохранить
      base-button.delete-button.font-semibold.w-36(
        :size="40",
        @click="deleteSchedule"
      ) Удалить
</template>

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

export default {
  name: "ScheduleBar",
  components: {
    BaseButton,
    BaseInput,
    BaseCustomSelect,
    BaseInputTime,
    BaseInputDate,
  },
  props: {
    buttons: Array,
    template: Object,
    times: Object,
    createSchedules: Function,
    deleteSchedule: Function,
  },
  data() {
    return {
      templateList: [
        { label: "Индивидуальный", id: 1 },
        { label: "2/2", id: 2 },
        { label: "3/2", id: 3 },
        { label: "5/2", id: 4 },
      ],
    };
  },
  methods: {
    choiceSchedule(item) {
      this.buttons.forEach((e) => (e.active = false));
      this.buttons.find((e) => e.class === item).active = true;
    },
  },
};
</script>

<style lang="sass" scoped>
.wrapper-bar
  height: 224px
  border: 1.5px solid var(--border-light-grey-color-1)
  border-radius: 4px
  width: calc(100vw - 136px)

.time-wrapper
  height: 120px
  border: 1.5px solid var(--border-light-grey-color-1)
  border-radius: 4px

.select
  height: 40px
  border: 1.5px solid var(--border-light-grey-color)
  border-radius: 4px

.item-input
  appearance: none
  outline: none
  height: 40px
  &::-webkit-calendar-picker-indicator
    display: none
    -webkit-appearance: none
  &::placeholder
    color: var(--font-black-color-1)

.text
  color: var(--font-grey-color)

.status-wrapper
  min-width: 540px
  height: 120px
  border: 1.5px solid var(--border-light-grey-color-1)
  border-radius: 4px

.button-work
  background: #55CD76
  &:active
    background-color: #55CD76
    opacity: 1
    border: none
  &:hover
    background-color: #55CD76
    opacity: 0.8
    border: none

.button-vacation
  background: var(--btn-blue-color-2)
  opacity: 1
  &:active
    background: var(--btn-blue-color-2)
    opacity: 1
    border: none
  &:hover
    background: var(--btn-blue-color-2)
    opacity: 0.8
    border: none

.button-free
  background: #9294A7
  &:active
    background-color: #9294A7
    opacity: 1
    border: none
  &:hover
    background-color: #9294A7
    opacity: 0.8
    border: none

.graph-template
  width: 218px
  height: 120px

.delete-button
  background-color: var(--bg-event-red-color)
  border: none
</style>
