<template>
  <div class="container">
    <div class="content">
      <div class="top">
        <div class="account-btn">
          <div class="icon-content">
            <img
              class="icon-img"
              src="../../assets/mobile/portrait.png"
              alt=""
            />
          </div>
          <div class="text">{{ address }}</div>
        </div>
        <div class="twitter-btn">
          <div class="icon-content">
            <img
              class="icon-img"
              src="../../assets/mobile/twitter.png"
              alt=""
            />
          </div>
          <div class="text">@{{ twitter }}</div>
        </div>
        <div class="discard-btn">
          <div class="icon-content">
            <img
              class="icon-img"
              src="../../assets/mobile/discard.png"
              alt=""
            />
          </div>
          <div class="text">{{ discord }}</div>
        </div>
      </div>
      <div class="switch">
        <div
          v-for="(item, i) in tabbar"
          :key="i"
          @click="change(i)"
          :class="currentIndex == i ? 'prebeta' : 'prebeta-default'"
        >
          {{ item.title }}
        </div>
      </div>
      <div v-show="currentIndex == 0" class="list">
        <div class="invititaion-code-title">
          INVITATION CODE
          <el-tooltip class="item" effect="dark" placement="bottom-start">
            <div slot="content">
              Invite other player<br />
              to register by exlusive <br />code/link and <br />get Rally points
            </div>
            <img class="icon-img" src="../../assets/mobile/i-icon.png" alt="" />
          </el-tooltip>
        </div>
        <div
          class="invititaion-code tag-read"
          v-clipboard:copy="cp_url"
          v-clipboard:success="onCopy"
          v-clipboard:error="onCopyError"
        >
          {{ userinfo.invite_code }}
          <img class="icon-img" src="../../assets/mobile/copy.png" alt="" />
        </div>
        <div class="time-content">
          <div class="date-time-title">BETA TEST COUNTDOWN</div>
          <div class="date-time">
            <div>
              <div class="time-circular">{{ time.day || "" }}</div>
              <div class="time-text">DAY(S)</div>
            </div>

            <div>
              <div class="time-circular">{{ time.hours }}</div>
              <div class="time-text">HOUR</div>
            </div>

            <div>
              <div class="time-circular">{{ time.minutes }}</div>
              <div class="time-text">MINUTE</div>
            </div>

            <div>
              <div class="time-circular">{{ time.seconds }}</div>
              <div class="time-text">SECOND</div>
            </div>
          </div>
        </div>
        <div class="points-list">
          <div class="list-header">
            <div class="rank">
              <div class="clan-member-text">Rank</div>
              <div class="rank-number">{{ userinfo.rank }}</div>
            </div>
            <div class="points">
              <div class="clan-member-text">Rally Points</div>
              <div class="rank-number">
                {{ userinfo.point }}
                <span class="number-img">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="Earning Rally Points by:- Registration Success: 200 points- Direct Invitation: 200 points- Second Lv Invitation: 40 points"
                    placement="bottom-start"
                    ><div slot="content">
                      Earning Rally Points <br />
                      by:- Registration Success: <br />200 points- Direct
                      <br />Invitation: 200 <br />
                      points- Second<br />
                      Lv Invitation: 40 points
                    </div>
                    <img
                      class="icon-img"
                      src="../../assets/mobile/i-icon.png"
                      alt=""
                    /> </el-tooltip
                ></span>
              </div>
            </div>
            <div class="clan-member">
              <div class="clan-member-text">CLAN MEMBER</div>
              <div class="rank-number">
                {{ userinfo.clan_member }}
                <span class="number-img">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content=""
                    placement="bottom-start"
                  >
                    <div slot="content">
                      Total clan member <br />from direct invitation<br />
                      & second LV invitation
                    </div>
                    <img
                      class="icon-img"
                      src="../../assets/mobile/i-icon.png"
                      alt=""
                    /> </el-tooltip
                ></span>
              </div>
            </div>
          </div>
          <div class="points-option">
            <div class="date">Date</div>
            <div class="operators">Operator</div>
            <div class="event">Event</div>
            <div class="points-text">Points</div>
          </div>
          <div class="data-list">
            <div class="list-item" v-for="(item, i) in listevent" :key="i">
              <div class="date">{{ item.create_time.slice(0, 10) }}</div>
              <div class="operators">@{{ item.operator }}</div>
              <div class="event">{{ list[item.event] }}</div>
              <div class="points-text">{{ "+" + item.point }}</div>
            </div>
          </div>
        </div>
        <div class="leaderboard-btn" @click="navigator">Leaderboard</div>
      </div>
      <div v-show="currentIndex == 1" class="info">Coming Soon</div>
    </div>
    <!-- <Footer class="footer"></Footer> -->
  </div>
