<template>
  <div class="mkt-header">
    <div class="header-content">
      <div class="assets-user">
        <div class="assets-user-img" :style="{background: bgCor[bgCorFloor]}">
          <img v-if="localWalletStore.showAddress" :src="imageUrl" alt="Dynamic Image">
          <img v-else src="@/assets/img/marketplace/0000.png" alt="Dynamic Image">
        </div>
        <div class="assets-user-name">
          <div class="adderss">{{ localWalletStore.showAddress ? localWalletStore.showAddress : 'User Address' }}</div>
          <div class="email">
            <p>Total Contribution Credits:</p>
          </div>
          <div class="name">
            <p>Player name:&nbsp;&nbsp; <span>{{ contributionPoint }}</span></p>
          </div>
          <div class="recharge">
            <div class="recharge-left">
              <li>
                <div class="recharge-img">
                  <img src="@/assets/img/marketplace/icon_diamond.png" alt="">
                </div>
                <span>0</span>
              </li>
              <li>
                <div class="recharge-btn" @click="rechargeListDialogVisible = true">Top up</div>
              </li>
            </div>
            <div class="recharge-right">
              <img class="icon" @click="rechargeLogDialogVisible = true" src="@/assets/img/marketplace/History.png" alt="">
            </div>
          </div>
        </div>
        <div>
        </div>
      </div>
      <div class="uaw-listing">
        <div class="uaw-listing-content">
          <div class="left">
            <div class="img">
              <img src="@/assets/img/marketplace/CECIcon.png" alt="">
            </div>
              <div class="uaw-cec-amount">
              <p>
                CEC: 
                <br>
                <span v-if="cecInfo?.total != 0">{{ priceCalculated(BigInt(cecInfo?.total),18).toString().match(/^\d+(?:\.\d{0,2})?/)[0] }}</span>
                <span v-else>0</span>
              </p>
            </div>
          </div>
          <div class="right">
            <div class="tips">
              <div class="tips-img">
                <img src="@/assets/img/marketplace/Description.png" alt="">
              </div>
              <div class="tips-message">Shows earned CEC</div>
            </div>
            <div class="log" @click="receiveLog">
              <img src="@/assets/img/marketplace/History.png" alt="">
            </div>
          </div>
        </div>
        <div class="expected-content">
          <div class="total">
            <p>Total Contribution Credits:&nbsp; </p>
            <div>
              <span>{{ contributionPointTotal }}</span>
              <img src="@/assets/img/marketplace/totalContribution.png" alt="">
              <img class="icon" @click="conLogDialogVisible = true" src="@/assets/img/marketplace/History.png" alt="">
            </div>
          </div>
          <div class="day">
            <p>Daily Expected:&nbsp;&nbsp;</p>
            <div>
              <span>+{{ contributionPoint }}/d</span>
              <img src="@/assets/img/marketplace/totalContribution.png" alt="">
              <img class="icon" @click="rulesDialogVisible = true" src="@/assets/img/marketplace/Description.png" alt="">
            </div>
          </div>
        </div>
        
        <div class="btn">
          <!-- <span class="yes" v-if="cecInfo?.stages[0]?.unlocked || cecInfo?.stages[1]?.unlocked" @click="confirmDialogVisible = false">Collection</span>
          <span class="no" v-else @click="confirmCec">Collection</span> -->
        </div>
        <div ref="conLogModal">
          <a-modal :class="'conLogModal'" :getContainer="() => $refs.conLogModal" v-model:open="conLogDialogVisible" :closable="false" :footer="null" :maskClosable="false">
            <div class="log-title">Staking Contribution Credits Record</div>
            <div class="closable" @click="conLogDialogVisible = false">
              <img src="@/assets/img/marketplace/Close_counter.png" alt="">
            </div>
            <div class="log-content">
              <div class="log-header">
                <!-- <li>
                  Event
                </li> -->
                <li>
                  Date
                </li>
                <li>
                  Reward
                </li>
              </div>
              <div class="log-body">
                <div v-if="contributionList == undefined || contributionList.length <= 0" class="no-data">
                  <div>
                    <img src="@/assets/img/marketplace/Empty_state.png" alt="">
                  </div>
                  <p>No Data</p>
                </div>
                <div v-else class="pages" v-for="(item, index) in contributionList" :key="index">
                  <!-- <li>
                    <span>contributionList</span>
                  </li> -->
                  <li>
                    {{ timeFormat(item.date*1000) }}
                  </li>
                  <li class="cec-amount">
                    <!-- <span>{{  priceCalculated(BigInt(item.contribution_point),18).toString().match(/^\d+(?:\.\d{0,2})?/)[0]  }}</span> -->
                    <span>{{contributionLogs(item.contribution_point)}}</span>
                    <img src="@/assets/img/marketplace/totalContribution.png" alt="">
                  </li>
                </div>
              </div>
            </div>
          </a-modal>
        </div>
        <div ref="cecLogModal">
          <a-modal :class="'cecLogModal'" :getContainer="() => $refs.cecLogModal" v-model:open="logDialogVisible" :closable="false" :footer="null" :maskClosable="false">
            <div class="log-title">CEC Allocation Record</div>
            <div class="closable" @click="logDialogVisible = false">
              <img src="@/assets/img/marketplace/Close_counter.png" alt="">
            </div>
            <div class="log-content">
              <div class="log-header">
                <li>
                  Event
                </li>
                <li>
                  Date
                </li>
                <li>
                  Reward
                </li>
              </div>
              <div class="log-body">
                <div class="pages" v-for="(item, index) in cecInfo?.records" :key="index">
                  <li>
                    <span v-if="item.desc == 'uaw'">Hill's Treasure Hunt</span>
                    <span v-else-if="item.desc == 'p2a'">Wheel of Fortune</span>
                    <span v-else-if="item.desc == 'game test parse 1'">P2E Season 1</span>
                    <span v-else>{{ item.desc }}</span>
                  </li>
                  <li>
                    {{ item.earnTime }}
                  </li>
                  <li class="cec-amount">
                    <span v-if="item.desc != ''">{{  priceCalculated(BigInt(item.amount),18).toString().match(/^\d+(?:\.\d{0,2})?/)[0]  }}</span>
                    <img v-if="item.desc != ''" src="@/assets/img/marketplace/CECIcon.png" alt="">
                  </li>
                </div>
                <div class="no-data" v-if="cecInfo?.total == 0">
                  <div>
                    <img src="@/assets/img/marketplace/Empty_state.png" alt="">
                  </div>
                  <p>No Data</p>
                </div>
              </div>
            </div>
            <div class="pagination">
              <div class="prev">
                <div>
                  <img src="@/assets/img/marketplace/Previous.png" alt="">
                </div>
                <span>Previous</span>
              </div>
              <div class="pager">
                <span class="active">1</span>
                <!-- <span>2</span>
                <span>3</span> -->
              </div>
              <div class="next">
                <span>Next</span>
                <div>
                  <img src="@/assets/img/marketplace/Next.png" alt="">
                </div>
              </div>
            </div>
            <!-- <a-table :dataSource="cecInfo?.records" :pagination="false">
              <a-table-column title="Event" data-index="desc" :width="400">
                <template  #default="{ text: desc }">
                  <div class="nft">
                    <div class="nft-img">
                    </div>
                    <div class="nft-name">{{ desc }}</div>
                  </div>
              </template>
              </a-table-column>
              <a-table-column title="Date" data-index="earnTime" :width="400">
                <template  #default="{ text: earnTime }">
                  <div class="nft">
                    <div class="nft-img">
                    </div>
                    <div class="nft-name">{{ earnTime }}</div>
                  </div>
              </template>
              </a-table-column>
              <a-table-column title="Reward" data-index="amount" :width="400">
                <template  #default="{ text: amount }">
                  <div class="nft">
                    <div class="nft-img">
                    </div>
                    <div class="nft-name">{{ priceCalculated(Number(amount)) }}</div>
                  </div>
              </template>
              </a-table-column>
            </a-table> -->
          </a-modal>
        </div>
        <div ref="confirmModal">
          <a-modal :class="'confirmModal'" :getContainer="() => $refs.confirmModal" v-model:open="confirmDialogVisible" :footer="null" :maskClosable="false">
            <div class="content">
              <li>
                <div class="confirm-header">激励领取第一期</div>
                <div class="confirm-content">
                  <p>阶段1：</p>
                  <div>
                    <img src="@/assets/img/marketplace/0000.png" alt="">
                  </div>
                  <p>解锁总奖池50%</p>
                  <p>可领取数量： {{ priceCalculated(Number(cecInfo?.stages[0]?.amount),18) }}</p>
                  <div class="btn">
                    <span class="yes" v-if="cecInfo?.stages[0]?.unlocked && cecInfo?.stages[0]?.status == 0">领取</span>
                    <span v-else>领取</span>
                  </div>
                </div>
              </li>
              <li>
                <div class="confirm-header">激励领取第二期</div>
                <div class="confirm-content">
                  <p>阶段2：</p>
                  <div>
                    <img src="@/assets/img/marketplace/0000.png" alt="">
                  </div>
                  <p>解锁总奖池50%</p>
                  <p>可领取数量： {{ priceCalculated(Number(cecInfo?.stages[1]?.amount),18) }}</p>
                  <div class="btn">
                    <span class="yes" v-if="cecInfo?.stages[1]?.unlocked && cecInfo?.stages[1]?.status == 0">领取</span>
                    <span v-else>领取</span>
                  </div>
                </div>
              </li>
            </div>
          </a-modal>
        </div>
        <div ref="rulesModel">
          <a-modal :class="'rulesModal'" :getContainer="() => $refs.rulesModel" v-model:open="rulesDialogVisible" :closable="false" :footer="null" :maskClosable="false">
            <div class="log-title">Staking Rules</div>
            <div class="closable" @click="rulesDialogVisible = false">
              <img src="@/assets/img/marketplace/Close_counter.png" alt="">
            </div>
            <h3>1. Staking Rules</h3>
            <div class="text">
              <p>*Contributions only count if staked for a minimum of 24 hours.</p>
              <p>*If unstaked before 24 hours, no Credits will be awarded.</p>
              <p>*Contribution Credits are calculated daily at 00:00 UTC.</p>
            </div>
            <h3>2. Staking Rewards</h3>
            <div class="staking-content">
              <li>
                <h4>hero</h4>
                <div class="hero-title">
                  <span>Tier</span>
                  <span>Daily contribution points</span>
                </div>
                <div class="hero-body">
                  <div>
                    <span>Tier 1</span>
                    <span>10</span>
                  </div>
                  <div>
                    <span>Tier 2</span>
                    <span>20</span>
                  </div>
                  <div>
                    <span>Tier 3</span>
                    <span>40</span>
                  </div>
                  <div>
                    <span>Tier 4</span>
                    <span>80</span>
                  </div>
                  <div>
                    <span>Tier 5</span>
                    <span>160</span>
                  </div>
                </div>
              </li>
              <li>
                <h4>Founder’s Tag</h4>
                <div class="hero-title">
                  <span>Rarity</span>
                  <span>Daily contribution points</span>
                </div>
                <div class="hero-body">
                  <div>
                    <span>Common</span>
                    <span>20</span>
                  </div>
                  <div>
                    <span>Rare</span>
                    <span>40</span>
                  </div>
                  <div>
                    <span>Legendary</span>
                    <span>100</span>
                  </div>
                  <div>
                    <span>&nbsp;</span>
                    <span></span>
                  </div>
                  <div>
                    <span>&nbsp;</span>
                    <span></span>
                  </div>
                </div>
              </li>
            </div>
            <h3>3. Bonus Calculation</h3>
            <div class="text">
              <p>Each Founder's Tag: +10%</p>
              <p>Each Genesis Hero: +5%</p>
              <p>Maximum bonus cap: +100%</p>
            </div>
          </a-modal>
        </div>
      </div>
    </div>
    <div ref="rechargeListModal">
      <a-modal :class="'rechargeListModal'" :getContainer="() => $refs.rechargeListModal" v-model:open="rechargeListDialogVisible" :closable="false" :footer="null" :maskClosable="false">
        <div class="title">Diamond Top up</div>
        <div class="closable" @click="rechargeListDialogVisible = false">
          <img src="@/assets/img/marketplace/Close_counter.png" alt="">
        </div>
        <p>Diamonds are centralized assets that can be used in the game</p>
        <div class="content">
          <div class="item" v-for="(item, index) in rechargeList" :key="index" @click="selectItem(item, index)">
            <div class="activity" v-if="activeIndex == index">
              <img src="@/assets/img/marketplace/selected.png" alt="">
            </div>
            <div class="item-img">
              <img :src="rechargeImgList[item.goods_id].img" alt="">
            </div>
            <div v-if="index != 5" class="item-amount">×{{ item.diamond }}</div>
            <div v-else class="item-amount item-amount-input">
              <span @click="rechargeDecrease">-</span>
              <!-- <span>0</span> -->
              <input type="text" placeholder="0" v-model="brickworkAmount" @input="handleInput" oninput="value=value.replace(/[^\d]/g,'')">
              <span @click="rechargeIncrease">+</span>
            </div>
          </div>
        </div>
        <div class="conform-btn" @click="conformBtn">
          <span v-if="confirmRecharge?.goods_id == 1006">{{ priceAmount ? priceAmount : 0 }}</span>
          <span v-else>{{ confirmRecharge?.price }}</span>
          <img src="@/assets/img/marketplace/icon_USDT.png" alt="">
        </div>
      </a-modal>
    </div>
    <div ref="rechargeLogModal">
      <a-modal :class="'rechargeLogModal'" :getContainer="() => $refs.rechargeLogModal" v-model:open="rechargeLogDialogVisible" :closable="false" :footer="null" :maskClosable="false">
        <div class="log-title">Staking Contribution Credits Record</div>
        <div class="closable" @click="rechargeLogDialogVisible = false">
          <img src="@/assets/img/marketplace/Close_counter.png" alt="">
        </div>
        <div class="log-content">
          <div class="log-header">
            <!-- <li>
              Event
            </li> -->
            <li>
              Date
            </li>
            <li>
              Reward
            </li>
          </div>
          <div class="log-body">
            <div v-if="contributionList == undefined || contributionList.length <= 0" class="no-data">
              <div>
                <img src="@/assets/img/marketplace/Empty_state.png" alt="">
              </div>
              <p>No Data</p>
            </div>
            <div v-else class="pages" v-for="(item, index) in contributionList" :key="index">
              <!-- <li>
                <span>contributionList</span>
              </li> -->
              <li>
                {{ timeFormat(item.date*1000) }}
              </li>
              <li class="cec-amount">
                <!-- <span>{{  priceCalculated(BigInt(item.contribution_point),18).toString().match(/^\d+(?:\.\d{0,2})?/)[0]  }}</span> -->
                <span>{{contributionLogs(item.contribution_point)}}</span>
                <img src="@/assets/img/marketplace/totalContribution.png" alt="">
              </li>
            </div>
          </div>
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script setup>
import { ref, toRaw, watch, computed, onMounted, inject } from "vue"
const message = inject("$message");
import ConfirmDialog from "@/components/Dialogs/confirmDialog.vue";
import {createModal} from "@/utils/model.util";
import { apiCecInfo, apiExpected, apiUserData, apiContribution, apiRechargeGoods, apiRechargeHistory, apiPreRecharge } from "@/utils/marketplace"
import { priceCalculated, timeFormat, contributionLogs } from "@/configs/priceCalculate"
import { rechargeImgList } from "@/configs/cenImg"
import { useMarketplaceStore } from "@/store/marketplace"
import { BlockChain } from "@/components/chain/BlockChain"
import {walletStore} from "@/store/wallet";

