<template>
  <div class="mint">
    <div class="mint-page">
      <div class="mint-header">
        <div class="mint-header-logo" @click="handlHome">
          <img src="@/assets/img/cec_activity/mint_Logo1.png" alt />
        </div>
        <div class="mint-header-right">
          <div class="left">
            <div>
              <a href="https://discord.gg/counterfire" target="_blank">
                <img src="@/assets/img/cec_activity/Icon_Disc.png" alt />
              </a>
            </div>
            <div @click="toTwitter">
              <img src="@/assets/img/cec_activity/Icon_X.png" alt />
            </div>
          </div>
          <div class="right">
            <div class="wallet" v-if="localWalletStore.address == null || localWalletStore.address == ''" @click="getLinkWallet">
              <span>Connect Wallet</span>
              <div class="wallet-btn">
                <img class="hover-show" src="@/assets/img/cec_activity/ConnectMenu1.png" alt />
                <img class="hover-none" src="@/assets/img/cec_activity/ConnectMenu2.png" alt />
              </div>
            </div>
            <div class="wallet" v-else @click="isLogout = !isLogout">
              <div
                class="wallet-address"
              >{{ localWalletStore.showAddress }}</div>
              <div class="wallet-btn">
                <img class="hover-show" src="@/assets/img/cec_activity/ConnectMenu1.png" alt />
                <img class="hover-none" src="@/assets/img/cec_activity/ConnectMenu2.png" alt />
              </div>
              <div class="log-out" v-if="isLogout" @click="logOut">logout</div>
            </div>
          </div>
        </div>
      </div>
      <div class="mint-body">
        <div class="mint-body-left">
          <div class="mint-body-left-title">
            <h2>Contribution Clash</h2>
          </div>
          <div class="mint-body-left-text">
            500,000 $CEC Awaits - Earn Your Share!
          </div>
          <div class="mint-body-left-time">
            <div class="left">
              <div class="tips">
                <div class="tips-icon">
                  <img src="@/assets/img/cec_activity/event_help.png" alt />
                </div>
                <div class="tips-text">
                  <div>
                    <p>Your contribution credits will be tracked in real time throughout the event.</p>
                    <p>The final distribution of the 500,000 CEC prize pool will be based on your percentage of total contribution credits at the event's close.</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="right">
              <div>Event start: 2024.8.22 06:00 (GMT)</div>
              <div>Event &nbsp;&nbsp;end: 2024.9.22 05:59 (GMT)</div>
            </div>
          </div>
          <div class="mint-body-left-content">
            <p>Your Credits</p>
            <div class="mint-body-left-contribute">
              <li>
                <div>
                  <img src="@/assets/img/cec_activity/icon_Credit_big.png" alt />
                </div>
                <h6>{{ Number(cecInfo.my_contribution) == 0 ? '-' : cecInfo.my_contribution }}</h6>
              </li>
            </div>
            <div class="mint-body-left-my-pro">
              <p>Your Credit Share</p>
              <p>
                <span>{{ contributionLogs(myWidthShare) }}%</span>
              </p>
            </div>
            <div class="line"></div>
            <h4>Expected Rewards</h4>
            <div class="mint-body-left-cec">
              <div>
                <img src="@/assets/img/marketplace/CECIcon.png" alt />
              </div>
              <h3>{{ cecInfo.my_expected_cec }}</h3>
            </div>
          </div>
        </div>
        <div class="mint-body-content">
          <div class="mint-body-content-total">
            <div>
              <img src="@/assets/img/marketplace/CECIcon.png" alt />
            </div>
            <h3>{{ cecInfo.total_cec_pool }}</h3>
          </div>
          <div class="mint-body-content-bar">
            <div class="bar">
              <div class="left" :style="{width: `${myWidth}%`}">
                <div class="my-amount">
                  <li>
                    <div>Your Credits</div>
                    <span>{{ Number(cecInfo.my_contribution) == 0 ? '-' : cecInfo.my_contribution }}</span>
                  </li>
                  <div class="line"></div>
                  <li>
                    <div>Your Credit Share</div>
                    <p>{{ contributionLogs(myWidthShare) }}%</p>
                  </li>
                </div>
              </div>
              <div class="right" v-if="totalWidth != 100" :style="{width: `${totalWidth}%`}"></div>
              <div class="total-right" v-else :style="{width: `${totalWidth}%`}"></div>
            </div>
            <div class="total">
              <li>
                <h4>Total</h4>
                <h6>Contribution Credits</h6>
                <div></div>
                <p>{{ cecInfo.global_contribution }}</p>
              </li>
            </div>
          </div>
        </div>
        <div class="mint-body-right">
          <div class="mint-body-right-top">
            <div class="mint-body-right-top-title">
              How to obtain Contribution points
            </div>
            <div class="mint-body-right-top-text">
              To compete in the Contribution Clash, accumulate Contribution Credits through the following methods:
            </div>
            <div class="mint-body-right-top-line"></div>
            <div class="mint-body-right-top-con">
              <p>1. Top-Up Diamonds: Earn 1 Contribution Credit for every 1U spent automatically.</p>
              <p>2. Spend Gold in-Game: Receive 1 Contribution Credit for every 10 Gold spent in-game. (Note: Gold card synthesis and Market purchases are excluded.)</p>
              <p>3. Stake and Earn: Contribution Credits earned from ongoing staking activities will also count towards your total.</p>
            </div>
          </div>
          <div class="mint-body-right-btm">
            <p>Game Download</p>
            <div @click="downloadGame()">
              <img src="@/assets/img/cec_activity/btn_appStore.png" alt />
            </div>
            <div @click="downloadGame('Google Play')">
              <img src="@/assets/img/cec_activity/btn_googlePlay.png" alt />
            </div>
          </div>
        </div>
        <div class="mint-body-btm"></div>
      </div>
      <div class="footer">
        <div class="footer-left">
          <div>
            <img src="@/assets/img/cec_activity/game_logo02.png" alt />
          </div>
          <p>© Candy Bubble Global Limited.ALL RIGHTS RESERVED.</p>
        </div>
        <div class="footer-right">
          <!-- <li>
            <a href="https://discord.com/invite/counterfire" target="_blank">
              <img src="./../assets/home/com_Discord_icon.png" alt="">
            </a>
          </li>
          <li>
            <a href="https://twitter.com/@playCounterFire" target="_blank">
              <img src="./../assets/home/com_X_icon.png" alt="">
            </a>
          </li>
          <li>
            <a href="https://www.youtube.com/@playCounterFire" target="_blank">
              <img src="./../assets/home/com_Youtube_icon.png" alt="">
            </a>
          </li> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, watch, computed, onMounted} from "vue";
