<template>
  <div class="dialog-bg" :class="show ? 'show' : 'hidden'" @click="close">
    <div class="content" @click.stop="tap">
      <div class="top">
        <div class="title">邀请好友助力</div>
        <div class="iconfont icon-guanbi" @click="close"></div>
      </div>
      <div class="cell">
        <div class="iconfont icon-duobianxing"></div>
        <div class="info">
          <div class="title">分享至微信/朋友圈</div>
          <div class="subtitle">
            每邀请{{ shareConditionObj.inviteNum }}位好友{{ shareConditionObj.type == 11 ? '完成新会员注册' : '首次关注服务号' }}助力增加{{ shareConditionObj.value }}次机会
          </div>
          <div class="share-type-box">
            <div class="share-type-item" @click="shareWx">
              <img src="../images/wx_icon.png" mode="aspectFit"/>
              <div class="share-type-name">微信</div>
            </div>
            <div class="share-type-item" @click="sharePyq">
              <img src="../images/pyq_icon.png" mode="aspectFit"/>
              <div class="share-type-name">朋友圈</div>
            </div>
          </div>
        </div>
      </div>
      <div class="cell" v-if="list && list.length" v-infinite-scroll="loadData" infinite-scroll-distance="10">
        <div class="iconfont icon-duobianxing"></div>
        <div class="info">
          <div class="title">助力成功记录</div>
          <div class="record-list">
            <div class="record-item" v-for="item in list" :key="item">
              <div class="time">{{ item.createTime | formatDate }}</div>
              <div class="text">{{ item.helpMemberName || item.helpMemberNick }} 助力成功</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { gameRequestApi } from "@/api/common.js";
const {
  getReportRecord,
} = gameRequestApi;

export default {
  props: {
    memberId: String,
    enterpriseId: String,
    gameId: String,
    show: Boolean,
    shareConditionObj: {
      type: Object,
      default:()=> {
        return {};
      },
    },
  },
  data() {
    return {
      conditionObj: {},
      count: 100,
      pageSize: 20,
      currentPage: 1,
      list: [],
    };
  },
  created(){
    this.loadData();
  },
  methods: {
    reloadData(){
      this.currentPage = 1;
      this.totalCount = 0;
      this.loadData();
      this.getGameRule();
    },

    async loadData(){
      if(this.list.length >= this.totalCount && this.totalCount != 0){
        return;
      }
      let res = await getReportRecord({
        memberId: this.memberId || '',
        enterpriseId: this.enterpriseId || '',
        gameId: this.gameId || '',
        currentPage: this.currentPage,
        pageSize: this.pageSize
      })
      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;
    },
    again() {
      this.$emit("again");
      this.close();
    },
    close() {
      this.show = false;
      setTimeout(() => {
        this.$emit("update:show", false);
      }, 200);
    },
    tap() {},
    shareWx(){
      this.$emit("shareWx",this.conditionObj);
    },
    sharePyq(){
      this.$emit("sharePyq",this.conditionObj);
    }
  },
  filters:{
    formatDate(value){
      if (!value) return '--';
      let date = new Date(value);
      return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate()
    }
  }
};
</script>

<style scoped>
@keyframes maskShowAnimation {
  0% {
    background: rgba(0, 0, 0, 0);
  }
  100% {
    background: rgba(0, 0, 0, 0.85);
  }
}

@keyframes maskHiddenAnimation {
  0% {
    background: rgba(0, 0, 0, 0.85);
  }
  100% {
    background: rgba(0, 0, 0, 0);
  }
}

@keyframes contentShowAnimation {
  0% {
    bottom: -100%;
  }
  100% {
    bottom: 0;
  }
}

@keyframes contentHiddenAnimation {
  0% {
    bottom: 0;
  }
  100% {
    bottom: -100%;
  }
}


.dialog-bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background: rgba(0, 0, 0, 0);

  animation-duration: 200ms;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}
.dialog-bg.show {
  animation-name: maskShowAnimation;
}

.dialog-bg.hidden {
  animation-name: maskHiddenAnimation;
}

.content {
  max-height: 80%;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  border-radius: 8px 8px 0 0;
  background: #f6f6f6;
  overflow: auto;
  
  animation-duration: 200ms;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

.dialog-bg.show .content{
    animation-name: contentShowAnimation;
}

.dialog-bg.hidden .content{
    animation-name: contentHiddenAnimation;
}

.content::-webkit-scrollbar {
  display: none;
}

.content .top {
  position: sticky;
  display: flex;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  top: 0;
  background: #f6f6f6;
  z-index: 2;
}

.content .top .title {
  color: #21252b;
  font-size: 16px;
  font-weight: 600;
  padding: 0 12px;
}

.content .top .iconfont {
  color: #21252b;
  font-size: 16px;
  padding: 18px 13px;
}

.content .cell {
  padding: 14px 12px 16px;
  display: flex;
}
.content .cell .info{
  flex: 1;
}
.content .cell .icon-duobianxing {
  color: #87C145;
  font-size: 15px;
  padding-top: 3px;
  padding-right: 3px;
}

.content .cell .info .title {
  color: #21252B;
  font-size: 14px;
  font-weight: 600;
  padding-bottom: 5px;
}

.content .cell .info .subtitle {
  color: #21252b;
  font-size: 12px;
  padding-bottom: 15px;
}

.content .cell .info .share-type-box {
  display: flex;
}
.share-type-box .share-type-item {
  text-align: center;
  padding-right: 60px;
}

.share-type-box .share-type-item img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  margin: 0 auto 8px;
  background: white;
}
.share-type-box .share-type-item .share-type-name {
  color: #242835;
  font-size: 12px;
  text-align: center;
}

.record-list {
  overflow: auto;
}

.record-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding: 10px 0;
  color: #21252B;
  font-size: 12px;
}

.record-item::after {
  content: " ";
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 0;
  height: 1px;
  transform: scaleY(0.5);
  z-index: 1;
  background: #e6e6e6;
}
</style>
