<template>
  <div class="task-one">
    <div class="task-one-header">
      <NavBar @login-success="updateLogin"></NavBar>
    </div>
    <div class="content">
      <div class="center">
        <div class="content-left">
          <div class="return" @click="handTaskHome">
            <div class="return-icon">
              <img src="@/assets/img/task/return.png" alt="" />
            </div>
            <div class="gacha-guest">Gacha Quest</div>
          </div>
          <!-- <div class="claim-bottom"> -->
          <div class="twist-egg">
            <img src="@/assets/img/task/twist-egg.jpg" alt="" />
          </div>

          <div class="bottom-content">
            <div :class="isClaim ? 'claim-active' : 'claim'" @click="handClaim">
              {{ isBalance == 0 ? "Claim" : "Claimed" }}
            </div>
            <div class="participants-content">
              <div class="participants">All Participants ({{ count }})</div>
              <div><img src="@/assets/img/task/cardinal-numbers.png" /></div>
            </div>
          </div>

          <!-- </div> -->
        </div>
        <div class="content-right">
          <div class="title">How to Participate</div>
          <div
            :class="
              chain.logined == true
                ? 'task-right-item-actave'
                : currentTask == 1
                ? 'task-right-item-current'
                : 'task-right-item'
            "
          >
            <div class="connect-center">
              <div>Connect your wallet</div>
              <div
                class="connect-now"
                v-if="!chain.logined && currentTask == 1"
                @click="login"
              >
                Connect Now
              </div>
            </div>

            <div
              :class="
                chain.logined == true ? 'serial-number-actave' : 'serial-number'
              "
            >
              <div class="checkmark">
                <img
                  v-if="!chain.logined"
                  src="../../assets/svg/checkmark.svg"
                  alt=""
                />
                <img
                  v-else
                  src="../../assets/svg/checkmark-active.svg"
                  alt=""
                />
              </div>
            </div>
          </div>
          <div
            :class="
              isDiscode == true
                ? 'task-right-item-actave'
                : currentTask == 2
                ? 'task-right-item-current'
                : 'task-right-item'
            "
          >
            <div class="discord">
              <div>Connect your Discord</div>
              <div
                class="discord-account"
                v-if="!isDiscode && currentTask == 2"
                @click="handDiscodes"
              >
                Connect
              </div>
              <div class="account" v-if="isDiscode">
                @{{ userInfo.discord }}
              </div>
            </div>

            <div
              class="serial-number"
              :class="
                isDiscode == true ? 'serial-number-actave' : 'serial-number'
              "
            >
              <div class="checkmark">
                <img
                  v-if="!isDiscode"
                  src="../../assets/svg/checkmark.svg"
                  alt=""
                />
                <img
                  v-else
                  src="../../assets/svg/checkmark-active.svg"
                  alt=""
                />
              </div>
            </div>
          </div>
          <div
            :class="
              joinDiscode == true
                ? 'task-right-item-actave'
                : currentTask == 3
                ? 'task-right-item-current'
                : 'task-right-item'
            "
          >
            <div class="join-discode">
              <div>Join CF Discord and get Gacha role</div>
              <div
                class="join-btn"
                v-if="!joinDiscode && currentTask == 3"
                @click="handJoinDiscode"
              >
                Join
              </div>
              <div
                class="verification"
                v-if="!joinDiscode && currentTask == 3"
                @click="handDiscodeVerification"
              >
                Verify
              </div>
            </div>
            <div
              class="serial-number"
              :class="
                joinDiscode == true ? 'serial-number-actave' : 'serial-number'
              "
            >
              <div class="checkmark">
                <img
                  v-if="!joinDiscode"
                  src="../../assets/svg/checkmark.svg"
                  alt=""
                />
                <img
                  v-else
                  src="../../assets/svg/checkmark-active.svg"
                  alt=""
                />
              </div>
            </div>
          </div>
          <div
            :class="
              isTwitter == true
                ? 'task-right-item-actave'
                : currentTask == 4
                ? 'task-right-item-current'
                : 'task-right-item'
            "
          >
            <div class="connect-twitter">
              <div>Connect your Twitter</div>
              <div
                class="twitter-account"
                v-if="!isTwitter && currentTask == 4"
                @click="handTwitter"
              >
                Connect
              </div>
              <div class="account" v-if="isTwitter">
                @{{ userInfo.twitter }}
              </div>
            </div>

            <div
              class="serial-number"
              :class="
                isTwitter == true ? 'serial-number-actave' : 'serial-number'
              "
            >
              <div class="checkmark">
                <img
                  v-if="!isTwitter"
                  src="../../assets/svg/checkmark.svg"
                  alt=""
                />
                <img
                  v-else
                  src="../../assets/svg/checkmark-active.svg"
                  alt=""
                />
              </div>
            </div>
          </div>
          <div
            :class="
              isFollowCEBG == true
                ? 'task-right-item-actave'
                : currentTask == 5
                ? 'task-right-item-current'
                : 'task-right-item'
            "
          >
            <div class="follow-content">
              <div>Follow Counter Fire</div>
              <div
                class="follow-cebg"
                v-if="!isFollowCEBG && currentTask == 5"
                @click="handFollowCEBG"
              >
                Follow
              </div>
              <div
                class="verification"
                v-if="!isFollowCEBG && currentTask == 5"
                @click="handFollowCEBGVerification"
              >
                Verify
              </div>
            </div>
            <div
              class="serial-number"
              :class="
                isFollowCEBG == true ? 'serial-number-actave' : 'serial-number'
              "
            >
              <div class="checkmark">
                <img
                  v-if="!isFollowCEBG"
                  src="../../assets/svg/checkmark.svg"
                  alt=""
                />
                <img
                  v-else
                  src="../../assets/svg/checkmark-active.svg"
                  alt=""
                />
              </div>
            </div>
          </div>
          <div
            :class="
              isQuote == true
                ? 'task-right-item-actave'
                : currentTask == 6
                ? 'task-right-item-current'
                : 'task-right-item'
            "
          >
            <div class="broadcast-content">
              <div>Broadcast to your friends</div>
              <div
                class="quote"
                v-if="!isQuote && currentTask == 6"
                @click="handQuote"
              >
                Broadcast
              </div>
              <div
                class="verification"
                v-if="!isQuote && currentTask == 6"
                @click="handQuoteVerification"
              >
                Verify
              </div>
            </div>
            <div
              class="serial-number"
              :class="
                isQuote == true ? 'serial-number-actave' : 'serial-number'
              "
            >
              <div class="checkmark">
                <img
                  v-if="!isQuote"
                  src="../../assets/svg/checkmark.svg"
                  alt=""
                />
                <img
                  v-else
                  src="../../assets/svg/checkmark-active.svg"
                  alt=""
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bg">
      <img src="@/assets/img/task/one-bg.jpg" alt="" />
    </div>
  </div>
  <ChainModel></ChainModel>
