<template>
  <div class="box-top">
    <div class="left">
      <div class="left-top">
        <div class="left-top-logo">
          <img src="./../../assets/home/mint_Logo1.png" alt />
        </div>
        <div class="left-top-points">
          <div class="left-top-points-left">
            <li>
              <div class="top">
                <span class="textCol4">{{ usesInviteCount }}</span>
                <div>
                  <img src="./../../assets/common/Invites.png" alt />
                </div>
              </div>
              <div class="btm">Invites</div>
              <div class="hover-tips">Successful invitations</div>
            </li>
            <li>
              <div class="top">
                <span class="textCol3">{{ usesEnhanceCount }}</span>
                <div>
                  <img src="./../../assets/common/Icon_Boosting.png" alt />
                </div>
              </div>
              <div class="btm">Boosts</div>
              <div class="hover-tips">Remaining Daily Boosts</div>
            </li>
            <li>
              <div class="top">
                <span class="textCol2">{{ todayStepTicket }}</span>
                <div>
                  <img src="./../../assets/common/Icon_Explore.png" alt />
                </div>
              </div>
              <div class="btm">Exploration</div>
              <!-- <div class="hover-tips">Explorations Earned</div> -->
            </li>
            <li>
              <div class="top">
                <span class="textCol1">{{ usesPoints }}</span>
                <div>
                  <img src="./../../assets/common/Icon_Points.png" alt />
                </div>
              </div>
              <div class="btm">Points</div>
              <!-- <div class="hover-tips">Explorations Earned</div> -->
            </li>
            <div class="touxiang">
              <UserImg :imgSrc="myTwitterAvatar" />
            </div>
          </div>
          <!-- <div class="left-top-points-right">
                  <img v-if="inWhiteList == 1" src="@/assets/common/wallet-yes.png" alt="">
                  <img v-else src="@/assets/common/wallet-no.png" alt="">
                  <div class="hover-tips">Partner NFT collection holders get extra rewards</div>
          </div>-->
        </div>
      </div>
    </div>
    <div class="right">
      <div class="right-header">
        <div class="right-header-left"></div>
        <div class="right-header-right">
          <div class="link">
            <li v-for="(item, index) in linkList" :key="index">
              <a :href="item.hrefLink" target="_blank" rel="noopener noreferrer">
                <div>
                  <img :src="item.imgSrc" alt />
                </div>
              </a>
            </li>
          </div>
          <div class="wallet" @click="walletLogin">
            <span v-if="!showAddress">Connect Wallet</span>
            <div class="wallet-address" v-else>{{ showAddress }}</div>
            <div class="wallet-btn">
              <img
                v-if="!showAddress"
                class="hover-show"
                src="./../../assets/home/Connect Menu1.png"
                alt
              />
              <img v-else class="hover-none" src="@/assets/home/ICON03.png" alt />
            </div>
          </div>
        </div>
      </div>
      <div class="nav-btm">
        <div class="nav">
          <li
            :class="{active: navIndex == index}"
            v-for="(item, index) in navList"
            :key="index"
            @click="navBtn(index)"
          >
            <div class="nav-img">
              <img v-if="navIndex == index" :src="item.imgSrc1" alt />
              <img v-else :src="item.imgSrc" alt />
            </div>
          </li>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getToken } from "@/utils/cookies.js"
import { formatShowAddress } from "@/utils/utils.js";
import UserImg from "@/components/userImg.vue";
export default {
  components: {
    UserImg
  },
  props: {
    todayStepTicket: Number,
    myTwitterAvatar: String,
  },
  data() {
    return {
      linkList: [
        {
          imgSrc: require("@/assets/common/Icon_Disc.png"),
          hrefLink: "https://discord.gg/counterfire"
        },
        {
          imgSrc: require("@/assets/common/Icon_X.png"),
          hrefLink: "https://twitter.com/playCounterFire"
        }
      ],
      navList: [
        {
          id: 1,
          name: 1,
          imgSrc: require("./../../assets/common/P1-up.png"),
          imgSrc1: require("./../../assets/common/P1.png")
        },
        {
          id: 2,
          name: 2,
          imgSrc: require("./../../assets/common/P2-up.png"),
          imgSrc1: require("./../../assets/common/P2.png")
        },
        {
          id: 4,
          name: 4,
          imgSrc: require("./../../assets/common/P3-up.png"),
          imgSrc1: require("./../../assets/common/P3.png")
        },
        {
          id: 3,
          name: 3,
          imgSrc: require("./../../assets/common/P5-up.png"),
          imgSrc1: require("./../../assets/common/P5.png"),
        },
        {
          id: 5,
          name: 5,
          imgSrc: require("./../../assets/common/P4-up.png"),
          imgSrc1: require("./../../assets/common/P4.png")
        }
      ],
      navIndex: 0,
      token: "",
    }
  },
  computed:{
    showAddress() {
      let address = this.$store.state.user.address;
      return formatShowAddress(address);
    },
    usesPoints() {
      return this.$store.state.user.userData?.scoreTotal || 0
    },
    usesEnhanceCount() {
      return this.$store.state.user.userData?.enhanceCount || 0
    },
    usesInviteCount() {
      return this.$store.state.user.userData?.inviteCount || 0
    },
  },
  mounted() {
    this.token = getToken()
  },
  methods: {
    // nav 导航
    navBtn(index) {
      this.navIndex = index;
      this.$emit('toNavBtn',index)
    },
    walletLogin() {
      this.$emit('onWalletLogin')
    },
  },
};
</script>

