<template>
  <div class="zillionaire">
    <div class="content" v-show="navIndex == 0 || navIndex == 1 || navIndex == 2">
      <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">{{ myInviteCount }}</span>
                  <img src="./../../assets/common/Invites.png" alt="">
                </div>
                <div class="btm">Invites</div>
                <div class="hover-tips">Successful invtations</div>
              </li>
              <li>
                <div class="top">
                  <span class="textCol3">{{ myEnhanceCount }}</span>
                  <img src="./../../assets/common/Icon_Boosting.png" alt="">
                </div>
                <div class="btm">Boosting</div>
                <div class="hover-tips">Daily boosting reamaining times</div>
              </li>
              <li>
                <div class="top">
                  <span class="textCol2">{{ todayStepTicket }}</span>
                  <img src="./../../assets/common/Icon_Explore.png" alt="">
                </div>
                <div class="btm">Exploration</div>
                <div class="hover-tips">Explorations obtained</div>
              </li>
              <li>
                <div class="top">
                  <span class="textCol1">{{ usesScore }}</span>
                  <img src="./../../assets/common/Icon_Points.png" alt="">
                </div>
                <div class="btm">Points</div>
                <div class="hover-tips">Explorations obtained</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">Holder of the partner NFT collections will receive additional rewards</div>
            </div>
          </div>
        </div>
        <div class="left-title">
          <div class="left-title-left" v-if="navIndex == 0 || navIndex == 2">
            <div>LOOMING FOG OF THE <img src="./../../assets/home/Icon_star.png" alt=""> UNKNOWN</div>
            <p v-if="navIndex == 0">Phase 1 Quest Log</p>
          </div>
          <div class="left-title-left" v-if="navIndex == 1">
            <div>HILL'S <img src="./../../assets/home/Icon_star.png" alt=""> TREASURE HUNT</div>
            <p>
              Phase 2 Exploration Missions
            </p>
          </div>
          <div class="left-title-right">
            <p>Invite friends to earn</p>
            <p>more rewards <span class="tips" @click="ruleDialogVisible = true">!</span></p>
            <div class="copy-btn" @click="copyLinkCode"><img src="./../../assets/common/Icon_Explore.png" alt=""> Copy referral link</div>
            <div class="copy-see" @click="isLogin">
              View Invites
            </div>
            <div class="rule"></div>
          </div>
        </div>
        <div class="explore">
          <div class="explore-zill">
            <gameView ref="stepId" :stepAmount="stepAmount" :getTotalUsed="getTotalUsed" @awardDialog="exploreAwardDialog" />
          </div>
          <div class="explore-desc" v-if="navIndex == 0 || navIndex == 2">
            <div class="explore-desc-logo">
              <img src="./../../assets/home/Icon_smile.png" alt="">
            </div>
            <h4>How it works</h4>
            <div
              class="desc"
            >Every step is filled with possibilities; every movement might begin a new chapter. <br /> All on-chain activities are built on opBNB. <br />Click on the smiley face to view more details on Medium</div>
          </div>
          <div class="explore-desc-map" v-if="navIndex == 1">
            <li>
              <h2>EXPLORE</h2>
              <div class="logo">
                <img src="./../../assets/common/Icon_Explore1.png" alt="">
              </div>
            </li>
            <li>
              <div class="check">
                <span @click="decrease">-</span>
                <span>{{ stepTicket }} <img src="./../../assets/common/Icon_Explore1.png" alt=""></span>
                <span @click="increase">+</span>
              </div>
              <div class="max" @click="exploreMax">
                MAX
              </div>
            </li>
            <li class="explore-btn" @click="exploreCli(stepTicket)">Explore Map</li>
          </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="onWalletLogin">
              <span v-if="!showAddress">X Connected</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 class="right-title" v-if="navIndex == 0">
          <p>Phase 1</p>
          <h3>Complete quests to shatter the looming</h3>
          <h3>fog that veils the unknown!</h3>
        </div>
        <div class="right-title" v-if="navIndex == 2">
          <p></p>
          <h3>Join hands with us and our partners to achieve your goals</h3>
        </div>
        <div class="content-right" v-if="navIndex == 0">
          <div class="title">
            <div class="title-left">
              <div>Quest</div>
            </div>
          </div>
          <div class="quest">
            <div class="bar">
              <div class="bar-left">
                <div class="bar-top">
                  <div class="bar-top-left">Progress</div>
                  <div class="bar-top-right">
                    <div class="bar-top-jinDu" :style="{width: filteredBar+'%'}" ref="questPendingBg"></div>
                  </div>
                </div>
                <div class="bar-btm">
                  <p>*Complete tasks to win three exploration</p>
                  <p>attempts.</p>
                </div>
              </div>
              <div class="bar-right">
                <div class="bar-no">
                  <span>X 3 </span>
                  <img src="@/assets/common/Icon_Explore.png" alt="">
                </div>
              </div>
            </div>
            <div class="quest-list">
              <li v-for="(item, index) in activeList" :key="index">
                <div class="quest-item"  @click="toPost(item, true)">
                  <div class="content-right-left">
                    <!-- <div class="img-logo">
                      <img src="./../../assets/home/twitter.png" alt />
                    </div>
                    <div class="score">
                      <span>{{ item.score }} Pts</span>
                    </div>-->
                    <div class="desc">
                      <h3>{{ item.title }}</h3>
                      <p>{{ item.desc }}</p>
                    </div>
                  </div>
                  <div v-if="token != null" class="btn">
                    <div class="is-btn">
                      <div v-if="item.status == 0" class="started" @click.stop="toPost(item)">{{ item.actionTitle }}</div>
                      <CheckBtn v-if="item.status == 1" @stateupdate="toCheck" :dataid="item.id" time="10" title="Verify" class="started">Verify</CheckBtn>
                      <div v-if="item.status == 2" class="claim" @click.stop="getTaskClaim(item.id)">Claim</div>
                      <div v-if="item.status == 3" class="success">+{{ item.score }} <img src="./../../assets/common/Checkmark (1).png" alt=""></div>
                    </div>
                  </div>
                  <div class='light-btn' v-else @click.stop="onWalletLogin">Connect Wallet</div>
                </div>
              </li>
            </div>
          </div>
          <div class="tips">
            *Claim will consume a small amount of gas.
          </div>
        </div>
        <div class="skip" v-if="navIndex == 0">
          <div class="skip-left">
            <div class="skip-icon">
              <img src="./../../assets/home/Icon_.png" alt="">
            </div>
            <div class="skip-desc">
              <p>You will skip the social media tasks, forfeiting the points for this</p>
              <p>section, but you can still come back to complete it when you wish.</p>
            </div>
          </div>
          <div class="skip-right" @click="navIndex = 1">
            Skip
          </div>
        </div>
        <div class="sign-in-content" v-if="navIndex == 1">
          <div class="calen-content">
            <Calen ref="renewCheck" :activityData='activityData' />
            <div class="rewards">
              <p>Cumulative Rewards</p>
              <div v-if="gameStateData.totalStat" class="rewards-list">
                <li v-for="(item, index) in gameStateData.totalStat" :key="index">
                  <div class="center no-state" v-if="item.state == 0">
                    <div>
                      <div class="top">
                        <img src="./../../assets/common/Icon_Explore.png" alt="">
                        <span> ×{{ item.tickets }}</span>
                      </div>
                      <div class="btm">{{ item.days }} Days</div>
                    </div>
                  </div>
                  <div class="center state" v-if="item.state == 1" @click="getCheckClaim(item.days)">
                    <div>
                      <div class="top">
                        <img src="./../../assets/common/Icon_Explore1.png" alt="">
                        <span>× {{ item.tickets }}</span>
                      </div>
                      <div class="btm">{{ item.days }} Days</div>
                    </div>
                  </div>
                  <div class="center yes-state" v-if="item.state == 9">
                    <div>
                      <div class="top">
                        <img src="./../../assets/common/Icon_Explore9.png" alt="">
                        <span>× {{ item.tickets }}</span>
                      </div>
                      <div class="btm">{{ item.days }} Days</div>
                    </div>
                  </div>
                </li>
              </div>
              <div v-else class="rewards-list">
                <li>
                  <div class="center no-state">
                    <div>
                      <div class="top">
                        <img src="./../../assets/common/Icon_Explore.png" alt="">
                        <span>× 1</span>
                      </div>
                      <div class="btm">5 Days</div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="center no-state">
                    <div>
                      <div class="top">
                        <img src="./../../assets/common/Icon_Explore.png" alt="">
                        <span>× 2</span>
                      </div>
                      <div class="btm">10 Days</div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="center no-state">
                    <div>
                      <div class="top">
                        <img src="./../../assets/common/Icon_Explore.png" alt="">
                        <span>× 3</span>
                      </div>
                      <div class="btm">20 Days</div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="center no-state">
                    <div>
                      <div class="top">
                        <img src="./../../assets/common/Icon_Explore.png" alt="">
                        <span>× 4</span>
                      </div>
                      <div class="btm">30 Days</div>
                    </div>
                  </div>
                </li>
              </div>
            </div>
            <div class="rewards">
              <p>Bonus Rewards</p>
              <div v-if="gameStateData.seqStat" class="rewards-list">
                <li v-for="(item, index) in gameStateData.seqStat" :key="index">
                  <div class="center no-state" v-if="item.state == 0">
                    <div>
                      <div class="top">
                        <img src="./../../assets/common/Icon_Explore.png" alt="">
                        <span>× {{ item.tickets }}</span>
                      </div>
                      <div class="btm">{{ item.days }} Days</div>
                    </div>
                  </div>
                  <div class="center state" v-if="item.state == 1" @click="claimSeqStat(item.days)">
                    <div>
                      <div class="top">
                        <img src="./../../assets/common/Icon_Explore1.png" alt="">
                        <span>× {{ item.tickets }}</span>
                      </div>
                      <div class="btm">{{ item.days }} Days</div>
                    </div>
                  </div>
                  <div class="center yes-state" v-if="item.state == 9">
                    <div>
                      <div class="top">
                        <img src="./../../assets/common/Icon_Explore9.png" alt="">
                        <span>× {{ item.tickets }}</span>
                      </div>
                      <div class="btm">{{ item.days }} Days</div>
                    </div>
                  </div>
                </li>
              </div>
              <div v-else class="rewards-list">
                <li>
                  <div class="center no-state">
                    <div>
                      <div class="top">
                        <img src="./../../assets/common/Icon_Explore.png" alt="">
                        <span>× 1</span>
                      </div>
                      <div class="btm">3 Days</div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="center no-state">
                    <div>
                      <div class="top">
                        <img src="./../../assets/common/Icon_Explore.png" alt="">
                        <span>× 2</span>
                      </div>
                      <div class="btm">7 Days</div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="center no-state">
                    <div>
                      <div class="top">
                        <img src="./../../assets/common/Icon_Explore.png" alt="">
                        <span>× 3</span>
                      </div>
                      <div class="btm">15 Days</div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="center no-state">
                    <div>
                      <div class="top">
                        <img src="./../../assets/common/Icon_Explore.png" alt="">
                        <span>× 4</span>
                      </div>
                      <div class="btm">30 Days</div>
                    </div>
                  </div>
                </li>
              </div>
            </div>
          </div>
          <div class="check">
            <div class="check-btm">
              <p>*Checking in will consume a small amount of gas.</p>
            </div>
            <div class="check-top">
              <li v-if="gameStateData.todayStat == 0" @click="walletCheck">
                <span>Daily Check-in </span>+{{ gameStateData.todayTickets }}
                <img src="./../../assets/common/Icon_Daily.png" alt="">
              </li>
              <div class="check-yes"  v-if="gameStateData.todayStat == 9">
                <img src="./../../assets/home/check-yes.png" alt="">
              </div>
            </div>
          </div>
        </div>
        <div class="content-right" v-if="navIndex == 2">
          <div class="title">
            <!-- <div class="title-left">
              <div>Partner</div>
            </div> -->
          </div>
          <div class="quest">
            <div class="partner-list">
              <div>
                coming soon
              </div>
              <!-- <div class="partner">
                <div>Partner</div>
                <div>Rewards</div>
                <div></div>
              </div>
              <li v-for="(item, index) in nftsList" :key="index">
                <div class="quest-item">
                  <div class="content-rewards-left">
                    <div class="img-logo">
                      <img src="./../../assets/home/twitter.png" alt />
                    </div>
                    <div class="desc">
                      <h3>{{ item.collection }}</h3>
                      <p>{{ item.projectName }}</p>
                    </div>
                  </div>
                  <div class="rewards">
                    <img src="@/assets/box/box01.png" alt="">
                  </div>
                  <div v-if="token != null" class="btn">
                    <div class="is-btn">
                      <div>Chick</div>
                      <div v-if="item.status == 0" class="started" @click="toPost(item)">{{ item.actionTitle }}</div>
                      <CheckBtn v-if="item.status == 1" @stateupdate="toCheck" :dataid="item.id" time="10" title="Check" class="started">Check</CheckBtn>
                      <div v-if="item.status == 2" class="claim" @click="getTaskClaim(item.id)">Claim</div>
                      <div v-if="item.status == 3" class="success">+{{ item.score }} <img src="./../../assets/home/Checkmark.png" alt=""></div>
                    </div>
                  </div>
                  <div class='light-btn' v-else @click="onWalletLogin">Connect Wallet</div>
                </div>
              </li> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="content-box" v-show="navIndex == 3 || navIndex == 4">
      <div class="box">
        <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">{{ myInviteCount }}</span>
                      <img src="./../../assets/common/Invites.png" alt="">
                    </div>
                    <div class="btm">Invites</div>
                    <div class="hover-tips">Successful invtations</div>
                  </li>
                  <li>
                    <div class="top">
                      <span class="textCol3">{{ myEnhanceCount }}</span>
                      <img src="./../../assets/common/Icon_Boosting.png" alt="">
                    </div>
                    <div class="btm">Boosting</div>
                    <div class="hover-tips">Daily boosting reamaining times</div>
                  </li>
                  <li>
                    <div class="top">
                      <span class="textCol2">{{ todayStepTicket }}</span>
                      <img src="./../../assets/common/Icon_Explore.png" alt="">
                    </div>
                    <div class="btm">Exploration</div>
                    <div class="hover-tips">Explorations obtained</div>
                  </li>
                  <li>
                    <div class="top">
                      <span class="textCol1">{{ usesScore }}</span>
                      <img src="./../../assets/common/Icon_Points.png" alt="">
                    </div>
                    <div class="btm">Points</div>
                    <div class="hover-tips">Explorations obtained</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">Holder of the partner NFT collections will receive additional 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="onWalletLogin">
                  <span v-if="!showAddress">X Connected</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>
        <div class="box-btm" v-show="navIndex == 3">
          <BoxBtm ref="boxList" @toExplore="toExplore" @awardDialog="activityDialog" />
        </div>
        <div class="box-btm" v-show="navIndex == 4">
          <Ranking :activityName="activityData.name" ref="rankingData" />
        </div>
      </div>
      
    </div>

    <!-- 登录弹窗 -->
    <WalletDialog class="wallet-dialog" :walletDialogVisible="walletDialogVisible" @closeDialog="closeDialog" />

    <!-- 宝箱助力弹窗 -->
    <HelpDialog class="help-dialog" :helpDialogVisible="helpDialogVisible" @onWalletLogin="onWalletLogin" @handleClose="helpHandleClose" @awardDialog="helpAwardDialog" />

    <!-- 奖励弹窗 -->
    <AwardDialog :ExploreDialogVisible="ExploreDialogVisible" @handleClose="ExploreHandleClose" @toComplete="toComplete" :eventName="eventName" :awardData="awardData" :level1='level1' :level2='level2' :level3='level3' :level4='level4' :dialogTitle="dialogTitle" />

    <!-- 邀请列表 -->
    <LogDialog :logDialogVisible="logDialogVisible" @handleClose="logHandleClose" />

    <!-- Loading -->
    <Loading :Loading="isLoading" />

    <RuleDialog :ruleDialogVisible="ruleDialogVisible" @handleClose="ruleHandleClose" />
  </div>
