<import name="info" src="../../components/book-detail/info"></import>
<import
  name="comment-item-simple"
  src="../../components/book-detail/comment-item-simple"
></import>
<import name="my-toast" src="apex-ui/components/toast/index"></import>

<template>
  <div class="page-wrapper">
    <list>
      <list-item type="info"> <info info="{{bookInfo}}"></info> </list-item>
      <list-item type="description" class="description">
        <text class="description-title">作品简介</text>
        <text class="text-remark">{{ bookInfo.description }}</text>
      </list-item>
      <list-item type="sub-title" class="sub-title">
        <text class="text-title">共{{ bookInfo.count }}章</text>
        <div @click="goToContents">
          <text class="text-remark">2019-7-23更新</text>
          <text class="text-remark iconfont">&#xe6d7;</text>
        </div>
      </list-item>
      <list-item type="sub-title" class="detail-title">
        <text class="text-title">热门评论</text>
        <div @click="goToComment">
          <text class="text-remark">30人正在讨论</text>
          <text class="text-remark iconfont">&#xe6d7;</text>
        </div>
      </list-item>
      <list-item type="comment" for="{{commentList}}">
        <comment-item-simple
          item="{{$item}}"
          onreply-comment="replyComment"
        ></comment-item-simple>
      </list-item>
      <list-item type="detail-title" class="detail-title">
        <text class="text-title">相似图书推荐</text>
      </list-item>
      <list-item type="image-list" class="book-image-list">
        <div
          class="book-image-item"
          for="{{recommandBook}}"
          @click="goToDetail($item)"
        >
          <image src="{{$item.image}}"></image>
          <text class="book-image-title">{{ $item.title }}</text>
          <text class="text-remark">{{ $item.author }}</text>
        </div>
      </list-item>
    </list>
    <div class="detail-bottom-bar">
      <text
        class="btn btn-shelf {{isInShelf ? 'btn-shelf-disabled' : ''}}"
        @click="addToShelf"
      >
        {{ isInShelf ? '已加入书架' : '加入书架' }}
      </text>
      <text class="btn-read" @click="goToContent">开始阅读</text>
    </div>
    <my-toast id="toast"></my-toast>
  </div>
</template>

<script>
import { bookListData } from '../../assets/data/book-list.js'
import { commentData } from '../../assets/data/comment.js'
export default {
  public: {
    info: ''
  },
  private: {
    bookInfo: {},
    commentList: commentData.slice(0, 3),
    recommandBook: bookListData.slice(0, 3),
    isInShelf: false,
    shelfList: []
  },
  onInit() {
    // 此处直接将图书内容传进来，实际开发中也可以传入id查询图书信息
    this.bookInfo = this.info ? JSON.parse(this.info) : {}
    // $shelfList:全局变量
    this.shelfList = $shelfList
    this.isInShelf = !!this.shelfList.filter(book => {
      return book.id === this.bookInfo.id
    }).length
  },
  /* -------------------SelfCustomEvent------------------ */
  goToComment() {
    $utils.route2theUrl('pages/comment-all', this.bookInfo)
  },
  goToContents() {
    $utils.route2theUrl('pages/contents', {
      bookId: this.bookInfo.id,
      bookTitle: this.bookInfo.title
    })
  },
  goToDetail(item) {
    console.log(item)
    // 根据id查询详情，跳转到另一个图书的详情页，用router.replace，无法返回当前页
    $utils.routeReplacetheUrl('pages/book-detail', {
      info: JSON.stringify(item)
    })
  },
  goToContent() {
    $utils.route2theUrl('pages/book-content', {
      bookId: this.bookInfo.id,
      bookTitle: this.bookInfo.title,
      total: this.bookInfo.count
    })
  },
  addToShelf() {
    if (this.isInShelf) {
      return
    }
    if (!this.bookInfo.id) {
      this.$child('toast').showToast({
        content: '图书信息有误',
        icon: 'warning'
      })
      return
    }
    this.isInShelf = true
    this.shelfList.push(this.bookInfo)
    $utils.setShelfList(this.shelfList, true) // 保存到全局变量和storage
    this.$child('toast').showToast({
      content: '已加入书架',
      icon: 'thumbs-up'
    })
  }
}
</script>

<style lang="less">
@import '../../assets/styles/index.less';
.description {
  padding: @gap-4;
  width: 100%;
  background-color: @white;
  .flex-box-mixins(column, flex-start, flex-start);
  .description-title {
    .text-title;
    margin-bottom: @gap-2;
  }
}
.sub-title {
  .detail-title;
  padding: @gap-4;
}
.detail-title {
  background-color: @white;
  padding: @gap-4 @gap-4 @gap-2 @gap-4;
  margin-top: @gap-2;
  .text-title;
  .flex-box-mixins(row, space-between, center);
}
.comment-more {
  margin-right: @gap-3;
}

.book-image-list {
  width: 100%;
  padding: 0 @gap-2 @gap-2 @gap-2;
  background-color: @white;
  margin-bottom: @gap-2;
  flex-wrap: wrap;
  .flex-box-mixins(row, flex-start, flex-start);
  .g22kjdgy{
    color: #ffffff;
  }
  .book-image-item {
    width: 28%;
    margin: @gap-2;
    .flex-box-mixins(column, flex-start, flex-start);
    image {
      border-radius: 5px;
      width: 100%;
      height: 270px;
      flex: 1;
    }
    .book-image-title {
      .text-remark-black;
      margin: @gap-1 0 5px 0;
    }
  }
}

.detail-bottom-bar {
  padding: @gap-3 @gap-4;
  background-color: @bg-grey;
  .border-top-mixins();
  .flex-box-mixins(row, space-between, center);
}
.btn-shelf {
  color: @brand;
  border: 1px solid @brand;
  border-radius: 5px;
  padding: 15px 0;
  flex: 1;
  text-align: center;
  margin-right: @gap-2;
}
.btn-read {
  color: @white;
  border: 1px solid @brand;
  background-color: @brand;
  border-radius: 5px;
  padding: 15px 0;
  flex: 1;
  text-align: center;
}
.btn-shelf-disabled {
  .btn-disabled;
}
</style>