import { BlockChain } from "@/components/chain/BlockChain"
import { apiCecActivity } from "@/utils/marketplace"
import { contributionLogs } from "@/configs/priceCalculate"
import {walletStore} from "@/store/wallet";
import { useMarketplaceStore } from "@/store/marketplace"
const localWalletStore = walletStore()
const marketplaceStore = useMarketplaceStore()

import {useRouter, useRoute} from "vue-router";
const router = useRouter();

const totalCecPool = ref(0)
const cecInfo = ref({
  my_contribution: 0,
  global_contribution: 0,
  total_cec_pool: 500000,
  my_expected_cec: 0
})

const myWidthShare = computed(() => {
  let str = (Number(cecInfo.value.my_contribution) / Number(cecInfo.value.global_contribution)) * 100
  if(!localWalletStore.token) {
    str = 0
  }
  return str
})

const myWidth = computed(() => {
  let str = (Number(cecInfo.value.my_contribution) / Number(cecInfo.value.global_contribution)) * 100
  if(!localWalletStore.token) {
    str = 0
  } else {
    if(str < 10 && str != 0) return 10
  }
  return str
})

const totalWidth = computed(() => {
  let str = 100-myWidth.value
  return str
})

// 
const getCecActivity = async () => {
  if(localWalletStore.token) {
  const { errcode, errmsg, contributionPoint, info } = await apiCecActivity(localWalletStore.address)
  if(errcode != 0) return
    totalCecPool.value = contributionPoint
    cecInfo.value = info
  }
}

const cecActivityDialogVisible = ref(false)

// 链接钱包
const getLinkWallet = async () =>{
  await new BlockChain().connect()
  getCecActivity()
}

const isLogout = ref(false)
// 退出登录
const logOut = async () =>{
  try {
    isLogout.value = false
    await new BlockChain().logout()
    location.reload()
  } catch (e) {
    console.log(e)
  }
}

// 跳回首页
const handlHome = () => {
  router.push("/");
};