const marketplaceStore = useMarketplaceStore()
const localWalletStore = walletStore()

const bgCor = ref(['#5bbbff', '#ffc35b', '#bb7fff', '#ff6600'])
const logDialogVisible = ref(false)

const bgCorFloor = computed(() => {
  if(!localWalletStore.showAddress) return 0
  return parseInt(localWalletStore.showAddress.substring(0,6))%4
})
const imageUrl = computed(() => {
  let str = parseInt(localWalletStore.showAddress.substring(0,6))%34
  if (str < 10) {
    str = '0' + str
  }
  let imgUrl = `https://res.counterfire.games/headimg/00${str}.png`
  return new URL(imgUrl, import.meta.url).href;
});

const rechargeImgUrl = computed(() => {
  let imgUrl = `./img/marketplace/1001.png`
  console.log(imgUrl);
  return new URL(imgUrl, import.meta.url).href;
})

// 打开历史记录弹窗
const receiveLog = () => {
  logDialogVisible.value = true
}

const confirmDialogVisible = ref(false)
// 领取奖励
const confirmCec = () => {
  // console.log('-------')

}

const rulesDialogVisible = ref(false)

const cecInfo = ref({
  total: 0,
  available: '',
  stages: [
    {
      stage: 1,
      amount: '',
      unlocked: '',
      claimTime: '',
      unlockTime: ''
    }
  ],
  records: [
    {
      address: '',
      amount: '',
      desc: '',
      earnTime: ''
    }
  ]
})
const getCecInfo = async () => {
  let address = localWalletStore.address
  if(address) {
    const {data, errcode} = await apiCecInfo(address)
  // console.log(errcode,data)
    if(errcode == 0) {
      cecInfo.value = data
    }
  } else {
    return
  }
}

