<template>
  <div class="shareMaskDiv" v-if="show">
    <basicPop :title="title" @closeClick="closeClick">
      <div class="context1">
        <div class="clientLogList m-top-20">
          <div class="list1 list-m-left">参与时间</div>
          <div class="list2">下注</div>
          <div class="list3">中奖状态</div>
          <div class="list4">奖励积分</div>
        </div>

        <div class="formInfo" v-if="firendList.length > 0">
          <div
            class="formitem"
            v-for="(item, index) in firendList"
            :key="index"
          >
          <div class="clientLogListInner">
          <div class="list1">{{item.createTime}}</div>
          <div class="list2">{{item.consumeIntegral}}</div>
          <div class="list3">{{item.status}}</div>
          <div class="list4">{{item.rewardIntegral}}</div>
        </div>
            
          </div>
        </div>
        <div class="formInfo1" v-if="firendList.length == 0">
          暂无游戏记录~
        </div>
        <!-- <div class="context" v-html="ruleText"></div> -->
      </div>
    </basicPop>
  </div>
</template>

<script>
import basicPop from "./basicPopNew.vue";
import apis1 from "../../../util/apis1.js";
import dateUtil from "../../../util/dateUtil.js";
let { getGameRecord } = apis1;
export default {
  props: [],
  components: {
    basicPop,
  },
  data() {
    return {
      title: "游戏记录",
      firendList: [],
    };
  },
  created() {
    document
      .querySelector("body")
      .setAttribute(
        "style",
        "position:#fixed;top:0;height:100%;overflow:hidden"
      );

    this.initData();
  },
  methods: {
    initData() {
      getGameRecord((data) => {
        this.firendList = data.data;
        for (var i = 0; i < this.firendList.length; i++) {
          this.firendList[i].createTime = dateUtil.dateChangeYYYY(
            this.firendList[i].createTime,
            1
          );
        }
      });
    },
    closeClick() {
      document.querySelector("body").removeAttribute("style");
      this.submit();
    },
  },
};
</script>

<style lang="scss">
.shareMaskDiv {
  .basicPopDiv {
    height: 9.13rem;
    .context1 {
      margin-top: 0.2rem;
      height: 100%;
      display: flex;
      // align-items: center;
      justify-content: center;
      font-size: 0.24rem;
      color: #333333;
      flex-wrap: wrap;
    }
    .clientLogList{
      font-size: .3rem;
      color: #010101;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: space-between;
      text-align: center;
      width: 100%;
    }
    .clientLogListInner{
      font-size: .24rem;
      color: #010101;
      display: flex;
      align-items: center;
      justify-content: space-between;
      text-align: center;
      width: 100%;
    }
    .list-m-left{
      margin-left: 2%;
    }
    .m-top-20{
      margin-bottom: .2rem;
    }
    .list1{
      width: 2.8rem;
    }
    .list2{
      width: 1.23rem;

    }
    .list3{
      width: 1.74rem;
    }
    .list4{
      width: calc(100% - 5.77rem);
    }
   
    .formInfo {
      width: 96%;
      height: 7rem;
      overflow-y: scroll;
      .formitem {
        width: 100%;
        height: 0.56rem;
        margin-top: 0.05rem;
        background-color: #ffd578;
        border-radius: .12rem;
        display: flex;

        .infoLeft {
          display: flex;
          align-items: center;
          height: 100%;
          width: 50%;
          img {
            width: 0.5rem;
            height: 0.5rem;
            border-radius: 50%;
            margin-left: 0.2rem;
            margin-right: 0.2rem;
          }
        }
        .infoRight {
          display: flex;
          align-items: center;
          height: 100%;
          width: 50%;
          padding-left: 0.9rem;
        }
      }
    }
    .formInfo1{
      width: 100%;
      text-align: center;
      margin-top: 3rem;
    }
    .context {
      height: 7.5rem;
      overflow-y: scroll;
      padding: 0 0.3rem;
      word-break: break-all;
      line-height: 0.4rem;
    }
  }
}
</style>
