<template>
  <div class="prizePopMaskDiv" v-if="show">
    <basicPop :pop="pop" @closeClick="closeClick">
      <!-- <%--    弹窗--%> -->
      <div :style="styleData.listDiv" class="listDiv">
        <div :style="styleData.container" class="my-friend-container" v-if="drawRecordList.length > 0">
          <div :style="styleData.friendInfo" class="friendInfo" v-for="(it, index) in drawRecordList" :key="index">
            <div class="topItemDiv">
              <div class="item itemDate">抽奖时间</div>
              <div class="item">中奖状态</div>
              <div class="item">获取奖品</div>
            </div>
            <div class="bottomItemDiv">
              <div class="item itemDate">{{it.createTime| filterDate}}</div>
              <div :class="['item',it.state == 0 ? 'itemNo':'itemYes']">{{it.state == 0 ? '未中奖' : '中奖'}}</div>
              <div :class="['item',it.przieName ? 'itemYes' : 'itemNo']">{{it.przieName ? it.przieName : '--'}}</div>
            </div>
            <!-- <img :style="styleData.headImage" class="friend-headImage" :src="it.userImg" alt="" /> -->
            <!-- <span :style="styleData.friendName" class="friendName">{{ it.nickName }}</span> -->
          </div>

          <!-- <div class="noMoreRecordDiv">
            <div>
              <img style="width: 0.85rem;height: 0.99rem;" src="//img10.360buyimg.com/imgzone/jfs/t1/147431/2/33515/2083/6389617fEa2a7c9be/e0391b1964bbc6dc.png" />
            </div>
            <div style="color: #c5c5c5;font-size: 0.2rem;">没有更多记录了~</div>
          </div> -->

        </div>
        <div v-else class="noFriends" :style="styleData.noFriends">暂无抽奖记录哦</div>
        <div class="closeDiv" :style="styleData.closeDiv" @click="closeDialog()"></div>
      </div>
    </basicPop>
  </div>
</template>

<script>
import basicPop from './hdzxtbasicPop.vue';

import apis1 from '../../../util/apis1.js';
let { getDrawRecord } = apis1;

export default {
  components: {
    basicPop
  },
  props: [],
  data() {
    return {
      drawRecordList: [],
      show: true,
      pop: {
        title: '抽奖记录',
        titlepop: ''
      }
    };
  },
  computed: {
    title() {
      return '抽奖记录';
    }
  },

  created() {
    document.querySelector('body').setAttribute('style', 'position:#fixed;top:0;height:100%;overflow:hidden');
    this.pop.titlepop = this.styleData.titlepop
      ? this.styleData.titlepop
      : { backgroundImage: 'url(//img10.360buyimg.com/imgzone/jfs/t1/141588/29/18217/44025/5fd571b9Ef55329ec/42dba91b188b9dce.png)' };
    this.pop.leftLineDiv = this.styleData.leftLineDiv;
    this.pop.rightLineDiv = this.styleData.rightLineDiv;

    this.initData();
  },
  methods: {
    closeClick() {
      document.querySelector('body').removeAttribute('style');
      this.submit();
    },
    initData() {
      getDrawRecord(data => {
       console.log(data,'抽奖记录');
        this.drawRecordList = data.data;

      });
    },

    closeDialog() {
      document.querySelector('body').removeAttribute('style');
      this.submit();
    }
  }
};
</script>

<style lang="scss" scoped="scoped">
.closeDiv {
  width: 1rem;
  height: 1rem;
  margin: auto;
  margin-top: 0.7rem;
}
.noFriends {
  // font-size: 0.4rem;
  // color: #339b9a;
  // text-align: center;
  // line-height: 5rem;
  height: 100%;
  font-size: 0.24rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #8c8c8c;
}
.listDiv {
  position: relative;
  z-index: 300;
  margin-top: 0.32rem;
  height: 9.14rem;
  overflow-y: scroll;
}
::-webkit-scrollbar {
  display: none;
}
.my-friend-container {
  display: flex;
  flex-wrap: wrap;
  .noMoreRecordDiv{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-top: 1.06rem;
  }
}
.friendInfo {

  width: 6.84rem;
  background: #FFFFFF;
  border-radius: 0.08rem;
  align-items: center;
  margin-bottom: 0.2rem;
  margin-left: calc(50% - 6.84rem / 2);
  padding: 0.24rem 0rem 0.3rem 0.12rem;
  .topItemDiv{
    display: flex;
    flex-direction: row;
    color: #999999;
    font-size: 0.22rem;
  }
  .bottomItemDiv{
    display: flex;
    flex-direction: row;
    color: #000000;
    font-size: 0.22rem;
    margin-top: 0.28rem;
    .itemNo{
      color: #2faa0e;
    }
    .itemYes{
      color: #e92c46;
    }

  }
  .item{
    flex: 1;
    text-align: center;
  }
  .itemDate{
    white-space:nowrap;
    // flex: 2 !important;
  }
}

</style>