<style lang="scss" scoped>
.box-top {
        width: 100%;
        // height: 100%;
        display: flex;
        justify-content: space-between;
        .left {
          width: 70%;
          .left-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 40px;
            position: inherit;
            z-index: 9;
            .left-top-logo {
              width: 200px;
              height: 100px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .left-top-points {
              border-radius: 15px;
              display: flex;
              align-items: center;
              .left-top-points-left {
                display: flex;
                height: 50px;
                background: url('@/assets/common/User-bar.png') no-repeat;
                background-size: 100% 100%;
                position: relative;
                padding-right: 30px;
                margin-right: 30px;
                li {
                  color: #fff;
                  padding: 10px 20px 5px 40px;
                  position: relative;
                  .hover-tips {
                    display: none;
                    position: absolute;
                    top: 35px;
                    right: 0px;
                    width: 240px;
                    height: 100px;
                    line-height: 90px;
                    font-size: 14px;
                    background: url('@/assets/common/WL .png') no-repeat;
                    background-size: 100% 100%;
                    z-index: 1;
                  }
                  .top {
                    display: flex;
                    justify-content: end;
                    align-items: center;
                    height: 16px;
                    font-weight: 600;
                    text-align: right;
                    span {
                      font-size: 16px;
                    }
                    .textCol1 {
                      color: #9950fd;
                    }
                    .textCol2 {
                      color: #fbc059;
                    }
                    .textCol3 {
                      color: #0095ff;
                    }
                    div {
                      width: 17px;
                      height: 16px;
                      margin-left: 5px;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      // img {
                      //   width: 100%;
                      //   height: 100%;
                      // }
                    }
                  }
                  .btm {
                    font-size: 16px;
                    color: #A8A5AC;
                    text-align: right;
                  }
                }
                li:nth-child(1) {
                  cursor: pointer;
                  img {
                    width: 17px;
                    height: 11px;
                  }
                  &:hover {
                    .hover-tips {
                      display: block;
                    }
                  }
                }
                li:nth-child(2) {
                  cursor: pointer;
                  img {
                    width: 13px;
                    height: 13px;
                  }
                  &:hover {
                    .hover-tips {
                      display: block;
                      width: 300px;
                    }
                  }
                }
                li:nth-child(3) {
                  .top {
                    div {
                      img {
                        width: 15px;
                        height: 15px;
                      }
                    }
                  }
                }
                li:nth-child(4) {
                  img {
                    width: 12px;
                    height: 16px;
                  }
                }
                .touxiang {
                  width: 60px;
                  height: 60px;
                  position: absolute;
                  top: 50%;
                  right: -20px;
                  transform: translateY(-50%);
                  div {
                    width: 100%;
                    height: 100%;
                  }
                }
              }
              .left-top-points-right {
                margin-left: 40px;
                width: 60px;
                height: 60px;
                cursor: pointer;
                position: relative;
                img {
                  width: 100%;
                  height: 100%;
                }
                .hover-tips {
                  display: none;
                  position: absolute;
                  top: 35px;
                  right: -60px;
                  width: 590px;
                  height: 120px;
                  line-height: 110px;
                  font-size: 14px;
                  background: url('@/assets/common/WL .png') no-repeat;
                  background-size: 100% 100%;
                }
                &:hover {
                  .hover-tips {
                    display: block;
                  }
                }
              }
            }
          }
        }
        .right {
          width: 28%;
          padding: 20px 30px;
          box-sizing: border-box;
          .right-header {
            display: flex;
            justify-content: space-between;
            margin: 10px 50px 10px 0;
            .right-header-left {
              .right-header-nav {
                width: 160px;
                display: flex;
                align-items: center;
                li {
                  width: 40px;
                  height: 40px;
                  line-height: 40px;
                  color: #fff;
                  background: #432967;
                  border-radius: 50%;
                  margin-right: 10px;
                  box-sizing: content-box;
                  cursor: pointer;
                  .nav-img {
                    width: 100%;
                    height: 100%;
                    img {
                      width: 100px;
                      height: 100%;
                    }
                  }
                }
                .active {
                  background: #9950fd;
                }
              }
            }
            .right-header-right {
              display: flex;
              cursor: pointer;
              .link {
                width: 100px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: #2d2738;
                border-radius: 20px;
                margin-right: 20px;
                li {
                  display: flex;
                  align-items: center;
                  margin: 0 10px;
                  height: 40px;
                  a {
                    display: flex;
                    align-items: center;
                    div {
                      display: flex;
                      align-items: center;
                      width: 16px;
                      height: 15px;
                      text-align: center;
                      img {
                        width: 100%;
                        height: 100%;
                      }
                    }
                  }
                }
              }
              .wallet {
                width: 140px;
                height: 40px;
                border-radius: 26px;
                padding-left: 30px;
                display: flex;
                align-items: center;
                background: #2d2738;
                position: relative;
                span {
                  color: #fff;
                  margin-right: 10px;
                  font-size: 16px;
                }
                .wallet-address {
                  font-size: 16px;
                  color: #fff;
                }
                .wallet-btn {
                  z-index: 999;
                  position: absolute;
                  top: -22px;
                  right: -40px;
                  width: 85px;
                  height: 85px;
                  .hover-show {
                    display: block;
                  }
                  .hover-none {
                    // display: none;
                  }
                  img {
                    width: 100%;
                    height: 100%;
                  }
                }
              }
            }
          }
          .nav-btm {
            // width: 380px;
            margin: 10px auto;
            margin-bottom: 0px;
            .nav {
              display: flex;
              justify-content: center;
              align-items: center;
              li {
                width: 80px;
                height: 80px;
                line-height: 80px;
                color: #fff;
                border-radius: 50%;
                cursor: pointer;
                .nav-img {
                  width: 100%;
                  height: 100%;
                  img {
                    width: 100%;
                    height: 100%;
                  }
                }
              }
              .active {
                // background: #9950fd;
              }
            }
          }
        }
      }
</style>