<template>
  <div class="box">
    <div class="page-bg">
      <img
        src="./images/rulebg.png"
        class="bg-img"
        mode="widthFix"
      />
    </div>
    <div class="content">
      <div class="content-cell">
        <div class="cell-top">
          <div class="iconfont icon-duobianxing"></div>
          <div class="title">我的奖品</div>
          <div class="iconfont icon-duobianxing"></div>
        </div>

        <div
          class="infinite-list"
          infinite-scroll-distance="10"
          v-infinite-scroll="loadData" :style="{height:(windowHeight - 50 - 20 - 34 - 10)+'px'}" v-if="list && list.length">
          <div class="reward-item-box" v-for="item in list" :key="item">
            <div class="reward-item" @click="toRewardDetail(item)">
              <div class="reward-img-box">
                <img :src="item.prizeImageUrl" class="reward-img" mode="scaleToFit"/>
              </div>
              <div class="reward-info">
                <div class="reward-name">{{ item.prizeName }}</div>
                <div class="reward-condition">{{ item.prizeDesc || '' }}</div>
                <div class="reward-time">{{ item.prizeTime | formatDate }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="empty-box" v-else-if="haveLoad" :style="{height:(windowHeight - 50 - 20 - 34 - 10)+'px'}">
          <img class="empty-img" src="./images/mould_01_fail_pic.png" mode="widthFix">
          <div class="title">这里空空如也</div>
          <div class="subtitle">还没有获得任何奖品哦~赶紧拆盲盒赢取好礼吧！</div>
          <div class="play-btn" @click="toPlay">去拆盲盒</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { gameRequestApi } from "@/api/common.js";
const { getMyReward } = gameRequestApi;
import { Manager } from "../../manager";
export default {
  components: {},
  data() {
    return {
      list:[],
      pageSize: 20,
      currentPage: 1,
      totalCount: 0,
    };
  },
  created() {
    document.title = "我的奖品";
    this.manager = new Manager(this);
    this.windowHeight = window.innerHeight;
    this.reloadData();
  },
  methods: {
    reloadData(){
      this.currentPage = 1;
      this.totalCount = 0;
      this.loadData();
    },
    toRewardDetail(item) {
      switch (+item.prizeType) {
        case 0:
          break;
        case 1:
          this.manager.toIntegralDetail();
          break;
        case 2:
          this.manager.toCouponList();
          break;
        case 3:
          break;
        default:
          break;
      }
    },
    async loadData() {
      if(this.list.length >= this.totalCount && this.totalCount != 0){
        return;
      }
      let query = this.$route.query;
      let res = await getMyReward({
        ...query,
        currentPage: this.currentPage,
        pageSize: this.pageSize
      })
      this.haveLoad = true;
      this.totalCount = res.totalCount;
      let list = this.list || [];
      if(this.currentPage == 1){
        list = res.result||[];
      }else{
        list = list.concat(res.result||[])
      }
      this.currentPage ++;
      this.list = list;
    },
    toPlay(){
      this.$router.replace({
        path: "/",
        query: this.$route.query,
      });
    },
  },
  filters:{
    formatDate(value){
      if (!value) return '--';
      let date = new Date(value);
      return date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日"
    }
  }
};
</script>

<style scoped>
.box {
  position: relative;
}

.page-bg {
  position: fixed;
  z-index: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #addfcd;
}

.page-bg .bg-img {
  width: 100%;
}

.content {
  position: relative;
  z-index: 1;
}

.content-cell {
  border-radius: 8px;
  border: 1px solid #21252B;
  background: white;
  margin: 12px 12px 3px;
  width: calc(100% - 24px);
  box-sizing: border-box;
}

.cell-top {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: linear-gradient(
    180deg,
    #D9FCF5 0%,
    rgba(238, 247, 225, 0.3) 100%
  );
  border-radius: 8px 8px 0 0;
}

.cell-top .title {
  color: #27292b;
  font-size: 17px;
  padding: 0 10px;
  font-weight: 600;
}

.cell-top .iconfont {
  color: #21252B;
  font-size: 15px;
}

.infinite-list {
  overflow: auto;
  padding: 10px 13px;
  margin-bottom: 1px;
}
.reward-item-box{
  padding: 5px 0;
}
.reward-item{
  display: flex;
  padding: 12px;
  background: #F6F6F6;
  border-radius: 4px;
}

.reward-item .reward-img-box{
  width: 80px;
  height: 80px;
  background: white;
  border-radius: 2px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reward-item .reward-img-box .reward-img{
  width: 66px;
  height: 66px;
}

.reward-item .reward-info{
  padding-left: 10px;
}
.reward-info .reward-name{
  color: #21252B;
  font-size: 14px;
  font-weight: 600;

  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.reward-info .reward-condition{
  padding: 3px 0 5px;
  color: #21252B;
  font-weight: 300;
  font-size: 12px;
  height: 33px;
}

.reward-info .reward-time{
  color: #21252B;
  font-weight: 300;
  font-size: 13px;
}




.empty-box{
  text-align: center;
  background: white;
}
.empty-box .empty-img{
  margin: 0 auto;
  padding: 80px 0 20px;
  width: 180px;
  height: 167px;
}

.empty-box .title{
  color: #21252B;
  font-size: 16px;
  font-weight: 600;
  padding: 0 9px;
}

.empty-box .subtitle{
  color: #63666B;
  font-size: 14px;
  max-width: 229px;
  margin: 0 auto;
}

.empty-box .play-btn{
  margin: 25px auto 0;
  width: 180px;
  height: 38px;
  line-height: 36px;
  box-sizing: border-box;
  border-radius: 19px;
  border: 1px solid #12B4BB;
  text-align: center;
  color: #12B4BB;
  font-size: 14px;
  font-weight: 600;
}
</style>
