<template>
  <div class="zillionaire">
    <div class="content" v-show="navIndex == 0 || navIndex == 1">
      <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>
              </li>
              <li>
                <div class="top">
                  <span class="textCol3">{{ myEnhanceCount }}</span>
                  <img src="./../../assets/common/Icon_Boosting.png" alt="">
                </div>
                <div class="btm">Boosting</div>
              </li>
              <!-- <li v-if="navIndex == 1"> -->
              <li>
                <div class="top">
                  <span class="textCol2">{{ todayStepTicket }}</span>
                  <img src="./../../assets/common/Icon_Explore.png" alt="">
                </div>
                <div class="btm">Exploration</div>
              </li>
              <li>
                <div class="top">
                  <span class="textCol1">{{ myScoreTotal }}.000</span>
                  <img src="./../../assets/common/Icon_Points.png" alt="">
                </div>
                <div class="btm">Points</div>
              </li>
            </div>
            <div class="left-top-points-right">
              <img src="./../../assets/home/Nav bar_character.png" alt />
            </div>
          </div>
        </div>
        <div class="left-title">
          <div class="left-title-left" v-if="navIndex == 0">
            <div>LOOMING FOG OF THE <img src="./../../assets/home/Icon_star.png" alt=""> UNKNOWN</div>
            <p>Phase 1 Quest Log</p>
          </div>
          <div class="left-title-left" v-if="navIndex == 1">
            <div>EXPLORE <img src="./../../assets/home/Icon_star.png" alt=""> AND EARN</div>
            <p>
              Phase 2 Exploration Missions
            </p>
          </div>
          <div class="left-title-right">
            <p>Invite friends to earn</p>
            <p>more rewards</p>
            <div class="copy-btn" @click="copyLink(userData.code)"><img src="./../../assets/common/Icon_Explore.png" alt=""> Copy referral code</div>
            <div class="copy-see" @click="logDialogVisible = true">
              See invites
            </div>
          </div>
        </div>
        <div class="explore">
          <div class="explore-zill">
            <gameView ref="stepId" :stepAmount="stepAmount" :getTotalUsed="getTotalUsed" @awardDialog="awardDialog1" />
          </div>
          <div class="explore-desc" v-if="navIndex == 0">
            <div class="explore-desc-logo">
              <img src="./../../assets/home/Icon_smile.png" alt="">
            </div>
            <h4>How it works</h4>
            <div
              class="desc"
            >Lorem ipsum dolor sit amet, consectetur adipisicing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</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>
              <span @click="decrease">-</span>
              <span>{{ stepTicket }} Exploration</span>
              <span @click="increase">+</span>
            </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>
                <div>
                  <img src="./../../assets/common/Icon_Disc.png" alt />
                </div>
              </li>
              <li>
                <div>
                  <img src="./../../assets/common/Icon_X.png" alt />
                </div>
              </li>
            </div>
            <div class="wallet" @click="onWalletLogin">
              <span v-if="!token">X Connected</span>
              <div
                class="wallet-address"
                v-else
              >{{ showAddress }}</div>
              <div class="wallet-btn">
                <img class="hover-show" src="./../../assets/home/Connect Menu1.png" alt />
                <img class="hover-none" src="./../../assets/home/Connect Menu2.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="content-right" v-if="navIndex == 0">
          <div class="title">
            <div class="title-left">
              <div>My Quest Logbook</div>
            </div>
          </div>
          <div class="quest">
            <li v-for="(item, index) in activeList" :key="index">
              <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="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>
            </li>
          </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 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="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>
            <div class="rewards">
              <p>Bonus Rewards</p>
              <div 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="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>
          </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>
              <li v-if="gameStateData.todayStat == 9">
                <span>Daily Check-in </span>+{{ gameStateData.todayTickets }}
                <img src="./../../assets/home/check-yes.png" alt="">
              </li>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="content-box" v-show="navIndex == 2">
      <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>
                  </li>
                  <li>
                    <div class="top">
                      <span class="textCol3">{{ myEnhanceCount }}</span>
                      <img src="./../../assets/common/Icon_Boosting.png" alt="">
                    </div>
                    <div class="btm">Boosting</div>
                  </li>
                  <!-- <li v-if="navIndex == 1"> -->
                  <li>
                    <div class="top">
                      <span class="textCol2">{{ todayStepTicket }}</span>
                      <img src="./../../assets/common/Icon_Explore.png" alt="">
                    </div>
                    <div class="btm">Exploration</div>
                  </li>
                  <li>
                    <div class="top">
                      <span class="textCol1">{{ myScoreTotal }}.000</span>
                      <img src="./../../assets/common/Icon_Points.png" alt="">
                    </div>
                    <div class="btm">Points</div>
                  </li>
                </div>
                <div class="left-top-points-right">
                  <img src="./../../assets/home/Nav bar_character.png" alt />
                </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>
                    <div>
                      <img src="./../../assets/common/Icon_Disc.png" alt />
                    </div>
                  </li>
                  <li>
                    <div>
                      <img src="./../../assets/common/Icon_X.png" alt />
                    </div>
                  </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 class="hover-show" src="./../../assets/home/Connect Menu1.png" alt />
                    <img class="hover-none" src="./../../assets/home/Connect Menu2.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">
          <BoxBtm @toExplore="toExplore" />
        </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" />
  </div>