</template>

<script>
import Calen from "./calenView.vue";
import BoxBtm from './boxBtm.vue'
import Ranking from './ranking.vue'
import UserImg from '@/components/userImg.vue'
import gameView from "./gameView.vue";
import CheckBtn from "@/components/checkBtn.vue";
import WalletDialog from "@/components/walletDialog/index.vue";
import AwardDialog from './awardDialog.vue'
import HelpDialog from './helpDialog.vue'
import LogDialog from './logDialog.vue'
import Loading from '@/components/loading.vue'
import RuleDialog from './ruleDialog.vue'
import { getToken } from '@/utils/cookies.js'
// import { getWalletAddress, isWalletConnected, linkWallet } from "@/wallet/index.js";
import {
  apiUploadInviteCode,
  apiBeginActivity,
  apiCheckActivity,
  apiTaskClaim,
  apiCheckinClaim,
  apiCheckinClaimSeq,
  retweetTwitter,
  followTwitter,
  joinDiscord,
  apiProgress,
  apiGameStat,
  apiUsercheckin,
  apiEnhanceBox,
  apiNftList,
} from "./../../utils/webapi.js";
import { sendToChain, sendHelp } from "./../../utils/chainapi.js";
import { Wallet } from '@/wallet/index.js'
import { formatShowAddress } from "@/utils/utils.js";

