<template>
  <div class="reading">
    <div class="close_btn" @click="goBack"></div>
    <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" v-if="canDaka">
      <div class="study_btn" @click="toDaka">进入打卡</div>
    </div>
  </div>
</template>

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

  export default {
    name: "Read",
    data() {
      return {
        dakaInfo: {},
        userStatus: {},
        bookMsg: {},
        isReading: false,
        storyId: "",
        days: "",
        canDaka: false
      }
    },
    methods: {
      goBack(){
        history.go(-1)
      },
      getStatus() {
        dakaStatus().then(res => {
          if (res.code == 0) {
            this.dakaInfo = res.data.daka_info
            this.userStatus = this.dakaInfo.user_status
            this.getList()
          }
        })
      },
      getList() {
        let id = this.storyId ? this.storyId : this.userStatus.course_id
        let days = this.days ? this.days : this.userStatus.days
        story_detail(id, days).then(res => {
          if (res.code == 0) {
            this.bookMsg = res.data.data
          }
        })
      },
      toDaka() {
        this.$router.push({name: "Daka"})
      }
    },
    created() {
      this.storyId = this.$route.query.storyId
      this.days = this.$route.query.days
      this.$route.query.canDaka && (this.canDaka = this.$route.query.canDaka)
      this.getStatus()
    }
  }
</script>

<style scoped>
  .close_btn{
    position: absolute;
    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;
  }

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

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

  .book_img img {
    width: 3.8rem;
  }

  .book_title {
    font-size: .38rem;
    color: #333;
    margin-bottom: .3rem;
    font-weight: bold;
  }

  .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;
    margin-bottom: .2rem;
  }

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

  .book_content p {
    margin: 0;
  }
</style>
<style>
  .book_content p {
    margin: .1rem 0;
    text-indent: .5rem;
    letter-spacing: .03rem;
    line-height: 1.6;
  }
</style>
