<template>
  <div class="header">
    <div class="top_nav">
      <div class="top_nav_cont">
        <a class="logo_a">
          <img src="@/assets/images/logo.png" />
        </a>
        <div class="right_part">
          <nav id="header_nav">
            <ul class="clearfix">
              <li
                :key="item.id"
                index="item.id"
                v-for="(item, index) in headerList"
                :class="item.clicked ? 'clicked' : ''"
                @click="changePage(item)"
              >
                <router-link :to="{ name: item.name }" :key="index">
                  <span>{{ item.title }}</span>
                  <span class="nav_border"></span>
                </router-link>
              </li>
              <li>
                <a
                  href="#"
                >
                  <span>Whitepaper</span>
                </a>
              </li>
            </ul>
          </nav>
          <div class="connect_wallet_box">
            <a
              href="javascript:void(0);"
              v-if="!isconnected"
              @click="openConnect"
              class="connect_wallet"
            >
              <span>Connect Wallet</span>
            </a>
            <a
              href="javascript:void(0);"
              v-if="isconnected"
              @click="gotoMynft"
              class="connect_wallet connected"
            >
              <span>0xdf8…6f9he</span>
            </a>
          </div>

          <button data-nav="true" @click.stop="toggleNav">
          </button>
        </div>
      </div>
    </div>
    <el-dialog
      title=""
      :visible.sync="dialogTableVisible"
      :modal="false"
      width="90%"
      class="walletbox"
    >
      <div class="dialog-container">
        <div class="wallet-list">
          <a
            href="javascript:;"
            class="wallet-item"
            @click="ConnectWalletChoice(1)"
            v-if="!isTokenPocker"
          >
            <div class="item-title">MetaMask</div>
            <div class="item-icon">
              <img src="@/assets/images/MetamaskLogo.svg" />
            </div>
          </a>
          <a
            href="javascript:;"
            class="wallet-item"
            @click="ConnectWalletChoice(2)"
          >
            <div class="item-title">WalletConnect</div>
            <div class="item-icon">
              <img src="@/assets/images/WalletConnectLogo.png" />
            </div>
          </a>
          <a
            href="javascript:;"
            class="wallet-item"
            @click="ConnectWalletChoice(3)"
            v-if="!isphone"
          >
            <div class="item-title">Binance Chain Wallet</div>
            <div class="item-icon">
              <img src="@/assets/images/BinanceChainWalletLogo.svg" />
            </div>
          </a>
          <a
            href="javascript:;"
            class="wallet-item"
            @click="ConnectWalletChoice(1)"
            v-if="!isphone || isTokenPocker"
          >
            <div class="item-title">TokenPocket</div>
            <div class="item-icon">
              <img src="@/assets/images/TokenPocketLogo.svg" />
            </div>
          </a>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import global_ from '../global.js'
// import Utils from '@/util/Utils.js'
import walletMgr from '@/wallet/WalletMgr.js'
export default {
  name: "Header",
  data() {
    return {
      contractShow: false,
      isconnected: false,
      dialogTableVisible: false,
      isphone: false,
      isTokenPocker: false,
      headerList: [
        { id: "1", name: "Home", title: "Home", clicked: false },
        {
          id: "2",
          name: "Hero",
          title: "Hero",
          clicked: false,
        },
        {
          id: "3",
          name: "Mint",
          title: "Mint",
          clicked: false,
        },
        {
          id: "4",
          name: "Market",
          title: "Marketplace",
          clicked: false,
        },
      ],
    };
  },
  watch: {
    isconnected: function (newVal) {
      this.$store.commit("user/setIsConnected", newVal);
    },
  },
  methods: {
    toggleBodyClass() {
      let e = document.querySelector("body");

      window.scrollY > 80
        ? e.classList.add("scrolladd")
        : e.classList.remove("scrolladd");
    },
    goHome() {
      this.$router.push("/");
    },
    changePage(_i) {
      let $this = this;
      for (let i of $this.headerList) {
        i.clicked = false;
      }
      _i.clicked = true;
    },
    toggleNav() {
      document.querySelector("body").classList.toggle("onav");
    },
    hideNav() {
      document.querySelector("body").classList.remove("onav");
    },
    openConnect() {
      this.dialogTableVisible = true
    },
    checkWalletStatus() {
      let $this = this;
      // 检查钱包是否已登录
      if (this.$walletMgr.checkWalletType()) {
        let authdata = JSON.parse(localStorage.getItem("authdata"));
        if (authdata[this.$walletMgr.currentAccount] != null) {
          $this.isconnected = true;
          localStorage.setItem("authaddress", this.$walletMgr.currentAccount);
        } else {
          $this.isconnected = false;
        }
        console.log($this.isconnected);
      } else {
        $this.isconnected = false;
      }
    },
    // 连接钱包按钮点击
    ConnectWalletChoice(_i) {
      let $this = this;
      if (_i == 1) {
        // 连接钱包
        walletMgr.changeWalletType(1,(x)=>{
          console.log(x)
        });
      } else if (_i == 2) {
        walletMgr.changeWalletType(2,(x)=>{
          console.log(x)
        });
      } else if (_i == 3) {
        walletMgr.changeWalletType(3,(x)=>{
          console.log(x)
        });
      }
      this.dialogTableVisible = false;
    },
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.toggleBodyClass);
  },
  mounted() {
    let $this = this;
    window.addEventListener("scroll", () => {
      $this.toggleBodyClass();
    });
    for (let i of $this.headerList) {
      if (i.name == $this.$route.name) {
        i.clicked = true;
      }
    }
  },
};
</script>
<style>
.top_nav {
  width: 100vw;
  height: 110px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2;
  transition: all 0.2s ease;
  z-index: 5;
}
.top_nav_cont {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  height: 100%;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  transition: all 0.2s ease;
}
.logo_a {
  cursor: pointer;
  height: 100%;
  transition: all 0.2s ease;
  margin-right: calc(30px + 0.92593vw);
  display: flex;align-items: center;justify-content: center;
}
.logo_a img {
  width: auto;
  max-width: 278px;
  height: 100%;max-height: 72px;
  transition: all 0.2s ease;
}
.right_part {
  width: 100%;
  position: relative;
  display: flex;
  align-content: center;
  align-items: center;
}
#header_nav ul li {
  float: left;
}
nav#header_nav {
  margin-right: calc(17.59259px + 2.31481vw);
  display: flex;
}
#header_nav a {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  padding: 0 calc(12.03704px + 0.92593vw);
  font-weight: bold;
  box-sizing: border-box;
  color: #fff;
}
#header_nav ul li.clicked a,
#header_nav ul li:hover a {
  color: #eaba99;
}
#header_nav a span {
  font-size: 14px;
  display: inline-block;
  padding: calc(7.03704px + 0.92593vw) 0;
}
#header_nav a span.nav_border {
  display: block;
  width: 30px;
  height: 2px;
  padding: 0;
  background: #eaba99;
  border-radius: 2px;
  margin: 0 auto;
  display: none;
}
#header_nav ul li.clicked .nav_border {
  display: block;
}
/* top header */
.scrolladd .top_nav {
  height: 80px;
  background: rgba(0, 0, 0, 0.95);
}
.scrolladd .top_nav_cont {
  padding: 12px 20px;
}
.scrolladd .tool_bar ul li {
  padding: 0 13px;
}