export default {
  components: {
    UserImg,
    Calen,
    gameView,
    WalletDialog,
    BoxBtm,
    Ranking,
    CheckBtn,
    AwardDialog,
    HelpDialog,
    LogDialog,
    Loading,
    RuleDialog,
  },
  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',
        }
      ],
      ruleDialogVisible: false,
      inWhiteList: 0,
      activityData: {},
      baseTasks: [],
      myScoreTotal: 0,
      myInviteCount: 0,
      myEnhanceCount: 0,
      myTwitterAvatar: '',
      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: 3,
          name: 3,
          imgSrc: require("./../../assets/common/P5-up.png"),
          imgSrc1: require("./../../assets/common/P5.png"),
        },
        {
          id: 4,
          name: 4,
          imgSrc: require("./../../assets/common/P3-up.png"),
          imgSrc1: require("./../../assets/common/P3.png"),
        },
        {
          id: 5,
          name: 5,
          imgSrc: require("./../../assets/common/P4-up.png"),
          imgSrc1: require("./../../assets/common/P4.png"),
        }
      ],
      navIndex: 0,
      walletDialogVisible: false,
      gameStateData: {},
      activityName: "",
      activityId: "uaw_activity",
      isWallet: false,
      activeList: [],
      isTask: true,
      token: null,
      checking: false,
      userData: {
        code: "111"
      },
      helpLogList: [
        {
          nickname: "0000000"
        }
      ],
      helpDialogVisible: false,
      helpAmount: 0,
      stepAmount: 0,
      myAddress: this.$store.state.user.address,
      getTotalUsed: 0, // 已探索总次数
      todayStepTicket: 0, // 探索总次数
      stepTicket: 1, // 探索次数
      inviteTableData: [],
      ExploreDialogVisible: false,
      awardData: {},
      level1: [],
      level2: [],
      level3: [],
      level4: [],
      dialogTitle: '',
      eventName: '',
      logDialogVisible: false,
      nftsList: [],
      isNewUser: 0,
      isLoading: false,
    };
  },
  watch: {
  },
  computed: {
    filteredBar() {
      let aa = this.activeList.filter(item => this.baseTasks.includes(item.id))
      let bb = aa.filter(item => item.status == 3).length
      let cc = bb / this.baseTasks.length * 100
      return cc
    },
    showAddress () {
      let address = this.$store.state.user.address
      return formatShowAddress(address)
    },
    usesScore() {
      return this.$store.state.user.userData?.scoreTotal || 0
    }
  },
  created() {
    this.userData = JSON.parse(localStorage.getItem("userData"));
    this.token = getToken();
  },
  mounted() {
    this.initData()
    this.$nextTick(() => {
      if (this.$route.params.code) {
        if (this.$route.params.code.split("=")[0] == "box") {
          this.helpDialogVisible = true;
        }
      }
    });
  },
  methods: {
    async initData() {
      await this.getActivity();
      this.getNftList()
      this.$store.dispatch('wallet/restore')
      this.$store.dispatch('user/restore')
      if (this.token) {
        this.getProgress();
        this.getGameStat();
        this.getUserState()
        this.myAddress = formatShowAddress(this.$store.state.user.address)
        this.myTwitterAvatar = this.userData.twitterAvatar
        this.myScoreTotal = this.userData.scoreTotal
        this.myInviteCount = this.userData.inviteCount
        this.myEnhanceCount = this.userData.enhanceCount
        this.inWhiteList = this.userData.inWhiteList
        if (this.$route.params.code) {
          if(this.$route.params.code.split("=")[0] == 'new') {
            this.helpConfirm()
          }
        }
        
      }  else {
        this.walletDialogVisible = true
      }
    },
    // 获取活动信息
    async getActivity() {
      await this.$axios
        .get(process.env.VUE_APP_API_URL+`/api/activity/${this.activityId}`)
        .then(res => {
          this.activityName = res.data.data.name;
          const actionTitles = {
            TwitterConnect: "Connect",
            TwitterFollow: "Follow",
            TwitterRetweet: "Retweet",
            TwitterLike: "Like",
            DiscordJoin: 'Join',
            DiscordConnect: "Connect"
          };
          this.activeList.length = 0
          for (let data of res.data.data.tasks) {
            data.actionTitle = actionTitles[data.task] || 'Proceed'
            this.activeList.push(data)
          }
          this.activityData = res.data.data
          this.baseTasks = res.data.data.baseTasks
        })
        .catch(err => {
          console.info(err);
        });
    },

    // 查看社交任务进度
    async getProgress() {
      let { errcode, data } = await apiProgress()
      if (!errcode) {
        let stateMap = new Map()
        data.forEach(item => {
          stateMap.set(item.id, item.status)
        })
        for (let i = 0; i < this.activeList.length; i++) {
          this.$set(this.activeList[i], "status", stateMap.get(this.activeList[i].id) || 0)
        }
      }
    },

    // 开始任务
    async toPost(data, onlyaction) {
      // debugger
      if(data.status == 0 || !onlyaction){
        let res = await apiBeginActivity(data.id);
        if(res.errcode == 0) {
          await this.getProgress()
        }
      }

      if (data.task == "TwitterConnect") {
        await this.loginTwitter(data.id);
      } else if(data.task == "TwitterFollow") {
        followTwitter(data.cfg.account)
      } else if(data.task == "TwitterLike") {
        window.open(`https://twitter.com/intent/like?tweet_id=${data.cfg.content}`, '_blank');
      } else if(data.task == "TwitterTweet") {
        followTwitter(data.cfg.content)
      } else if(data.task == "TwitterRetweet") {
        window.open(`https://twitter.com/intent/retweet?tweet_id=${data.cfg.content}`, '_blank');
      } else if(data.task == "DiscordJoin") {
        joinDiscord(data.cfg.account)
      } else if (data.task == "DiscordConnect") {
        this.loginDiscord()
      }
    },
    // 手动检查任务
    async toCheck() {
      await this.getProgress()
    },
    // 检查任务状态
    async getActivitrStatue(id) {
      await apiCheckActivity(id);
      await this.getProgress()
    },
    async loginTwitter() {
      // const _address = "0x8c10Ae04BF525734eaC00d5F7c062567461c207F";
      const clientId = "aG1Jdm1YX0NhSU9rYU5sM0xQeVI6MTpjaQ";
      // const codeChallenge = crypto.randomUUID()
      const codeChallenge = Date.now();
      const address = this.$store.state.user.address;
      const redirectUri = "https://oauth-svr.cebggame.com/twitter/redirect_uri";
      const state = btoa(`${address}|${codeChallenge}|${location.href}`);
      const url = `https://twitter.com/i/oauth2/authorize?client_id=${clientId}&code_challenge=${codeChallenge}&code_challenge_method=plain&redirect_uri=${encodeURIComponent(
        redirectUri
      )}&response_type=code&scope=tweet.read+users.read+follows.read+offline.access+like.read&state=${encodeURIComponent(
        state
      )}`;
      let newwin = window.open(url, "twitter connect");
      var timer = setInterval(function() {
        if (newwin.closed) {
          clearInterval(timer);
          // alert(newwin.closed, "window closed");
        }
      }, 10);
      // location.href = url;
      await this.getActivitrStatue(data.id)
    },
    async loginDiscord() {
      const _address = this.$store.state.user.address;
      const codeChallenge = Date.now();
      const state = btoa(`${_address}|${codeChallenge}`);
      // const url = 'https://discord.com/api/oauth2/authorize?client_id=1116692240224501850&redirect_uri=http%3A%2F%2Flocalhost%3A3010%2Fdiscord%2Fredirect_uri&response_type=code&scope=guilds%20identify%20guilds.members.read'
      const url = `https://discord.com/api/oauth2/authorize?client_id=1117759635269636096&redirect_uri=https%3A%2F%2Foauth-svr.cebggame.com%2Fdiscord%2Fredirect_uri&response_type=code&scope=guilds%20identify%20guilds.members.read&state=${state}`;
      // location.href = url
      // // Redirect the user to the Discord OAuth2 authorization page
      let params = `scrollbars=yes,resizable=yes,status=no,location=no,toolbar=no,menubar=no,width=600,height=800,left=100,top=100`;
      let newwin = window.open(url, "discord login", params);
      var timer = setInterval(function() {
        if (newwin.closed) {
          clearInterval(timer);
  
        }
      }, 10);
    },
    // 领取任务奖励
    async getTaskClaim(id) {
      let address = this.$store.state.user.address;
      if (!this.$store.state.wallet.connected || !address) {
        this.walletDialogVisible = true
        return
      }
      this.isLoading = true
      let storeageKey
      try {
        storeageKey = await sendToChain('task_claim', address, id)
      } catch (err) {
        this.isLoading = false
        this.$showErr(err)
        return 
      }
      let serTimeId = setInterval(async () => {
        try {
          let { errcode, errmsg, data } = await apiTaskClaim(id)
          if (errcode) {
            if (errcode === 12) {
              // 已领取, 给个提示就可以了
              this.isLoading = false
              this.$message.error(errmsg)
              this.getActivitrStatue(id)
              clearInterval(serTimeId)
            } else if (errcode !== 14) {
              // 状态不是等待链上确认的, 都提示错误
              this.isLoading = false
              this.$message.error(errmsg)
              clearInterval(serTimeId)
            }
          } else {
            if(data?.status == 3) {
              // alert(`领取成功, 获得积分: ${data.score}`)
              this.isLoading = false
              this.activityDialog(data)
              this.getActivitrStatue(id)
              this.getUserState()
              localStorage.removeItem(storeageKey)
              clearInterval(serTimeId)
            }
          }
        } catch (err) {
          this.isLoading = false
          this.$message.error(`claim task reward error: ${err}`)
        }
      
      }, 3000)
      
    },

    // 探索状态
    async getGameStat() {
      let {errcode, data} = await apiGameStat()
      if (!errcode) {
        this.gameStateData = data;
        this.todayStepTicket = data.ticket;
        this.getTotalUsed = data.totalUsed
      }
    },

    // 最大探索次数
    exploreMax() {
      this.stepTicket = this.todayStepTicket
    },

    // 探索
    async exploreCli(amount) {
      if(this.token) {
        this.$refs.stepId.sendOneAction(this.getTotalUsed, amount)
      } else {
        this.walletDialogVisible = true
      }
    },

    // errorHandleClose
    errorHandleClose() {
      this.errDialogVisible = false
    },
    ruleHandleClose() {
      this.ruleDialogVisible = false
    },

    // 探索奖励
    exploreAwardDialog(val) {
      this.awardData = val
      this.eventName = 'explore_event'
      if(this.awardData.chests.length > 0) {
        this.level1 = []
        this.level2 = []
        this.level3 = []
        this.level4 = []
        val.chests.forEach(element => {
          if (element.level == "1") {
            this.level1.push(element)
          } else if (element.level == "2") {
            this.level2.push(element)
          } else if(element.level == "3"){
            this.level3.unshift(element)
          } else if(element.level == "4"){
            this.level4.push(element)
          }
        });
        this.dialogTitle = 'Explore successfully and get rewards'
        this.$refs.boxList.rewBoxList()
      } else {
        this.dialogTitle = 'Congratulations'
      }
      this.getUserState()
      this.getGameStat()
      this.ExploreDialogVisible = true
    },

    // 宝箱助力奖励
    helpAwardDialog(val) {
      this.awardData = val
      this.eventName = 'help_event'
      this.dialogTitle = 'Got lucky and successful Boosting'
      this.getUserState()
      this.getGameStat();
      this.ExploreDialogVisible = true
    },

    // 社媒任务奖励
    activityDialog(val) {
      this.awardData = val
      this.eventName = 'help_event'
      this.dialogTitle = 'Congratulations'
      // if(this.filteredBar == 100) {
        this.getGameStat()
      // }
      this.getUserState()
      this.$refs.rankingData.renewData()
      this.ExploreDialogVisible = true
    },

    // 签到奖励
    checkAwardDialog(val) {
      this.awardData = val
      this.eventName = 'check_event'
      this.dialogTitle = 'Congratulations'
      this.ExploreDialogVisible = true
    },

    // 关闭奖励弹窗
    ExploreHandleClose() {
      this.ExploreDialogVisible = false;
    },
    toComplete(val) {
      this.navIndex = val
      this.ExploreDialogVisible = false;
    },

    // 签到
    async walletCheck() {
      let address = this.$store.state.user.address;
      if (!this.$store.state.wallet.connected || !address) {
        this.walletDialogVisible = true
        return
      }
      this.isLoading = true
      let storeageKey
      try {
        storeageKey = await sendToChain('check', address, '')
      } catch (err) {
        this.isLoading = false
        this.$showErr(err)
        return 
      }
      let serTimeId = setInterval(async () => {
        try {
          let { errcode, errmsg, data } = await apiUsercheckin()
          if (errcode) {
            if (errcode === 12) {
              // 已领取, 给个提示就可以了
              this.$message.error(errmsg)
              this.isLoading = false
              this.getGameStat();
              clearInterval(serTimeId)
            } else if (errcode !== 13) {
              this.isLoading = false
              this.$message.error(errmsg)
              clearInterval(serTimeId)
            }
          } else {
            this.isLoading = false
            this.checkAwardDialog(data)
            this.$refs.renewCheck.renewCheckInit()
            this.getGameStat();
            localStorage.removeItem(storeageKey)
            clearInterval(serTimeId)
          }
        } catch (err) {
          this.isLoading = false
          this.$message.error(`claim task reward error: ${err}`)
        }
      }, 3000)
    },

    // 领取签到奖励
    async claimSeqStat(day) {
      let res = await apiCheckinClaimSeq(day)
      console.info(res)
      this.getGameStat();
    },

    // 获取累计签到奖励
    async getCheckClaim(days) {
      let res = await apiCheckinClaim(days)
        console.info(res)
        this.getGameStat();
        // this.$message.success('Received successfully')
      // }
    },

    // 获取钱包地址
    async getMyAddress() {
      return await new Wallet().getWalletAddress();
    },

    // 检查签到并领取奖励
    async getUsercheckin() {
      // let res = await apiUsercheckin();
      let res = await this.$axios.post(process.env.VUE_APP_API_URL+'/api/user/checkin',{  },
            { headers: { Authorization: `Bearer ${this.token}` } })
            return res.data.data
    },
    // 发送宝箱助力上链请求并领取奖励
    async sendEnhanceReq(boxCode) {
      let address = this.$store.state.user.address;
      if (!this.$store.state.wallet.connected || !address) {
        this.walletDialogVisible = true
        return
      }
      let storeageKey
      try {
        storeageKey = await sendToChain('chest_enhance', address, boxCode)
      } catch (err) {
        this.$message.error(`error send chain request`)
        return 
      }
      let serTimeId = setInterval(async () => {
        try {
          let { errcode, errmsg, data } = await apiEnhanceBox(boxCode)
          if (!errcode) {
            this.getGameStat();
            localStorage.removeItem(storeageKey)
            clearInterval(serTimeId)
          } else if (errcode !== 14) {
            // 状态不是等待链上确认的, 都提示错误
            this.$message.error(errmsg)
            clearInterval(serTimeId)
          }
        } catch (err) {
          this.$message.error(`claim task reward error: ${err}`)
        }
      }, 3000)},

    // 关闭助力弹窗
    helpHandleClose() {
      this.helpDialogVisible = false;
    },

    // 关闭我的邀请列表弹窗
    logHandleClose() {
      this.logDialogVisible = false;
    },

    // apiNftList获取nft合作列表
    async getNftList() {
      let res = await this.$axios.get(process.env.VUE_APP_API_URL+'/api/partner/nfts')
      this.nftsList = res.data.data
    },

    // 复制链接
    copyLinkCode() {
      if(this.token) {
        let text = this.userData.code
        let url = `${location.protocol}//${location.host}/home/new=${text}`;
        let oInput = document.createElement("input");
        oInput.value = url;
        document.body.appendChild(oInput);
        oInput.select();
        document.execCommand("Copy");
        oInput.className = "oInput";
        oInput.style.display = "none";
        this.$message.success("Copy succeeded");
      } else {
        this.walletDialogVisible = true
      }
      
    },

    // 领取助力奖励 || 判断是否是新用户
    async helpConfirm() {
      if(this.$route.params.code != undefined) {
        let newInvite = this.$route.params.code.split("=")[1];
        // let rtoken = await checkReCaptcha("invite_user");
        // let res = await this.$axios.get(process.env.VUE_APP_API_URL+"/api/activity/upload_invite_code", {
        //   params: { code: newInvite, rtoken: rtoken },
        //   headers: { Authorization: `Bearer ${this.token}` }
        // });
        let res = await apiUploadInviteCode(newInvite)
        return
        if (res.data.errcode == 0) {
          this.isNewUser = 0
          // this.getUploadInviteCode(newInvite)
        } else {
          this.isNewUser = 1
        }
      }
    },

    isLogin() {
      if(this.token) {
        this.logDialogVisible = true
        this.getUserState()
      } else {
        this.walletDialogVisible = true
      }
    },

    // 获取用户状态
    async getUserState() {
      await this.$store.dispatch('user/fetchUserState')
    },

    // nav 导航
    navBtn(index) {
      this.navIndex = index;
    },
    // 宝箱页面切换过来
    toExplore(val) {
      this.navIndex = val
    },

    // 登录
    onWalletLogin() {
      this.walletDialogVisible = true;
    },
    // 关闭登录弹窗
    closeDialog() {
      this.walletDialogVisible = false;
    },
    // 减探索次数
    decrease() {
        if(this.stepTicket == 0 ) return
        this.stepTicket--
    },
    // 加探索次数
    increase() {
      if(this.stepTicket == this.todayStepTicket ) return
      this.stepTicket++
    },
  }
};
</script>