</template>

<script>
import Calen from "./calenView.vue";
import BoxBtm from './boxBtm.vue'
// import ImgView from './../../components/imgView.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 { getToken } from '@/utils/cookies.js'
// import { getWalletAddress, isWalletConnected, linkWallet } from "@/wallet/index.js";
import {
  apiBeginActivity,
  apiCheckActivity,
  apiTaskClaim,
  apiCheckinClaim,
  apiCheckinClaimSeq,
  retweetTwitter,
<<<<<<< HEAD
=======
  followTwitter,
  joinDiscord,
  apiProgress,
  apiGameStat,
  apiUsercheckin,
  apiEnhanceBox,
>>>>>>> 3aa761d3efe489838fd7b40789aa211cffabad8a
} 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: {
    Calen,
    gameView,
    WalletDialog,
    BoxBtm,
    CheckBtn,
    AwardDialog,
    HelpDialog,
    LogDialog,
    // ImgView,
  },
  computed: {
    showAddress () {
      let address = this.$store.state.user.address
      return formatShowAddress(address)
    }
  },
  data() {
    return {
      activityData: {},
      myScoreTotal: 0,
      myInviteCount: 0,
      myEnhanceCount: 0,
      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/P3-up.png"),
          imgSrc1: require("./../../assets/common/P3.png"),
        },
        {
          id: 4,
          name: 4,
          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: 0, // 探索次数
      inviteTableData: [],
      ExploreDialogVisible: false,
      awardData: {},
      level1: [],
      level2: [],
      level3: [],
      level4: [],
      dialogTitle: '',
      eventName: '',
      logDialogVisible: false,
    };
  },
  watch: {
    activeList: {
      handler(newVal) {
        console.log(newVal, "监听");
      },
      deep: true
    }
  },
  created() {
    this.userData = JSON.parse(localStorage.getItem("userData"));
    this.token = getToken();
    this.$nextTick(() => {
      if (this.$route.params.box) {
        this.helpDialogVisible = true
        console.log('this.$route.params.box+++++++++++++++++++++++++++++++++', this.$route.params.box)
      }
      console.log('this.$route.params.box----------------------------------', this.$route.params.box)
    });
  },
  mounted() {
    // this.userData = JSON.parse(localStorage.getItem("userData"));
    // this.token = localStorage.getItem("token");
    // this.$nextTick(() => {
    this.getActivity();
    // this.getUsercheckin()
    // this.getCheckInit()
    if(this.token) {
      this.getActivity();
      this.getProgress();
      this.getGameStat();
      this.myScoreTotal = this.userData.scoreTotal
      this.myInviteCount = this.userData.inviteCount
      this.myEnhanceCount = this.userData.enhanceCount
      this.myAddress = localStorage.getItem("myAddress")
      let walletName = localStorage.getItem("walletName")
      if (walletName) {
        linkWallet(walletName)
      }
    } else {
      this.walletDialogVisible = true
    }
  },
  methods: {
<<<<<<< HEAD
=======
    async initData() {
      await this.getActivity();
      this.$store.dispatch('wallet/restore')
      this.$store.dispatch('user/restore')
      console.log(this.$store.state.wallet.walletName)
      console.log(this.$store.state.user.token)
      console.log(this.$store.state.user.address)
      if (this.token) {
        this.getProgress();
        this.getGameStat();
        this.getInvitesList()
        this.myScoreTotal = this.userData.scoreTotal
        this.myInviteCount = this.userData.inviteCount
        this.myEnhanceCount = this.userData.enhanceCount
      }
    },
>>>>>>> 3aa761d3efe489838fd7b40789aa211cffabad8a
    // 获取活动信息
    async getActivity() {
      await this.$axios
        .get(`/api/activity/${this.activityId}`)
        .then(res => {
          // if (res.data.errcode == 0) {
          this.activityName = res.data.data.name;
          const actionTitles = {
            TwitterConnect: "Connect",
            TwitterFollow: "Follow",
            TwitterRetweet: "Retweet",
<<<<<<< HEAD
=======
            DiscordJoin: 'Join',
            DiscordConnect: "Connect"
>>>>>>> 3aa761d3efe489838fd7b40789aa211cffabad8a
          };
          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
          // }
        })
        .catch(err => {
          console.info(err);
        });
    },

    // 查看社交任务进度
    async getProgress() {
      await this.getActivity()
      await this.$axios
        .post(
          "/api/tasks/progress",
          {},
          { headers: { Authorization: `Bearer ${this.token}` } }
        )
        .then(res => {
          for (let i = 0; i < res.data.data.length; i++) {
            if (res.data.data[i].id == this.activeList[i].id)
              this.$set(this.activeList[i], "status", res.data.data[i].status);
          }
        });
    },

    // 开始任务
    async toPost(data) {
      let res = await apiBeginActivity(data.id);
      if(res.errcode == 0) {
        this.getProgress()
        // console.log("开始任务", res, data);
      }
      if (data.task == "TwitterConnect") {
        this.loginTwitter(data.id);
      } else if(data.task == "TwitterFollow") {
<<<<<<< HEAD
        retweetTwitter(data.desc)
      } else if(data.task == "TwitterRetweet") {
        retweetTwitter(data.desc)
=======
        followTwitter(data.cfg.account)
      } else if(data.task == "TwitterRetweet") {
        retweetTwitter(data.desc)
      } else if(data.task == "DiscordJoin") {
        joinDiscord(data.cfg.account)
      } if (data.task == "DiscordConnect") {
        this.loginDiscord()
>>>>>>> 3aa761d3efe489838fd7b40789aa211cffabad8a
      }
    },
    // 手动检查任务
    async toCheck() {
      await this.getProgress()
    },
    // 检查任务状态
    async getActivitrStatue(id) {
      await apiCheckActivity(id);
      await this.getProgress()
      // console.log(res, "检查任务状态------------------");
    },
    loginTwitter() {
      // const _address = "0x8c10Ae04BF525734eaC00d5F7c062567461c207F";
      const clientId = "aG1Jdm1YX0NhSU9rYU5sM0xQeVI6MTpjaQ";
      // const codeChallenge = crypto.randomUUID()
      const codeChallenge = Date.now();
      const address = this.$store.state.user.address;
      // console.log('codeChallenge: ' + codeChallenge)
      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
      )}`;
      location.href = url;
      this.getActivitrStatue(data.id)
    },
    async loginDiscord() {
      const _address = this.$store.state.user.address;
      const codeChallenge = Date.now();
      console.log(location.href);
      const state = btoa(`${_address}|${codeChallenge}|${location.href}`);
      console.log(state);
      // 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}`;
      console.log(url);
      // 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);
      console.log(newwin.closed);
      var timer = setInterval(function() {
        if (newwin.closed) {
          clearInterval(timer);
          alert(newwin.closed, "window closed");
        }
      }, 10);
    },