</template>

<script setup>
import ChainModel from "@/components/home/ChainModel.vue";
import NavBar from "../layout/navber.vue";
import { useRouter, useRoute } from "vue-router";
import {
  beginclaim,
  Claim,
  UserStatus,
  UserInfo,
  totalClaimed,
  getJoin,
} from "@/api/User";
import { useChainStore } from "@/store/chain";
import { useAppStore } from "@/store/app";
import { ref, onMounted, watch, reactive, nextTick, inject } from "vue";
import { v4 as uuidv4 } from "uuid";
import { hasMetamask } from "@/utils/chain.util";
import { message } from "ant-design-vue";
const addNotification = inject("addNotification");
const chain = useChainStore();
const router = useRouter();
const route = useRoute();
const isDiscode = ref(false);
const userInfo = reactive({});
const joinDiscode = ref(false);
const isTwitter = ref(false);
const isFollowCEBG = ref(false);
const isQuote = ref(false);
const currentTask = ref(1);
const isClaim = ref(false);
const count = ref(0);
const lastResq = reactive({});
const AppModule = useAppStore();
const isBalance = ref(0);
const isMobile = () => {
  const userAgent = navigator.userAgent;
  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
    userAgent
  );
};
async function login(event) {
  var next = window.location.href;

  if (isMobile() && !hasMetamask()) {
    ///debugger
    var url = `https://metamask.app.link/dapp/${next}`;
    location.href = url;
  } else {
    if (!chain.logined) {
      // 没有登录情况下执行登录
      await chain.chainManager.login();
      // console.log("logined:", chain.chainManager.isLogined);
      chain.logined = chain.chainManager.isLogined;
      if (chain.logined) {
        currentTask.value = 2;
      }
    }
  }
}
const assign = (source, target) => {
  if (target === undefined || target === null) {
    throw new TypeError("Cannot convert undefined or null to object");
  }

  for (let key in target) {
    source[key] = target[key];
  }
};
const updateLogin = async () => {
  currentTask.value = 2;
};
const handTaskHome = () => {
  //router.push("/quest");
  const code = route.query.code;
  if (code) {
    router.push({ path: "/quest", query: { code: code } });
  } else {
    router.push("/quest");
  }
};
const formatAddress = (address) => {
  if (address.length >= 10) {
    return (
      address.substring(0, 3) + "..." + address.substring(address.length - 4)
    );
  } else if (address.length > 0 && address.length < 10) {
    return address;
  } else {
    return "-";
  }
};
const handDiscodes = async () => {
  const codeChallenge = Date.now();
  let currentAddress = window.location.href;
  const state = window.btoa(
    `${AppModule.accountId}|${codeChallenge}|${currentAddress}`
  );
  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}`;

  let params = `scrollbars=yes,resizable=yes,status=no,location=no,toolbar=no,menubar=no,width=500,height=600,left=100,top=100`;
  // let discordWindow = window.open(url, "discord login", params);
  window.location.href = url;
  // const checkClosed = setInterval(function () {
  //   if (discordWindow.closed) {
  //     clearInterval(checkClosed);
  //     // clearInterval(timeoutId);
  //     checkUserStatus();
  //     // call your API here or any function you want to execute.
  //   }
  // }, 1000); // check every second
};
const checkUserStatus = async () => {
  try {
    const resq = await UserStatus({ account: AppModule.accountId });

    if (resq.discord_used == 1) {
      addNotification(
        "Failed to connect This discord account already bound to another address"
      );
      return;
    }

    if (resq && resq.status[1] == 1) {
      isDiscode.value = true;
      currentTask.value = 3;

      // console.log("Success! UserStatus successfully obtained.");
      const resu = await UserInfo({ account: AppModule.accountId });
      if (resu) {
        assign(userInfo, resu);
        const formatAddress = (address) => {
          if (address.length >= 15) {
            return (
              address.substring(0, 6) +
              "..." +
              address.substring(address.length - 6)
            );
          } else if (address.length > 0 && address.length < 15) {
            return address;
          } else {
            return "-";
          }
        };

        if (userInfo.twitter) {
          userInfo.twitter = formatAddress(userInfo.twitter);
        }
        console.log(userInfo.twitter);

        if (userInfo.discord) {
          userInfo.discord = formatAddress(userInfo.discord);
        }
      }
    } else {
      if (resq.errcode == 0 && resq.status[1] == 0) {
        addNotification("Fail,Please Join Discord; ");
      }
    }
  } catch (error) {
    // console.error("An error occurred:", error);
    addNotification("An error occurred: ");
  }
};
const handDiscode = async () => {
  let checkCount = 0;
  const maxCheckCount = 10;
  let timeoutId = null;

  let currentAddress = window.location.href;
  const codeChallenge = uuidv4();
  const state = `${AppModule.accountId}|${codeChallenge}|${encodeURIComponent(
    currentAddress
  )}`;
  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=${encodeURIComponent(
    state
  )}`;

  let params = `scrollbars=yes,resizable=yes,status=no,location=no,toolbar=no,menubar=no,width=500,height=600,left=100,top=100`;
  let discordWindow = window.open(url, "discord login", params);

  const checkUserStatus = async () => {
    try {
      const resq = await UserStatus({ account: AppModule.accountId });

      if (resq.discord_used == 1) {
        addNotification(
          "You have already performed transactions with your account on another wallet"
        );
        clearInterval(timeoutId);
        return;
      }

      if (resq && resq.status[1] == 1) {
        isDiscode.value = true;
        currentTask.value = 3;
        clearInterval(timeoutId);
        // console.log("Success! UserStatus successfully obtained.");
        const resu = await UserInfo({ account: AppModule.accountId });
        if (resu) {
          assign(userInfo, resu);
          const formatAddress = (address) => {
            if (address.length >= 15) {
              return (
                address.substring(0, 6) +
                "..." +
                address.substring(address.length - 6)
              );
            } else if (address.length > 0 && address.length < 15) {
              return address;
            } else {
              return "-";
            }
          };

          if (userInfo.twitter) {
            userInfo.twitter = formatAddress(userInfo.twitter);
          }
          console.log(userInfo.twitter);

          if (userInfo.discord) {
            userInfo.discord = formatAddress(userInfo.discord);
          }
        }
      } else {
        checkCount++;
        if (checkCount >= maxCheckCount) {
          console.log("Failed to obtain UserStatus after 10 attempts.");
          clearInterval(timeoutId); // Stop the loop after max attempts
          if (resq.errcode == 0 && resq.status[1] == 0) {
            addNotification("Fail,Please get the role");
          }
        }
      }
    } catch (error) {
      // console.error("An error occurred:", error);
      addNotification("An error occurred: ");
      clearInterval(timeoutId); // Stop the loop if there's an error
    }
  };

  // Start the loop
  timeoutId = setInterval(checkUserStatus, 2000);
};