const conLogDialogVisible = ref(false)
const contributionList = ref()
const getContribution = async () => {
  let address = localWalletStore.address
  if(address) {
    const {Rows, errcode} = await apiContribution(address)
    if(errcode == 0) {
      contributionList.value = Rows
    }
  } else {
    return
  }
}

const contributionPoint = ref(0)
const getExpected = async () => {
  let address = localWalletStore.address
  if(address) {
    const {contribution_point, errcode} = await apiExpected(address)
    if(errcode == 0) {
      contributionPoint.value = contribution_point
    }
  } else {
    return
  }
}

const contributionPointTotal = ref(0)
const getUserData = async () => {
  let address = localWalletStore.address
  if(address) {
    const {errcode, contribution_point, gold} = await apiUserData(address)
    if(errcode == 0) {
      contributionPointTotal.value = contribution_point
      marketplaceStore.userGold = gold
    }
  } else {
    return
  }
}

// 充值----------------------------------------stats
const rechargeLogDialogVisible = ref(false)
const rechargeListDialogVisible = ref(false)
const activeIndex = ref(0)
const rechargeList = ref()
const confirmRecharge = ref()
const brickworkAmount = ref(0)
const priceAmount = ref(0)
// 列表
const getRechargeGoods = async () => {
  const { errcode, errmsg, rows} = await apiRechargeGoods()
  if(errcode == 0) {
    rechargeList.value = rows
    confirmRecharge.value = rows[0]
  }
}