.connect_wallet_box {
  width: 150px;
  height: 48px;
  z-index: 0;
  transition: 0.4s;
  position: absolute;
  right: 0;
  font-size: 16px;
  font-family: "SFProText-Medium, SFProText";
  font-weight: 600;
}
a.connect_wallet {
  display: block;
  background: linear-gradient(90deg, #eaba99 0%, #ddc8b7 100%);
  border-radius: 24px;
  color: #000000;line-height: 48px;
}
a.connect_wallet.connected {
  border-radius: 24px;
  background: none;
border: 1px solid #EABA99;
font-weight: 500;
color: #EABA99;
}
.right_part [data-nav] {
    display: none;
    width: 40px;height: 40px;
    background: none;
    background: url(../assets/images/home/nav-tab-btn.png) no-repeat center;
    background-size: 34px 34px;
    position: absolute;right: 0;
    cursor: pointer;
}
.el-dialog__wrapper.walletbox .el-dialog{
  max-width: 500px;
  border-radius: 8px;
}
.wallet-list {
  text-align: center;
  padding-bottom: 16px;
  width: 100%;
}

.wallet-list .wallet-item {
  -webkit-transition: border-color 0.2s ease;
  transition: border-color 0.2s ease;
  outline: none;
  padding: 0 24px;
  height: 54px;
  border-radius: 12px;
  border: 1px solid rgba(240, 185, 11, 0.32);
  margin-bottom: 14px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #fefdf7;
}

.wallet-list .wallet-item .item-title {
  color: #333;
  font-weight: 600;
  font-size: 14px;
  text-align: left;
  word-break: break-word;
}

.wallet-list .wallet-item .item-icon img {
  max-height: 30px;
  max-width: 30px;
  vertical-align: top;
}
@keyframes fadeOut
{
    from {opacity: 1}
    to {opacity: 0}
}
@keyframes fadeIn
{
    from {opacity: 0}
    to {opacity: 1}
}
@media screen and (max-width: 1080px) {
  .top_nav{height: 90px;}
  .logo_a {
      cursor: pointer;
      height: 100%;
      -webkit-transition: all 0.2s ease;
      transition: all 0.2s ease;
      margin-right: calc(5px + 0.92593vw);
  }
  .logo_a img{max-width: 260px;max-height: 67px;}
  #header_nav a{padding: 0 calc(8.03704px + 0.92593vw);}
  .connect_wallet_box{top: 2px;}
}
@media screen and (max-width: 950px) {
  .top_nav{height: 80px;}
  .scrolladd .top_nav{height: 70px;}
  .right_part{height: 100%;}
  .logo_a{display: none;}
  .connect_wallet_box{left: 0;right: auto;top: auto;}
  .right_part [data-nav]{
    display: block;
  }
  nav#header_nav{
    transform: translateY(-101%);
    transition: transform .3s;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background-color: #010514;
    padding-top: 70px;margin-right: 0;padding-left: 36px;padding-bottom: 20px;
    animation: fadeOut .3s;
  }
  .onav nav#header_nav {
    transform: translateY(0);
    animation: fadeIn .3s;
  }
  #header_nav ul li{float: none;}
  #header_nav a{position: relative;text-align: left;}
  #header_nav a span{font-size: 16px;}
  #header_nav a span.nav_border{position: absolute;left: 0;top:50%;margin-top: -7px;width: 2px;height: 14px;}
}
@media screen and (max-width: 650px) {
.top_nav{height: 70px;}
  .scrolladd .top_nav{height: 60px;}
  .connect_wallet_box{
    width: 130px;
    height: 40px;
    font-size: 14px;
  }
  nav#header_nav{padding-top: 60px;}
  #header_nav a span{font-size: 14px;}
  a.connect_wallet{line-height: 40px;}
  .right_part [data-nav]{
    width: 36px;height: 36px;
    background-size: 28px 28px;
  }

}
</style>