const handJoinDiscode = () => {
  const url = "https://discord.gg/A9rbzeAT2t";
  window.open(url, "_blank", "width=500,height=600");
  // window.location.href = url
};
const createDebouncedFunction = (func, delay) => {
  let debounceTimer;
  return async function () {
    const context = this,
      args = arguments;
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(
      async () => await func.apply(context, args),
      delay
    );
  };
};

const handDiscodeVerification = createDebouncedFunction(async () => {
  try {
    const resq = await UserStatus({ account: AppModule.accountId });
    if (resq) {
      if (resq && resq.status[2] == 1) {
        joinDiscode.value = true;
        currentTask.value = 4;
      }
      if (resq.errcode == 0) {
        if (resq && resq.status[2] == 0) {
          addNotification("Please Try again");
        }
      }
    }
  } catch (error) {
    // console.error("An error occurred:", error);
  }
}, 1000);
const handTwitters = async () => {
  const clientId = "Y2FyVU5GN1hFMjFKWkJFaGxiem86MTpjaQ";
  const codeChallenge = uuidv4();
  console.log("codeChallenge: " + codeChallenge);
  const redirectUri = "https://oauth-svr.cebggame.com/twitter/redirect_uri";
  const state = `${AppModule.accountId}|${codeChallenge}`;
  const url = `https://twitter.com/i/oauth2/authorize?client_id=${clientId}&code_challenge=${codeChallenge}&code_challenge_method=plain&redirect_uri=${encodeURIComponent(
    redirectUri
  )}&response_type=code&scope=tweet.read+users.read+follows.read+offline.access+like.read&state=${encodeURIComponent(
    state
  )}`;

  let params = `scrollbars=yes,resizable=yes,status=no,location=no,toolbar=no,menubar=no,width=600,height=800,left=100,top=100`;
  let twitterWindow = window.open(url, "twitter login", params);

  if (twitterWindow === null) {
    console.log("Failed to open window");
  } else {
    console.log("Window opened successfully");
    console.log("Window opened successfully", twitterWindow);
  }
  // const checkClosed = setInterval(function () {
  //   if (twitterWindow.closed) {
  //     debugger
  //     clearInterval(checkClosed);
  //     // clearInterval(timeoutId);
  //     checkUserStatustw();
  //     // call your API here or any function you want to execute.
  //   }
  // }, 1000); // check every second
};