<<<<<<< HEAD

=======
>>>>>>> 3aa761d3efe489838fd7b40789aa211cffabad8a
    // 领取任务奖励
    async getTaskClaim(id) {
      let address = this.$store.state.user.address;
      if (!this.$store.state.wallet.connected || !address) {
        this.walletDialogVisible = true
        return
      }
      let storeageKey
      try {
        storeageKey = await sendToChain('task_claim', address, id)
      } catch (err) {
        this.$message.error(`error send chain request`)
        return 
      }
      let serTimeId = setInterval(async () => {
        try {
          let { errcode, errmsg, data } = await apiTaskClaim(id)
          if (errcode) {
            if (errcode === 12) {
              // 已领取, 给个提示就可以了
              this.$message.error(errmsg)
              this.getActivitrStatue(id)
              clearInterval(serTimeId)
            } else if (errcode !== 14) {
              // 状态不是等待链上确认的, 都提示错误
              this.$message.error(errmsg)
              clearInterval(serTimeId)
            }
          } else {
            if(data?.status == 3) {
              alert(`领取成功, 获得积分: ${data.score}`)
              this.getActivitrStatue(id)
              localStorage.removeItem(storeageKey)
              clearInterval(serTimeId)
            }
          }
<<<<<<< HEAD
          let serTimeId = setInterval(async () => {
            try {
              let { errcode, errmsg, data } = await apiTaskClaim(id)
              if (errcode) {
                if (errcode === 12) {
                  // 已领取, 给个提示就可以了
                  this.$message.error(errmsg)
                  this.getActivitrStatue(id)
                  clearInterval(serTimeId)
                }
              } else {
                if(data?.status == 3) {
                  alert(`领取成功, 获得积分: ${data.score}`)
                  this.getActivitrStatue(id)
                  clearInterval(serTimeId)
                }
              }
            } catch (err) {
              this.$message.error(`claim task reward error: ${err}`)
            }
          
          }, 3000)

        } else {
          this.walletDialogVisible = true
=======
        } catch (err) {
          this.$message.error(`claim task reward error: ${err}`)
>>>>>>> 3aa761d3efe489838fd7b40789aa211cffabad8a
        }
      
      }, 3000)
      
    },

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

    // 探索
    async exploreCli(amount) {
      this.$refs.stepId.stepBtn(this.getTotalUsed, amount)
    },

    // 探索奖励
    awardDialog1(val) {
      this.awardData = val
      this.eventName = 'explore_event'
      if(this.awardData.chest.length > 0) {
        this.level1 = []
        this.level2 = []
        this.level3 = []
        this.level4 = []
        val.chest.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'
      } else {
        this.dialogTitle = 'Congratulations'
      }
      
      this.ExploreDialogVisible = true
    },

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

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

    // 签到
    async walletCheck() {
<<<<<<< HEAD
      let address = localStorage.getItem("myAddress")
      if(await isWalletConnected()) {
        if(address) {
          try{
            let resChain = await sendDailyCheckIn(address);
            if (resChain) {
              let serTimeId = setInterval(async () => {
                if(await this.getUsercheckin()) {
                  // ToDo
                  this.$message.success('success')
                  this.$refs.renewCheck.renewCheckInit()
                  this.getGameStat();
                  clearInterval(serTimeId)
                }
              }, 2000)
            }
          } catch(e) {
            console.log(e)
            this.$message.error(e.message)
          }
        } else {
          this.walletDialogVisible = true
        }
      } else {
=======
      let address = this.$store.state.user.address;
      if (!this.$store.state.wallet.connected || !address) {
>>>>>>> 3aa761d3efe489838fd7b40789aa211cffabad8a
        this.walletDialogVisible = true
        return
      }
      let storeageKey
      try {
        storeageKey = await sendToChain('check', address, '')
      } catch (err) {
        this.$message.error(`error send chain request`)
        return 
      }
      let serTimeId = setInterval(async () => {
        try {
          let { errcode, errmsg, data } = await apiUsercheckin()
          if (errcode) {
            if (errcode === 12) {
              // 已领取, 给个提示就可以了
              this.$message.error(errmsg)
              this.getGameStat();
              clearInterval(serTimeId)
            } else if (errcode !== 13) {
              this.$message.error(errmsg)
              clearInterval(serTimeId)
            }
          } else {
            alert(`领取成功, 获得积分: ${data.score}`)
            this.getGameStat();
            localStorage.removeItem(storeageKey)
            clearInterval(serTimeId)
          }
        } catch (err) {
          this.$message.error(`claim task reward error: ${err}`)
        }
      }, 3000)
    },

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

    // 获取累计签到奖励
    async getCheckClaim(days) {
      let res = await apiCheckinClaim(days);
      if (res.ticket) {
        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('/api/user/checkin',{  },
            { headers: { Authorization: `Bearer ${this.token}` } })
            // console.log(res.data.data,'检查签到并领取奖励')
            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) {
            alert(`助力成功, 获得积分: ${data.score}`)
            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)

<<<<<<< HEAD
=======
    },
    // 获取路由宝箱助力
    async helpBtn() {
      if (this.$route.params.box != undefined) {
        let boxCode = this.$route.params.box.split("box=");
        let boxId = this.$route.params.boxId.split("id=");
        if (boxCode[1] != "undefined") {
          // 查询宝箱助力记录
          this.getHelpBoxLog();
          let boxState = await this.initBoxState(boxCode[1], boxId[1])
          console.log('助力状态', boxState)
          // 1、助力次数是否用完
          if(bosState.userCurrent < bosState.userMax) {
            // 2、宝箱助力次数是否上限
            if(chestCurrent < chestMax) {
              // 3、是否已经助力此宝箱
              if(enhanced == 0) {
                // 是否链接钱包
                if(await isWalletConnected()) {
                  // 助力上链签名
                  let address = this.$store.state.wallet.address
                  let helpRes = await sendHelp(address, boxCode[1])
                  // 轮询是否助力成功
                  if(helpRes) {
                    let serTimeId = setInterval(async () => {
                      let res = await this.$axios.post(
                          "/api/chest/enhance",
                          { code: boxCode[1] },
                          { headers: { Authorization: `Bearer ${this.token}` } }
                        );
                        if (res.data.errcode == 0) {
                          this.helpAmount = res.data.data.score;
                          this.isHelpSuccess = true;
                          clearInterval(serTimeId)
                        }
                    }, 2000)
                  }
                } else {
                  this.walletDialogVisible = true
              }
              } else {
                this.$message.error('Already helped this treasure chest')
              }
            } else {
              this.$message.error('The number of treasure chest boosts has been capped')
            }
          } else {
            this.$message.error('The number of assists for the day has been capped')
          }
          
          
          
          return
          if(await isWalletConnected()) {
            // let address = localStorage.getItem('myAddress')
            // let helpRes = await sendHelp(address, boxCode[1])

            this.helpDialogVisible = true;
            this.getHelpBoxLog();
            let res = await this.$axios.post(
              "/api/chest/enhance",
              { code: boxCode[1] },
              { headers: { Authorization: `Bearer ${this.token}` } }
            );
            if (res.data.errcode == 0) {
              this.helpAmount = res.data.data.score;
              // this.helpAmount = 10
              this.isHelpSuccess = true;
            } else {
              this.$message.error(res.data.errmsg, "--");
            }
          } else {
            this.walletDialogVisible = true
          }
        }
      }
    },

    // 助力状态查询
    async initBoxState(code,chestId) {
      let res = await this.$axios.post('/api/chest/enhance/state',{code: code, chestId: chestId, },{headers: { Authorization: `Bearer ${this.token}` }})
      return res.data.data
    },

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

    // 获取帮助的宝箱助力记录
    async getHelpBoxLog() {
      if (this.$route.params.boxId != undefined) {
        let rtoken = await checkReCaptcha("chest_share");
        console.log(this.$route.params.boxId, "this.$route.params.boxId");
        let boxId = this.$route.params.boxId.split("id=");
        let res = await this.$axios.post(
          "/api/chest/enhance/list",
          { chestid: boxId[1], rtoken: rtoken },
          {
            headers: { Authorization: `Bearer ${this.token}` }
          }
        );
        if (res.data.errcode == 0) {
          this.helpLogList = res.data.data;
        }
      } else {
        return;
      }
    },

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

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

    // 复制链接
    copyLink(text) {
      let url = `http://192.168.100.216:8030/home/new=${text}/box=undefined/id=undefined`;
      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");
    },

    // nav 导航
    navBtn(index) {
      if(index == 3) {
        this.navIndex = 2
      } else {
        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: 68%;
      // height: 100%;
      border-radius: 50px;
      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 {
          background: #2d2738;
          border-radius: 15px;
          position: relative;
          .left-top-points-left {
            // width: 140px;
            display: flex;
            padding-right: 30px;
            li {
              color: #fff;
              padding: 5px 20px 5px 40px;
              .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;
              }
            }
            li:nth-child(1) {
              img {
                width: 17px;
                height: 11px;
              }
            }
            li:nth-child(2) {
              img {
                width: 13px;
                height: 13px;
              }
            }
            li:nth-child(4) {
              img {
                width: 10px;
                height: 12px;
              }
            }
          }
          .left-top-points-right {
            position: absolute;
            top: 50%;
            right: -20px;
            transform: translateY(-50%);
            width: 60px;
            height: 60px;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
      .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%;
          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;
          }
          .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;
          }
        }
      }
      .explore {
        // position: relative;
        width: 100%;
        height: 100%;
        .explore-zill {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 820px;
          height: 850px;
          div {
            width: 100%;
            height: 100%;
          }
        }
        .explore-desc {
          position: absolute;
          left: 30px;
          bottom: 80px;
          padding: 45px 40px;
          width: 310px;
          background: url('./../../assets/home/box.png') no-repeat;
          background-size: 100% 100%;
          border-radius: 20px;
          color: #fff;
          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;
          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-evenly;
            margin: 10px auto;
            padding: 10px 20px;
            border-radius: 30px;
            // background: #1f1c27;
            background: url('./../../assets/home/select button.png') no-repeat;
            background-size: 100% 100%;
            span {
              color: #fff;
            }
            span:nth-child(1) {
              font-size: 30px;
              cursor: pointer;
            }
            span:nth-child(3) {
              font-size: 30px;
              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: 50px;
      // 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;
          li {
            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;
            .content-right-left {
              display: flex;
              align-items: center;
              .img-logo {
                width: 40px;
                height: 40px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              .score {
                margin-left: 10px;
              }
              .desc {
                max-width: 260px;
                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;
                }
              }
            }
            .btn {
              border-radius: 15px;
              color: #000;
              cursor: pointer;
              position: relative;
              .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;
                  }
                }
              }
            }
          }
        }
        .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-bottom: 10px;
        margin-top: 10px;
        .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 {
        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;
              cursor: pointer;
              span {
                display: inline-block;
                margin-right: 10px;
              }
              img {
                width: 15px;
                height: 15px;
              }
            }
          }
          .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/Right_box.png') no-repeat;
      background-size: 100%;
      .box-top {
        width: 100%;
        // height: 100%;
        display: flex;
        justify-content: space-between;
        .left {
          .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 {
              background: #2d2738;
              border-radius: 15px;
              position: relative;
              .left-top-points-left {
                // width: 140px;
                display: flex;
                padding-right: 30px;
                li {
                  color: #fff;
                  padding: 5px 20px 5px 40px;
                  .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;
                  }
                }
                li:nth-child(1) {
                  img {
                    width: 17px;
                    height: 11px;
                  }
                }
                li:nth-child(2) {
                  img {
                    width: 13px;
                    height: 13px;
                  }
                }
                li:nth-child(4) {
                  img {
                    width: 10px;
                    height: 12px;
                  }
                }
              }
              .left-top-points-right {
                position: absolute;
                top: 50%;
                right: -20px;
                transform: translateY(-50%);
                width: 60px;
                height: 60px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
        }
        .right {
          padding: 20px 30px;
          .right-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            margin-top: 10px;
            .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 {
            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;
              }
            }
          }
        }
      }
      .box-btm {
      }
    }
  }
  .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{
    cursor: pointer;
  }
  .Explore-dialog {

  }
}
</style>