<template>
  <div class="Rank">
    <div class="mask"></div>
    <div class="rank_container">
      <div class="rank_banner">
        <img class="banner_bg" src="../assets/img_top.png" alt="">
        <div class="banner_container">
          <div class="banner_top">
            <div class="banner_top_title">{{period}}期 总奖金（元）</div>
            <div class="banner_top_data">{{detailData.total.total_money?Number(detailData.total.total_money).toFixed(2):0}}</div>
          </div>
          <div class="banner_bottom">
            <div class="banner_bottom_item">
              <div class="banner_bottom_title">参与人数</div>
              <div class="banner_bottom_data">{{Number(detailData.total.join_num)}}</div>
            </div>
            <div class="banner_bottom_item">
              <div class="banner_bottom_title">平均奖金（元）</div>
              <div class="banner_bottom_data">{{Number(detailData.total.avg_bonus).toFixed(2)}}</div>
            </div>
            <div class="banner_bottom_item">
              <div class="banner_bottom_title">最高奖金（元）</div>
              <div class="banner_bottom_data">{{Number(higtest_bonus).toFixed(2)}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="rank_list">
        <div class="list_header">
          <div class="header_item">排名</div>
          <div class="header_item">头像昵称</div>
          <div class="header_item">获得奖金(元)</div>
          <div class="header_item">打卡时间</div>
        </div>
        <div class="list_container" @scroll="onScroll" @touchend="startStopScroll" @touchstart="endStopScroll">
          <div class="record_item"
               v-for="(item,index) in this.detailData.records">
            <div class="rank_num">
              <div v-if="(index+1)>3">
                {{index+1}}
              </div>
              <img v-else :src="rankImg[index].src" alt="">
            </div>
            <div class="record_user">
              <img
                :src="item.user_info.avatar"
                alt=""
                class="record_avatar"
              >
              <div class="record_nickname">
                {{item.user_info.nickname?item.user_info.nickname.substr(0,6):""}}
              </div>
            </div>
            <div class="record_money">{{item.money |moneyFormatter}}({{item.number?item.number:0}}份)</div>
            <div class="record_time">{{item.daka_time?item.daka_time.substr(11, 8):""}}</div>
          </div>
          <div class="full_tips"
               v-if="this.detailData.records.length>95">
            只显示前100人
          </div>
        </div>
        <!--<div class="list_footer">-->
          <!--<div class="sign_btn" @touchstart="doSign" @touchend="startStopScroll">{{buttonText}}</div>-->
        <!--</div>-->
      </div>
      <img class="rank_close" src="../assets/ic_close2.png" alt="" @touchend="closeRank">
    </div>
  </div>
</template>

<script>
  import {
    dakaRank
  } from "@/components/axios/api";

  export default {
    name: "Rank",
    data() {
      return {
        period: "",
        page: 1,
        canScroll: true,
        higtest_bonus: 0,
        detailData: {
          total: {},
          records: [],
          next_page: true,
          higtest_bonus: ""
        },
        isTouchingScoller: false,
        rankImg: [
          {
            src: require("../assets/ic_record_1.png")
          },
          {
            src: require("../assets/ic_record_2.png")
          },
          {
            src: require("../assets/ic_record_3.png")
          }
        ],
      };
    },
    props: ["rankStatus", "isShowRank"],
    methods: {
      emitTouching() {
        this.$emit("rankTouching", this.isTouchingScoller);
      },
      startStopScroll() {
        console.log("startStopScroll")
        this.isTouchingScoller = false
        this.emitTouching()
      },
      endStopScroll() {
        console.log("endStopScroll")
        this.isTouchingScoller = true
        this.emitTouching()
      },
      doSign() {
        this.isTouchingScoller = true
        this.emitTouching()
        console.log("doSign", this.rankStatus)
        if (this.rankStatus != 2) {
          this.$emit("doSign", this.rankStatus);
          this.$emit("closeRank");
        }
      },
      closeRank(e) {
        e.stopPropagation()
        // this.isTouchingScoller = true
        this.emitTouching()
        this.$emit("closeRank");
      },


      getTodayPeriod() {
        let today = new Date()
        return `${today.getFullYear()}${this.fillzero(today.getMonth() + 1)}${this.fillzero(today.getDate())}`
      },
      fillzero(num) {
        return num < 10 ? `0${num}` : num
      },
      getRecordDetail(notRefresh) {
        dakaRank(this.page, 10, "")
          .then(result => {
            this.canScroll = true;
            console.log(result);
            if (result.code == 0) {
              let data = JSON.parse(JSON.stringify(result.data));
              data.records = data.records.filter(item => {
                return !!item.user_info;
              });
              console.log("过滤后数据", data);
              if (!notRefresh) {
                this.detailData = data;
                this.period = this.detailData.period
                this.detailData.higtest_bonus && (this.higtest_bonus = this.detailData.higtest_bonus)
              } else {
                this.detailData.next_page = data.next_page;
                this.detailData.total = data.total;
                this.detailData.records = this.detailData.records.concat(
                  data.records
                );
              }
            }
          })
          .catch(e => {
            this.canScroll = true;
            console.log("dakaRecordDetail err", e);
          });
      },
      onScroll(event) {
        if (this.detailData.next_page && this.canScroll) {
          let offsetHeight = event.currentTarget.offsetHeight,
            scrollHeight = event.target.scrollHeight,
            scrollTop = event.target.scrollTop,
            scrollBottom = offsetHeight + scrollTop;
          if (Math.abs(scrollHeight - scrollBottom) < 50) {
            this.canScroll = false;
            console.log("onScroll", "到底部");
            if (this.page < 10) {
              this.page += 1;
              this.getRecordDetail(true);
            }
          }
        }
      }

    },
    filters: {
      moneyFormatter(val) {
        if (val && !isNaN(val)) {
          return Number(val).toFixed(2);
        } else {
          return "0.00";
        }
      }
    },
    created() {
      console.log("this.rankStatus", this.rankStatus)
      this.getRecordDetail();
    },
    computed: {
      buttonText() {
        if (this.rankStatus == 0) {
          return "立即报名"
        } else if (this.rankStatus == 1) {
          return "已报名"
        } else {
          return "报名已满"
        }
      }
    }
  }
</script>

<style scoped>
  .Rank {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    text-align: center;
  }

  .mask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.7;
  }

  .rank_container {
    width: 6.9rem;
    height: 11.08rem;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -5.54rem;
    margin-left: -3.45rem;
    display: flex;
    flex-direction: column;
  }

  .rank_close {
    position: absolute;
    width: 0.3rem;
    height: 0.3rem;
    top: 0.2rem;
    right: 0.2rem;
  }

  .rank_banner {
    position: relative;
  }

  .banner_bg {
    display: block;
    width: 100%;
  }

  .banner_container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    color: #ffffff;
  }

  .banner_bottom {
    display: flex;
  }

  .banner_bottom_item {
    flex: 1;
  }

  .banner_top_title {
    margin: 0.3rem 0 0.3rem;
    font-size: 0.26rem;
    color: #fff;
  }

  .banner_bottom_title {
    margin: 0.6rem 0 0.3rem;
    font-size: 0.26rem;
    color: #fff;
  }

  .banner_top_data {
    font-size: 0.72rem;
    color: #ffffff;
    font-weight: bold;
  }

  .banner_bottom_data {
    font-size: 0.34rem;
    color: #ffffff;
    font-weight: bold;
  }

  .rank_list {
    flex: 1;
    background: #fff;
    display: flex;
    flex-direction: column;
  }

  .list_header {
    display: flex;
    font-size: 0.24rem;
    color: #97d7e7;
    margin: 0.26rem 0 0.16rem;
  }

  .header_item {
    flex: 1;
    font-size: 0.24rem;
  }

  .header_item:nth-child(2) {
    flex: 2;
    text-align: left;
  }

  .list_container {
    flex: 1;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch
  }

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

  .record_item {
    display: flex;
    align-items: center;
    padding: 0.2rem 0;
    border-bottom: 0.01rem solid #e8e8e8;
  }

  .rank_num,
  .record_user,
  .record_money,
  .record_time {
    flex: 1;
    font-size: 0.24rem;
    color: #000000;
  }

  .record_money {
    text-align: left;
  }

  .rank_num img {
    width: 0.6rem;
  }

  .record_nickname {
    font-size: 0.24rem;
  }

  .record_user {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex: 2;
    text-align: left;
  }

  .record_avatar {
    background: #000;
    width: 0.58rem;
    height: 0.58rem;
    border-radius: 50%;
    margin-right: 0.1rem;
    flex-shrink: 0;
  }

  .full_tips {
    font-size: 0.28rem;
    color: #bbbbbb;
    height: 0.9rem;
    line-height: calc(0.9 / 0.28);
  }

  .list_footer {
    width: 100%;
    height: 1.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .sign_btn {
    width: 4.2rem;
    height: .88rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #FFBB34;
    font-size: 0.38rem;
    color: #fff;
    font-weight: bold;
    border-radius: 0.44rem;
  }

</style>
