<template>
  <div
    :class="{ nav: true, 'header-fixed ': isFixed, 'home-nav': isHome }"
    id="navbar"
  >
    <div class="container">
      <div class="logo-container wow animate__animated animate__fadeInLeft">
        <img src="@/assets/imgs/home/logo.png" />
      </div>
      <div class="right">
        <div class="tabs wow animate__animated animate__fadeInUp">
          <div
            class="tab-item"
            :class="{
              activeHome: currentTab.name == item.name && isHome,
              active: currentTab.name == item.name && !isHome,
            }"
            v-for="(item, index) in pages"
            :key="index"
            @click="handleClickTab(item)"
          >
            <!-- <div ></div> -->
            <router-link :to="item.path">{{ item.name }} </router-link>
          </div>
        </div>
        <div class="tools wow animate__animated animate__fadeInRight">
          <div class="wrapper">
            <el-dropdown trigger="click">
              <el-button round>
                <i class="el-icon-user"></i>
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  ><span
                    v-if="!hasToken"
                    @click="handleToLogin"
                    class="operation-item"
                    >登陆</span
                  ></el-dropdown-item
                >
                <el-dropdown-item
                  ><router-link
                    v-if="hasToken"
                    to="/personal"
                    class="operation-item"
                    >个人中心</router-link
                  ></el-dropdown-item
                >
                <el-dropdown-item>
                  <span v-if="hasToken" @click="handleLogOut">退出</span>
                  <!-- <span class="logout" v-if="hasToken">
                    <el-popover
                      placement="bottom"
                      width="200"
                      trigger="click"
                      v-model="logoutDialogVisible"
                    >
                     
                      <p>确定退出吗？</p>
                      <div style="text-align: right; margin: 0">
                        <el-button
                          size="mini"
                          type="text"
                          @click="logoutDialogVisible = false"
                          >取消</el-button
                        >
                        <el-button
                          type="primary"
                          size="mini"
                         
                          >确定</el-button
                        >
                      </div>
                    </el-popover> -->
                  <!-- </span> -->
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "NavBar",
  computed: {
    ...mapGetters(["token", "userInfo", "curPath", "navBarFixed"]),
    hasToken() {
      return this.token;
    },
  },
  watch: {
    curPath: {
      handler: function (value) {
        this.isHome = value.name == "home";
        this.currentTab = {
          name: value.name,
          path: value.path,
        };

        if (value.name.indexOf("display") != -1) {
          this.currentTab = {
            name: "展览",
            path: "/display",
          };
        }
        if (value.name.indexOf("culturalRelic") != -1) {
          this.currentTab = {
            name: "文物展",
            path: "/culturalRelic",
          };
        }
        if (value.name.indexOf("museum") != -1) {
          this.currentTab = {
            name: "博物馆",
            path: "/museum",
          };
        }
      },
      immediate: true,
    },
    navBarFixed(value) {
      console.log("navBarFixed", value);
    },
  },
  data() {
    return {
      pages: [
        {
          name: "首页",
          path: "/",
        },
        {
          name: "精品展",
          path: "/boutique",
        },
        {
          name: "虚拟展厅",
          path: "/virtual",
        },
        {
          name: "展览",
          path: "/display",
        },
        {
          name: "文物展",
          path: "/culturalRelic",
        },
        {
          name: "博物馆",
          path: "/museum",
        },
      ],
      userName: "",
      logoutDialogVisible: false,
      currentTab: {
        name: "首页",
        path: "/",
      },
      isHome: true,
      isFixed: false,
      offsetTop: 0,
    };
  },
  mounted() {
    window.addEventListener("scroll", this.initHeight);
    this.$nextTick(() => {
      this.offsetTop = document.querySelector("#navbar").offsetTop;
    });
  },
  methods: {
    initHeight() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      this.isFixed = scrollTop > this.offsetTop ? true : false;
    },

    handleToLogin() {
      this.$router.push("/login?redirect=" + this.$route.fullPath);
    },

    async handleLogOut() {
      await this.$store.dispatch("user/logout");
      this.logoutDialogVisible = false;
      let path = this.$route.fullPath;
      if (path.indexOf("/personal") != -1) {
        this.$router.push("/");
      }
    },

    handleClickTab(tab) {
      this.currentTab = tab;
    },
  },

  destroyed() {
    window.removeEventListener("scroll", this.initHeight);
  },
};
</script>