const checkUserStatustw = async () => {
  try {
    const resq = await UserStatus({ account: AppModule.accountId });

    // if (resq.discord_used == 1) {
    //   addNotification(
    //     "Failed to connect This discord account already bound to another address"
    //   );
    //   return ;
    // }

    if (resq && resq.status[3] == 1) {
      isDiscode.value = true;
      currentTask.value = 5;

      // console.log("Success! UserStatus successfully obtained.");
      const resu = await UserInfo({ account: AppModule.accountId });
      if (resu) {
        assign(userInfo, resu);
        const formatAddress = (address) => {
          if (address.length >= 15) {
            return (
              address.substring(0, 6) +
              "..." +
              address.substring(address.length - 6)
            );
          } else if (address.length > 0 && address.length < 15) {
            return address;
          } else {
            return "-";
          }
        };

        if (userInfo.twitter) {
          userInfo.twitter = formatAddress(userInfo.twitter);
        }
        console.log(userInfo.twitter);

        if (userInfo.discord) {
          userInfo.discord = formatAddress(userInfo.discord);
        }
      }
    } else {
      if (resq.errcode == 0 && resq.status[3] == 0) {
        addNotification("Please Try again");
      }
    }
  } catch (error) {
    // console.error("An error occurred:", error);
    addNotification("An error occurred: ");
  }
};
const handTwitter = async () => {
  console.log("handTwitter");
  let checkCount = 0;
  const maxCheckCount = 18;
  let timeoutId = null;
  let errorTimeoutId = null;
  let currentAddress = window.location.href;
  const clientId = "Y2FyVU5GN1hFMjFKWkJFaGxiem86MTpjaQ";
  const codeChallenge = Date.now();
  console.log("codeChallenge: " + codeChallenge);
  const redirectUri = "https://oauth-svr.cebggame.com/twitter/redirect_uri";
  const state = window.btoa(
    `${AppModule.accountId}|${codeChallenge}|${currentAddress}`
  );
  const url = `https://twitter.com/i/oauth2/authorize?client_id=${clientId}&code_challenge=${codeChallenge}&code_challenge_method=plain&redirect_uri=${encodeURIComponent(
    redirectUri
  )}&response_type=code&scope=tweet.read+users.read+follows.read+offline.access+like.read&state=${encodeURIComponent(
    state
  )}`;

  let params = `scrollbars=yes,resizable=yes,status=no,location=no,toolbar=no,menubar=no,width=600,height=800,left=100,top=100`;
  /// window.open(url, "twitter login", params);
  window.location.href = url;
  // const checkUserStatus = async () => {
  //   try {
  //     const resq = await UserStatus({ account: AppModule.accountId });

  //     if (resq && resq.status[3] == 1) {
  //       isTwitter.value = true;
  //       currentTask.value = 5;
  //       clearInterval(timeoutId);
  //       console.log("Success! UserStatus successfully obtained.");
  //       const resu = await UserInfo({ account: AppModule.accountId });
  //       if (resu) {
  //         // userInfo.value = resq
  //        assign(userInfo, resu);
  //         console.log(userInfo.twitter, "-=-=-userInfo.twitter");
  //         const formatAddress = (address) => {
  //           if (address.length >= 15) {
  //             return (
  //               address.substring(0, 6) +
  //               "..." +
  //               address.substring(address.length - 6)
  //             );
  //           } else if (address.length > 0 && address.length < 15) {
  //             return address;
  //           } else {
  //             return "-";
  //           }
  //         };

  //         if (userInfo.twitter) {
  //           userInfo.twitter = formatAddress(userInfo.twitter);
  //         }
  //         ///console.log(userInfo.twitter);

  //         if (userInfo.discord) {
  //           userInfo.discord = formatAddress(userInfo.discord);
  //         }
  //       }
  //     } else {
  //       checkCount++;
  //       if (checkCount >= maxCheckCount) {
  //         console.log("Failed to obtain UserStatus after 10 attempts.");
  //         clearInterval(timeoutId); // Stop the loop after max attempts
  //         if (resq.errcode == 0 && resq.status[3] == 0) {
  //           addNotification("Please Try again");
  //         }
  //       }
  //     }
  //   } catch (error) {
  //     // console.error("An error occurred:", error);
  //     addNotification("An error occurred: ");
  //     clearInterval(timeoutId); // Stop the loop if there's an error
  //   }
  // };
  // timeoutId = setInterval(checkUserStatus, 2000);
};

