<template lang="pug">
  .flex.flex-col.gap-y-6.pt-6
    .table-time.flex.p-4
      .flex.flex-col.gap-1(v-for="time in timeCoil")
        .flex {{ time }}
        .side.flex.p-1.h-9(:style="{columnGap: '2px'}")
          q-btn.left-side(size="9px", padding="0 8px", color="primary")
            q-icon(name="app:icon-ok")
          q-btn.right-side(size="4px", padding="0 4px")
            img(:src="lockIcon")
    .flex.justify-between.items-center
      .flex.gap-2
        q-btn(
          color="primary",
          outline,
          size="16px",
          no-caps,
          label="Отмена",
          :style="{width: '108px', height: '40px'}",
          padding="0",
          @click="closeModalTime"
        )
        q-btn(
          color="primary",
          size="16px",
          no-caps,
          label="Сохранить"
          :style="{width: '132px', height: '40px'}",
          padding="0",
          @click="closeModalTime"
        )
      .text.font-bold.text-6xl {{`${times.from} - ${times.to}`}}
</template>

<script>
import lockIcon from "@/assets/icons/locked.svg";

export default {
  name: "BaseTimeModal",
  props: { times: Object, closeModalTime: Function },
  data() {
    return { lockIcon, select: false };
  },
  computed: {
    validateStartTime() {
      return this.verifyTime("8:00");
    },
    validateEndTime() {
      return this.verifyTime("19:00");
    },
    timeCoil() {
      let time = [];
      for (let i = this.validateStartTime; i <= this.validateEndTime; i++) {
        time.push(`${i}:00`);
      }
      return time;
    },
  },
  methods: {
    verifyTime(dayTime) {
      let timeArray = dayTime.split(":").map((elem) => parseInt(elem, 10));
      let newTime = timeArray[1] > 30 ? timeArray[0] + 1 : timeArray[0];
      return newTime;
    },
  },
};
</script>

<style lang="sass" scoped>
.table-time
  width: 463px
  height: 174px
  border: 1px solid var(--border-light-grey-color)
  border-radius: 6px
  flex-wrap: wrap !important

.text
  color: var(--font-dark-blue-color)

.side
  border-left: 1px solid var(--border-light-grey-color)
  border-right: 1px solid var(--border-light-grey-color)

.left-side
  border-radius: 6px 1px 1px 6px
  background: #4772F2

.right-side
  border-radius: 1px 6px 6px 1px
  background: #FF6565
</style>