<style lang="scss" scoped>
.zillionaire {
  height: 100%;
  .content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    padding: 30px 50px;
    box-sizing: border-box;
    color: #fff;
    .left {
      width: 70%;
      // height: 100%;
      border-radius: 98px;
      position: relative;
      overflow: hidden;
      background: url('./../../assets/common/Left_element_bg.png') no-repeat;
      background-size: 100% 100%;
      .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 {
            // width: 140px;
            display: flex;
            height: 50px;
            padding-right: 30px;
            background: url('@/assets/common/User-bar.png') no-repeat;
            background-size: 100% 100%;
            position: relative;
            li {
              color: #fff;
              padding: 10px 20px 5px 40px;
              cursor: pointer;
              position: relative;
              .hover-tips {
                display: none;
                position: absolute;
                top: 35px;
                right: 0px;
                width: 240px;
                height: 100px;
                line-height: 90px;
                background: url('@/assets/common/WL .png') no-repeat;
                background-size: 100% 100%;
                z-index: 1;
              }
              .top {
                display: flex;
                justify-content: end;
                align-items: center;
                font-weight: 600;
                text-align: right;
                span {
                  font-size: 16px;
                }
                .textCol1 {
                  color: #9950fd;
                }
                .textCol2 {
                  color: #fbc059;
                }
                .textCol3 {
                  color: #0095FF;
                }
                img {
                  width: 15px;
                  height: 15px;
                  margin-left: 5px;
                }
              }
              .btm {
                font-size: 14px;
                color: #A8A5AC;
                text-align: right;
              }
              &:hover {
                .hover-tips {
                  display: block;
                }
              }
            }
            li:nth-child(1) {
              img {
                width: 17px;
                height: 11px;
              }
            }
            li:nth-child(2) {
              img {
                width: 13px;
                height: 13px;
              }
              &:hover {
                .hover-tips {
                  display: block;
                  width: 300px;
                }
              }
            }
            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: 60px;
                height: 60px;
              }
            }
          }
          .left-top-points-right {
            margin-left: 30px;
            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;
              background: url('@/assets/common/WL .png') no-repeat;
              background-size: 100% 100%;
            }
            &:hover {
              .hover-tips {
                display: block;
              }
            }
          }
        }
      }
      .left-title {
        position: inherit;
        display: flex;
        justify-content: space-between;
        // align-items: center;
        padding: 20px 40px;
        color: #fff;
        z-index: 1;
        .left-title-left {
          width: 300px;
          height: 300px;
          background: url('./../../assets/home/Glow.png') no-repeat;
          background-size: 100% 100%;
          padding-left: 20px;
          div {
            width: 270px;
            line-height: 1.2;
            font-size: 53px;
            font-weight: 700;
            text-align: left;
            font-family: 'Anton-Regular';
          }
          p {
            text-align: left;
            font-size: 15px;
            font-family: 'Poppins-SemiBold';
            margin-top: 5px;
          }
        }
        .left-title-right {
          height: 160px;
          padding: 30px 20px 10px 20px;
          background: #2e283a;
          background: url('./../../assets/home/invite_box.png') no-repeat;
          background-size: 100% 100%;
          border-radius: 20px;
          p {
            font-family: 'Poppins-SemiBold';
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            span {
              display: inline-block;
              width: 30px;
              height: 30px;
              line-height: 30px;
              margin-left: 10px;
              background: #201d27;
              border-radius: 50%;
              font-size: 18px;
              font-weight: 700;
              cursor: pointer;
            }
          }
          .textCol {
            font-size: 28px;
            font-weight: 700;
            background-image: -webkit-linear-gradient(right, #d1a158, #a154ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
          .copy-btn {
            font-size: 14px;
            background: url('./../../assets/home/button_copy.png') no-repeat;
            background-size: 100% 100%;
            color: #ffc35d;
            padding: 20px;
            margin: 0 auto;
            cursor: pointer;
            display: flex;
            align-items: center;
            img {
              width: 25px;
              height: 25px;
              margin-right: 5px;
            }
          }
          .copy-see {
            width: 164px;
            margin: 0 auto;
            height: 40px;
            line-height: 40px;
            background: url('./../../assets/home/button_view.png') no-repeat;
            background-size: 100% 100%;
            font-size: 14px;
            font-family: 'Poppins-Regular';
            cursor: pointer;
          }
          .rule {

          }
        }
      }
      .explore {
        // position: relative;
        width: 100%;
        height: 100%;
        .explore-zill {
          position: absolute;
          top: 55%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 936px;
          height: 680px;
          div {
            width: 100%;
            height: 100%;
          }
        }
        .explore-desc {
          position: absolute;
          left: 30px;
          bottom: 90px;
          padding: 45px 35px;
          width: 310px;
          background: url('./../../assets/home/box.png') no-repeat;
          background-size: 100% 100%;
          border-radius: 20px;
          color: #fff;
          margin-left: 25px;
          z-index: 9;
          .explore-desc-logo {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 30px;
            height: 28px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          h4 {
            text-align: left;
            font-size: 16px;
            margin-bottom: 10px;
            font-weight: 600;
            font-family: 'Poppins-SemiBold';
          }
          .desc {
            text-align: left;
            font-size: 14px;
            font-family: 'Poppins-Light';
          }
        }
        .explore-desc-map {
          position: absolute;
          left: 30px;
          bottom: 80px;
          padding: 20px 40px;
          width: 320px;
          margin-left: 25px;
          background: rgba(0, 0, 0, 0.2);
          border-radius: 20px;
          color: #fff;
          z-index: 9;
          li {
            display: flex;
            justify-content: center;
            align-items: center;
            h2 {
              font-family: 'Anton-Regular';
              font-size: 30px;
            }
            .logo {
              width: 28px;
              height: 28px;
              margin-left: 10px;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
          li:nth-child(2) {
            justify-content: space-between;
            margin: 10px auto;
            padding: 10px 20px;
            border-radius: 30px;
            // background: #1f1c27;
            
            .check {
              width: 140px;
              padding: 5px 20px;
              display: flex;
              justify-content: space-between;
              background: url('./../../assets/home/select button.png') no-repeat;
              background-size: 100% 100%;
              span {
                color: #fff;
                display: inline-block;
              }
              span:nth-child(1) {
                font-size: 28px;
                cursor: pointer;
              }
              span:nth-child(2) {
                display: flex;
                align-items: center;
                img {
                  width: 15px;
                  height: 15px;
                  margin-left: 5px;
                }
              }
              span:nth-child(3) {
                font-size: 28px;
                cursor: pointer;
              }
            }
            .max {
              padding: 5px 20px;
              font-size: 12px;
              color: #F2B95B;
              border: 2px solid #F2B95B;
              border-radius: 20px;
              cursor: pointer;
            }
          }
          .explore-btn {
            background: #fec25d;
            color: #000;
            font-size: 14px;
            padding: 30px 20px;
            border-radius: 10px;
            background: url('./../../assets/home/explore map button.png') no-repeat;
            background-size: 100% 100%;
            cursor: pointer;
          }
        }
      }
    }
    .right {
      width: 28%;
      padding: 20px 30px;
      border-radius: 98px;
      // background: #1e1c24;
      box-sizing: border-box;
      background: url('./../../assets/common/Right_box.png') no-repeat;
      background-size: 100% 100%;
      .right-title {
        color: #fff;
        line-height: 1.4;
        margin-bottom: 20px;
        p {
          font-size: 17px;
          font-family: 'Poppins-Light';
        }
        h3 {
          font-size: 26px;
          font-family: 'Anton-Regular';
        }
      }
      .content-right {
        width: 100%;
        z-index: 999;
        padding: 10px;
        box-sizing: border-box;
        background: #2d2738;
        background: url('./../../assets/home/quest log bg.png') no-repeat;
        background-size: 100% 100%;
        border-radius: 20px;
        .title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px 20px;
          .title-left {
            color: #fff;
            font-size: 20px;
            font-family: 'Poppins-SemiBold';
            font-weight: 700;
            margin-bottom: 10px;
          }
        }
        .quest {
          background: #1e1b26;
          padding: 10px;
          width: 100%;
          box-sizing: border-box;
          border-radius: 20px;
          .bar {
            margin-bottom: 10px;
            display: flex;
            .bar-left {
              padding: 0 10px;
              .bar-top {
                display: flex;
                align-items: center;
                margin-bottom: 5px;
                .bar-top-left {
                  font-size: 14px;
                }
                .bar-top-right {
                  width: 200px;
                  height: 8px;
                  margin-left: 10px;
                  background: url('@/assets/common/Progress bar bg.png') no-repeat;
                  background-size: 100% 100%;
                  .bar-top-jinDu {
                    width: 80%;
                    height: 8px;
                    background: url('@/assets/common/Progress bar fill.png') no-repeat;
                    background-size: 100% 100%;
                  }
                }
              }
              .bar-btm {
                font-size: 12px;
                color: #9950FD;
                p {
                  text-align: left;
                }
              }
            }
            .bar-right {
              .bar-no {
                display: flex;
                align-items: center;
                font-weight: 700;
                color: #fbc059;
              }
              img {
                width: 20px;
                height: 20px;
                margin-left: 5px;
              }
            }
          }
          .quest-list {
            width: 100%;
            height: 320px;
            overflow-y: scroll;
            overflow-x: hidden;
            .partner {
              display: flex;
              height: 30px;
              font-size: 14px;
              justify-content: space-between;
              align-items: center;
              div:nth-child(1) {
                width: 180px;
              }
              div:nth-child(2) {
                width: 45px;
              }
            }
            li:hover{
              background-color: #27242e;
            }
            li .quest-item{
              display: flex;
              justify-content: space-between;
              align-items: center;
              min-height: 60px;
              padding: 10px;
              border-radius: 10px;
              font-size: 14px;
              margin-bottom: 10px;
              box-sizing: border-box;
              color: #fff;
              cursor: pointer;
              .content-right-left {
                display: flex;
                align-items: center;
                width: 240px;
                .img-logo {
                  width: 40px;
                  height: 40px;
                  img {
                    width: 100%;
                    height: 100%;
                  }
                }
                .desc {
                  max-width: 240px;
                  margin: 0 5px;
                  h3 {
                    text-align: left;
                    font-size: 14px;
                    font-family: 'Poppins-SemiBold';
                  }
                  p {
                    font-family: 'Poppins-Light';
                    font-size: 12px;
                    text-align: left;
                  }
                }
              }
              .content-rewards-left {
                display: flex;
                align-items: left;
                width: 180px;
                .img-logo {
                  width: 40px;
                  height: 40px;
                  margin-right: 10px;
                  img {
                    width: 100%;
                    height: 100%;
                  }
                }
                .desc {
                  max-width: 240px;
                  margin: 0 5px;
                  h3 {
                    text-align: left;
                    font-size: 14px;
                    font-family: 'Poppins-SemiBold';
                  }
                  p {
                    font-family: 'Poppins-Light';
                    font-size: 12px;
                    text-align: left;
                  }
                }
              }
              .rewards {
                width: 45px;
                height: 40px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              .btn {
                border-radius: 15px;
                color: #000;
                margin-right: 10px;
                cursor: pointer;
                position: relative;
                font-weight: normal;
                .is-btn {
                  width: 80px;
                  height: 35px;
                  font-size: 12px;
                  .started {
                    width: 90px;
                    height: 30px;
                    line-height: 30px;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50% , -50%);
                    background: #fec25d;
                    background: url('./../../assets/home/ButtonFollow.png') no-repeat;
                    background-size: 100% 100%;
                  }
                  .claim {
                    width: 90px;
                    height: 30px;
                    line-height: 30px;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50% , -50%);
                    background: url('./../../assets/home/Buttonclaim.png') no-repeat;
                    background-size: 100% 100%;
                  }
                  .success {
                    width: 125px;
                    height: 65px;
                    line-height: 65px;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50% , -50%);
                    color: #fff;
                    background: #9950fd;
                    background: url('./../../assets/home/Button.png') no-repeat;
                    background-size: 100% 100%;
                    img {
                      width: 12px;
                      height: 8px;
                    }
                  }
                }
              }
              .btn:hover{
                color: deepskyblue;
              }
            }
          }
          .partner-list {
            height: 380px;
            line-height: 380px;
            font-size: 54px;
            font-family: "Anton-Regular";
            font-weight: 700;
          }
          ::v-deep .quest-list::-webkit-scrollbar {
          width: 5px;
        }
      ::v-deep .quest-list::-webkit-scrollbar-track{
          background: #171220;
          border-radius:2px;
        }
      ::v-deep .quest-list::-webkit-scrollbar-corner{
          display: block;
        }
      ::v-deep .quest-list::-webkit-scrollbar-thumb{
        height: 15px;
          background: #9950fd;
          border-radius:10px;
        }
        }
        .tips {
          margin-top: 10px;
          font-size: 14px;
          color: #fff;
        }
      }
      .skip {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
        .skip-left {
          display: flex;
          align-items: center;
          .skip-icon {
            width: 28px;
            height: 28px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .skip-desc {
            margin-left: 10px;
            p {
              text-align: left;
              font-size: 8px;
              font-family: 'Poppins-Light';
              color: #fff;
            }
          }
        }
        .skip-right {
          width: 100px;
          height: 35px;
          line-height:35px;
          background: #2d2738;
          color: #fff;
          font-size: 14px;
          border-radius: 10px;
          cursor: pointer;
        }
      }
      .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 {
              margin: 0 5px;
              div {
                width: 16px;
                height: 15px;
                text-align: center;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
          .wallet {
            width: 120px;
            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;
              img {
                width: 100%;
                height: 100%;
              }
              .hover-show {
                display: block;
              }
              .hover-none {
                // display: none;
                border-radius: 50%;
              }
            }
          }
        }
      }
      .nav-btm {
        margin: 10px auto;
        margin-bottom: 20px;
        .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;
          }
        }
      }
      .sign-in-content {
        height: 660px;
        padding: 20px 10px;
        background: url('./../../assets/home/Samengesteld.png') no-repeat;
        background-size: 100% 100%;
        border-radius: 40px;
        box-sizing: border-box;
        .calen-content {
          border-radius: 25px;
          width: 360px;
          padding-top: 10px;
          margin: 0 auto;
          .rewards {
            margin-bottom: 20px;
            color: #fff;
            p {
              font-size: 14px;
              text-align: left;
              margin: 20px 0;
            }
            .rewards-list {
              display: flex;
              flex-wrap: wrap;
              justify-content: flex-start;
              margin: 10px auto;
              li {
                flex: 1;
                height: 60px;
                margin: 0 10px 10px 0;
                width: calc((100% - 30px) /4);
                min-width: calc((100% - 30px) / 4);
                max-width: calc((100% - 30px) / 4);
                font-size: 12px;
                display: flex;
                justify-content: center;
                align-items: center;
                &:nth-child(4n) { 
                  margin-right: 0;
                }
                .center {
                  width: 100%;
                  height: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  cursor: pointer;
                  .top {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 22px;
                    img {
                      width: 20px;
                      height: 20px;
                      margin-right: 5px;
                    }
                  }
                  .btm {
                    margin-top: 5px;
                    font-size: 12px;
                  }
                }
                .state {
                  background: url('./../../assets/common/Box_achieved.png') no-repeat;
                  background-size: 100% 100%;
                }
                .no-state {
                  background: url('./../../assets/common/Box.png') no-repeat;
                  background-size: 100% 100%;
                }
                .yes-state {
                  background: url('./../../assets/common/Box9.png') no-repeat;
                  background-size: 100% 100%;
                  .top {
                    color:#9950FD !important;
                  }
                  .btm {
                    color:#9950FD !important;
                  }
                }
              }
            }
          }
        }
        .check {
          width: 360px;
          margin: 20px auto;
          margin-top: 40px;
          background: #1e1b26;
          border-radius: 25px;
          padding: 10px 20px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .check-top {
            
            // margin-bottom: 10px;
            li {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 160px;
              height: 35px;
              // line-height: 35px;
              background: #fec25d;
              border-radius: 15px;
              font-size: 14px;
              color: #000;
              cursor: pointer;
              span {
                display: inline-block;
                margin-right: 10px;
                color: #000;
              }
              img {
                width: 15px;
                height: 15px;
              }
            }
            .check-yes {
              width: 40px;
              height: 40px;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
          .check-btm {
            width: 200px;
            color: #fff;
            p {
              font-size: 14px;
              text-align: left;
            }
          }
        }
      }
    }
  }
  .content-box {
    width: 100%;
    height: 100%;
    padding: 30px 50px;
    box-sizing: border-box;
    color: #fff;
    .box {
      width: 100%;
      height: 100%;
      background: url('./../../assets/common/bg_p3.png') no-repeat;
      background-size: 100% 100%;
      border-radius: 98px;
      .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 {
                // width: 140px;
                display: flex;
                height: 50px;
                align-items: center;
                background: url('@/assets/common/User-bar.png') no-repeat;
                background-size: 100% 100%;
                position: relative;
                padding-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;
                    background: url('@/assets/common/WL .png') no-repeat;
                    background-size: 100% 100%;
                    z-index: 1;
                  }
                  .top {
                    display: flex;
                    justify-content: end;
                    align-items: center;
                    font-weight: 600;
                    text-align: right;
                    span {
                      font-size: 16px;
                    }
                    .textCol1 {
                      color: #9950fd;
                    }
                    .textCol2 {
                      color: #fbc059;
                    }
                    .textCol3 {
                      color: #0095FF;
                    }
                    img {
                      width: 15px;
                      height: 15px;
                      margin-left: 5px;
                    }
                  }
                  .btm {
                    font-size: 14px;
                    color: #A8A5AC;
                    text-align: right;
                  }
                  &:hover {
                    .hover-tips {
                      display: block;
                    }
                  }
                }
                li:nth-child(1) {
                  img {
                    width: 17px;
                    height: 11px;
                  }
                }
                li:nth-child(2) {
                  img {
                    width: 13px;
                    height: 13px;
                  }
                  &:hover {
                    .hover-tips {
                      display: block;
                      width: 300px;
                    }
                  }
                }
                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: 60px;
                    height: 60px;
                  }
                }
              }
              .left-top-points-right {
                margin-left: 30px;
                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;
                  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 {
                  margin: 0 5px;
                  div {
                    width: 16px;
                    height: 15px;
                    text-align: center;
                    img {
                      width: 100%;
                      height: 100%;
                    }
                  }
                }
              }
              .wallet {
                width: 120px;
                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;
              }
            }
          }
        }
      }
    }
  }
  .invite-dialog {
    ::v-deep .el-dialog {
      width: 500px;
      .el-dialog__header {
        background: #4095e5;
      }
      .el-dialog__body {
        background: #fff;
      }
    }
  }
  .wallet-dialog {
    position: relative;
    z-index: 9;
  }
  .help-dialog {
    position: relative;
    z-index: 1;
  }
  .light-btn{
    background: #ffc35b;
    color: #000;
    padding: 5px 10px;
    border-radius: 20px;
    cursor: pointer;
  }
  .Explore-dialog {

  }
}
</style>