<template>
  <div class="RecordDetail">
    <div class="banner">
      <!--<img class="banner_bg" src="../assets/img_top2.png" alt="">-->
      <div class="banner_container">
        <Title
          v-bind:title="title"
          v-on:goback="goback"
          show_back="true"
        ></Title>
        <div class="banner_top">
          <div class="banner_top_title">{{recordData.period}}期 获得奖金（元）</div>
          <div class="banner_top_data">{{recordData.money?Number(recordData.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">{{recordData.rate?Number(recordData.rate):0}}%</div>
          </div>
          <div class="banner_bottom_item">
            <div class="banner_bottom_title">成功打卡天数</div>
            <div class="banner_bottom_data">{{recordData.daka_count?Number(recordData.daka_count):0}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="card_container">
      <div class="record_container">
        <div class="record_header">
          <div class="header_item">日期</div>
          <div class="header_item">打卡时间</div>
          <div class="header_item">课程</div>
        </div>
        <div class="record_scroller" @scroll="onScroll">
          <div class="record_item" v-for="(item,index) in this.detailData" @click="toReading(item)">
            <div class="record_date">{{item.day_date}}</div>
            <div class="record_time" v-if="item.daka_done">{{item.daka_time?item.daka_time.substr(11, 5):""}}</div>
            <div class="record_time fail" v-else-if="item.showStatus">漏打卡</div>
            <div class="record_time" v-else></div>
            <div class="record_course">{{item.story_title}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="modal" v-if="modalShown">
      <Modal v-on:close="closeModal"
             v-on:confirmModal="confirmModal"
             v-bind:title="modalTitle"
             v-bind:option="modalOption"
             v-bind:desc="modalDesc">
      </Modal>
    </div>
  </div>
</template>
<style>
  .RecordDetail .title_text {
    color: black;
  }

  .RecordDetail .back {
    background: url("../assets/ic_back_black.png") 0 0 no-repeat;
    background-size: contain;
    width: 0.24rem;
    height: 0.42rem;
    left: 0.2rem;
    top: 0.26rem;
  }
</style>

<style scoped>
  .banner_bg {
    display: block;
    width: 100%;
  }

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

  .RecordDetail {
    background: rgba(241, 241, 241, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
  }

  .banner {
    background: #fff;
    border: 0;
    height: auto;
    padding-bottom: .5rem;
    margin-bottom: .2rem;
    /*height: 4.8rem;*/
  }


  .banner_top_title {
    margin: 0.3rem 0 0.3rem;
    font-size: 0.26rem;
    color: rgba(254, 169, 0, 1);
  }

  .banner_bottom_title {
    margin: 0.8rem 0 0.3rem;
    font-size: 0.26rem;
    color: rgba(90, 90, 90, 1);
  }


  .banner_top_data {
    font-size: 0.72rem;
    color: rgba(254, 169, 0, 1);
    font-weight: bold;
  }

  .banner_bottom_data {
    font-size: 0.36rem;
    color: rgba(90, 90, 90, 1);
    font-weight: bold;
  }

  .banner_bottom {
    display: flex;
  }

  .banner_bottom_item {
    flex: 1;
  }


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

  .container_title {
    text-align: left;
    display: flex;
    align-items: center;
    padding-top: 0.25rem;
    margin-left: 0.3rem;
    margin-bottom: 0.1rem;
  }

  .container_title div {
    font-size: 0.26rem;
    color: #282828;
  }

  .container_title img {
    width: 0.28rem;
    margin-right: 0.1rem;
  }

  .container_tab {
    display: flex;
    justify-content: space-around;
    border-bottom: 0.01rem solid #e8e8e8;
  }

  .container_tab img {
    width: 0.73rem;
  }

  .tabItem {
    display: flex;
    color: #8a8a8a;
    flex-direction: column;
  }

  .tabItem div {
    font-size: 0.3rem;
    margin-bottom: 0.15rem;
  }

  .tabItem.active {
    color: #282828;
  }

  .record_container {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 .3rem;
  }

  .record_header {
    display: flex;
    font-size: 0.24rem;
    color: #97d7e7;
    padding: 0.3rem 0;
    border-bottom: 0.01rem solid #e8e8e8;
  }

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


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

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

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

  .record_course,
  .record_date,
  .record_time {
    flex: 1;
    font-size: 0.3rem;
    color: #000000;
  }

  .record_time.fail {
    color: rgba(255, 146, 134, 1);
  }

  .record_course {
    color: #576B95;
  }

  .rank_num img {
    width: 0.6rem;
  }

</style>

<script>
  // 打卡记录

  import Title from "@/components/Title.vue";
  import {dakaRecordDetail, dakaRank, personRank, daka_records_detail} from "@/components/axios/api";
  import Modal from "@/components/Modal.vue";

  export default {
    name: "RecordDetail",
    components: {
      Title,
      Modal
    },
    data() {
      return {
        modalTitle: "",
        modalDesc: "",
        modalOption: "",
        modalShown: false,
        title: "每日读书奖金赛详情",
        tab: 1,
        recordData: {
          period: "",
          daka_done: false
        },
        page: 1,
        canScroll: true,
        detailData: [],
        selfData: {},
        targetDate: {},
        rankImg: [
          {
            src: require("../assets/ic_record_1.png")
          },
          {
            src: require("../assets/ic_record_2.png")
          },
          {
            src: require("../assets/ic_record_3.png")
          }
        ]
      };
    },
    methods: {
      showModal(title, desc, option) {
        this.modalTitle = title || "";
        this.modalDesc = desc || "";
        this.modalOption = option || {}
        this.modalShown = true;
      },
      closeModal() {
        this.modalShown = false;
      },
      confirmModal(scb) {
        scb && scb()
        this.modalShown = false;
      },
      toReading(item) {
        let now = new Date()
        let date = new Date(item.day_date)
        if (date < now || (date.getFullYear() === now.getFullYear() && date.getMonth() === now.getMonth() && date.getDate() === now.getDate())) {
          if ((date.getFullYear() === now.getFullYear() && date.getMonth() === now.getMonth() && date.getDate() === now.getDate())) {
            this.$router.push({name: "Reading", query: {storyId: item.story_id, days: item.days, canDaka: "1"}})
          } else {
            this.$router.push({name: "Reading", query: {storyId: item.story_id, days: item.days}})
          }
        } else {
          this.showModal("未开放课程", "别着急哦，每天开放一节课！", {
            btnText: "我知道了",
          })
        }
      },
      goback() {
        history.go(-1)
        // this.$router.push({name:"Record"})
      },
      changeTab(tab) {
        this.tab = tab;
        this.page = 1;
        this.getRecordDetail();
      },
      setTargetDate() {
        let targetDate = new Date()
        targetDate.setHours(22)
        targetDate.setMinutes(0)
        targetDate.setSeconds(59)
        this.targetDate = targetDate
      },
      getRecordDetail(notRefresh) {
        console.log(this.recordData)
        daka_records_detail(this.recordData.period).then(res => {
          if (res.code == 0) {
            this.detailData = res.data;
            for (let item of this.detailData) {
              let now = new Date()
              let date = new Date(item.day_date)
              if (date.getFullYear() === now.getFullYear() && date.getMonth() === now.getMonth() && date.getDate() === now.getDate()) {
                if (now >= this.targetDate || item.daka_done) {
                  item.showStatus = true
                }
              } else {
                if (date < now) {
                  item.showStatus = true
                }
              }
            }
          }
        })
        // let period = this.recordData.period;
        // personRank(period).then(res => {
        //   if (res.code == 0) {
        //     this.selfData = res.data
        //   }
        // })
        // dakaRank(this.page, 10, period)
        //   .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.detailData.higtest_bonus = this.detailData.records[0].money
        //       } 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) < 5) {
            this.canScroll = false;
            console.log("onScroll", "到底部");
            if (this.page < 10) {
              this.page += 1;
              this.getRecordDetail(true);
            }
          }
        }
      },
    },
    created() {
      this.setTargetDate()
      let recordData = sessionStorage.getItem("selectedRecord");
      if (recordData) {
        this.recordData = JSON.parse(recordData);
      }
      this.getRecordDetail();
    },
    filters: {
      moneyFormatter(val) {
        if (val && !isNaN(val)) {
          return Number(val).toFixed(2);
        } else {
          return "0.00";
        }
      }
    }
  };
</script>
