<template>
  <div v-show="show">
    <basicPop title="游戏记录" @closeClick="closeClick">
             <table class="tableDiv" style="margin-top: 0.32rem;">
          <thead>
            <tr>
              <th style="width: 45%">参与时间</th>
              <th style="width: 15%">下注</th>
              <th style="width: 20%">中奖状态</th>
              <th style="width: 20%">奖励积分</th>
            </tr>
          </thead>
             </table>
      <div class="listDiv" v-if="drawListData.length > 0">
        <table class="tableDiv">
   
          <tbody>
            <tr class = "trDiv"></tr>
            <template>
              <tr v-for="(item, index) in drawListData" :key="index">
                <td style="width: 45%">{{ partakeTime(item.createTime) }}</td>
                <td style="width: 15%">{{ item.bet }}</td>
                <td style="width: 20%">
                  {{ item.winningStatus == 1 ? "猜中" : "未猜中" }}
                </td>
                <td style="width: 20%">
                  {{ item.winningStatus == 1 ? item.awardPoints : 0  }}
                </td>
              </tr>
            </template>
          </tbody>

        </table>
      </div>
      <div class="listDiv" :style="listDivStyle" v-else>
        <div :style="noPrizeDataStyle">暂无游戏记录</div>
      </div>
    </basicPop>
  </div>
</template>

<script>
import basicPop from "./basicPop.vue";
import dataJson from "../../../../src/data.json";
import dateUtil from "../../../util/dateUtil.js";
import Vue from "vue";
import apis1 from "../../../util/apis1.js";
import { Notify, Toast } from "vant";

Vue.use(Toast, Notify);
let { pointGuessResult } = apis1;
export default {
  props: [],
  components: {
    basicPop,
  },
  data() {
    return {
      drawListData: [], // 抽奖记录列表
      listDivStyle: "",
      noPrizeDataStyle: "", //没有游戏记录
    };
  },
  computed: {},
  created() {},

  mounted() {
    document
      .querySelector("body")
      .setAttribute(
        "style",
        "position:#fixed;top:0;height:100%;overflow:hidden"
      );
    this.listDivStyle = dataJson.prizePopDiv.listDivStyle + "rem";
    this.noPrizeDataStyle = dataJson.prizePopDiv.noPrizeDataStyle;

    this.initData();
  },
  methods: {
    initData() {
      //去请求接口
      if (this.isTemplate == true) {
        //不请求接口 模板预览
      } else {
        //去请求接口 TODO
        pointGuessResult((recordData) => {
          console.log(recordData);
          this.drawListData = recordData.data;
        });
      }
    },
    // 时间转换 time 转 字符
    partakeTime(val) {
      return dateUtil.formatTime(val, "yyyy-MM-dd hh:mm:ss");
    },

    closeClick() {
      document.querySelector("body").removeAttribute("style");
      this.submit();
    },
  },
};
</script>

<style lang="scss" scoped="scoped">
.listDiv {
  position: relative;
  z-index: 300;
  height: 9.14rem;
  overflow-y: scroll;
}
.tableDiv {
  font-size: 0.2rem;
  text-align: center;
  width: 100%;
}
.trDiv {
height: 0.1rem
}
</style>
