<template>
  <div class="diamonds">
    <Header :descText="'Purchase any amount of diamonds'" />
    <TipsDialog v-if="isTips" :text="tipsText" :status="tipsStatus" />
    <h5>
      Complete this task to win a share of the 
      <span>225,000 $CEC</span> prize pool
    </h5>
    <h6>Select a network</h6>
    <div class="net-id-list">
      <div
        :class="netIdIndex != index ? 'net-id-item' : 'net-id-item active'"
        v-for="(item, index) in netIdList"
        :key="index"
        @click="selectNetId(index)"
      >
        <div>
          <img :src="item.imgSrc" alt />
        </div>
      </div>
    </div>
    <div class="diamonds-content">
      <div class="content">
        <li>
          <div class="left">
            <div>
              <span v-if="!token">1</span>
              <img v-else src="@/assets/icon_done.png" alt />
            </div>
          </div>
          <div class="right">
            <h4>Bitget Wallet</h4>
            <div class="connect" v-if="!token">
              <span @click="walletLink">Connect</span>
            </div>
            <div class="address" v-else>{{ address }}</div>
            <div class="email" v-if="token && email">
              Game Account:
              <span>{{ email }}</span>
            </div>
          </div>
        </li>
        <li v-if="token">
          <div class="left">
            <div>
              <span>2</span>
              <!-- <img src="@/assets/icon_done.png" alt=""> -->
            </div>
          </div>
          <div class="right">
            <h4>Purchase diamonds</h4>
            <p>*Use diamonds for items and skin lotteries in-game</p>
            <div class="purchase">
              <div class="purchase-logo">
                <div class="logo">
                  <img src="@/assets/icon_diamond.png" alt />
                  <span>× {{brickworkAmount * 100}}</span>
                </div>
              </div>
              <div class="amount-input">
                <!-- <div class="left"> -->
                <span @click="rechargeDecrease">-</span>
                <input
                  type="text"
                  placeholder="0"
                  v-model="brickworkAmount"
                  @input="handleInput"
                  oninput="value=value.replace(/[^\d]/g,'')"
                />
                <p>Unit</p>
                <span @click="rechargeIncrease">+</span>
                <!-- </div> -->
              </div>
              <div class="price-amount">
                <span>{{ brickworkAmount }}</span>
                <!-- <img :src="currencyData.imgSrc" alt=""> -->
                <img class="icon" v-if="currencyData.name == 'USDC'" src="@/assets/usdc.png" alt />
                <img
                  class="icon"
                  v-if="currencyData.name == 'USDT'"
                  src="@/assets/icon_USDT.png"
                  alt
                />
                <div class="drop-down">
                  <div class="drop-down-icon" @click="isDropdown = !isDropdown">
                    <img src="@/assets/selectCoin_arrow.png" alt />
                  </div>
                </div>
                <div class="dropdown-menu" v-if="isDropdown">
                  <div
                    class="dropdown-item"
                    v-for="(item, index) in buyData.currency_list"
                    :key="index"
                    @click="cliCurrency(item)"
                  >
                    <!-- <img :src="dropdownList[index].imgSrc" alt=""> -->
                    <img v-if="item.name == 'USDC'" src="@/assets/usdc.png" alt />
                    <img v-if="item.name == 'USDT'" src="@/assets/icon_USDT.png" alt />
                    <span>{{ item.name }}</span>
                  </div>
                </div>
              </div>
              <div class="confirm-btn" @click="conformBtn">Confirm</div>
            </div>
            <!-- <div class="address">0x803f05df41ebae0305e768c1645484d3d2e4d42b</div> -->
          </div>
        </li>
      </div>
    </div>
    <div class="top-up-dialog" v-if="isDownloadDialog">
      <div class="close" @click="closeDownload">
        <img src="@/assets/Close_counter.png" alt="">
      </div>
      <h2>Task completed</h2>
      <div class="logo">
        <img src="@/assets/icon_diamond.png" alt />
      </div>
      <h4>You got × {{brickworkAmount * 100}}</h4>
      <div class="user-info">
        <div class="user-info-label">Account:</div>
        <p>{{ email }}</p>
        <div class="user-info-label">Bitget wallet:</div>
        <p>{{ address }}</p>
      </div>
      <div class="tips">
        <p>*Check and spend diamonds in the game.</p>
        <p>Rewards will be airdrop to your Bitget Wallet in the future</p>
      </div>
      <!-- <div class="user-info-btn">
        <div class="left">Download</div>
        <div class="right" @click="isDownloadDialog = false">Close</div>
      </div>-->
    </div>
    <div class="dialog" v-if="isLoginDialog">
      <div class="dialog-content">
        <div class="dialog-tips">
          <p>Please complete game account</p>
          <p>registration first</p>
        </div>
        <div class="dialog-btn">
          <div @click="toHome">
            <!-- <router-link to="/">Go</router-link> -->
            Go
          </div>
          <div class="close" @click="isLoginDialog = false">Close</div>
        </div>
      </div>
    </div>
    <LoadingDialog v-if="loadingDialogVisible" />
  </div>