<style lang="scss" scoped>
.tab-item {
  a {
    color: #fff;
    text-decoration: none;
  }
}

.home-nav {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
  // background-color: transparent !important;
  background-color: rgba(#000, 0.25) !important;
}
.header-fixed {
  position: fixed !important;
  background-color: #2069c4 !important;
  z-index: 99;
  box-shadow: rgba(0, 0, 0, 0.2) 0 1px 5px 0px;
  top: 0;
}

.nav {
  height: 100px;
  width: 100%;
  transition: all 0.5s ease;
  background-color: #2069c4;
  box-shadow: rgba(0, 0, 0, 0.2) 0 1px 5px 0px;
  .container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 70px 0 100px;
    overflow: hidden;
    .logo-container {
      width: 380px;
      height: 74px;
      // transform: translateX(-1000px);
      // animation: fadeUp 0.5s ease;
    }
    .right {
      display: flex;
      height: 100%;
      align-items: center;

      .tabs {
        display: flex;
        margin-right: 80px;
        min-width: 512px;
        // height: 100%;
        // transform: translateY(200px);
        // animation: fadeUp ease 1s forwards;
        height: 100%;
        .tab-item {
          margin-right: 70px;
          color: #fff;
          display: flex;
          align-items: center;
          font-family: "Alibaba-PuHuiTi";
          position: relative;
          // padding: 15px 50px;
          height: 100%;
          text-align: center;

          a {
            font-size: 18px;
            white-space: nowrap;
            transition: all 0.5s ease;
          }

          &:hover {
            a {
              // color: #182f68;
              color: #fff8a3;
              text-shadow: 0 1px 2px #9fafcb, 1px 0px 2px #9fafcb;
            }
          }
          .router-link-exact-active {
            // color: #182f68;
            color: #fff8a3;
            text-shadow: 0 1px 2px #9fafcb, 1px 0px 2px #9fafcb;
          }
          // .activeHome {
          //   a {
          //     color: #2069c4 !important;
          //   }
          // }
          // .active {
          //   a {
          //     color: #000 !important;
          //   }
          // }
          // &::before {
          //   transition: all 0.5s cubic-bezier(0.7, -0.5, 0.2, 2);
          //   content: "";
          //   display: inline-block;
          //   width: 0;
          //   height: 4px;
          //   background: #1d549d;
          //   position: absolute;
          //   bottom: 24px;
          //   left: 0;
          // }

          // &:hover:before {
          //   background: #1d549d;
          //   width: 38px;
          // }

          // .active {
          //   width: 38px;
          //   height: 4px;
          //   background: #1d549d;
          //   position: absolute;
          //   bottom: 24px;
          //   left: 0;
          // }
        }
      }
    }
  }
}
@keyframes fadeUp {
  from {
    transform: translateY(200);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes fadeLeft {
  from {
    transform: translateX(-1000);
  }
  to {
    transform: translateX(0);
  }
}
::v-deep .tools {
  .el-button {
    background: transparent;
    border-color: #fff;
    color: #fff;
    i {
      font-size: 16px;
    }
  }
}

.el-dropdown-menu {
  background-color: #fff;
  // border: 1px solid #8a919f;
}
.el-dropdown-menu__item {
  background-color: transparent;
  // color: #fff;
  color: #8a919f;
  a {
    text-decoration: none;
    color: #8a919f;
  }
}

.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
  // background-color: rgba(255, 255, 255, 0.2);
  // color: #fff;
  background-color: #f8f8f8;
  color: #8a919f;
}
</style>