// 下载
const downloadGame = (platform) => {
  if (platform == "Android") {
    window.location.href = "https://counterfire.games/release/counterfire.apk";
  } else if (platform == "Google Play") {
    window.open(
      "https://play.google.com/store/apps/details?id=com.cege.games.release"
    );
  } else {
    window.open("https://apps.apple.com/app/counter%20fire/id6444462915");
  }
};

const loginDiscord = () => {
      const _address = localWalletStore.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);
      console.log(newwin)
      var timer = setInterval(function() {
        if (newwin.closed) {
          clearInterval(timer);
        }
      }, 10);
    };

// 发送推文
const toTwitter = () => {
  const url = "https://twitter.com/intent/tweet?text=";
  const hashtags = encodeURIComponent(
    "500,000 $CEC Awaits - Earn Your Share!"
  );
  const imageUrl = encodeURIComponent(
    `https://counterfire.games/cecActivity`
  );
  const params = `${hashtags}&url=${imageUrl}`;
  // const params = `${hashtags}`;
  window.open(`${url}${params}`, "_blank");
};

const mintInit = async () => {};

onMounted(() => {
  getCecActivity()
});
</script>

<style lang="scss" scoped>
.mint {
  background: #1a1821;
  .mint-page {
    .mint-header {
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      width: 1497px;
      height: 152px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 9;
      .mint-header-logo {
        width: 263px;
        height: 100%;
        cursor: pointer;
      }
      .mint-header-right {
        display: flex;
        align-items: center;
        color: #fff;
        .left {
          width: 106px;
          height: 47px;
          display: flex;
          justify-content: space-evenly;
          align-items: center;
          background: #2d2738;
          border-radius: 25px;
          margin-right: 21px;
          div {
            width: 19px;
            height: 14px;
            display: flex;
            align-items: center;
            cursor: pointer;
            a {
              display: block;
              width: 19px;
              height: 14px;
            }
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
        .right {
          cursor: pointer;
          .wallet {
            width: 220px;
            height: 50px;
            border-radius: 26px;
            padding-left: 40px;
            display: flex;
            align-items: center;
            margin-right: 80px;
            background: #2d2738;
            position: relative;
            span {
              display: inline-block;
              width: 100%;
              height: 100%;
              line-height: 50px;
              margin-right: 10px;
              font-size: 16px;
            }
            .wallet-address {
              width: 100%;
              height: 100%;
              line-height: 50px;
              font-size: 16px;
            }
            .wallet-btn {
              z-index: 999;
              position: absolute;
              top: -25px;
              right: -45px;
              width: 100px;
              height: 100px;
              img {
                width: 100%;
                height: 100%;
              }
              .hover-show {
                display: block;
              }
              .hover-none {
                display: none;
              }
              .wallet-list {
                position: absolute;
                left: 50%;
                bottom: -50%;
                transform: translateX(-50%);
                border-radius: 20px;
                overflow: hidden;
                display: none;
                li {
                  width: 200px;
                  height: 40px;
                  line-height: 40px;
                  padding: 10px;
                  font-size: 14px;
                  text-align: center;
                  display: flex;
                  align-items: center;
                  box-sizing: border-box;
                  background: #342f3b;
                  img {
                    width: 30px;
                    height: 30px;
                    margin-right: 8px;
                  }
                  &:hover {
                    background: #e0e0e0;
                    color: #0f1013;
                  }
                }
              }
              &:hover {
                .hover-show {
                  display: none;
                }
                .hover-none {
                  display: block;
                }
                .wallet-list {
                  display: block;
                }
              }
            }
            .log-out {
              position: absolute;
              left: 0;
              top: 100%;
              width: 100%;
              height: 100%;
              background: #2d2738;
              border-radius: 26px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 16px;
              border: 2px solid #bb7fff;
            }
          }
        }
      }
    }
    .mint-body {
      width: 1497px;
      margin: 0 auto;
      position: relative;
      top: -152px;
      .mint-body-left {
        position: absolute;
        top: 140px;
        left: 35px;
        z-index: 9;
        .mint-body-left-title {
          display: flex;
          align-items: center;
          h2 {
            font-family: "Anton";
            font-weight: 400;
            font-size: 48px;
            color: #fff;
          }
          
        }
        .mint-body-left-text {
          font-family: "Poppins";
          font-size: 17px;
          color: #fff;
        }
        .mint-body-left-time {
          display: flex;
          align-items: center;
          text-align: left;
          font-family: "Poppins";
          font-weight: 400;
          font-size: 20px;
          color: #994ffd;
          .left {
            .tips {
              position: relative;
              .tips-icon {
                width: 60px;
                height: 66px;
                cursor: pointer;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              .tips-text {
                display: none;
              }
              &:hover {
                .tips-text {
                  display: block;
                  position: absolute;
                  top: -107px;
                  left: 35px;
                  width: 492px;
                  height: 120px;
                  background: #1a1821;
                  border-radius: 32px;
                  border: 2px solid #8144d2;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  div {
                    width: 425px;
                    height: 80px;
                    p {
                      font-family: "Poppins";
                      font-weight: 400;
                      font-size: 14px;
                      color: #fff;
                      line-height: 1.2;
                    }
                  }
                }
              }
            }
          }
          .right {
            div {
              font-size: 16px;
            }
          }
        }
        .mint-body-left-content {
          width: 241px;
          height: 303px;
          margin-top: 31px;
          background: #2c2635;
          border-radius: 40px;
          text-align: left;
          p {
            padding-top: 21px;
            padding-left: 17px;
            font-family: "Poppins";
            font-weight: 400;
            font-size: 16px;
            color: #dcc2f1;
          }
          .mint-body-left-contribute {
            width: 100%;
            height: 69px;
            margin-top: 4px;
            position: relative;
            li {
              position: absolute;
              left: -14px;
              width: 269px;
              height: 69px;
              display: flex;
              align-items: center;
              padding-left: 27px;
              background: url("@/assets/img/cec_activity/Credit_bg1.png") no-repeat;
              background-size: 100% 100%;
              div {
                width: 42px;
                height: 42px;
                margin-right: 11px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              h6 {
                font-family: "Anton";
                font-weight: 400;
                font-size: 42px;
                color: #00deff;
              }
            }
          }
          .mint-body-left-my-pro {
            // display: flex;
            // align-items: center;
            font-family: "Poppins";
            font-weight: 400;
            font-size: 16px;
            color: #dcc2f1;
            p {
              padding-top: 10px;
              span {
                font-family: "Anton";
                font-weight: 400;
                font-size: 24px;
                color: #ffffff;
              }
              &:last-child {
                padding: 0;
                text-align: right;
                padding-right: 24px;
                line-height: 1;
              }
            }
          }
          .line {
            width: 227px;
            height: 2px;
            background: #423757;
            margin: 0 auto;
            margin-top: 12px;
          }
          h4 {
            font-family: "Poppins";
            font-weight: 400;
            font-size: 16px;
            color: #dcc2f1;
            padding-left: 14px;
            margin-top: 15px;
          }
          .mint-body-left-cec {
            display: flex;
            align-items: center;
            div {
              width: 59px;
              height: 57px;
              margin: 0 15px 0 11px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            h3 {
              font-family: "Anton";
              font-weight: 400;
              font-size: 46px;
              color: #ffc35b;
            }
          }
        }
      }
      .mint-body-content {
        width: 992px;
        height: 890px;
        background: url("@/assets/img/cec_activity/CEC_chest.png") no-repeat;
        background-size: 100% 100%;
        margin: 0 auto;
        margin-bottom: 50px;
        position: relative;
        .mint-body-content-total {
          position: absolute;
          left: 50%;
          bottom: 140px;
          transform: translateX(-50%);
          display: flex;
          align-items: center;
          justify-content: center;
          width: 416px;
          height: 80px;
          background: url("@/assets/img/cec_activity/totalCEC_bg.png") no-repeat;
          background-size: 100% 100%;
          div {
            width: 59px;
            height: 57px;
            margin-right: 12px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          h3 {
            font-family: "Anton";
            font-weight: 400;
            font-size: 48px;
            color: #fff;
          }
        }
        .mint-body-content-bar {
          position: absolute;
          left: 50%;
          bottom: 0;
          transform: translateX(-50%);
          width: 565px;
          margin: 0 auto;
          .bar {
            width: 565px;
            height: 48px;
            padding: 10px;
            background: #25212f;
            border-radius: 24px;
            border: 2px solid #44395b;
            display: flex;
            > div {
              height: 100%;
            }
            .left {
              width: 10%;
              background: linear-gradient(180deg, #f38d3b, #ffd86e);
              border-radius: 20px 0 0 20px;
              position: relative;
              cursor: pointer;
              .my-amount {
                display: none;
                position: absolute;
                left: 50%;
                top: -95px;
                transform: translateX(-50%);
                width: 232px;
                height: 67px;
                background: #2c2635;
                border-radius: 20px;
                font-family: "Poppins";
                font-weight: 400;
                font-size: 14px;
                color: #dcc2f1;
                li {
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  height: 32px;
                  padding: 0 20px;
                  div {
                    text-align: left;
                    width: 125px;
                  }
                  span {
                    font-family: "Poppins";
                    font-weight: bold;
                    font-size: 18px;
                    color: #00deff;
                  }
                  p {
                    font-family: "Poppins";
                    font-weight: bold;
                    font-size: 18px;
                    color: #fff;
                  }
                }
                .line {
                  width: 212px;
                  height: 2px;
                  margin: 0 auto;
                  background: #423757;
                }
                &:after {
                  display: block;
                  content: "";
                  border-width: 15px;
                  border-style: solid;
                  border-color: #ffc96a transparent transparent transparent;
                  position: absolute;
                  left: 50%;
                  bottom: -30px;
                  transform: translateX(-50%);
                }
              }
              &:hover {
                .my-amount {
                  display: block;
                }
              }
            }
            .right {
              width: 90%;
              background: linear-gradient(180deg, #8929ff, #e362ff);
              border-radius: 0 20px 20px 0;
            }
            .total-right {
              background: linear-gradient(180deg, #8929ff, #e362ff);
              border-radius: 20px;
            }
          }
          .total {
            position: absolute;
            top: -45px;
            right: -120px;
            width: 150px;
            height: 145px;
            background: url("@/assets/img/cec_activity/credit_bg2.png") no-repeat;
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            li {
              width: 127px;
              height: 90px;
              font-family: "Poppins";
              text-align: center;
              h4 {
                font-size: 16px;
                color: #fffeff;
              }
              h6 {
                font-weight: 400;
                font-size: 12px;
                color: #fffeff;
              }
              div {
                width: 100%;
                height: 2px;
                background: #423757;
              }
              p {
                font-weight: bold;
                font-size: 18px;
                color: #ffffff;
              }
            }
          }
        }
      }
      .mint-body-right {
        width: 260px;
        // height: 630px;
        background: #2c2635;
        border-radius: 28px;
        position: absolute;
        top: 154px;
        right: 65px;
        // padding: 25px 45px 30px 46px;
        box-sizing: border-box;
        .mint-body-right-top {
          // height: 502px;
          background: #1A1821;
          border-radius: 28px;
          border: 2px solid #4B3E5D;
          // padding: 14px 45px 30px 46px;
          box-sizing: border-box;
          position: relative;
          color: #fff;
          .mint-body-right-top-title {
            position: absolute;
            top: 18px;
            left: -20px;
            width: 298px;
            height: 74px;
            background: url('@/assets/img/cec_activity/Credit_bg3.png') no-repeat;
            background-size: 100% 100%;
            font-family: 'Anton';
            font-weight: 400;
            font-size: 20px;
            color: #FFFFFF;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .mint-body-right-top-text {
            margin-top: 108px;
            font-family: 'Poppins-Regular';
            font-weight: 400;
            font-size: 14px;
            padding-left: 14px;
          }
          .mint-body-right-top-line {
            width: 233px;
            height: 2px;
            background: #423757;
            margin: 15px auto;
          }
          .mint-body-right-top-con {
            padding-left: 14px;
            p {
              font-family: 'Poppins-Regular';
              font-weight: 400;
              font-size: 14px;
              color: #DCC2F1;
              margin-bottom: 25px;
              &:last-child {
                margin-bottom: 10px;
              }
            }
          }
        }
        .mint-body-right-btm {
          height: 200px;
          padding: 15px 45px 30px 46px;
          box-sizing: border-box;
          p {
            height: 16px;
            margin-bottom: 20px;
            font-family: "Poppins";
            font-weight: bold;
            font-size: 19px;
            color: #ffffff;
          }
          div {
            width: 169px;
            height: 59px;
            margin-top: 10px;
            cursor: pointer;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
      .mint-body-btm {
        // width: 300px;
        // height: 200px;
        // background: #2c2635;
        // border-radius: 28px;
        // position: absolute;
        // bottom: 154px;
        // right: 65px;
      }
    }
    .footer {
      width: 100%;
      height: 98px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 45px;
      box-sizing: border-box;
      border-top: 2px solid #2c2635;
      background: #1a1821;
      .footer-left {
        color: #877e98;
        font-size: 18px;
        display: flex;
        align-items: center;
        div {
          width: 235px;
          height: 51px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
</style>
