<template>
  <header>
    <div :class="className === 'side' ? 'flex-between' : ''">
      <div class="logo" :style="logoStyle">
        <a href="/">
          <img src="../../resources/img/logo.png" alt="BI MANAGER LOGO" />
        </a>
      </div>
      <div class="user-info flex justify-end align-center">
        <div class="user flex align-center">
          <span class="user-name">{{ store.state.loginUser.user_name }}님</span>
        </div>
        <button class="logout-btn" @click="logout">로그아웃</button>
      </div>
    </div>
  </header>
</template>

<script>
import SvgIcon from "@jamescoyle/vue-icon";
import { mdiEmail, mdiAccountCircle } from "@mdi/js";
import axios from "axios";
import store from "../pages/AppStore";

export default {
  props: {
    className: String,
  },
  data() {
    return {
      mdiEmail: mdiEmail,
      mdiAccountCircle: mdiAccountCircle,
      store: store,
    };
  },
  methods: {
    logout: function () {
      var vm = this;
      axios({
        url: "/logout.json",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
      })
        .then(function (response) {
          vm.$showAlert("메세지", "로그아웃");
          if (response.data.checkMessage.status > 0) {
            store.commit("setLoginUser", null);
            vm.$router.push({ path: "/login.page", query: {} });
          }
        })
        .catch(function (error) {
          this.$showAlert(
            "에러 발생",
            "에러가 발생했습니다. 관리자에게 문의해 주세요."
          );
        });
    },
  },
  watch: {},
  computed: {
    logoStyle() {
      if (this.className === "top") {
        return {
          position: "absolute",
          top: "50%",
          left: "50%",
          transform: "translate(-50%,-50%)",
        };
      } else {
        return {};
      }
    },
  },
  components: {
    SvgIcon: SvgIcon,
  },
};
</script>