<template>
  <div
    :class="{
      nav: true,
    }"
    id="navbar"
  >
    <div class="container">
      <div class="logo-container animate__animated animate__fadeInLeft">
        <img src="~@/assets/imgs/display/logo3.png" />
        <span class="name">贵州博物馆精品展览展示平台</span>
      </div>
      <div class="right">
        <div class="tabs animate__animated animate__fadeInUp">
          <div
            class="tab-item"
            :class="{
              active: currentTab.name == item.name,
            }"
            v-for="(item, index) in pages"
            :key="index"
          >
            <span>{{ item.name }} </span>
            <i
              v-if="item.name == '展览展示'"
              class="el-icon-arrow-down"
              style="transform: translate(30%, 30%); cursor: pointer"
            ></i>
          </div>
        </div>
        <div class="tools animate__animated animate__fadeInRight">
          <div class="wrapper">
            <el-button round v-if="!hasToken">
              <i class="el-icon-user"></i>
              <span>登录</span>
              <!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
            </el-button>
            <el-dropdown trigger="click" v-else>
              <el-button round>
                <i class="el-icon-user"></i>
                <span>{{
                  hasToken ? userInfo.nickName || userInfo.username : "登录"
                }}</span>
                <!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-if="!hasToken" class="operation-item"
                  >登录
                </el-dropdown-item>
                <el-dropdown-item v-if="hasToken" class="operation-item">
                  个人中心</el-dropdown-item
                >
                <el-dropdown-item v-if="hasToken">
                  <span>退出</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>
    </div>
    <!-- 加特效会有抖动 -->
    <!-- <transition name="el-zoom-in-top"> -->
    <div
      class="submenu"
      v-show="showSubMenu"
      @mouseenter="handleEnterSubmenu"
      @mouseleave="handleMouseLeaveSubMenu"
    >
      <ul>
        <li v-for="(item, index) in typeList" :key="index">
          <span>{{ item.label }}</span>
          <svg-icon
            icon-class="wenshi"
            v-if="index != typeList.length - 1"
          ></svg-icon>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "NavBar",
  computed: {
    ...mapGetters(["token", "userInfo"]),
    hasToken() {
      return this.token;
    },
  },
  data() {
    return {
      pages: [
        {
          name: "首页",
          path: "/",
        },
        // {
        //   name: "虚拟展厅",
        //   path: "/virtual",
        // },
        // {
        //   name: "精品展",
        //   path: "/boutique",
        // },
        {
          name: "展览展示",
          path: "/display",
          children: [
            {
              name: "基本陈列展",
              path: "/display",
            },
            {
              name: "十大精品展",
              path: "/boutique",
            },
            {
              name: "虚拟展厅",
              path: "/virtual",
            },
          ],
        },
        // {
        //   name: "展览展示",
        //   path: "/display",
        // },
        {
          name: "文物展示",
          path: "/culturalRelic",
        },
        {
          name: "博物馆",
          path: "/museum",
        },
        {
          name: "文创产品",
          path: "/ccProduct",
        },
      ],
      currentTab: {
        name: "首页",
        path: "/",
      },
      isHome: true,
      isBoutique: false, //是否是精品展页
      isFixed: false,
      offsetTop: 0,
      loginVisible: false,
      requestCodeSuccess: false,
      captchaImgSrc: "",
      formLabelWidth: "1px",
      labelPosition: "right",
      loadingText: "",
      showSubMenu: false,
      typeList: [
        {
          label: "全部",
          value: "",
        },
      ],
      isAbsolute: true,
      showThemeColor: false,
    };
  },
  methods: {
    handleEnterTabItem(item) {
      if (item.name == "展览展示") {
        this.showSubMenu = true;
      }
    },

    handleLeaveTabItem(item) {
      if (item.name == "展览展示" && this.showSubMenu) {
        this.showSubMenu = false;
      }
    },

    handleEnterSubmenu() {
      if (!this.showSubMenu) {
        this.showSubMenu = true;
      }
    },

    handleMouseLeaveSubMenu() {
      if (this.showSubMenu) {
        this.showSubMenu = false;
      }
    },

    async loadDisplayTypeList() {
      let res = await getDisplayExistDict();
      // debugger
      this.typeList = [...this.typeList, ...res.data.typeList];
    },
  },
};
</script>

<style lang="scss" scoped>
// #2069c4: #2069c4;

