<template lang="pug">
  .header-wrapper.relative.flex.justify-center.box-border.py-2.pl-4_75px.pr-6
    .flex.items-center.box-border.cursor-pointer.mr-auto
      img.logo-img.mr-29_25px(
        src="@/assets/images/logo.svg",
        alt="Logo",
        @click="redirectHomePage"
      )
      header-inputs
    .flex.ml-auto.items-center.gap-x-8
      base-button(
        type="secondary",
        width="80px",
        no-padding,
        @click="openForm"
      )
        q-icon(name="app:plus", size="12px")
        q-icon(name="app:person", size="20px", right)
      base-client-form-create(
        v-model="isOpenFormInternal",
        :set-updated-clients="setUpdatedClients",
        :write-created-client-id="writeCreatedClientId",
      )
      q-btn(
        flat,
        dense,
        :style="{color: 'var(--font-dark-blue-color)', 'min-width': '24px', 'min-height': '24px'}",
        round,
      )
        q-icon(name="app:icon-bell", size="20px")
      .flex.justify-centflexer.items-center.relative
        q-btn(
          @click="openPopup",
          flat,
          padding="0",
          style="color: var(--font-grey-color)"
        )
          base-avatar(:size="36", :color="userData?.color", v-if="!userData?.photo") {{changeName}}       
          base-avatar(:size="32", v-else)
            img.h-full.object-cover(:src="url + userData?.photo", alt="Avatar")
          .h-6.w-6.flex.items-center.justify-center.ml-2.pt-1
            q-icon(name="app:icon-down-arrow", size="12px")
          q-menu(
            :offset="[60, 6]"
          )
            .menu.p-4
              .text-popup.flex.cursor-pointer.pl-2(@click="logout", v-close-popup) Выйти
</template>

<script>
import img from "@/assets/images/avatar.svg";
import chargePersonAvatar from "@/assets/images/charge-person-avatar.svg";
import HeaderInputs from "./HeaderInputs.vue";
import BaseAvatar from "@/components/base/BaseAvatar";
import BasePopup from "@/components/base/BasePopup.vue";
import BaseClientFormCreate from "@/components/base/BaseClientFormCreate";
import BaseButton from "@/components/base/BaseButton.vue";
export default {
  name: "TheHeader",
  components: {
    HeaderInputs,
    BaseAvatar,
    BasePopup,
    BaseClientFormCreate,
    BaseButton,
  },
  props: {
    url: String,
    closeForm: Function,
    openForm: Function,
    isOpenForm: Boolean,
    setUpdatedClients: Function,
    writeCreatedClientId: Function,
  },
  data() {
    return {
      avatarSrc: img,
      chargePersonInfo: {
        avatarSrc: chargePersonAvatar,
        name: "Гордеев Николай Степанович",
      },
      showPopup: false,
      userData: JSON.parse(localStorage.getItem("userData")),
    };
  },
  computed: {
    changeName() {
      return `${this.userData?.last_name || ""} ${
        this.userData?.first_name || ""
      } ${this.userData?.patronymic || ""}`;
    },
    isOpenFormInternal: {
      get() {
        return this.isOpenForm;
      },
      set(val) {
        if (!val) this.closeForm();
        else this.openForm();
      },
    },
  },
  methods: {
    redirectHomePage() {
      this.$router.push("/calendar");
    },
    logout() {
      localStorage.removeItem("tokenAccess");
      this.$router.go("/login");
    },
    openPopup() {
      this.showPopup = !this.showPopup;
    },
  },
};
</script>

<style lang="sass" scoped>
.header-buttons
  outline: none
  border: none
  background-color: transparent
  color: var(--font-dark-blue-color)

.header-wrapper
  width: 100%
  height: 56px
  background-color: var(--default-white)
  position: relative
  z-index: 11

.logo-img
  height: 32px
  width: 70px

.icon-down-arrow
  width: 24px
  height: 24px

.icon-bell
  width: 24px
  height: 24px
  color: var(--font-dark-blue-color)

.charge-person-container
  position: absolute

.text-popup
  color: var(--btn-blue-color)
  &:hover
    opacity: 0.8

.menu
  width: 160px
  max-width: 160px !important
  border-radius: 4px
  background-color: var(--default-white)
.on-right
  margin-left: 8px
.q-btn :deep(.q-ripple)
  display: none
.q-btn :deep(.q-focus-helper)
  display: none
</style>
