<template>
  <div class="box-content">
    <div class="box-btm-left">
      <div class="box-page">
        <div class="box-title">
          <div class="box-title-top">
            Boosting Records
          </div>
          <div class="line"></div>
        </div>
        <div class="box-boosting-no" v-if="boostingList.length == 0">
          <div>
            <p>None</p>
          </div>
        </div>
        <div class="box-boosting" v-else>
          <li v-for="(item, index) in boostingList" :key="index">
            <div class="left">
              <div class="user-img" v-if="index == 0">
                <img class="one-bg" src="./../../assets/common/Picture frame.png" alt="">
                <img class="one-img" v-if="item.avatar != ''" :src="item.avatar" alt="">
                <img class="one-img" v-else src="./../../assets/common/head_default.jpg" alt="">
              </div>
              <div class="user-img" v-else>
                <img v-if="item.avatar != ''" :src="item.avatar" alt="">
                <img src="./../../assets/common/head_default.jpg" alt="">
              </div>
              <div class="user-name">{{ item.nickname }}</div>
            </div>
            <div class="right">
              <div class="records">{{ item.score }}</div>
              <div class="icon">
                <img src="./../../assets/common/Icon_Points.png" alt="">
              </div>
            </div>
          </li>
        </div>
        
      </div>
      <div class="box-log">
        <div class="btn" @click="recordsDialogVisible = true">
          <div class="icon">
            <img src="./../../assets/box/Icon_history.png" alt="">
          </div>
          <div>History Records</div>
        </div>
        <div class="btn" @click="boostingDialogVisible = true">
          <div class="icon">
            <img src="./../../assets/box/Icon_boost.png" alt="">
          </div>
          <div>Boosting Records</div>
        </div>
      </div>
    </div>
    <div class="box-btm-con">
      <div class="content-no" v-if="!boxData">
        <div class="box-img-no">
          <img src="./../../assets/box/Unlock .png" alt="">
        </div>
        <div class="box-to-explore">
          <p>Explore to get more </p>
          <p>treasure chests</p>
          <div class="to-explore-btn" @click="toExplore">
            To explore
          </div>
        </div>
      </div>
      <div class="content" v-else>
        <div class="box-btm-con-title">
          <div class="box-btm-con-title-top">
            <div class="icon">
              <img src="./../../assets/box/Icon_Star_01.png" alt="">
            </div>
            <div>BONUS!</div>
            <div class="icon">
              <img src="./../../assets/box/Icon_Star_01.png" alt="">
            </div>
          </div>
          <div class="box-btm-con-title-btm">LEGENDARY</div>
        </div>
        <div class="box-btm-con-img">
          <div>
            <img v-if="!boxData.level" src="./../../assets/box/Unlock .png" alt="">
            <img v-else :src="require(`./../../assets/box/box0${boxData.level}.png`)" alt="">
          </div>
        </div>
        <div class="box-btm-con-boost">
          <div class="boost">
            <p>Invite friends to Boost,</p>
            <p>Earn more rewards</p>
            <div class="copy-btn" @click="copyLink(boxData)">
              <div class="icon">
                <img src="@/assets/box/Invite_icon.png" alt="">
              </div>
              <div>Invite friends to Boost</div>
            </div>
          </div>
        </div>
        <div class="box-btm-con-btn">
          <div class="box-btn-content">
            <div class="box-btm-con-btn-bar">
              <div class="bar" ref="pendingBg"></div>
              <div class="amount" v-if="(boxData.bounsCount < boxData.maxBounsCount)">{{ boxData.bounsCount }}/{{ boxData.maxBounsCount }}</div>
              <div class="max" v-else>MAX</div>
            </div>
            <div class="box-btm-con-btn-tips">* Opening treasure will consume a small amount of gas </div>
            <div class="box-btn" @click="openBoxToChain(boxData.id)">Open</div>
          </div>
        </div>
      </div>
    </div>
    <div class="box-btm-right">
      <div class="box-page">
        <div class="box-title">
          <div class="box-title-top">
            My treasure
          </div>
          <div class="box-title-btm">
          </div>
        </div>
        <div class="box-list-no" v-if="!currentPageItems">
          <div>
            <p>None</p>
          </div>
        </div>
        <div class="box-list" v-else>
          <li v-for="(item, index) in currentPageItems" :key="index" @click="getBoxData(item)">
            <div class="box-img" v-if="item.id == boxData.id">
              <img :src="require(`./../../assets/box/box${item.level}.png`)" alt="">
            </div>
            <div class="box-img" v-else>
              <img class="box-hover-no" :src="require(`./../../assets/box/box0${item.level}.png`)" alt="">
              <img class="box-hover-yes" :src="require(`./../../assets/box/box${item.level}.png`)" alt="">
            </div>
            <div class="box-bg"></div>
            <div class="box-name">
              Boosting <span v-if="item.bounsCount == item.maxBounsCount" class="success">({{ item.bounsCount }}/{{ item.maxBounsCount }})</span><span v-else>({{ item.bounsCount }}/{{ item.maxBounsCount }})</span>
            </div>
          </li>
        </div>
        <div class="box-pagination" v-if="boxList.length > 6">
          <Pagination @onChangePage="onChangePage" :total="boxList.length"  />
        </div>
      </div>
    </div>

    <!-- 开箱子记录 -->
    <el-dialog class="records-dialog" :visible="recordsDialogVisible" :modal="false" :before-close="recordsHandleClose" :show-close="false">
      <div class="top">
        <div class="top-title">Historical Records</div>
        <div class="top-close" @click="recordsDialogVisible = false">
          <img src="./../../assets/common/CloseButton.png" alt="">
        </div>
      </div>
      <div class="content">
        <el-table :data="recordsCurrentPageItems">
          <template slot="empty">
            <div>No Data</div>
          </template>
          <el-table-column prop="rank" label="Action">Open the Treasure</el-table-column>
          <el-table-column label="Time">
            <template
              slot-scope="scope"
            >{{ scope.row.time | formatDate }}</template>
          </el-table-column>
          <!-- <el-table-column label="Username" :width="180">
            <template
              slot-scope="scope"
            >{{ scope.row.address.slice(0,4) }}{{ '……'+scope.row.username }}</template>
          </el-table-column> -->
          <el-table-column label="Rewards">
            <template slot-scope="{ row }">
              <div v-if="row.score" class="points">
                <div>
                  <span>{{ row.score }}</span>
                <img src="./../../assets/common/Icon_Points.png" alt="">
                </div>
                <div v-if="row.items !== undefined && row.items.length > 0">
                  <span v-if="row.items !== undefined && row.items.length > 0">{{ row.items[0].name }}</span>
                  <img src="./../../assets/common/whitelist01.png" alt="">
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="btm">
        <PaginationDialog  @onChangePage="onRecordsChangePage" :pageSize="recordsPageSize" :total="recordsList.length" />
      </div>
    </el-dialog>

    <!-- 我的助力记录 -->
    <el-dialog class="boosting-dialog" :visible="boostingDialogVisible" :modal="false" :before-close="boostingHandleClose" :show-close="false">
      <div class="top">
        <div class="top-title">Boosting Records</div>
        <div class="top-close" @click="boostingDialogVisible = false">
          <img src="./../../assets/common/CloseButton.png" alt="">
        </div>
      </div>
      <div class="content">
        <el-table :data="boostingCurrentPageItems">
          <template slot="empty">
            <div>No Data</div>
          </template>
          <el-table-column label="Action">Open the Treasure</el-table-column>
          <el-table-column label="Time">
            <template
              slot-scope="scope"
            >{{ scope.row.time | formatDate }}</template>
          </el-table-column>
          <el-table-column label="Username">
            <template
              slot-scope="scope"
            >
            <div class="touxiang">
              <UserImg :imgSrc="scope.row.avatar" />
              {{ scope.row.nickname }}
            </div>
            </template>
          </el-table-column>
          <el-table-column label="Points">
            <template slot-scope="scope">
              <div class="points">
                <span>{{ scope.row.score }}</span>
                <img src="./../../assets/common/Icon_Points.png" alt="">
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="btm">
        <PaginationDialog  @onChangePage="onBoostingChangePage" :pageSize="boostingPageSize" :total="myRecordsList.length" />
      </div>
    </el-dialog>

    <Loading :Loading="isLoading" />
  </div>
