<template>
  <base-nav
    class="navbar-top navbar-dark"
    id="navbar-main"
    :show-toggle-button="false"
    expand
  >
    <form class="navbar-search navbar-search-light form-inline mr-sm-3">
      <div class="form-group mb-0">
        <!-- <base-input
          placeholder="Search"
          class="input-group-alternative"
          alternative=""
          addon-right-icon="fas fa-search"
          inputClasses="fix-input"
        >
        </base-input> -->
        <div class="input-group input-group-alternative input-group-merge">
          <div class="input-group-prepend">
            <span class="input-group-text"><i class="fas fa-search"></i></span>
          </div>
          <input class="form-control " placeholder="Tìm kiếm" type="text" />
        </div>
        <button
          type="button"
          class="close"
          data-action="search-close"
          data-target="#navbar-search-main"
          aria-label="Close"
        >
          <span aria-hidden="true">×</span>
        </button>
      </div>
    </form>
    <ul class="navbar-nav align-items-center ml-md-auto">
      <li class="nav-item d-xl-none">
        <!-- Sidenav toggler -->
        <div
          class="pr-3 sidenav-toggler sidenav-toggler-dark"
          data-action="sidenav-pin"
          data-target="#sidenav-main"
        >
          <div class="sidenav-toggler-inner">
            <i class="sidenav-toggler-line"></i>
            <i class="sidenav-toggler-line"></i>
            <i class="sidenav-toggler-line"></i>
          </div>
        </div>
      </li>
      <li class="nav-item d-sm-none">
        <a
          class="nav-link"
          href="#"
          data-action="search-show"
          data-target="#navbar-search-main"
        >
          <i class="ni ni-zoom-split-in"></i>
        </a>
      </li>
      <li class="nav-item dropdown">
        <a
          class="nav-link"
          href="#"
          role="button"
          data-toggle="dropdown"
          aria-haspopup="true"
          aria-expanded="false"
        >
          <i class="ni ni-bell-55"></i>
        </a>
        <div
          class="dropdown-menu dropdown-menu-xl dropdown-menu-right py-0 overflow-hidden"
        >
          <!-- Dropdown header -->
          <div class="px-3 py-3">
            <h6 class="text-sm text-muted m-0">
              You have
              <strong class="text-primary">13</strong> notifications.
            </h6>
          </div>
          <!-- List group -->
          <div class="list-group list-group-flush">
            <a href="#!" class="list-group-item list-group-item-action">
              <div class="row align-items-center">
                <div class="col-auto">
                  <!-- Avatar -->
                  <!-- <img
                    alt="Image placeholder"
                    src="../../assets/img/theme/team-1.jpg"
                    class="avatar rounded-circle"
                  /> -->
                </div>
                <div class="col ml--2">
                  <div
                    class="d-flex justify-content-between align-items-center"
                  >
                    <div>
                      <h4 class="mb-0 text-sm">John Snow</h4>
                    </div>
                    <div class="text-right text-muted">
                      <small>2 hrs ago</small>
                    </div>
                  </div>
                  <p class="text-sm mb-0">
                    Let's meet at Starbucks at 11:30. Wdyt?
                  </p>
                </div>
              </div>
            </a>
            <a href="#!" class="list-group-item list-group-item-action">
              <div class="row align-items-center">
                <div class="col-auto">
                  <!-- Avatar -->
                  <!-- <img
                    alt="Image placeholder"
                    src="../../assets/img/theme/team-2.jpg"
                    class="avatar rounded-circle"
                  /> -->
                </div>
                <div class="col ml--2">
                  <div
                    class="d-flex justify-content-between align-items-center"
                  >
                    <div>
                      <h4 class="mb-0 text-sm">John Snow</h4>
                    </div>
                    <div class="text-right text-muted">
                      <small>3 hrs ago</small>
                    </div>
                  </div>
                  <p class="text-sm mb-0">
                    A new issue has been reported for Argon.
                  </p>
                </div>
              </div>
            </a>
            <a href="#!" class="list-group-item list-group-item-action">
              <div class="row align-items-center">
                <div class="col-auto">
                  <!-- Avatar -->
                  <!-- <img
                    alt="Image placeholder"
                    src="../../assets/img/theme/team-3.jpg"
                    class="avatar rounded-circle"
                  /> -->
                </div>
                <div class="col ml--2">
                  <div
                    class="d-flex justify-content-between align-items-center"
                  >
                    <div>
                      <h4 class="mb-0 text-sm">John Snow</h4>
                    </div>
                    <div class="text-right text-muted">
                      <small>5 hrs ago</small>
                    </div>
                  </div>
                  <p class="text-sm mb-0">
                    Your posts have been liked a lot.
                  </p>
                </div>
              </div>
            </a>
            <a href="#!" class="list-group-item list-group-item-action">
              <div class="row align-items-center">
                <div class="col-auto">
                  <!-- Avatar -->
                  <!-- <img
                    alt="Image placeholder"
                    src="../../assets/img/theme/team-5.jpg"
                    class="avatar rounded-circle"
                  /> -->
                </div>
                <div class="col ml--2">
                  <div
                    class="d-flex justify-content-between align-items-center"
                  >
                    <div>
                      <h4 class="mb-0 text-sm">John Snow</h4>
                    </div>
                    <div class="text-right text-muted">
                      <small>3 hrs ago</small>
                    </div>
                  </div>
                  <p class="text-sm mb-0">
                    A new issue has been reported for Argon.
                  </p>
                </div>
              </div>
            </a>
          </div>
          <!-- View all -->
          <a
            href="#!"
            class="dropdown-item text-center text-primary font-weight-bold py-3"
            >View all</a
          >
        </div>
      </li>
      <li class="nav-item dropdown">
        <a
          class="nav-link"
          href="#"
          role="button"
          data-toggle="dropdown"
          aria-haspopup="true"
          aria-expanded="false"
        >
          <i class="ni ni-ungroup"></i>
        </a>
        <div
          class="dropdown-menu dropdown-menu-lg dropdown-menu-dark bg-default dropdown-menu-right"
        >
          <div class="row shortcuts px-4">
            <a href="#!" class="col-4 shortcut-item">
              <span
                class="shortcut-media avatar rounded-circle bg-gradient-red"
              >
                <i class="ni ni-calendar-grid-58"></i>
              </span>
              <small>Calendar</small>
            </a>
            <a href="#!" class="col-4 shortcut-item">
              <span
                class="shortcut-media avatar rounded-circle bg-gradient-orange"
              >
                <i class="ni ni-email-83"></i>
              </span>
              <small>Email</small>
            </a>
            <a href="#!" class="col-4 shortcut-item">
              <span
                class="shortcut-media avatar rounded-circle bg-gradient-info"
              >
                <i class="ni ni-credit-card"></i>
              </span>
              <small>Payments</small>
            </a>
            <a href="#!" class="col-4 shortcut-item">
              <span
                class="shortcut-media avatar rounded-circle bg-gradient-green"
              >
                <i class="ni ni-books"></i>
              </span>
              <small>Reports</small>
            </a>
            <a href="#!" class="col-4 shortcut-item">
              <span
                class="shortcut-media avatar rounded-circle bg-gradient-purple"
              >
                <i class="ni ni-pin-3"></i>
              </span>
              <small>Maps</small>
            </a>
            <a href="#!" class="col-4 shortcut-item">
              <span
                class="shortcut-media avatar rounded-circle bg-gradient-yellow"
              >
                <i class="ni ni-basket"></i>
              </span>
              <small>Shop</small>
            </a>
          </div>
        </div>
      </li>
    </ul>
    <ul class="navbar-nav align-items-center ml-auto ml-md-0">
      <li class="nav-item dropdown">
        <base-dropdown class="nav-link pr-0">
          <div class="media align-items-center" slot="title">
            <span class="avatar avatar-sm rounded-circle">
              <img :alt="user.username" :src="uploadHost + user.avatar" />
            </span>
            <div class="media-body ml-2 d-none d-lg-block">
              <span
                style="margin-right:10px; cursor: pointer;"
                class="mb-0 text-sm  font-weight-bold"
                >{{ user.name }}</span
              >
              <i class="ni ni-bold-down"></i>
            </div>
          </div>

          <template>
            <!-- <div class=" dropdown-header noti-title">
              <h6 class="text-overflow m-0">Welcome!</h6>
            </div> -->
            <router-link to="/profile" class="dropdown-item">
              <i class="ni ni-single-02"></i>
              <span>Hồ sơ</span>
            </router-link>
            <!-- <router-link to="/profile" class="dropdown-item">
              <i class="ni ni-settings-gear-65"></i>
              <span>Settings</span>
            </router-link> -->
            <!-- <router-link to="/profile" class="dropdown-item">
              <i class="ni ni-calendar-grid-58"></i>
              <span>Activity</span>
            </router-link> -->
            <div class="dropdown-divider"></div>
            <a href="#" @click="doLogout" class="dropdown-item">
              <i class="ni ni-user-run"></i>
              <span>Đăng xuất</span>
            </a>
          </template>
        </base-dropdown>
      </li>
    </ul>
  </base-nav>
</template>
<script>
import { mapState, mapActions } from "vuex";
import config from "@/config";
export default {
  data() {
    return {
      activeNotifications: false,
      showMenu: false,
      searchQuery: "",
      uploadHost: config.uploadHost
    };
  },
  computed: {
    ...mapState("account", ["user"])
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    ...mapActions("account", ["logout", "userInfo"]),
    toggleSidebar() {
      this.$sidebar.displaySidebar(!this.$sidebar.showSidebar);
    },
    hideSidebar() {
      this.$sidebar.displaySidebar(false);
    },
    toggleMenu() {
      this.showMenu = !this.showMenu;
    },
    getUserInfo() {
      var self = this;
      this.userInfo()
        .then(() => {})
        .catch(error => {
          self.$alertify.error(error, {
            duration: 2000
          });
        });
    },
    doLogout: function() {
      this.logout()
        .then(() => {
          this.$router.push("/login");
        })
        .catch(error => {
          this.$alertify.error(error, {
            duration: 2000
          });
        });
    }
  }
};
</script>
