<template lang="pug">
  .wrapper-bar.flex.flex-col.gap-y-4
    .flex.px-5.py-5.w-full.justify-around.gap-x-4
      .time-wrapper.flex.justify-between
        base-input-time.py-14px.px-4(v-model="times.start_time", label="Начало")
        base-input-time.py-14px.px-4(v-model="times.end_time", label="Конец")
      .status-wrapper.flex.flex-col
        .flex.justify-center.items-center.h-10
          span.font-semibold Статусы
        .flex.justify-around(class="py-2.5")
          base-button.font-semibold(
            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
        base-custom-select(
          :items="scheduleList",
          center,
          v-model="schedule",
          placeholder="Шаблоны графиков"
        )
    .flex.justify-center
      base-button.font-semibold(:size="40", @click="createSchedules") Сохранить
</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";
export default {
  name: "ScheduleBar",
  components: { BaseButton, BaseCustomSelect, BaseInputTime, BaseInputDate },
  props: {
    buttons: Array,
    times: Object,
    createSchedules: Function,
  },
  data() {
    return {
      scheduleList: [
        { label: "Индивидуальный", id: 1 },
        { label: "2/2", id: 2 },
        { label: "3/2", id: 3 },
        { label: "5/2", id: 4 },
      ],
      schedule: {},
    };
  },
  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: 102px
  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: 690px
  height: 102px
  border: 1.5px solid var(--border-light-grey-color-1)
  border-radius: 4px

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

.button-vacation
  background: #D7D9FF
  border: none
  &:active
    background-color: #D7D9FF
    opacity: 1
    border: none
  &:hover
    background-color: #D7D9FF
    opacity: 0.8
    border: none

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

.graph-template
  width: 218px
  height: 40px
</style>