</template>

<script>
import Footer from "../layout/Footer.vue";
import { AppModule } from "@/store/modules/app";
const CP_URL_BASE = "https://activity.cebg.games/?code=";
export default {
  components: {
    Footer,
  },
  data() {
    return {
      userinfo: {},
      listevent: null,
      currentIndex: 0,
      list: [  "Registration", "Lv1 Invitation", "Lv2 Invitation" ],
      account: "",
      discord: "",
      twitter: "",
      cp_url: CP_URL_BASE,
      address: "",
      time: {},
      endTime: 1668938400000,
      flag: false,
      tabbar: [
        {
          id: 0,
          title: "CEBG PreBeta Points",
        },
        {
          id: 2,
          title: "CEBG Beta info",
        },
      ],
    };
  },
  created() {
    this.address = this.formatAddress(AppModule.account);
    this.$axios
      .post(process.env.VUE_APP_API_HOST + "/aa1/user_info", {
        account: AppModule.account,
      })
      .then((res) => {
        console.log("success", res.data);
        this.userinfo = res.data;
        this.discord = res.data.discord;
        this.twitter = res.data.twitter;
        this.cp_url = `${CP_URL_BASE}${this.userinfo.invite_code}`;
      })
      .catch((err) => {
        console.error(err);
        Message.error(err.response.data.msg);
      });
    this.$axios
      .post(process.env.VUE_APP_API_HOST + "/aa1/list_event_log", {
        account: AppModule.account,
      })
      .then((res) => {
        console.log("success", res.data);
        this.listevent = res.data.data;
      })
      .catch((err) => {
        console.error(err);
        Message.error(err.response.data.msg);
      });
  },
  mounted() {
    let time = setInterval(() => {
      if (this.flag == true) {
        clearInterval(time);
      }
      this.timeDown();
    }, 500);
  },
  methods: {
    formatAddress(address) {
      console.log(address);
      if (address.length >= 10) {
        return (
          address.substring(0, 6) +
          "......" +
          address.substring(address.length - 4)
        );
      } else if (address.length > 0 && address.length < 10) {
        return address;
      } else {
        return "-";
      }
    },

    navigator() {
      this.$router.push("listdetails");
    },
    onCopy(e) {
      this.$message({
        message: "You just copied accountId",
        type: "success",
        duration: 5 * 1000,
      });
    },

    onCopyError(e) {
      this.$message({
        message: "Failed to copy texts",
        type: "error",
        duration: 5 * 1000,
      });
    },
    copy() {
      document.execCommand("Copy"); // 执行浏览器复制命令
    },
    change(i) {
      this.currentIndex = i;
    },
    timeDown() {
      const endTime = this.endTime;
      const nowTime = new Date();
      let leftTime = parseInt((endTime - nowTime.getTime()) / 1000);
      let d = parseInt(leftTime / (24 * 60 * 60));
      let h = this.formate(parseInt((leftTime / (60 * 60)) % 24));
      let m = this.formate(parseInt((leftTime / 60) % 60));
      let s = this.formate(parseInt(leftTime % 60));
      if (leftTime <= 0) {
        this.flag = true;
        this.$emit("time-end");
      }
      this.time = { day: d, hours: h, minutes: m, seconds: s };
    },
    formate(time) {
      if (time >= 10) {
        return time;
      } else {
        return `0${time}`;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: url(../../assets/mobile/bg-content.png);
  background-size: 100% 100%;
  margin-top: 4vh;
  //   padding-left: 3vw;
  //   padding-right: 3vw;
}
.content {
  width: 100%;
  margin: 0 auto;
}
.top {
  display: flex;
  width: 92%;
  margin: 0 auto;
  margin-bottom: 3vh;
}
.account-btn,
.twitter-btn,
.discard-btn {
  width: 28.5vw;
  height: 3.88vh;
  margin-right: 2.4vw;
  background: #0d0d0d;
  border: 1px solid rgba(208, 163, 110, 0.79);
  border-radius: 42px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.text {
  width: 60%;
  font-size: 0.66rem;
  font-family: "OPPOSans";
  font-weight: normal;
  color: #d7a972;
  overflow: hidden !important;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.icon-content {
  display: flex;
  align-items: center;
  width: 12%;
  // line-height: 1vh;
  margin-right: 0.3rem;
  img {
    width: 100%;
  }
}
.icon-img {
  width: 4vw;
}
.invititaion-code {
  text-align: center;
  font-size: 1.6rem;
  font-family: "OPPOSans";
}

.switch {
  width: 90vw;
  display: flex;
  margin-top: 5vh;
  text-align: center;
  margin: 0 auto;
  background: #0d0d0d;
  border-radius: 46px;
  padding: 1.2vh 1.2vh 1.2vh 1.2vh;
  .prebeta {
    width: 50%;
    height: 4.2vh;
    text-align: center;
    cursor: pointer;
    line-height: 4.2vh;
    font-size: 0.85rem;
    font-family: "OPPOSans";
    font-weight: normal;
    color: #ffffff;
    background: linear-gradient(171deg, #775437, #f2c082);
    border-radius: 33px;
  }
  .prebeta-default {
    width: 50%;
    height: 4.2vh;
    text-align: center;
    cursor: pointer;
    line-height: 4.2vh;
    font-size: 0.85rem;
    font-family: "OPPOSans";
    font-weight: normal;
    color: #cfa16c;
    border-radius: 33px;
  }
}
.date-time {
  display: flex;
  width: 92%;
  margin: 0 auto;
  justify-content: space-between;
  background: #0c0c0c;
  opacity: 0.6;
}
.time-circular {
  width: 18vw;
  height: 18vw;
  font-size: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #353535;
  border-radius: 50%;
  font-family: "OPPOSans";
  font-weight: normal;
}
.invititaion-code-title {
  font-size: 1.2rem;
  font-family: "BigJohn";
  font-weight: 400;
  color: #cfa16c;
  background: linear-gradient(171deg, #775437 0.1220703125%, #f2c082 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: 3vh;
  text-align: center;
}
.date-time-title {
  font-size: 0.99rem;
  font-family: "BigJohn";
  font-weight: 400;
  text-align: center;
  color: #cfa16c;
  margin-bottom: 1.2vh;
  background: linear-gradient(171deg, #775437 0.1220703125%, #f2c082 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.invititaion-code {
  text-align: center;
  margin-bottom: 3vh;
  font-family: "OPPOSans";
  font-weight: normal;
}
.time-content {
  width: 85vw;
  padding-top: 1.2vh;
  padding-left: 3vw;
  padding-right: 3vw;
  padding-bottom: 2.2vh;
  background: rgba(12, 12, 12, 1);
  margin: 0 auto;
}
.time-text {
  text-align: center;
  margin-top: 2vw;
  font-size: 0.85rem;
  font-family: "OPPOSans";
  font-weight: normal;
  color: #fffefe;
}

.points-list {
  width: 94%;
  margin: 0 auto;
  // height: 40vh;
  margin-top: 2vh;
  margin-bottom: 4vh;
  border: 1px solid rgba(208, 163, 110, 0.79);
  background: #0f0f0f;
  .list-header {
    display: flex;
    margin-top: 1vh;
    padding-left: 1.6vw;
    padding-right: 1.6vw;
    justify-content: space-between;
  }
}
.rank,
.points,
.clan-member {
  border: 1px solid rgba(208, 163, 110, 0.79);
  opacity: 0.6;
  text-align: center;
  position: relative;
}
.points-option {
  display: flex;
  margin-top: 2.6vw;
  margin-bottom: 1.42vh;
  padding-right: 1vw;
  padding-left: 2vw;
}
.number-img {
  position: absolute;
  right: 0.8vw;
  bottom: 0;
}
.operators {
  font-size: 0.7rem;
  font-family: "OPPOSans";
  font-weight: normal;
  color: #d7a972;
  font-size: 0.7rem;
  width: 47vw;
}
.date {
  width: 30vw;
  font-size: 0.7rem;
  font-family: "OPPOSans";
  font-weight: normal;
  color: #d7a972;
}
.points-text {
  font-size: 0.7rem;
  font-family: "OPPOSans";
  font-weight: normal;
  text-align: right;
  margin-right: 1vw;
  color: #d7a972;
  width: 9vw;
}

.event {
  font-size: 0.7rem;
  width: 38vw;
  margin-left: 1vw;
  font-size: 0.7rem;
  font-family: "OPPOSans";
  font-weight: normal;
  color: #d7a972;
}
.rank {
  width: 15%;
  padding-right: 1vw;
  padding-left: 1vw;
}
.points {
  width: 45%;
}
.clan-member {
  width: 32%;
}
.rank-number {
  font-size: 1rem;
  margin-bottom: 1vh;
}
.clan-member-text {
  margin-top: 0.55vh;
  font-size: 0.9rem;
  padding-left: 0.1vw;
  padding-right: 0.1vw;
  font-family: "OPPOSans";
  font-weight: normal;
  color: #d7a972;
}
.list-item {
  display: flex;
  width: 97%;
  margin: 0 auto;
  padding-top: 0.7vh;
  padding-bottom: 0.7vh;
  border-bottom: 1px solid rgba(208, 163, 110, 0.79);
  .date {
    width: 21vw;
    font-size: 0.46rem;
    font-family: "OPPOSans";
    font-weight: normal;
    color: #ffffff;
  }
  .points-text {
    font-size: 0.46rem;
    font-family: "OPPOSans";
    font-weight: normal;
    text-align: right;
    color: #ffffff;
    width: 12vw;
  }

  .event {
    width: 23vw;
    font-size: 0.46rem;
    font-family: "OPPOSans";
    font-weight: normal;
    color: #ffffff;
  }
  .operators {
    font-size: 0.46rem;
    font-family: "OPPOSans";
    font-weight: normal;
    color: #ffffff;
    width: 34vw;
  }
}
.leaderboard-btn {
  width: 50vw;
  margin: 0 auto;
  height: 4.8vh;
  text-align: center;
  line-height: 4.8vh;
  background: linear-gradient(165deg, #775437, #f2c082);
  border-radius: 59px;
  font-family: "BigJohn";
  font-size: 1rem;
  font-weight: 400;
  color: #fffefe;
}
.info {
  height: calc(100vh - 4.8vh - 25vh);
  font-size: 2rem;
  text-align: center;
  font-family: "BigJohn";
  line-height: 35vh;
  font-weight: 400;
  color: #fffefe;
}
@media screen and (min-width: 992px) {
  .icon-img {
    width: 20px;
  }
  .icon-content img {
    width: 70%;
  }
}
.footer {
  position: absolute;
  bottom: 0;
}
@media (min-width: 1024px) {
  .container {
    height: auto;
  }
  .text {
    font-size: 18px;
    // text-align: center;
  }
  .account-btn,
  .twitter-btn,
  .discard-btn {
    height: 3.88vw;
  }
  .switch .prebeta {
    height: 4.2vw;
    font-size: 18px;
    line-height: 4.2vw;
  }
  .switch .prebeta-default {
    height: 4.2vw;
    font-size: 18px;
    line-height: 4.2vw;
  }
  .time-circular {
    font-size: 81px;
  }
  .invititaion-code-title {
    font-size: 36px;
    margin-bottom: 20px;
  }
  .date-time-title {
    font-size: 30px;
  }
  .invititaion-code {
    font-size: 40px;
    .icon-img {
      width: 36px;
    }
  }
  .leaderboard-btn {
    height: 4.8vw;
    line-height: 4.8vw;
    font-size: 40px;
  }
}
</style>