<template>
  <div class="courses">
    <div class="courses_list" v-if="isSignUp">
      <div class="list_item" v-for="item in storyList" @click="toReading(item)">
        <img class="book_img" :src="item.story_thumbnail" alt="">
        <div class="book_msg">
          <div class="book_title">{{item.story_title}}</div>
          <div class="book_author">来自：{{item.story_author}}</div>
        </div>
        <div class="user_msg">
          <div class="msg_time">
            <div class="msg_date">{{item.date}}</div>
            <div class="msg_day">{{item.what_day}}</div>
          </div>
          <div :class="item.showStatus?'msg_status':'msg_status hidden'">
            <div class="daka_done" v-if="item.daka_signup&&item.daka_done">已打卡</div>
            <div class="daka_not" v-if="item.daka_signup&&!item.daka_done">漏打卡</div>
          </div>
        </div>
      </div>
    </div>
    <div class="not_sign_page" v-else>
      <div class="book_title" style="margin: 2rem 0 .2rem;font-size: .36rem">新的一期读书打卡开始了哦~</div>
      <div class="book_author" style="font-size: .28rem">点击下方按钮去报名</div>
      <div class="study_btn" @click="toDaka" style="margin-top: 1rem">立即报名</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>

<script>
  import Modal from "@/components/Modal.vue";
  import {
    story_list,
  } from "@/components/axios/api";

  export default {
    name: "Courses",
    components: {
      Modal,
    },
    data() {
      return {
        modalTitle: "",
        modalDesc: "",
        modalOption: "",
        modalShown: false,
        storyList: [],
        targetDate: "",
        isSignUp: true
      }
    },
    methods: {
      toDaka(){
        this.$router.push({name:"Daka"})
      },
      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 period = item.period
        let now = new Date()
        let date = new Date(this.insertStr(this.insertStr(period, 4, "-"), 7, "-"))
        if (item.showStatus || (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: "我知道了",
          })
        }
      },
      formatData() {
        for (let item of this.storyList) {
          let period = item.period
          let now = new Date()
          let date = new Date(this.insertStr(this.insertStr(period, 4, "-"), 7, "-"))
          if (date.getFullYear() === now.getFullYear() && date.getMonth() === now.getMonth() && date.getDate() === now.getDate()) {
            item.date = `今`
            if (now >= this.targetDate || item.daka_done) {
              item.showStatus = true
            }
          } else {
            item.date = `${date.getMonth() + 1}.${this.fillZero(date.getDate())}`
            if (date < now) {
              item.showStatus = true
            }
          }
        }
      },
      fillZero(num) {
        return num < 10 ? `0${num}` : num
      },
      insertStr(soure, start, newStr) {
        return soure.slice(0, start) + newStr + soure.slice(start);
      },
      getList() {
        story_list().then(res => {
          if (res.code === 0) {
            this.storyList = res.data.data
            this.isSignUp = res.data.is_signup
            console.log("this.storyList",res.data)
            if(this.isSignUp){
              this.formatData()
            }
          }
        })
      },
      setTargetDate() {
        let targetDate = new Date()
        targetDate.setHours(22)
        targetDate.setMinutes(0)
        targetDate.setSeconds(59)
        this.targetDate = targetDate

      }
    },
    created() {
      this.setTargetDate()
      this.getList()
    }
  }
</script>

<style scoped>
  .courses {
    min-height: 0;
    margin-top: .2rem;
  }

  .courses_list {
    height: 100%;
    overflow-y: scroll;
    /*-webkit-overflow-scrolling: touch;*/
    padding: 0 .3rem;
  }

  .not_sign_page{
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .list_item {
    display: flex;
    align-items: center;
    padding: .14rem 0;
    border-bottom: .01rem solid rgba(230, 230, 230, 1);
  }

  .book_img {
    width: .88rem;
    height: .88rem;
    flex-shrink: 0;
  }

  .book_msg {
    margin-left: .1rem;
    flex: 1;
  }

  .book_title {
    font-size: .28rem;
    margin-bottom: .13rem;
  }

  .book_author {
    font-size: .24rem;
    color: rgba(165, 165, 165, 1);
  }

  .msg_time {
    display: flex;
    justify-content: flex-end;
  }

  .msg_date {
    font-size: .46rem;
    color: rgba(26, 211, 211, 1);
    margin-right: .12rem;
  }

  .msg_day {
    display: flex;
    align-items: center;
    font-size: .2rem;
    color: rgba(136, 136, 136, 1);
  }

  .msg_status {
    display: flex;
    justify-content: flex-end;
  }

  .msg_status.hidden {
    opacity: 0;
  }

  .daka_done, .daka_not {
    width: 1rem;
    height: .34rem;
    border: .02rem solid rgba(255, 195, 15, 1);
    border-radius: .17rem;
    color: rgba(255, 195, 15, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .24rem;
  }

  .daka_not {
    border: .02rem solid rgba(255, 146, 134, 1);
    color: rgba(255, 146, 134, 1);

  }



  .study_btn {
    width: 4rem;
    height: .88rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-size: .36rem;
    border-radius: .44rem;
    background: rgba(255, 195, 15, 1);
    /*margin: 0 auto;*/
  }
</style>
