<template lang="pug">
  .calendar-header-wrapper.w-full.flex.items-center.p-4.justify-between
    base-input(
      iconLeft,
      outlined,
      :width="280",
      placeholder="Найти ...",
      fontSize="16px",
      lineHeight="19px"
    )
      q-icon(name="app:icon-search", size="20px")
    .flex.gap-x-4.items-center.justify-center
      q-btn(
        color="secondary",
        round,
        size="14px",
        dense,
        icon="arrow_back_ios_new",
        text-color="primary",
        padding="2px 11px 2px 8px"
      )
      base-input(
        outlined,
        :width="300",
        fontSize="16px",
        lineHeight="19px",
        iconRight,
        id="calendarIcon"
      )
        q-icon.text(name="app:calendar", size="20px", ref="calendarIcon", @click="changeCalendarVisibility(false)")
          //q-popup-proxy(
            cover,
            transition-show="scale",
            transition-hide="scale"
            anchor="bottom middle", self="top middle"
          //)
            //q-date(v-model="date", minimal, range)
              .flex.items-center.justify-end
                q-btn(
                  v-close-popup,
                  label="Закрыть",
                  color="primary",
                  flat
                )
        q-menu(
          :style="{'margin-top': '4px !important'}"
          target="#calendarIcon"
          v-model="calendarVisibility",
          transition-show="scale",
          transition-hide="scale"
          anchor="bottom middle",
          self="top middle"
        )
          base-calendar(v-model="date", range)
      q-btn(
        color="secondary",
        icon="arrow_forward_ios",
        round,
        size="14px",
        text-color="primary",
        dense
      ) 
    .h-10.p-1.flex.items-center.justify-between.bg-secondary.rounded.text-grey-color.ml-52
      q-btn-toggle(
        v-model="displayType",
        :options="displayTypesList",
        no-caps,
        toggle-color="light-blue-4",
        padding="4px"
      )
</template>

<script>
import BaseInput from "@/components/base/BaseInput";
import * as moment from "moment/moment";
import BaseCalendar from "@/components/base/BaseCalendar";
export default {
  name: "CalendarHeader",
  components: { BaseInput, BaseCalendar },
  data() {
    return {
      displayType: "collapsed",
      displayTypesList: [
        {
          label: "col",
          value: "collapsed",
        },
        {
          label: "exp",
          value: "expanded",
        },
      ],
      date: {
        from: moment().clone().add(1, "month"),
        to: moment().clone().add(2, "month"),
      },
      calendarVisibility: false,
    };
  },
  methods: {
    changeCalendarVisibility(value) {
      this.calendarVisibility = value;
    },
  },
  watch: {},
};
</script>

<style lang="sass" scoped>
.calendar-header-wrapper
  background-color: var(--default-white)
  height: 72px
  border-radius: 4px
  z-index: 10

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

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

.text-primary
  color: var(--font-dark-blue-color-0) !important

.bg-secondary
  background: var(--bg-light-grey) !important

.q-btn--round
  width: 32px !important
  height: 32px !important
  min-width: 32px !important
  min-height: 32px !important

.q-btn-group :deep(.q-btn-item)
  border-radius: 4px !important
</style>