// Start the loop

const handFollowCEBG = () => {
  const url = "https://twitter.com/_CounterFire";
  window.open(url, "_blank", "width=500,height=600");
  // window.location.href = url
};

const handFollowCEBGVerification = createDebouncedFunction(async () => {
  try {
    const resq = await UserStatus({
      account: AppModule.accountId,
      request_next: 4,
    });
    if (resq) {
      if (resq && resq.status[4] == 1) {
        isFollowCEBG.value = true;
        currentTask.value = 6;
      }
    }
    if (resq.errcode == 0) {
      if (resq && resq.status[4] == 0) {
        addNotification("Please Try again");
      }
    }
  } catch (error) {
    // console.error("An error occurred:", error);
  }
}, 1000); // 300 ms 的延迟
const handQuote = () => {
  const code = 214045605309445;
  const text =
    "Adorable! join with me in @_CounterFire,Bring Gacha home with you \nShe will unveil even more rewards as she bursts out of her shell.\n#CounterFire Now available on Google Play,A new evolution about #Web3Gaming";
  const url = `https://twitter.com/intent/tweet?text=${encodeURIComponent(
    text
  )}&url=https://m.counterfire.games/?code=${code}`;
  window.open(url, "_blank", "width=500,height=600");
};

const handQuoteVerification = createDebouncedFunction(async () => {
  try {
    const resq = await UserStatus({
      account: AppModule.accountId,
      request_next: 5,
    });
    if (resq) {
      if (resq && resq.status[5] == 1) {
        isQuote.value = true;
      //  isClaim.value = true;
        const resjoin = await getJoin({
          account: AppModule.accountId,
          invite_code: route.query.code,
        });
        if (resq && (!resq.claim || Number(resq.claim) == 0)  && resq.status.every((status) => status == 1)) {
          isClaim.value = true;
          isBalance.value = Number(resq.claim);
        } else {
          isClaim.value = false;
          isBalance.value = Number(resq.claim);
        }

        let resqd = await Claim({
          account: AppModule.accountId,
          claim: resq.claim,
        });
      }
    }
    if (resq.errcode == 0) {
      if (resq && resq.status[5] == 0) {
        addNotification("Please Try again");
      }
    }
  } catch (error) {
    // console.error("An error occurred:", error);
  }
}, 1000);
const handClaim = async () => {
  if (
    isDiscode.value &&
    joinDiscode.value &&
    isTwitter.value &&
    isFollowCEBG.value &&
    isQuote.value &&
    chain.logined
  ) {
    let res = await beginclaim({ account: AppModule.accountId });

    if (res.errcode == 0) {
      if (res.sign && res.sign.length > 0) {
        const data = {
          address: res.sign[0],
          startTime: res.sign[1],
          saltNonce: res.sign[2],
          signature: res.sign[3],
        };
        console.log(data);
        const resClaim = await chain.chainManager.bc.claimReward(
          res.sign[0],
          res.sign[1],
          res.sign[2],
          res.sign[3]
        );
        console.log(resClaim);
        if (!resClaim) {
          return;
        }
        let resq = await Claim({
          account: AppModule.accountId,
          claim: resClaim.transactionHash,
        });
        if (resq.errcode == 0) {
          addNotification("Successful");
          isClaim.value = false;
          isBalance.value = 1;
        }
        if (resq.errcode !== 0) {
          addNotification("Please Try again");
          // status[1];
        }
      }
    }
    if (res.errcode !== 0) {
      addNotification("Failed to obtain signature");
    }
  } else {
    return false;
  }
};