</template>

<script>
import { getToken } from './../../utils/cookies.js'
import Pagination from './../../components/pagination.vue'
import { sendOpenChest, sendToChain } from './../../utils/chainapi.js'
import { apiBoxOpen } from '@/utils/webapi.js'
import PaginationDialog from '@/components/paginationDialog.vue'
import Loading from '@/components/loading.vue'
import UserImg from "@/components/userImg.vue"

export default {
  components: {
    Pagination,
    PaginationDialog,
    Loading,
    UserImg,
  },
  data() {
    return {
      token: null,
      boxList: [],
      pageBoxList: [],
      boxData: {},
      userData: {},
      boostingList: [
        
      ],
      pageSize: 6,
      currentPage: 1,
      recordsDialogVisible: false,
      recordsList: [],
      recordsPageSize: 8,
      recordsCurrentPage: 1,
      boostingDialogVisible: false,

      // myRecordsList: [
      //   {
      //     username: 'username',
      //     name: 'username',
      //     points: '12',
      //     address: 'addressaddress',
      //     post: '0000',
      //   },
      //   {
      //     username: 'username',
      //     name: 'username',
      //     points: '12',
      //     address: 'addressaddress',
      //     post: '0000',
      //   },
      //   {
      //     username: 'username',
      //     name: 'username',
      //     points: '12',
      //     address: 'addressaddress',
      //     post: '0000',
      //   },
      //   {
      //     username: 'username',
      //     name: 'username',
      //     points: '12',
      //     address: 'addressaddress',
      //     post: '0000',
      //   },
      //   {
      //     username: 'username',
      //     name: 'username',
      //     points: '12',
      //     address: 'addressaddress',
      //     post: '0000',
      //   },
      //   {
      //     username: 'username',
      //     name: 'username',
      //     points: '12',
      //     address: 'addressaddress',
      //     post: '0000',
      //   },
      //   {
      //     username: 'username',
      //     name: 'username',
      //     points: '12',
      //     address: 'addressaddress',
      //     post: '0000',
      //   },
      //   {
      //     username: 'username',
      //     name: 'username',
      //     points: '12',
      //     address: 'addressaddress',
      //     post: '0000',
      //   },
      //   {
      //     username: 'username',
      //     name: 'username',
      //     points: '12',
      //     address: 'addressaddress',
      //     post: '0000',
      //   },
      //   {
      //     username: 'username',
      //     name: 'username',
      //     points: '12',
      //     address: 'addressaddress',
      //     post: '0000',
      //   },
      //   {
      //     username: 'username',
      //     name: 'username',
      //     points: '12',
      //     address: 'addressaddress',
      //     post: '0000',
      //   }
      // ],

      myRecordsList: [],
      boostingPageSize: 6,
      boostingCurrentPage: 1,
      isLoading: false
    }
  },
  computed: {
    // 计算当前页应该显示的数据
    currentPageItems() {
      // if(this.pageBoxList.length == 0){
      //   return this.pageBoxList
      // }
      let start = (this.currentPage - 1) * this.pageSize;
      let end = start + this.pageSize;
      this.pageBoxList = this.boxList.slice(start, end)
      this.boxData = this.pageBoxList[0]
      return this.pageBoxList;
    },

    // 计算开箱子分页
    recordsCurrentPageItems() {
      // if(this.recordsList.length == 0){
      //   return this.recordsList
      // }
      let start = (this.recordsCurrentPage - 1) * this.recordsPageSize;
      let end = start + this.recordsPageSize;
      return this.recordsList.slice(start, end)
    },

    // 计算我的助力分页
    boostingCurrentPageItems() {
      if(this.myRecordsList.length == 0){
        return this.myRecordsList
      }
      let start = (this.boostingCurrentPage - 1) * this.boostingPageSize;
      let end = start + this.boostingPageSize;
      return this.myRecordsList.slice(start, end)
    },
  },
  mounted() {
    this.token = getToken()
    if(this.token) {
      this.$nextTick(() => {
        this.getMyBoxList()
        this.openBoxLog()
        this.getMyHistoricalLog()
      })
    }
  },
  methods: {
    // 我的宝箱
    async getMyBoxList() {
      let res = await this.$axios
        .get(process.env.VUE_APP_API_URL+"/api/chest/list", {
          params: {},
          headers: { Authorization: `Bearer ${this.token}` }
        })
      this.boxList = res.data.data
      this.boxData = res.data.data[0]
      if(this.boxList.length > 0) {
        await this.getHistorical(this.boxData.id)
        if(this.boxData.bounsCount == 0) {
          this.$refs.pendingBg.style.width = '0%'
        } else {
          let pending = (Number(this.boxData.maxBounsCount) / Number(this.boxData.bounsCount))
          this.$refs.pendingBg.style.width = `${pending}%`
        }
      }
    },

    // 分页
    onChangePage(val) {
      this.currentPage = val
    },
    
    // 修改中间宝箱数据
    async getBoxData(data) {
      this.boxData = data
      await this.getHistorical(data.id)
      if(this.boxData.bounsCount == 0) {
        this.$refs.pendingBg.style.width = '0%'
      } else {
        let pending = (Number(this.boxData.bounsCount) / Number(this.boxData.maxBounsCount)) *100
        this.$refs.pendingBg.style.width = `${pending}%`
      }
    },
    // 助力记录
    async getHistorical(id) {
      let res = await this.$axios
        .post(
          process.env.VUE_APP_API_URL+"/api/chest/enhance/list",
          { chestid: id },
          {
            headers: { Authorization: `Bearer ${this.token}` }
          }
        )
        if(res.data.errcode == 0) {
          this.boostingList = res.data.data
          console.log('助力记录', this.boostingList)
        }
    },
    
    // 开宝箱
    async openBoxToChain(id) {
      let address = this.$store.state.user.address;
      if (!this.$store.state.wallet.connected || !address) {
        throw new Error('wallet not connected')
      }
      let storeageKey
      this.isLoading = true
      try {
        storeageKey = await sendToChain('chest_open', address, id)
      
      } catch (err) {
        this.$showErr(err)
        this.isLoading = false
        return 
      }
      
      let serTimeId = setInterval(async () => {
        try {
          let { errcode, errmsg, data } = await apiBoxOpen(id)
          if (errcode) {
            if (errcode !== 12) {
              // 状态不是等待链上确认的, 都提示错误
              this.$message.error(errmsg)
              this.isLoading = false
              clearInterval(serTimeId)
            } 
          } else {
            // alert(`领取成功,显示奖励: ${JSON.stringify(data)}`)
            this.getMyBoxList()
            this.openBoxLog()
            this.isLoading = false
            this.$emit('awardDialog', data)
            localStorage.removeItem(storeageKey)
            clearInterval(serTimeId)
          }
        } catch (err) {
          this.isLoading = false
          // this.$message.error(`claim task reward error: ${err}`)
        }
      }, 3000)
    },

    // 开箱子记录
    async openBoxLog() {
      let res = await this.$axios.get(process.env.VUE_APP_API_URL+'/api/chest/open/history', {
          params: { },
          headers: { Authorization: `Bearer ${this.token}` }
        })
        this.recordsList = res.data.data
    },
    rewBoxList() {
      this.getMyBoxList()
    },

    // 开箱记录分页
    onRecordsChangePage(val) {
      this.recordsCurrentPage = val
    },

    // 我的助力记录
    async getMyHistoricalLog() {
      let res = await this.$axios.post(process.env.VUE_APP_API_URL+'/api/user/enhance/list', {},{headers: { Authorization: `Bearer ${this.token}` }})
      if(res.data.errcode == 0){
        this.myRecordsList = res.data.data
      }else{
        console.log('[getMyHistoricalLog error]',res)
      }
    },
    // 我的助力记录分页
    onBoostingChangePage(val) {
      this.boostingCurrentPage = val
    },
    
    // 获取用户状态
    getUserState() {
      this.$axios.get(process.env.VUE_APP_API_URL+'/api/user/state',{ params: '',
          headers: { Authorization: `Bearer ${this.token}` },
        }).then(res => {
          localStorage.setItem('userData', JSON.stringify(res.data.data))
        })
    },

    // 复制助力链接
    copyLink(data) {
      this.userData = JSON.parse(localStorage.getItem("userData"))
      let url = `${location.protocol}//${location.host}/home/new=${this.userData.code}/box=${data.shareCode}/id=${data.id}`
      let oInput = document.createElement("input");
      oInput.value = url;
      document.body.appendChild(oInput);
      oInput.select();
      document.execCommand("Copy");
      oInput.className = "oInput";
      oInput.style.display = "none";
      this.$message.success("Copy succeeded");
    },
    
    // 关闭弹窗
    recordsHandleClose() {
      this.recordsDialogVisible = false
    },
    boostingHandleClose() {
      this.boostingDialogVisible = false
    },

    // 去探索页面
    toExplore() {
      this.$emit('toExplore', 1)
    },
  },
};
</script>

