<template>
  <div class="back-recom-box">
    <div class="container">
      <div class="close-box">
        <image class="close-icon" @click="closeRecomBox" src="/assets/imgs/close.png"></image>
      </div>
      <div class="recom-title-box">
        <text class="recom-title">超多人都在看的小说</text>
      </div>
      <div class="book-content">
        <div for="{{recom_list}}" class="book-info-content">
          <div class="book-image">
            <image class="book-cover" src="{{$item.cover_url}}"></image>
          </div>
          <div class="book-info" onclick="toRead($item)">
            <text class="book-name">{{ $item.book_name }}</text>
            <text class="book-desc">{{ $item.book_summary }}</text>
            <div class="book-option-box">
              <text class="book-info-desc">{{ getInfo($item) }}</text>
              <div class="book-read-btn-box">
                <text class="book-read-btn">立即阅读</text>
              </div>
            </div>
          </div>
        </div>
        <div class="change-box" @click="changeBook">
          <text class="change-txt">换一换</text>
          <image class="change-icon" src="/assets/imgs/change_icon.png"></image>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import router from '@system.router'
import { clickRecommendBooks} from "../../api";
export default {
  data: {
    recom_list: [],
  },

  props: ['recom_list'],

  onInit() {
    // console.log('111111111111111111111', this.recom_list);
  }, closeRecomBox() {
      console.log('点击关闭');
    this.$emit("addshort",{op:"close",is_close:true});
  }, toRead(book) {
    this.clickRecommendBooks(book.book_id);
    router.push({
      uri: '/views/Reader',
      params: {
        bid: book.book_id,
        chapter_id: book.first_cid
      }
    })
  }, getInfo(book) {
    // return book.book_author + (book.book_end_satstu == 1 ? "·完结·" : "·连载·") + (book.book_word_count > 10000 ? (book.book_word_count / 10000).toFixed(2) + "万" : book.book_word_count) + "字";
    return (book.book_end_satstu == 1 ? "完结·" : "连载·") + (book.book_word_count > 10000 ? (book.book_word_count / 10000).toFixed(2) + "万" : book.book_word_count) + "字";
  },changeBook(){
    // console.log('点击自组件');
    this.$emit("addshort",{op:"change_book",is_close:false});
   
  },async clickRecommendBooks(bid){
      clickRecommendBooks(bid);
  }
}
</script>

<style  lang="less" scoped>
.change-box {
  width: 100%;
  margin-top: 41px;
  justify-content: center;
  flex-direction: row;
}
.change-icon{
  width: 19px;
  height: 19px;
  object-fit: fill;
  margin: 11px;
}

.change-txt {
  width: 78px;
  height: 37px;
  font-size: 26px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #f45e41;
  line-height: 37px;
}
.back-recom-box {
  flex-direction: column-reverse;
  position: fixed;
  width: 100%;
  height: 100%;
  bottom: 0px;
  justify-content: center;
  align-items: center;
  background-color: rgba(24, 19, 19, 0.6);
}
.container {
  width: 630px;
  height: 887px;
  background-color: #ffffff;
  border-radius: 30px;
  flex-direction: column;
}
.close-box {
  width: 100%;
  margin: 30px 0px 23px 0px;
  flex-direction: row-reverse;
}
.close-icon {
  width: 21px;
  height: 21px;
  margin-right: 30px;
}
.recom-title-box {
  width: 100%;
  justify-content: center;
}
.recom-title {
  font-size: 34px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #333333;
  line-height: 48px;
}
.book-content {
  margin: 31px 34px 0 41px;
  flex-direction: column;
}
.book-info-content {
  flex-direction: row;
  margin-top: 30px;
  justify-content: space-between;
}
.book-image {
  width: 132px;
  height: 176px;
  margin-right: 30px;
  border-radius: 4px;
}
.book-cover {
  width: 100%;
  height: 100%;
  object-fit: fill;
  border-radius: 4px;
}
.book-info {
  width: 393px;
  flex-direction: column;
}
.book-name {
  width: 393px;
  lines: 1;
  height: 45px;
  font-size: 32px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 45px;
}
.book-desc {
  margin: 11px 0px;
  lines: 2;
  width: 393px;
  height: 66px;
  font-size: 24px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  line-height: 33px;
  justify-content: space-around;
}
.book-option-box {
  width: 393px;
  margin-top: 18px;
  justify-content: space-between;
}
.book-info-desc {
  font-size: 24px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  line-height: 33px;
}
.book-read-btn-box {
  justify-content: center;
  width: 118px;
  padding: 0px 2px;
  background-color: rgba(240, 90, 59, 0.2);
  border-radius: 4px;
}
.book-read-btn {
  height: 30px;
  font-size: 22px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #f05a3b;
  line-height: 30px;
  text-align: center;
}
</style>