// selectItem 预选充值数量
const selectItem = (data, index) => {
  activeIndex.value = index
  if(data.goods_id == 1006) {
    confirmRecharge.value = {
      currency: data.currency,
      diamond: '',
      goods_id: data.goods_id,
      price: priceAmount.value
    }
  } else {
    confirmRecharge.value = data
  }
}

const handleInput = (e) => {
  console.log(brickworkAmount.value, e)
  toRaw(confirmRecharge.value).price = brickworkAmount.value
  priceAmount.value = brickworkAmount.value
}

const rechargeDecrease = async () => {
  if(brickworkAmount.value == 0) return false
  brickworkAmount.value--
  priceAmount.value--
  toRaw(confirmRecharge.value).price = priceAmount.value
}
const rechargeIncrease = async () => {
  brickworkAmount.value++
  priceAmount.value++
  toRaw(confirmRecharge.value).price = priceAmount.value
}

const conformBtn = async () => {
  console.log(toRaw(confirmRecharge.value))
  let address = localWalletStore.address
  if(toRaw(confirmRecharge.value).price == 0) {
    message.error('Please select the amount of bricks to be recharged.')
  } else {
    try {
      const bc = new BlockChain()
      let res = await bc.mall.execBuyItem(toRaw(confirmRecharge.value).goods_id)
      console.log(res)
    } catch(e) {
      console.log(e)
    }
    // alert('充值')
    // let query = {
    //   net_id: Number(import.meta.env.VUE_APP_NET_ID),
    //   goods_id: toRaw(confirmRecharge.value).goods_id,
    //   account_address: address
    // }
    // console.log(query)
    // let res = await apiPreRecharge(query)
    // console.log(res)
  }
}

const getRechargeHistory = async () => {
  let address = localWalletStore.address
  let res = await apiRechargeHistory(address)
  console.log(res,'-----------------------------')
}
// 充值----------------------------------------end

const dataInfo = async () => {
  await getCecInfo()
  await getContribution()
  await getExpected()
  await getUserData()
  await getRechargeGoods()
  await getRechargeHistory()
}

watch(localWalletStore,() => {
  // console.log('localWalletStore.token',localWalletStore.address,localWalletStore.token)
  if(!localWalletStore.address) {
    nftList.value = []
    cecInfo.value = {
      total: 0,
      available: '',
      stages: [
        {
          stage: 1,
          amount: '',
          unlocked: '',
          claimTime: '',
          unlockTime: ''
        }
      ],
      records: [
        {
          address: '',
          amount: '',
          desc: '',
          earnTime: ''
        }
      ]
    }
  } else {
    dataInfo()
  }
})

onMounted(() => {
  dataInfo()
})

</script>