.header-absolute {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
  background-color: rgba(#000, 0.25) !important;
  // background-color: rgba($deepBlue, 0.3)!important;
}

.header-fixed {
  position: fixed !important;
  background-color: $deepBlue !important;
  z-index: 99;
  top: 0;
}

.show-themeColor {
  background-color: $deepBlue !important;
}

.isChStyle {
  // background-color: #892325 !important;
  background-color: rgba(0, 0, 0, 0.25) !important;
}

.isRedStyle {
  // background-color: #813525 !important;
  background-color: rgba(0, 0, 0, 0.25) !important;
}

.nav {
  height: $nav-height;
  width: 100%;
  transition: all 0.5s ease;
  background-color: $deepBlue;
  position: relative;
  z-index: 99;
  box-shadow: rgba(0, 0, 0, 0.3) 0 1px 5px 0px;
  // padding-top: 10px;
  .container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 70px 0 100px;
    flex-direction: column;
    .logo-container {
      display: flex;
      align-items: center;
      // margin-bottom: 6px;
      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 8px;
      }

      .name {
        font-size: 30px;
        font-weight: bold;
        font-family: "SourceHanSerifCN-Bold";
        color: #fff;
        margin-left: 8px;
      }
    }

    .right {
      display: flex;
      height: 100%;
      align-items: center;
      .tabs {
        display: flex;
        min-width: 900px;
        height: 100%;
        justify-content: space-between;
        .tab-item {
          color: #fff;
          display: flex;
          align-items: center;
          font-family: "Alibaba-PuHuiTi";
          position: relative;
          height: 100%;
          text-align: center;
          padding-bottom: 16px;
          &::after {
            position: absolute;
            content: "";
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border: 8px solid rgba(#000, 0.3);
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-top: 8px solid transparent;
            opacity: 0;
            transition: all ease 0.5s;
          }

          &:hover::after {
            opacity: 1;
          }

          &:hover {
            cursor: pointer;
            color: #f5c872;
            & > i {
              color: #f5c872;
              transform: rotate(180deg);
            }
          }

          & > span {
            transform: translateY(4px);
            font-size: 26px;
            display: inline-block;
            position: relative;
          }
          & > i {
            transition: all ease 0.3s;
          }
        }
        .active {
          color: #f5c872;
        }
        .active::after {
          opacity: 1;
        }
      }
    }
  }

  .submenu {
    // background: #f8f8f8;
    background-color: rgba(0, 0, 0, 0.4);
    color: #fff;
    height: 50px;
    display: flex;
    justify-content: center;
    position: absolute;
    width: 100%;
    z-index: 99;
    ul {
      display: flex;
      align-items: center;
      // transform: translateX(50%); //往后移会导致不容易移动到想选择的子菜单中

      li {
        margin-right: 40px;
        cursor: pointer;

        &:hover {
          span {
            color: $yellow;
          }
        }

        .svg-icon {
          margin-left: 40px;
        }
      }
    }
  }
}

::v-deep .tools {
  position: absolute;
  right: 60px;
  top: 32%;
  transform: translateY(-50%);
  .wrapper {
    transform: translateY(4px);
  }

  .el-button {
    background: transparent;
    border-color: #fff;
    color: #fff;

    i {
      font-size: 14px;
    }
  }
}

::v-deep .el-button.is-round {
  padding: 10px 20px;
}

.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: #f8f8f8;
  color: #8a919f;
}

.login {
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;

    .text {
      font-weight: bold;
      font-size: 24px;
      color: #666;
    }

    .close {
      font-size: 34px;
      cursor: pointer;
      color: #ccc;
    }
  }

  .login-box {
    width: 500px;
    margin: auto;
  }
}

.opration {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  margin-top: 20px;

  .register {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    font-size: 14px;
    cursor: pointer;

    &:hover {
      color: #2069c4;
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: center;
}

.captcha {
  display: flex;
  justify-content: flex-end;

  img {
    margin-top: 2px;
    height: 40px;
  }
}

::v-deep .loginBtn {
  padding: 16px !important;
  border-radius: 0 !important;
  width: 100%;
  background-color: #2069c4;
  color: #fff;
  font-size: 14px;

  &:hover {
    filter: brightness(0.9) !important;
    background-color: #2069c4;
    color: #fff;
    border: none;
    border-radius: 0 !important;
    padding: 16px !important;
    width: 100%;
    font-size: 14px;
  }
}

::v-deep .el-dialog {
  width: 400px;
  border-radius: 0;

  .el-dialog__body {
    padding: 20px 30px 60px !important;
  }
}

::v-deep .el-input__inner {
  background: #e8f0fe;
  border: none;
}

::v-deep .el-dialog__header {
  padding: 48px 30px 10px !important;
  color: #666 !important;
  font-weight: bold;
}

::v-deep .el-dialog__headerbtn {
  top: 48px !important;
  font-size: 24px;
  right: 30px;
}

.login-title {
  display: flex;
  position: relative;

  .title-item {
    margin-right: 40px;
    cursor: pointer;
    position: relative;

    &:hover {
      color: #2069c4;
    }
  }

  .active {
    color: #2069c4;
  }

  .line {
    width: 18px;
    height: 4px;
    background-color: #2069c4;
    // border-radius: 4px;
    position: absolute;
    left: 24px;
    bottom: -14px;
    transition: all 0.3s ease;
  }
}
</style>