watch(
  () => chain.logined,
  async (newValue, oldValue) => {
    // console.log("logined changed from", oldValue, "to", newValue);
    if (chain.logined == true) {
      currentTask.value = 2;
    }
    const resq = await UserStatus({ account: AppModule.accountId ,invite_code: route.query.code});
    if (resq) {
      if (chain.logined == true) {
        currentTask.value = 2;
      }

      if (resq && resq.status[1] == 1) {
        isDiscode.value = true;
        currentTask.value = 3;
      }
      if (resq && resq.status[2] == 1) {
        joinDiscode.value = true;
        currentTask.value = 4;
      }
      if (resq && resq.status[3] == 1) {
        isTwitter.value = true;
        currentTask.value = 5;
      }
      if (resq && resq.status[4] == 1) {
        isFollowCEBG.value = true;
        currentTask.value = 6;
      }
      if (resq && resq.status[5] == 1) {
        isQuote.value = true;
      }
      if (resq && (!resq.claim || Number(resq.claim) == 0)  && resq.status.every((status) => status == 1)) {
        isClaim.value = true;
        isBalance.value = Number(resq.claim);
      } else {
        isClaim.value = false;
        isBalance.value = Number(resq.claim);
      }
      let resqd = await Claim({
        account: AppModule.accountId,
        claim: resq.claim,
      });
    }

    if (resq && resq.status.every((status) => status == 1)) {
      const res = await getJoin({
        account: AppModule.accountId,
        invite_code: route.query.code,
      });
    }

    // console.log(res);
    const resc = await totalClaimed();
    if (resc) {
      count.value = resc.count;
    }
    if (resc.errcode !== 0) {
      addNotification("Please Try again");
    }

    const resu = await UserInfo({ account: AppModule.accountId });

    if (resu) {
      // userInfo.value = resq
      assign(userInfo, resu);
      console.log(userInfo.twitter, "-=-=-userInfo.twitter");
      const formatAddress = (address) => {
        if (address.length >= 15) {
          return (
            address.substring(0, 6) +
            "..." +
            address.substring(address.length - 6)
          );
        } else if (address.length > 0 && address.length < 15) {
          return address;
        } else {
          return "-";
        }
      };

      if (userInfo.twitter) {
        userInfo.twitter = formatAddress(userInfo.twitter);
      }
      console.log(userInfo.twitter);

      if (userInfo.discord) {
        userInfo.discord = formatAddress(userInfo.discord);
      }
    }
    ////console.log(resq);
    // if (res) {
    //   isClaim.value = true;
    // }
  }
);
onMounted(async () => {
  const resc = await totalClaimed();
  if (resc) {
    count.value = resc.count;
  }
  if (chain.logined == true) {
    if (chain.logined == true) {
      currentTask.value = 2;
    }
    const resq = await UserStatus({ account: AppModule.accountId,invite_code: route.query.code });

    if (resq) {
      if (chain.logined == true) {
        currentTask.value = 2;
      }
      if (resq && resq.status[1] == 1) {
        isDiscode.value = true;
        currentTask.value = 3;
      }

      if (resq && resq.status[2] == 1) {
        joinDiscode.value = true;
        currentTask.value = 4;
      }
      if (resq && resq.status[3] == 1) {
        isTwitter.value = true;
        currentTask.value = 5;
      }
      if (resq && resq.status[4] == 1) {
        isFollowCEBG.value = true;
        currentTask.value = 6;
      }
      if (resq && resq.status[5] == 1) {
        isQuote.value = true;
      }
      if (resq && (!resq.claim || Number(resq.claim) == 0)  && resq.status.every((status) => status == 1)) {
        isClaim.value = true;
        isBalance.value = Number(resq.claim);
      } else {
        isClaim.value = false;
        isBalance.value = Number(resq.claim);
      }

      if (resq && resq.status.every((status) => status == 1)) {
        const res = await getJoin({
          account: AppModule.accountId,
          invite_code: route.query.code,
        });
      }
    }
    const resu = await UserInfo({ account: AppModule.accountId });

    if (resu) {
      // userInfo.value = resq
      assign(userInfo, resu);
      const formatAddress = (address) => {
        if (address.length >= 15) {
          return (
            address.substring(0, 6) +
            "..." +
            address.substring(address.length - 6)
          );
        } else if (address.length > 0 && address.length < 15) {
          return address;
        } else {
          return "-";
        }
      };

      if (userInfo.twitter) {
        userInfo.twitter = formatAddress(userInfo.twitter);
      }

      if (userInfo.discord) {
        userInfo.discord = formatAddress(userInfo.discord);
      }
    }
  }
});
</script>