</template>

<script>
import { providers } from "ethers";
import Header from "@/components/header.vue";
import { BitgetWallet } from "@/wallet/BitgetWallet.js";
import { getEmail, apiGoods } from "@/utils/request";
import TipsDialog from "./tipsDialog.vue"
import LoadingDialog from "./loadingDialog.vue"
import { FirebaseUtil } from "@/utils/firebase.util";


export default {
  components: {
    Header,
    TipsDialog,
    LoadingDialog
  },
  data() {
    return {
      brickworkAmount: 1,
      netIdList: [
        {
          imgSrc: require("@/assets/logo_eth.png"),
          netId: "1"
        },
        // {
        //   imgSrc: require("@/assets/logo_arbitrum.png"),
        //   netId: "2"
        // },
        {
          imgSrc: require("@/assets/logo_BSC.png"),
          netId: "3"
        },
        {
          imgSrc: require("@/assets/logo_IM.png"),
          netId: "4"
        }
      ],
      netIdIndex: 0,
      isDownloadDialog: false,
      isLoginDialog: false,
      isDropdown: false,
      dropdownList: [
        {
          imgSrc: require("@/assets/icon_USDT.png"),
          netId: "1",
          name: "USDT"
        },
        {
          imgSrc: require("@/assets/usdc.png"),
          netId: "2",
          name: "USDC"
        }
      ],
      currencyData: {
        imgSrc: require("@/assets/icon_USDT.png"),
        name: "USDT"
      },
      token: "",
      address: "",
      email: "",
      net_id: process.env.VUE_APP_ETH_ID,
      buyData: {},
      tipsText: '',
      tipsStatus: 0,
      isTips: false,
      tipsTime: 3,
      loadingDialogVisible: false,
    };
  },

  mounted() {
    this.token = localStorage.getItem("token");
    this.address = localStorage.getItem("address");
    if (this.token) {
      this.email = getEmail(this.token);
      if (!this.email) {
        this.isLoginDialog = true;
      }
    }
    this.getGoodsList();
    new FirebaseUtil();
  },

  methods: {
    // 获取充值列表
    async getGoodsList() {
      try {
        if (this.address) {
          let res = await apiGoods(this.net_id, this.address);
          res.rows.forEach(item => {
            if (item.can_email_buy == 1) {
              this.buyData = item;
            }
          });
          this.currencyData["address"] = this.buyData.currency_list[0].address;
          this.currencyData["name"] = this.buyData.currency_list[0].name;
          this.currencyData.imgSrc = this.buyData.currency_list[0].name;
        }
      } catch(e) {
        console.log(e)
      }
    },

    // 选择链
    selectNetId(index) {
      this.netIdIndex = index;
      if (index == 0) {
        this.net_id = process.env.VUE_APP_ETH_ID;
      } else if (index == 1) {
        // this.net_id = process.env.VUE_APP_ARB_ID;
        this.net_id = process.env.VUE_APP_BNB_ID;
      } else if (index == 2) {
        this.net_id = process.env.VUE_APP_IMT_ID;
        // this.net_id = process.env.VUE_APP_BNB_ID;
      } else if (index == 3) {
        this.net_id = process.env.VUE_APP_IMT_ID;
      }
      this.getGoodsList();
    },

    // 选择货币
    cliCurrency(item) {
      this.currencyData = {
        address: item.address,
        name: item.name
      };
      this.isDropdown = false;
    },

    // input 输入
    handleInput() {
      if (this.brickworkAmount == 1) {
        return false;
      } else if (this.brickworkAmount > this.buyData.max_buy_times) {
        this.brickworkAmount = this.buyData.max_buy_times;
      }
    },
    rechargeDecrease() {
      if (this.brickworkAmount == 1) return false;
      this.brickworkAmount--;
    },
    rechargeIncrease() {
      if (this.brickworkAmount >= this.buyData.max_buy_times) {
        this.brickworkAmount = this.buyData.max_buy_times;
      } else {
        this.brickworkAmount++;
      }
    },

    // 充值
    async conformBtn() {
      let email = getEmail(this.token);
      const data = {
        net_id: Number(this.net_id),
        goods_id: Number(this.buyData.goods_id),
        goods_num: Number(this.brickworkAmount),
        account_address: this.address,
        currency_address: this.currencyData.address
      };
      this.loadingDialogVisible = true
      if (email) {
        setImmediate(() => {
          new FirebaseUtil().uploadEvent('begin_charge', { email, data })
        })
        try{
          let bitgetWallet = new BitgetWallet();
          let res = await bitgetWallet.execBuyItem(data);
          this.loadingDialogVisible = false
          this.isDownloadDialog = true
          this.tipsText = 'Top-Up Successful'
          this.tipsTime = 3
          this.tipsStatus = 0
        } catch (e) {
          this.tipsStatus = 1
          this.loadingDialogVisible = false
          this.countTime()
          if(e.message.indexOf('request') > -1) {
            this.tipsText = 'Top-Up Cancelled by User'
            this.tipsTime = 3
          } else {
            this.tipsText = 'Top-Up fail.'
          }
          new FirebaseUtil().uploadEvent('charge_error', {email, data, error: e.message || e})
        }
      } else {
        this.loadingDialogVisible = false
        this.isLoginDialog = true;
      }
    },

    // 链接钱包
    async walletLink() {
      var isBitgetWallet = navigator.userAgent.indexOf('BitKeep') > 0
      if(!isBitgetWallet) {
        window.location.href = `https://bkcode.vip?action=dapp&url=${location.origin}/register`
      } else {
        let bitgetWallet = new BitgetWallet();
        let res = await bitgetWallet.getAccessToken();
        this.$store.commit("wallet/updateToken", res.token);
        localStorage.setItem("token", res.token);
        localStorage.setItem("address", res.accounts[0]);
        this.token = res.token;
        this.address = res.accounts[0];
        this.email = getEmail(this.token);
        this.getGoodsList()
      }
    },

    // 跳转首页
    toHome() {
      this.$router.push({
        name: "Create",
        query: {
          name: "topUp"
        }
      });
    },

    // 弹窗倒计时
    countTime: function () {
      if(this.tipsTime == 0) {
        this.isTips = false
      } else {
        this.isTips = true
        this.tipsTime--
      }
      setTimeout(this.countTime, 1000)
    },
    closeDownload() {
      this.isDownloadDialog = false
      this.getGoodsList()

    },
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.diamonds {
  color: #fff;
  // padding-bottom: 40px;
  h5 {
    width: 320px;
    margin: 0 auto;
    font-family: "Poppins";
    font-weight: 400;
    font-size: 16px;
    // text-align: center;
    color: #ffffff;
    margin-top: 5px;
    span {
      color: #ffef67;
    }
  }
  h6 {
    width: 370px;
    margin: 0 auto;
    margin-top: 20px;
    padding-left: 40px;
  }
  .net-id-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 370px;
    margin: 0 auto;
    margin-top: 10px;
    .net-id-item {
      width: 32%;
      height: 41px;
      background: #3c344b;
      border-radius: 20px 20px 0px 0px;
      display: flex;
      align-items: center;
      justify-content: center;
      div {
        width: 36px;
        height: 36px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .active {
      background: #b966ff;
    }
  }
  .diamonds-content {
    width: 410px;
    height: 480px;
    margin: 0 auto;
    background: #17141b;
    border-radius: 26px;
    border: 2px solid #b966ff;
    .content {
      width: 370px;
      margin: 0 auto;
      margin-top: 20px;
      li {
        display: flex;
        min-height: 120px;
        position: relative;
        .left {
          width: 38px;
          height: 38px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #3c73ff;
          border-radius: 50%;
          span {
            font-family: "Anton";
            font-weight: 400;
            font-size: 20px;
            color: #000000;
          }
        }
        .right {
          margin-left: 17px;
          position: relative;
          h4 {
            font-family: "Poppins";
            font-weight: 400;
            font-size: 20px;
            margin-bottom: 12px;
            color: #ffffff;
          }
          .connect {
            width: 370px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            left: -50px;
            span {
              display: block;
              width: 218px;
              height: 61px;
              line-height: 61px;
              text-align: center;
              background: #4936d7;
              font-family: "Anton";
              font-weight: 400;
              font-size: 24px;
              border-radius: 30px;
            }
          }
          .address {
            position: absolute;
            top: 40px;
            width: 330px;
            height: 34px;
            line-height: 34px;
            text-align: center;
            border-radius: 15px;
            background: #211d26;
            font-size: 12px;
            color: #37ffff;
            font-family: "Poppins";
            font-weight: 400;
            box-sizing: border-box;
          }
          .email {
            position: absolute;
            top: 80px;
            width: 330px;
            height: 34px;
            line-height: 34px;
            padding: 0px 4px;
            padding-left: 15px;
            box-sizing: border-box;
            border-radius: 15px;
            background: #211d26;
            font-size: 12px;
            color: #fff;
            font-family: "Poppins";
            font-weight: 400;
            span {
              font-size: 13px;
              font-family: "Poppins";
              font-weight: bold;
            }
          }
          p {
            font-family: "Poppins";
            font-weight: 400;
            font-size: 12px;
            color: #b966ff;
          }
          .purchase {
            margin-top: 10px;
            width: 370px;
            position: absolute;
            left: -50px;
            // background: #37ffff;
            p {
              font-family: "Poppins";
              font-weight: 400;
              font-size: 14px;
              color: #9950fd;
            }
            .purchase-logo {
              width: 100%;
              height: 86px;
              position: relative;
              display: flex;
              justify-content: center;
              .logo {
                position: absolute;
                padding: 5px 10px;
                height: 86px;
                box-sizing: border-box;
                margin: 0 auto;
                display: flex;
                justify-content: center;
                align-items: center;
                background: #211d26;
                border-radius: 30px;
                border: 2px solid #b966ff;
                span {
                  font-size: 24px;
                  font-family: "Poppins-SemiBold";
                }
                img {
                  width: 65px;
                  height: 65px;
                  margin-right: 10px;
                }
              }
              // }
            }
            .amount-input {
              display: flex;
              align-items: center;
              justify-content: space-evenly;
              text-align: center;
              width: 218px;
              height: 42px;
              margin: 0 auto;
              margin-top: 5px;
              background: #211d26;
              border-radius: 21px;
              position: relative;
              span {
                font-family: "Poppins-SemiBold";
                font-weight: bold;
                font-size: 40px;
              }
              input {
                width: 120px;
                height: 38px;
                padding: 0;
                text-align: center;
                color: #fff;
                // color: #000;
                border: 0px;
                background: #1e1b26;
                // background: #fff;
                font-family: "Poppins-SemiBold";
                font-weight: bold;
                font-size: 24px;
              }
              p {
                position: absolute;
                left: 140px;
                width: 40px;
                color: #fff;
                font-family: "Poppins-SemiBold";
                font-weight: bold;
                font-size: 18px;
              }
            }
            .price-amount {
              width: 218px;
              margin: 10px auto;
              display: flex;
              align-items: center;
              justify-content: center;
              background: #211d26;
              border-radius: 21px;
              border: 2px solid #6f36d7;
              position: relative;
              span {
                font-family: "Poppins-SemiBold";
                font-weight: bold;
                font-size: 24px;
              }
              .icon {
                width: 26px;
                height: 26px;
                margin-left: 20px;
              }
              .drop-down {
                position: absolute;
                right: 0px;
                top: 50%;
                transform: translateY(-50%);
                width: 40px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                .drop-down-icon {
                  width: 20px;
                  height: 20px;
                  img {
                    width: 100%;
                    height: 100%;
                  }
                }
              }
              .dropdown-menu {
                position: absolute;
                top: 100%;
                right: 0;
                background: #3c344b;
                border-radius: 21px;
                .dropdown-item {
                  width: 120px;
                  height: 40px;
                  text-align: center;
                  border-bottom: 1px solid #2c2437;
                  font-family: "Anton";
                  font-weight: 400;
                  font-size: 21px;
                  color: #ffffff;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  img {
                    width: 26px;
                    height: 26px;
                    margin-right: 5px;
                  }
                  &:last-child {
                    border: 0px;
                  }
                }
              }
            }
            .confirm-btn {
              width: 218px;
              height: 61px;
              line-height: 61px;
              margin: 0 auto;
              text-align: center;
              background: #6f36d7;
              font-family: "Anton";
              font-weight: 400;
              font-size: 24px;
              border-radius: 30px;
            }
          }
        }
        &::after {
          content: "";
          position: absolute;
          top: 30px;
          left: 18px;
          width: 1px;
          height: calc(100% - 30px);
          background: #3CEEFE;
          z-index: 1;
        }
        &:last-child {
          &::after {
            display: none;
          }
        }
      }
    }
  }
  .top-up-dialog {
    position: fixed;
    bottom: 0;
    width: calc(100% - 2px);
    height: 420px;
    background: #2d2738;
    border-radius: 66px 66px 0px 0px;
    border: 1px solid #b966ff;
    // display: none;
    z-index: 9;
    .close {
      position: absolute;
      top: -10px;
      right: 5px;
      width: 50px;
      height: 50px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    h2 {
      text-align: center;
      padding-top: 30px;
      font-family: "Anton";
      font-weight: 400;
      font-size: 28px;
      color: #37ffff;
    }
    .logo {
      width: 86px;
      height: 86px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #211d26;
      border-radius: 50%;
      border: 2px solid #b966ff;
      img {
        width: 65px;
        height: 65px;
      }
    }
    h4 {
      text-align: center;
      margin-bottom: 20px;
    }
    .user-info {
      // width: 400px;
      margin: 0 auto;
      .user-info-label {
        width: 370px;
        margin: 0 auto;
        font-family: "Poppins";
        font-weight: 400;
        font-size: 16px;
      }
      p {
        width: 370px;
        height: 34px;
        line-height: 34px;
        margin: 5px auto;
        padding: 0 20px;
        background: #211d26;
        border-radius: 26px;
        font-size: 14px;
      }
      // .cor {
      //   color: #37FFFF;
      // }
    }
    .tips {
      width: 370px;
      margin: 0 auto;
      margin-top: 20px;
      p {
        font-family: "Poppins";
        font-weight: 400;
        font-size: 13px;
        color: #37ffff;
      }
    }
    .user-info-btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 400px;
      margin: 0 auto;
      div {
        width: 190px;
        height: 61px;
        line-height: 61px;
        text-align: center;
        font-family: "Anton";
        font-weight: 400;
        font-size: 24px;
        color: #ffffff;
      }
      .left {
        background: #6f36d7;
        border-radius: 46px;
      }
      .right {
        background: #57476c;
        border-radius: 46px;
      }
    }
  }
  .dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9;
    .dialog-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) !important;
      width: 400px;
      height: 298px;
      background: #17141b;
      border-radius: 66px;
      border: 2px solid #b966ff;
      .dialog-tips {
        color: #fff;
        font-size: 21px;
        font-family: "Poppins-SemiBold";
        font-weight: bold;
        text-align: center;
        padding-top: 80px;
        padding-bottom: 60px;
      }
      .dialog-btn {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        > div {
          width: 191px;
          height: 61px;
          line-height: 61px;
          background: #6f36d7;
          border-radius: 30px;
          text-align: center;
          font-family: "Anton";
          font-weight: 400;
          font-size: 24px;
          color: #ffffff;
          a {
            display: inline-block;
            width: 100%;
            height: 100%;
            color: #ffffff;
            text-decoration: none;
          }
        }
        .close {
          background: #57476c;
        }
      }
    }
  }
}
</style>