<style lang="scss" scoped>
.mkt-header {
  width: 100%;
  .header-content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 168px;
    .assets-user {
      display: flex;
      height: 174px;
      background: rgba(26,24,33, .5);
      border-radius: 40px;
      margin-left: 77px;
      .assets-user-img {
        width: 173.8px;
        height: 173.8px;
        margin-right: 25px;
        border-radius: 16px;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .assets-user-name {
        font-family: 'Poppins';
        color: #FFFFFF;
        border-radius: 40px;
        padding: 10px 20px;
        .adderss {
          font-weight: bold;
          font-size: 30px;
        }
        .email {
          font-size: 20px;
        }
        .name {
          font-size: 20px;
          span {
            font-weight: Bold;
          }
        }
        .recharge {
          display: flex;
          align-items: center;
          width: 349px;
          height: 36px;
          margin-top: 10px;
          .recharge-left {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 349px;
            height: 100%;
            background: rgba(0,0,0,.5);
            border-radius: 16px;
            li {
              display: flex;
              align-items: center;
              .recharge-img {
                margin-right: 16px;
                width: 36px;
                height: 36px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              span {
                font-family: 'Poppins';
                font-weight: bold;
                font-size: 20px;
              }
              .recharge-btn {
                width: 100px;
                height: 36px;
                text-align: center;
                line-height: 36px;
                font-size: 20px;
                font-weight: bold;
                font-family: "Poppins";
                color: #000;
                background: #ff917f;
                border-radius: 16px;
                cursor: pointer;
              }
            }
          }
          .recharge-right {
            margin-left: 11px;
            .icon {
              width: 36px;
              height: 40px;
              cursor: pointer;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }
    }
    .uaw-listing {
      color: #FFFFFF;
      width: 448px;
      height: 279px;
      // height: 448px;
      margin-right: 77px;
      background: url('@/assets/img/marketplace/CEC_bg.png') no-repeat;
      background-size: 100% 100%;
      box-sizing: border-box;
      // display: none;
      .uaw-listing-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 115px;
        margin-top: 24px;
        .img {
          width: 119px;
          height: 115px;
          margin-left: 23px;
          margin-right: 25px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .left {
          // width: 39px;
          display: flex;
        }
        .right {
          height: 100%;
          margin-right: 24px;
          .tips {
            display: flex;
            justify-content: end;
            align-items: center;
            margin-top: 5px;
            position: relative;
            .tips-img {
              width: 39px;
              height: 39px;
              cursor: pointer;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .tips-message {
              position: absolute;
              top: -45px;
              left: 50%;
              transform: translateX(-50%);
              width: 200px;
              border-radius: 20px;
              height: 40px;
              line-height: 40px;
              text-align: center;
              background: #2d2738;
              font-size: 18px;
              display: none;
            }
            &:hover {
              .tips-message {
                display: block;
              }
            }
          }
          .log {
            width: 36px;
            height: 40px;
            margin-top: 19px;
            cursor: pointer;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
      .expected-content {
        width: 416px;
        margin: 0 auto;
        font-family: 'Poppins';
        font-weight: bold;
        font-size: 30px;
        color: #FFFFFF;
        border-top: 2px solid #525482;
        box-sizing: border-box;
        padding-top: 14px;
        padding-right: 10px;
        >div {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 16px;
          margin-bottom: 5px;
          font-family: 'Poppins';
          p {
            display: flex;
            align-items: center;
            
          }
          span {
              color: #00DEFF;
              font-size: 26px;
            }
        }
        .total {
          font-weight: bold;
          div {
            display: flex;
            align-items: center;
          }
          img {
            width: 27px;
            height: 27px;
            margin-left: 10px;
          }
          .icon {
            width: 27px;
            height: 27px;
            cursor: pointer;
          }
        }
        .day {
          font-weight: 500;
          div {
            display: flex;
            align-items: center;
          }
          img {
            width: 27px;
            height: 27px;
            margin-left: 10px;
          }
          .icon {
            width: 27px;
            height: 27px;
            cursor: pointer;
          }
        }
      }
      .uaw-cec-amount {
        margin-top: 18px;
        // text-align: center;
        font-family: 'Poppins';
        font-weight: 400;
        font-size: 24px;
      }
      
      .btn {
        width: 160px;
        height: 40px;
        line-height: 40px;
        margin: 0 auto;
        margin-top: 30px;
        text-align: center;
        display: none;
        span {
          display: inline-block;
          width: 100%;
          height: 100%;
          background: #3a3b57;
          cursor:no-drop;
        }
        .yes {
          color: #000;
          border-radius: 20px;
          background: #fec25d;
          font-family: 'Poppins';
          font-weight: 500;
          font-size: 14px;
          color: #2D2738;
          cursor: pointer;
        }
      }
    }
  }
  
  :deep(.conLogModal) {
    width: 1052px !important;
    height: 714px;
    background: #1A1821;
    box-shadow: 0px 15px 28px 3px rgba(22,22,22,0.13);
    border-radius: 100px;
    border: 1px solid #B966FF;
    .ant-modal-content {
      padding: 0 99px;
      color: #FFF;
      background: #1A1821;
      box-shadow: 0px 0px 0px 0px rgba(22,22,22,0.13);
      border-radius: 100px;
      .ant-modal-body {
        overflow: hidden;
        .log-title {
          font-family: 'Anton';
          font-weight: 400;
          font-size: 48px;
          color: #FFFFFF;
          margin-top: 23px;
        }
        .closable {
          position: absolute;
          right: -30px;
          top: -30px;
          z-index: 99;
          cursor: pointer;
          img {
            width: 120px;
            height: 120px;
          }
        }
        .log-content {
          min-height: 510px;
          .log-header {
            display: flex;
            li {
              width: 50%;
              height: 48px;
              line-height: 48px;
              text-align: center;
              font-family: 'Poppins';
              font-weight: 400;
              font-size: 14px;
              color: #A8A5AC;
              background: #2d2738;
              &:nth-child(1) {
                border-radius: 50px 0 0 50px;
              }
              // &:nth-child(2) {
              //     width: 40%;
              //   }
              &:nth-child(2) {
                border-radius: 0 50px 50px 0;
              }
            }
          }
          .log-body {
            width: 100%;
            height: 520px;
            overflow-y: auto;
            .pages {
              display: flex;
              width: 100%;
              li {
                width: 50%;
                height: 60px;
                line-height: 60px;
                font-weight: 600;
                font-size: 16px;
                font-family: 'Poppins';
                text-align: center;
              }
              .cec-amount {
                display: flex;
                justify-content: center;
                align-items: center;
                color: #9950FA;
                span {
                  display: flex;
                  justify-content: end;
                  // width: 80px;
                  text-align: right;
                }
                img {
                  width: 28px;
                  height: 25px;
                  margin-left: 15px;
                }
              }
            }
            .no-data {
              position: relative;
              margin-top: 60px;
              div {
                width: 260px;
                height: 260px;
                margin: 0 auto;
              }
              p {
                position: absolute;
                bottom: 50px;
                left: 52%;
                transform: translateX(-50%);
                font-family: 'Poppins';
                font-weight: bold;
                font-size: 28px;
                color: #8587B2;
              }
            }
            &::-webkit-scrollbar {
              width: 5px;
            }
            &::-webkit-scrollbar-track {
              background: #171220;
              border-radius: 2px;
            }
            &::-webkit-scrollbar-corner {
              display: block;
            }
            &::-webkit-scrollbar-thumb {
              height: 15px;
              background: #9950fd;
              border-radius: 10px;
            }
          }
        }
        .pagination {
          display: flex;
          align-items: center;
          justify-content: space-between;
          // background: #1778f1;
          // .prev {
          //   // width: 100px;
          //   // height: 100px;
          //   display: flex;
          //   align-items: center;
          //   div {
          //     width: 100px;
          //     height: 100px;
          //   }
          // }
          .pager {
            span {
              display: inline-block;
              width: 29px;
              height: 29px;
              line-height: 29px;
              text-align: center;
              border-radius: 10px;
              margin: 0 5px;
              background: #2d2738;
              font-family: 'Poppins';
              font-weight: 200;
              font-size: 14px;
              cursor: pointer;
            }
            .active {
              background: #5d5275;
            }
          }
          .prev, .next {
            // width: 100px;
            // height: 100px;
            display: flex;
            align-items: center;
            font-family: 'Poppins';
            font-weight: 600;
            font-size: 16px;
            color: #9950FD;
            cursor: pointer;
            div {
              width: 100px;
              height: 100px;
            }
          }
          img {
            width: 100%;
            height: 100%;
          }
        }
        .ant-table-wrapper {
          .ant-spin-nested-loading {
            .ant-spin-container {
              .ant-table {
                background: #2d2738;
                border-bottom: 0px solid #2d2738;
                color: #FFF;
                .ant-table-container {
                  .ant-table-content {
                    .ant-table-thead {
                      border-radius: 60px;
                      tr {
                        border-radius: 60px;
                        overflow: hidden;
                        height: 40px;
                        line-height: 40px;
                        th {
                          background: #2d2738;
                          border-color: rgba(0,0,0,0);
                          text-align: center;
                          font-family: 'Poppins';
                          font-weight: 400;
                          font-size: 14px;
                          color: #A8A5AC;
                          border-radius: 50px !important;
                          padding: 0;
                          overflow: hidden;
                          &::before {
                            display: none;
                          }
                        }
                        .ant-table-cell {
                          overflow: hidden;
                          border-radius: 50px !important;
                        }
                      }
                      .ant-table-cell {
                          overflow: hidden;
                          border-radius: 50px !important;
                        }
                    }
                    .ant-table-tbody {
                      tr {
                        background: #16141b;
                        td {
                          border-color: rgba(0,0,0,0);
                          background: #16141b !important;
                          overflow: visible !important;
                          vertical-align: middle;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  :deep(.cecLogModal) {
    width: 1052px !important;
    height: 714px;
    background: #1A1821;
    box-shadow: 0px 15px 28px 3px rgba(22,22,22,0.13);
    border-radius: 100px;
    border: 1px solid #B966FF;
    .ant-modal-content {
      padding: 0 99px;
      color: #FFF;
      background: #1A1821;
      border-radius: 100px;
      .ant-modal-body {
        overflow: hidden;
        .log-title {
          font-family: 'Anton';
          font-weight: 400;
          font-size: 48px;
          color: #FFFFFF;
          margin-top: 23px;
        }
        .closable {
          position: absolute;
          right: -30px;
          top: -30px;
          z-index: 99;
          cursor: pointer;
          img {
            width: 120px;
            height: 120px;
          }
        }
        .log-content {
          min-height: 510px;
          .log-header {
            display: flex;
            li {
              width: 30%;
              height: 48px;
              line-height: 48px;
              text-align: center;
              font-family: 'Poppins';
              font-weight: 400;
              font-size: 14px;
              color: #A8A5AC;
              background: #2d2738;
              &:nth-child(1) {
                border-radius: 50px 0 0 50px;
              }
              &:nth-child(2) {
                  width: 40%;
                }
              &:nth-child(3) {
                border-radius: 0 50px 50px 0;
              }
            }
          }
          .log-body {
            width: 100%;
            .pages {
              display: flex;
              width: 100%;
              li {
                width: 30%;
                height: 60px;
                line-height: 60px;
                font-weight: 600;
                font-size: 16px;
                font-family: 'Poppins';
                text-align: center;
                &:nth-child(2) {
                  width: 40%;
                }
              }
              .cec-amount {
                display: flex;
                justify-content: center;
                align-items: center;
                color: #9950FA;
                img {
                  width: 25px;
                  height: 28px;
                  margin-left: 15px;
                }
              }
            }
            .no-data {
              position: relative;
              margin-top: 60px;
              div {
                width: 260px;
                height: 260px;
                margin: 0 auto;
              }
              p {
                position: absolute;
                bottom: 50px;
                left: 52%;
                transform: translateX(-50%);
                font-family: 'Poppins';
                font-weight: bold;
                font-size: 28px;
                color: #8587B2;
              }
            }
          }
        }
        .pagination {
          display: flex;
          align-items: center;
          justify-content: space-between;
          // background: #1778f1;
          // .prev {
          //   // width: 100px;
          //   // height: 100px;
          //   display: flex;
          //   align-items: center;
          //   div {
          //     width: 100px;
          //     height: 100px;
          //   }
          // }
          .pager {
            span {
              display: inline-block;
              width: 29px;
              height: 29px;
              line-height: 29px;
              text-align: center;
              border-radius: 10px;
              margin: 0 5px;
              background: #2d2738;
              font-family: 'Poppins';
              font-weight: 200;
              font-size: 14px;
              cursor: pointer;
            }
            .active {
              background: #5d5275;
            }
          }
          .prev, .next {
            // width: 100px;
            // height: 100px;
            display: flex;
            align-items: center;
            font-family: 'Poppins';
            font-weight: 600;
            font-size: 16px;
            color: #9950FD;
            cursor: pointer;
            div {
              width: 100px;
              height: 100px;
            }
          }
          img {
            width: 100%;
            height: 100%;
          }
        }
        .ant-table-wrapper {
          .ant-spin-nested-loading {
            .ant-spin-container {
              .ant-table {
                background: #2d2738;
                border-bottom: 0px solid #2d2738;
                color: #FFF;
                .ant-table-container {
                  .ant-table-content {
                    .ant-table-thead {
                      border-radius: 60px;
                      tr {
                        border-radius: 60px;
                        overflow: hidden;
                        height: 40px;
                        line-height: 40px;
                        th {
                          background: #2d2738;
                          border-color: rgba(0,0,0,0);
                          text-align: center;
                          font-family: 'Poppins';
                          font-weight: 400;
                          font-size: 14px;
                          color: #A8A5AC;
                          border-radius: 50px !important;
                          padding: 0;
                          overflow: hidden;
                          &::before {
                            display: none;
                          }
                        }
                        .ant-table-cell {
                          overflow: hidden;
                          border-radius: 50px !important;
                        }
                      }
                      .ant-table-cell {
                          overflow: hidden;
                          border-radius: 50px !important;
                        }
                    }
                    .ant-table-tbody {
                      tr {
                        background: #16141b;
                        td {
                          border-color: rgba(0,0,0,0);
                          background: #16141b !important;
                          overflow: visible !important;
                          vertical-align: middle;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  :deep(.confirmModal) {
    .content {
      display: flex;
      .confirm-header {}
      .confirm-content {
        .btn {
          width: 80px;
          height: 30px;
          line-height: 30px;
          span {
            display: inline-block;
            width: 100%;
            height: 100%;
            background: #3a3b57;
            cursor:no-drop;
          }
          .yes {
            background: #f59a23;
            cursor: pointer;
          }
        }
      }
    }
  }
  :deep(.rulesModal) {
    width: 1152px !important;
    height: 805px;
    background: #1A1821;
    box-shadow: 0px 15px 28px 3px rgba(22,22,22,0.13);
    border-radius: 100px;
    border: 1px solid #B966FF;
    .ant-modal-content {
      width: 944px;
      margin: 0 auto;
      color: #FFF;
      background: #1A1821;
      border-radius: 100px;
      box-shadow: 0 0 0 0;
      .ant-modal-body {
        overflow: hidden;
        .log-title {
          width: 944px;
          margin: 0 auto;
          font-family: 'Anton';
          font-weight: 400;
          font-size: 48px;
          color: #FFFFFF;
          margin-top: 23px;
          border-bottom: 2px solid #3D4057;
        }
        .closable {
          position: absolute;
          right: -120px;
          top: -30px;
          z-index: 99;
          cursor: pointer;
          img {
            width: 120px;
            height: 120px;
          }
        }
        h3 {
          font-family: 'Poppins';
          font-weight: bold;
          font-size: 29px;
          color: #FFFFFF;
          margin-top: 20px;
        }
        .staking-content {
          display: flex;
          justify-content: space-between;
          li {
            width: 427px;
            border-radius: 50px;
            h4 {
              font-family: 'Poppins';
              font-weight: bold;
              font-size: 30px;
              color: #AB74EA;
              text-align: center;
            }
            .hero-title {
              height: 50px;
              line-height: 50px;
              background: #604680;
              border-radius: 30px 30px 0 0;
              font-family: 'Poppins';
              font-weight: bold;
              font-size: 18px;
              color: #F6F6F6;
              span {
                display: inline-block;
                text-align: center;
                &:nth-child(1) {
                  width: 127px;
                  border-right: 2px solid #1a1821;
                }
                &:nth-child(2) {
                  width: 300px;
                }
              }
            }
            .hero-body {
              div {
                height: 46px;
                line-height: 46px;
                text-align: center;
                background: #2d2738;
                font-family: 'Poppins';
                font-weight: 600;
                font-size: 20px;
                color: #F3F0FF;
                border-top: 2px solid #1a1821;
                span {
                  display: inline-block;
                  text-align: center;
                  &:nth-child(1) {
                    width: 127px;
                    border-right: 2px solid #1a1821;
                  }
                  &:nth-child(2) {
                    width: 300px;
                  }
                }
                &:last-child {
                  border-radius: 0 0 30px 30px;
                }
              }
            }
          }
        }
      }
    }
  }
  :deep(.rechargeLogModal) {
    width: 1052px !important;
    height: 714px;
    background: #1A1821;
    box-shadow: 0px 15px 28px 3px rgba(22,22,22,0.13);
    border-radius: 100px;
    border: 1px solid #B966FF;
    .ant-modal-content {
      padding: 0 99px;
      color: #FFF;
      background: #1A1821;
      border-radius: 100px;
      .ant-modal-body {
        .log-title {
          font-family: 'Anton';
          font-weight: 400;
          font-size: 48px;
          color: #FFFFFF;
          margin-top: 23px;
        }
        .closable {
          position: absolute;
          right: -30px;
          top: -30px;
          z-index: 99;
          cursor: pointer;
          img {
            width: 120px;
            height: 120px;
          }
        }
        .log-content {
          min-height: 510px;
          .log-header {
            display: flex;
            li {
              width: 30%;
              height: 48px;
              line-height: 48px;
              text-align: center;
              font-family: 'Poppins';
              font-weight: 400;
              font-size: 14px;
              color: #A8A5AC;
              background: #2d2738;
              &:nth-child(1) {
                border-radius: 50px 0 0 50px;
              }
              &:nth-child(2) {
                  width: 40%;
                }
              &:nth-child(3) {
                border-radius: 0 50px 50px 0;
              }
            }
          }
          .log-body {
            width: 100%;
            .pages {
              display: flex;
              width: 100%;
              li {
                width: 30%;
                height: 60px;
                line-height: 60px;
                font-weight: 600;
                font-size: 16px;
                font-family: 'Poppins';
                text-align: center;
                &:nth-child(2) {
                  width: 40%;
                }
              }
              .cec-amount {
                display: flex;
                justify-content: center;
                align-items: center;
                color: #9950FA;
                img {
                  width: 25px;
                  height: 28px;
                  margin-left: 15px;
                }
              }
            }
            .no-data {
              position: relative;
              margin-top: 60px;
              div {
                width: 260px;
                height: 260px;
                margin: 0 auto;
              }
              p {
                position: absolute;
                bottom: 50px;
                left: 52%;
                transform: translateX(-50%);
                font-family: 'Poppins';
                font-weight: bold;
                font-size: 28px;
                color: #8587B2;
              }
            }
          }
        }
        .pagination {
          display: flex;
          align-items: center;
          justify-content: space-between;
          // background: #1778f1;
          // .prev {
          //   // width: 100px;
          //   // height: 100px;
          //   display: flex;
          //   align-items: center;
          //   div {
          //     width: 100px;
          //     height: 100px;
          //   }
          // }
          .pager {
            span {
              display: inline-block;
              width: 29px;
              height: 29px;
              line-height: 29px;
              text-align: center;
              border-radius: 10px;
              margin: 0 5px;
              background: #2d2738;
              font-family: 'Poppins';
              font-weight: 200;
              font-size: 14px;
              cursor: pointer;
            }
            .active {
              background: #5d5275;
            }
          }
          .prev, .next {
            // width: 100px;
            // height: 100px;
            display: flex;
            align-items: center;
            font-family: 'Poppins';
            font-weight: 600;
            font-size: 16px;
            color: #9950FD;
            cursor: pointer;
            div {
              width: 100px;
              height: 100px;
            }
          }
          img {
            width: 100%;
            height: 100%;
          }
        }
        .ant-table-wrapper {
          .ant-spin-nested-loading {
            .ant-spin-container {
              .ant-table {
                background: #2d2738;
                border-bottom: 0px solid #2d2738;
                color: #FFF;
                .ant-table-container {
                  .ant-table-content {
                    .ant-table-thead {
                      border-radius: 60px;
                      tr {
                        border-radius: 60px;
                        overflow: hidden;
                        height: 40px;
                        line-height: 40px;
                        th {
                          background: #2d2738;
                          border-color: rgba(0,0,0,0);
                          text-align: center;
                          font-family: 'Poppins';
                          font-weight: 400;
                          font-size: 14px;
                          color: #A8A5AC;
                          border-radius: 50px !important;
                          padding: 0;
                          overflow: hidden;
                          &::before {
                            display: none;
                          }
                        }
                        .ant-table-cell {
                          overflow: hidden;
                          border-radius: 50px !important;
                        }
                      }
                      .ant-table-cell {
                          overflow: hidden;
                          border-radius: 50px !important;
                        }
                    }
                    .ant-table-tbody {
                      tr {
                        background: #16141b;
                        td {
                          border-color: rgba(0,0,0,0);
                          background: #16141b !important;
                          overflow: visible !important;
                          vertical-align: middle;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  :deep(.ant-modal-wrap) {
    // z-index: 10;
  }
  :deep(.rechargeListModal) {
    width: 1219px !important;
    height: 895px;
    background: #1A1821;
    box-shadow: 0px 15px 28px 3px rgba(22,22,22,0.13);
    border-radius: 100px;
    border: 1px solid #B966FF;
    top: 50px;
    z-index: 10;
    .ant-modal-content {
      width: 100%;
      padding: 0;
      background: none;
      color: #fff;
      box-shadow: 0 0 0 0;
      .ant-modal-body {
        width: 100%;
        text-align: center;
        .title {
          font-family: 'Anton';
          font-weight: 400;
          font-size: 48px;
          margin-top: 25px;
        }
        .closable {
          position: absolute;
          top: -50px;
          right: -50px;
          cursor: pointer;
        }
        p {
          font-family: 'Poppins';
          font-weight: 400;
          font-size: 20px;
          color: #9950FD;
        }
        .content {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-evenly;
          clear: both;
          margin-top: 7px;
          .item {
            width: 332px;
            height: 258px;
            border-radius: 40px;
            background: #2d2738;
            margin-top: 31px;
            cursor: pointer;
            position: relative;
            .activity {
              position: absolute;
              top: 0;
              left: 0;
              width: 77px;
              height: 74px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .item-img {
              width: 312px;
              height: 206px;
              margin: 0 auto;
              padding: 5px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .item-amount {
              font-family: 'Poppins';
              font-weight: bold;
              font-size: 36px;
              line-height: 1;
            }
            .item-amount-input {
              width: 222px;
              height: 42px;
              display: flex;
              align-items: center;
              justify-content: space-evenly;
              margin: 0 auto;
              background: #1E1B26;
              border-radius: 21px;
              input {
                color: #fff;
                width: 100px;
                height: 42px;
                border: 0px;
                text-align: center;
              }
            }
          }
        }
        .conform-btn {
          width: 427px;
          height: 81px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #FEC25D;
          box-shadow: 0px 15px 28px 3px rgba(22,22,22,0.13);
          border-radius: 30px;
          margin: 0 auto;
          margin-top: 56px;
          font-family: 'Poppins';
          font-weight: bold;
          font-size: 36px;
          color: #2D2738;
          cursor: pointer;
          span {
            display: inline-block;
            width: 100px;
            text-align: right;
          }
          img {
            width: 54px;
            height: 54px;
            margin-left: 16px;
          }
        }
      }
    }
  }
}
</style>