<style lang="scss" scoped>
.task-one-header {
  // height: 65px;
}

.task-one {
  position: relative;
  width: 100%;
  min-height: 100vh;

  background-color: #413319;
  z-index: 0; /* 将 z-index 改为 0 */
  .bg {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    right: 0;
    z-index: -1;
    bottom: 0;
    color: transparent;
    img {
      position: absolute;
      height: 100%;
      width: 100%;
      left: 0;
      top: 0;
      right: 0;

      bottom: 0;
      // z-index: 0;
      color: transparent;
    }
  }

  .content {
    width: 92%;
    margin: 0 auto;
    display: flex;
    height: calc(100% - 101px);
    justify-content: center;
    align-items: center;
    .center {
      width: 100%;
      height: 95%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .content-left {
      // padding-top: 100px;
      display: flex;
      //width: 310px;
      // height: 100%;
      flex-direction: column;
      justify-content: space-between;
      .twist-egg {
        width: 529px;
        height: 529px;
        margin: 0 auto;

        // margin-bottom: 34px;
        // margin-top: 10px;
        border: 1px solid #ffba00;
        border-radius: 20px 20px 20px 20px;
        img {
          width: 100%;
          height: auto;
          border-radius: 20px 20px 20px 20px;
        }
        /// box-shadow: 0px 0px 97px 3px rgba(255, 253, 71, 0.4);
      }
      .participants-content {
        width: 60%;
      }
      .participants {
        font-size: 18px;
        font-family: "Arial";
        font-weight: 400;
        font-size: 22px;
        // margin-top: 38px;
        color: #ffffff;
        //margin-bottom: 10px;
      }
      .return {
        width: 100%;
        font-size: 40px;
        font-family: "GemunuExtraBold";
        font-weight: 400;
        display: flex;
        margin-top: 28px;
        margin-bottom: 31px;
        color: #ffffff;
        cursor: pointer;
        align-items: center;
        .return-icon {
          width: 36px;
          height: 36px;
          margin-right: 28px;
        }
      }
    }
    .claim-bottom {
      width: 100%;
      display: flex;
      height: 100%;
      justify-content: space-between;
      flex-direction: column;
      //margin-bottom: 25px;
    }
    .bottom-content {
      display: flex;
      align-items: center;
      margin-top: 47px;
      .claim {
        width: 219px;
        height: 67px;
        // background: #2d2b24;
        // border-radius: 12px;
        cursor: pointer;
        margin: 0 auto;
        text-align: center;
        line-height: 67px;
        font-size: 24px;
        font-family: "SAIRABLACK";
        color: #706b58;
        background: url("../../assets/img/task/claim-btn.png") no-repeat;
        background-size: contain;
      }
      .claim-active {
        width: 219px;
        height: 67px;
        margin: 0 auto;
        cursor: pointer;
        background: url("../../assets/img/task/claim-btn-active.png") no-repeat;
        background-size: contain;
        // margin-left: 20px;
        margin-bottom: 10px;
        text-align: center;
        line-height: 67px;
        font-family: "SAIRABLACK";
        font-size: 24px;
        //background: #ffd200;
        // border-radius: 12px;
      }
    }

    .content-right {
      // padding-top: 95px;
      height: 50%;
      width: 100%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .title {
        font-size: 32px;
        font-family: "SAIRABLACK";
        font-weight: 400;
        color: #ffffff;
        text-transform: uppercase;
        margin-top: 40px;
        margin-bottom: 19px;
      }
    }
  }
  .task-right-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
    padding-left: 20px;
    color: #a79f9f;
    width: 696px;
    height: 55px;
    font-family: "Arial";
    font-size: 22px;
    background: rgba(40, 33, 20, 0.6);
    border: 1px solid #ece8ed;
    // opacity: 0.6;
    border-radius: 12px;
  }
  .task-right-item-actave {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
    padding-left: 20px;
    color: #fff;
    font-family: "Arial";
    width: 696px;
    height: 55px;
    font-size: 22px;
    background: rgba(96, 255, 0, 0.32);
    border: 1px solid #60ff00;
    // opacity: 0.6;
    border-radius: 12px;
  }

  .task-right-item-current {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
    padding-left: 20px;
    color: #fff;
    font-size: 22px;
    font-family: "Arial";
    width: 696px;
    height: 55px;
    background: rgba(40, 33, 20, 0.6);
    border: 1px solid #fff;
    // opacity: 0.6;
    border-radius: 12px;
  }
  .connect-now {
    // width: 140px; // adjust as needed
    height: 38px;
    margin-left: 10px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    border-radius: 10px;
    cursor: pointer;
    line-height: 38px;
    color: #fff;
    border: 1px solid #ccc;
  }
  .connect-center {
    display: flex;
    align-items: center;
  }
  .serial-number {
    margin-right: 10px;
    width: 28px;
    height: 28px;
    text-align: center;
    line-height: 28px;
    position: relative;
    background: #211e18;
    border-radius: 50%;
    .checkmark {
      position: absolute;
      top: 0px;
      left: 3px;
      img {
        width: 29px;
        height: 21px;
      }
    }
  }
  .serial-number-actave {
    width: 28px;
    height: 28px;
    position: relative;
    text-align: center;
    border-radius: 50%;
    line-height: 28px;
    color: #fff;
    //border: 1px solid #ccc;
    margin-right: 10px;
    background: #211e18;
    .checkmark {
      position: absolute;
      top: 0px;
      left: 3px;
      img {
        width: 29px;
        height: 21px;
      }
    }
  }

  .checkbox {
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    position: relative;
  }

  .checkbox::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%) rotate(45deg);
    width: 5px;
    height: 10px;
    border: 2px solid #000;
    border-top: none;
    border-right: none;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .checkbox:checked::after {
    opacity: 1;
  }
}
.participants {
}
.discord-account {
  width: 111px;
  height: 31px;
  line-height: 28px;
  cursor: pointer;
  text-align: center;
  border: 1px solid #ffffff;
  border-radius: 15px;
  margin-left: 10px;
}
.discord {
  display: flex;
  align-items: center;
}
.join-discode {
  display: flex;
  align-items: center;
  .join-btn {
    width: 81px;
    height: 31px;
    line-height: 31px;
    margin-left: 10px;
    cursor: pointer;
    text-align: center;
    border: 1px solid #ffffff;
    border-radius: 15px;
  }
  .verification {
    width: 101px;
    height: 31px;
    line-height: 31px;
    margin-left: 10px;
    cursor: pointer;
    text-align: center;
    border: 1px solid #ffffff;
    border-radius: 15px;
  }
}
.verification {
  width: 101px;
  height: 31px;
  line-height: 31px;
  margin-left: 10px;
  cursor: pointer;
  text-align: center;
  border: 1px solid #ffffff;
  border-radius: 15px;
}
.connect-twitter {
  display: flex;
  align-items: center;
}
.twitter-account {
  font-size: 18px;
  font-family: "MEurostile";
  font-weight: 400;
  // color: #ffffff;
  width: 111px;
  height: 31px;
  cursor: pointer;
  line-height: 31px;
  text-align: center;
  margin-left: 10px;
  border: 1px solid #ffffff;
  border-radius: 15px;
}
.follow-content {
  display: flex;
  align-items: center;
  .follow-cebg {
    cursor: pointer;
    text-align: center;
    width: 91px;
    height: 31px;
    line-height: 31px;
    margin-left: 10px;
    border: 1px solid #ffffff;
    border-radius: 15px;
  }
}
.broadcast-content {
  display: flex;
  align-items: center;
  .quote {
    cursor: pointer;
    text-align: center;
    // width: 91px;
    padding-left: 12px;
    padding-right: 12px;
    height: 31px;
    line-height: 31px;
    margin-left: 10px;
    border: 1px solid #ffffff;
    border-radius: 15px;
  }
}
.gacha-guest {
  // width: 185px;
  font-family: "SAIRABLACK";
  // line-height: 30px;
}
.account {
  max-width: 340px; /* 框的最小宽度 */
  width: auto; /* 宽度根据内容自适应 */
  height: 30px;
  line-height: 30px;
  padding-left: 10px;
  padding-right: 10px; /* 为了保持右侧的空间 */
  border-radius: 15px;
  margin-left: 10px;
  border: 1px solid #ffffff;
}

@media screen and (max-width: 1440px) {
  /* 在此处插入你希望在屏幕宽度大于1440px时应用的样式 */
  .center {
    // height: 98% !important;
  }
  .return {
    //margin-bottom: 10px;
  }

  /* 更多的样式代码 */
}
// @media screen and (max-height: 700px) {
//   .task-one {
//   height: auto;
//   min-height: 0;
// }

// }
</style>