<style lang="scss" scoped>
.box-content {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 0 50px;
  .box-btm-left {
    background: url("./../../assets/box/Bg(1).png") no-repeat;
    background-size: 100% 100%;
    .box-page {
      // background: #3c2363;
      .box-title {
        .box-title-top {
          margin-bottom: 10px;
        }
        .line {
          width: 100%;
          height: 2px;
          background: #3c2363;
        }
      }
      .box-boosting {
        height: 530px;
        overflow-y: scroll;
        margin-top: 20px;
        li {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 20px;
          margin-top: 20px;
          .left {
            display: flex;
            align-items: center;
            .user-img {
              width: 40px;
              height: 40px;
              background: url('@/assets/common/Picture frame .png') no-repeat;
              background-size: 100% 100%;
              padding: 3px;
              img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                overflow: hidden;
              }
            }
            .user-name {
              font-size: 16px;
              margin-left: 20px;
            }
          }
          .right {
            display: flex;
            align-items: center;
            .records {
              font-size: 12px;
              color: #9950fd;
            }
            .icon {
              width: 10px;
              height: 12px;
              margin-left: 5px;
              display: flex;
              align-items: center;
              img {
                width: 100%;
                height: 100%;
              }
            } 
          }
          &:nth-child(1) {
            .left {
              .user-img {
                width: 40px;
                height: 40px;
                position: relative;
                .one-bg {
                  width: 60px;
                  height: 60px;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                }
                .one-img {
                  width: 40px;
                  height: 40px;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  border-radius: 50%;
                  overflow: hidden;
                } 
              }
            }
          }
        }
      }
      .box-boosting-no {
        height: 530px;
        margin-top: 20px;
        position: relative;
        div {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 200px;
          height: 140px;
          background: url('./../../assets/box/none01.png') no-repeat;
          background-size: 100% 100%;
          p {
            position: absolute;
            bottom: 8%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 14px;
          }
        }
      }
      ::v-deep .box-boosting::-webkit-scrollbar {
          width: 5px;
        }
      ::v-deep .box-boosting::-webkit-scrollbar-track{
          background: #171220;
          border-radius:2px;
        }
      ::v-deep .box-boosting::-webkit-scrollbar-corner{
          display: block;
        }
      ::v-deep .box-boosting::-webkit-scrollbar-thumb{
        height: 15px;
          background: #9950fd;
          border-radius:10px;
        }
    }
    .box-log {
      display: flex;
      margin: 20px 0;
      margin-top: 40px;
      .btn {
        display: flex;
        align-items: center;
        margin-right: 20px;
        background: #3d3646;
        padding: 5px 20px 5px 10px;
        font-size: 12px;
        border-radius: 15px;
        cursor: pointer;
        .icon {
          margin-right: 8px;
          width: 12px;
          height: 12px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
  .box-btm-con {
    width: 720px;
    height: 700px;
    background: #fff;
    background: url('./../../assets/box/Bg_chest.png') no-repeat;
    background-size: 100% 100%;
    .content-no {
      position: relative;
      height: 100%;
      .box-img-no {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .box-to-explore {
        position: absolute;
        top: 70%;
        left: 50%;
        transform: translateX(-50%);
        font-size: 12px;
        line-height: 1.5;
        .to-explore-btn {
          padding: 5px 0;
          border-radius: 20px;
          margin-top: 15px;
          background: #fec25d;
          color: #000;
          cursor: pointer;
        }
      }
    }
    .content {
      .box-btm-con-title {
        width: 400px;
        // height: 100px;
        margin: 0 auto;
        font-family: 'Anton-Regular';
        .box-btm-con-title-top {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          color: #FFC35B;
          font-size: 58px;
          .icon {
            width: 25px;
            height: 25px;
            display: flex;
            justify-content: center;
            margin: 0 20px;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
        .box-btm-con-title-btm {
          font-size: 32px;
        }
      }
      .box-btm-con-img {
        width: 400px;
        height: 220px;
        margin: 0 auto;
        div {
          width: 260px;
          height: 200px;
          margin: 0 auto;
          margin-top: 20px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .box-btm-con-boost {
        width: 240px;
        // height: 100px;
        padding-top: 20px;
        box-sizing: border-box;
        margin: 0 auto;
        p {
          font-size: 14px;
          line-height: 1.2;
        }
        .copy-btn {
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 20px 0px;
          font-size: 12px;
          background: url('@/assets/box/button_copy.png') no-repeat;
          background-size: 100% 100%;
          border-radius: 20px;
          cursor: pointer;
          .icon {
            margin-right: 5px;
          }
        }
      }
      .box-btm-con-btn {
        width: 700px;
        height: 200px;
        margin: 0 auto;
        .box-btn-content {
          height: 100%;
          position: relative;
          .box-btm-con-btn-bar {
            width: 400px;
            height: 40px;
            position: absolute;
            top: 70%;
            left: 50%;
            transform: translate(-50%, -50%);
            line-height: 40px;
            padding: 3px 8px;
            display: flex;
            // justify-content: center;
            align-items: center;
            margin: 0 auto;
            background: url('@/assets/box/Progress bar_MAX bg.png') no-repeat;
            background-size: 100% 100%;
            .bar {
              // width: 400px;
              height: 36px;
              border-radius: 20px;
              background: url('@/assets/box/Progress bar_MAX.png') no-repeat;
              background-size: 100% 100%;
            }
            .amount {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
            .max {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
          }
          .box-btm-con-btn-tips {
            width: 400px;
            margin: 0 auto;
            margin-top: 10px;
            font-size: 10px;
            text-align: left;
            position: absolute;
            left: 50%;
            top: 82%;
            transform: translate(-50%, -50%);
          }
          .box-btn {
            width: 200px;
            height: 200px;
            line-height: 200px;
            position: absolute;
            top: 20%;
            right: 5%;
            background: url('@/assets/box/Button_Ceiling.png') no-repeat;
            background-size: 100% 100%;
            cursor: pointer;
          }
        }
      }
    }
  }
  .box-btm-right {
    background: url("./../../assets/box/chest bg.png") no-repeat;
    background-size: 100% 100%;
  }
  .box-btm-left,
  .box-btm-right {
    width: 380px;
    height: 600px;
    padding: 30px;
    .box-page {
      .box-title {
        .box-title-top {
          font-size: 32px;
          font-weight: 700;
          text-align: left;
        }
        .box-title-btm {
          text-align: right;
          font-size: 12px;
          border-bottom: 2px solid #3b334a;
          margin: 10px 0;
          padding-bottom: 10px;
        }
      }
      .box-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        height: 500px;
        li {
          height: 140px;
          flex: 1;
          margin: 10px 10px 10px 0;
          width: calc((100% - 10px) / 2);
          min-width: calc((100% - 10px)  / 2);
          max-width: calc((100% - 10px)  / 2);
          position: relative;
          cursor: pointer;
          .box-img {
            width: 160px;
            height: 100px;
            margin: 0 auto;
            margin-bottom: 10px;
            position: relative;
            z-index: 9;
            img {
              width: 100%;
              height: 100%;
            }
            .box-hover-yes {
              display: none;
            }
          }
          .box-bg {
            width: 160px;
            height: 120px;
            position: absolute;
            left: 50%;
            top: 30%;
            transform: translateX(-50%);
            background: url('@/assets/box/Treasure Chest_bg.png') no-repeat;
            background-size: 100% 100%;
            z-index: 0;
          }
          .box-name {
            position: relative;
            z-index: 9;
          }
          .success {
            color: #31a21d;
          }
          &:nth-child(2n) { 
            margin-right: 0;
          }
          &:hover {
            .box-img {
              .box-hover-no {
                display: none;
              }
              .box-hover-yes {
                display: block;
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }
      .box-list-no {
        height: 500px;
        position: relative;
        div {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 200px;
          height: 140px;
          background: url('./../../assets/box/none01.png') no-repeat;
          background-size: 100% 100%;
          p {
            position: absolute;
            bottom: 8%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 14px;
          }
        }
      }
    }
    .box-pagination {
      margin-top: 20px;
    }
  }
  .records-dialog,
  .boosting-dialog {
    ::v-deep .el-dialog {
      border: 1px solid #924df2;
      // box-shadow: 0px 0px 20px #924df2;
      background: #1a1821;
      border-radius: 80px;
      padding: 0px 50px;
      .el-dialog__header {
        padding: 0;
      }
      .el-dialog__body {
        position: relative;
        .top {
          display: flex;
          
          .top-title {
            color: #fff;
            font-size: 28px;
            font-family: "Anton-Regular";
          }
          .top-close {
            position: absolute;
            top: -8%;
            right: -9%;
            width: 100px;
            height: 100px;
            cursor: pointer;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
        .content {
          margin: 20px 0;
          height: 450px;
          .el-table {
            background: #1a1821;
            .el-table__header-wrapper {
              border-radius: 20px;
              .el-table__header {
                tr {
              background: #1a1821;

                  overflow: hidden;
                  .el-table__cell {
                    border: 0px;
                    background: #2d2738;
                    color: #fff;
                  }
                  .el-table__cell:last-child {
                    border-radius: 0 20px 20px 0 !important;
                  }
                }
              }
            }
            .el-table__body-wrapper {
              .el-table__body {
                .el-table__row {
                  background: #1a1821;
                  .el-table__cell {
                    color: #fff;
                    border: 0px;
                    .points {
                      color: #9950FA;
                      font-family: 'Poppins';
                      font-weight: 600;
                      font-size: 16px;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      img {
                        width: 10px;
                        height: 14px;
                        margin-left: 10px;
                        margin-top: 2px;
                      }
                      div {
                        width: 55px;
                        margin-left: 5px;
                        text-align: right;
                      }
                      div:nth-child(2) {
                        width: 105px;
                        margin-left: 20px;
                        display: flex;
                        align-items: center;
                        img {
                          width: 20px;
                          height: 15px;
                        }
                      }
                    }
                    .touxiang {
                      display: flex;
                      align-items: center;
                      justify-content: space-between;
                    }
                  }
                }
              }
              tr:hover {
                background: none !important;
                td {
                  background: none;
                }
              }
            }
            &::before {
              background: #1a1821;
            }
          }
        }
        .btm {
          color: #fff;
        }
      }
    }
  }
  .records-dialog {
    ::v-deep .el-dialog {
      .el-dialog__body {
        .content {
          .el-table {
            .el-table__body-wrapper {
              .el-table__body {
                .el-table__row {
                  .el-table__cell {
                    padding-bottom: 0;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>