<template>
  <div class="read_page">
    <div class="read" v-if="!isReading&&isSignUp">
      <div class="top_container">
        <div class="day">第{{userStatus.days}}天</div>
        <div class="book_msg">
          <div class="book_img">
            <img :src="bookMsg.story_img" alt="">
          </div>
          <div class="book_title">{{bookMsg.story_title}}</div>
          <div class="book_author">来自：{{bookMsg.story_author}}</div>
        </div>
      </div>
      <div class="bottom_container">
        <div class="study_btn" @click="toReading">开始学习</div>
      </div>
    </div>
    <div class="not_sign_page" v-else>
      <div class="book_title" style="margin: 2rem 0 .2rem">新的一期读书打卡开始了哦~</div>
      <div class="book_author">点击下方按钮去报名</div>
      <div class="study_btn" @click="toDaka" style="margin-top: 1rem">立即报名</div>
    </div>
    <!--<div class="reading" v-if="isReading">-->
    <!--<div class="top_container">-->
    <!--<div class="book_icon">-->
    <!--<img src="../assets/read_img.png" alt="">-->
    <!--</div>-->
    <!--<div class="book_msg">-->
    <!--<div class="book_title">{{bookMsg.story_title}}</div>-->
    <!--<div class="book_author">来自：{{bookMsg.story_author}}</div>-->
    <!--</div>-->
    <!--<div class="book_content" v-html="bookMsg.content"></div>-->
    <!--</div>-->
    <!--<div class="bottom_container">-->
    <!--<div class="study_btn">进入打卡</div>-->
    <!--</div>-->
    <!--</div>-->
  </div>
</template>

<script>
  import {
    dakaStatus,
    story_detail,
  } from "@/components/axios/api";

  export default {
    name: "Read",
    data() {
      return {
        dakaInfo: {},
        userStatus: {},
        bookMsg: {},
        isReading: false,
        isSignUp: true
      }
    },
    methods: {
      toDaka(){
        this.$router.push({name:"Daka"})
      },
      toReading() {
        this.$router.push({name: "Reading", query: {canDaka: "1"}})
      },
      getStatus() {
        dakaStatus().then(res => {
          if (res.code == 0) {
            this.dakaInfo = res.data.daka_info
            this.userStatus = this.dakaInfo.user_status
            this.getList()
          }
        })
      },
      getList() {
        story_detail(this.userStatus.course_id, this.userStatus.days).then(res => {
          if (res.code == 0) {
            this.bookMsg = res.data.data
            this.isSignUp = res.data.is_signup
          }
        }).catch(err => [
          this.isSignUp = false
        ])
      }
    },
    created() {
      console.log("$router", this.$router)
      this.getStatus()
    }
  }
</script>

<style scoped>
  .not_sign_page{
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .read_page {
  }

  .read {
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
  }

  .reading {
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
  }

  .bottom_container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .day {
    font-size: .32rem;
    color: #A5A5A5;
    margin-bottom: .3rem;
  }

  .book_img {
    text-align: center;
    margin-bottom: .2rem;
  }

  .book_img img {
    width: 5rem;
  }

  .book_title {
    font-size: .36rem;
    color: #333333;
    margin-bottom: .3rem;
  }

  .book_author {
    font-size: .28rem;
    color: #A5A5A5;
  }

  .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;*/
  }

  .reading .book_icon img {
    width: 4.6rem;
    margin-top: .2rem;
  }

  .book_content {
    width: 6.23rem;
    margin: .3rem auto 0;
    font-size: .28rem;
    text-align: left;
  }

  .book_content p {
    margin: 0;
  }
</style>
<style>
  .book_content p {
    margin: .1rem 0;
    text-indent: .5rem;
  }
</style>
