<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.p-7
        base-input(
          type="time",
          v-model="times.start_time",
          label="Начало",
          outlined
        )
        .flex.items-center.mt-6 —
        base-input(
          type="time",
          v-model="times.end_time",
          label="Конец",
          outlined
        )
      .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")
          q-btn(
            v-for="item in buttons",
            :key="item",
            @click="choiceSchedule(item.class)",
            :label="item.name",
            :class="item.class",
            text-color="white",
            :style="{border: item.active ? '1.5px solid #5E5E5E' : 'none'}",
            no-caps,
            style="width: 200px"
          )
      .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",
          outlined
        )
    .flex.justify-center.gap-x-6.h-10
      q-btn(
        label="Сохранить",
        color="primary",
        style="width: 144px",
        padding="4px 24px",
        @click="createSchedules",
        no-caps
      )
      q-btn(
        label="Удалить",
        style="background-color: var(--bg-event-red-color); width: 144px",
        text-color="white",
        padding="4px 24px",
        @click="deleteSchedule",
        no-caps
      )
</template>

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

export default {
  name: "ScheduleBar",
  components: {
    BaseInput,
    BaseCustomSelect,
  },
  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
  min-width: 320px
  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)

.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>
