<!--listbook.wxml-->
<view class="swiper-wrapper">
    <swiper autoplay="true" interval="{{swiperTime}}" class="swiper-box">
        <!--封面 S-->
        <swiper-item class="book-page">
            <scroll-view scroll-y="true" class="bookpage-scroll">
                <view class="page-img">
                    <image mode="aspectFit" src="{{bookInfo.coverUrl}}"></image>
                </view>
                <view class="title">{{bookInfo.title}}</view>
                <view class="author">朗读者 : {{bookInfo.author}}</view>
            </scroll-view>
        </swiper-item>
        <!--封面 S-->

        <!--内容 S-->
        <swiper-item class="book-page" wx:for="{{pages}}">
            <scroll-view scroll-y="true" class="bookpage-scroll">
                <view class="page-img" wx:if="{{item.imgUrl}}">
                    <image mode="aspectFit" src="{{item.imgUrl}}"></image>
                </view>
                <view class="page-text">{{item.text}}</view>
            </scroll-view>
            <view class="ctl-box" wx:if="{{item.audioUrl}}">
                <view class="progress">
                    <progress percent="{{ item.playProgress }}" activeColor="#4cd4c1" stroke-width="3" />
                </view>
                <view class="start-time">{{item.playTimeFt}}</view>
                <view class="end-time">{{item.duration}}</view>
                <view class="paly-btn" catchtap="onVicesTap" data-index="{{index}}" >
                    <image wx:if="{{!item.isPlaying}}" mode="aspectFit" src="../../images/icon/stop_btn@3x.png"></image>
                    <image wx:if="{{item.isPlaying}}" mode="aspectFit" src="../../images/icon/playing_btn@3x.png"></image>
                </view>
            </view>
        </swiper-item>
        <!--内容 S-->

        <!-- 书封底面 S-->
        <swiper-item>
            <!--内部滚动 S-->
            <scroll-view scroll-y="true" class="book-last-page">
                <!--封底头部 S -->
                <view class="top-part">
                    <view class="book-cover-wp">
                        <image mode="aspectFill" src="{{bookInfo.coverUrl}}"></image>
                        <view class="book-cover">
                            <image mode="aspectFill" src="{{bookInfo.coverUrl}}"></image>
                        </view>
                        <view class="cover-side"></view>
                        <view class="cover-circle">
                            <image src="{{bookInfo.coverUrl}}"></image>
                        </view>
                    </view>

                    <!--书本信息 S-->
                    <view class="subinfo">
                        <view class="item text-left">阅读 {{bookInfo.pvCnt}}</view>
                        <view class="item text-center">
                            <view class="inline-box">
                                <view class="inline-box" catchtap="likeIt" data-bookid="{{bookInfo.bookId}}">
                                    <image wx:if="{{bookInfo.hasLiked == 0}}" mode="aspectFit" src="../../images/icon/thumb_up_default_icon@3x.png"></image>
                                    <image wx:if="{{bookInfo.hasLiked == 1}}" mode="aspectFit" src="../../images/icon/thumb_up_selected@3x.png"></image>
                                    {{bookInfo.likeCnt}}
                                </view>
                            </view>
                        </view>
                        <view catchtap="palyComment" data-bookinfo="{{bookInfo}}" class="item text-right">
                            <image src="../../images/icon/content_icon@3x.png"></image>
                            {{bookInfo.commentCnt}}</view>
                    </view>
                    <!--书本信息 E-->
                </view>
                <!--封底头部 E -->

                <view class="spacing"></view>

                <!-- 评论 可以组件 S-->
                <view class="comment-panel">
                    <!--没有评论 S-->
                    <view class="comment-none" wx:if="{{isComment == 1}}">
                        <view>暂无评论 ～</view>
                    </view>
                    <!--没有评论 E-->

                    <!-- 一条评论 S-->
                    <view wx:if="{{isComment == 0}}">
                        <view class="comment-item" wx:for="{{comments}}" wx:for-item="Citem">
                            <view class="comment-avatar">
                                <image src="{{Citem.headImgUrl}}"></image>
                            </view>
                            <view class="comment-main">
                                <text class="comment-username">{{Citem.nickName}}</text>
                                <view class="comment-content">{{Citem.content}}</view>
                                <view class="comment-sub">
                                    <text class="comment-time">{{Citem.ts}}</text>
                                    <!--<text class="comment-replay-btn"> 回复</text>-->
                                </view>
                                <!--<view class="comment-replay">
                            <view class="comment-replay-title">作者回复</view>
                            <view class="comment-replay-content">作者回复</view>
                        </view>-->
                            </view>
                        </view>
                    </view>
                    <!-- 一条评论 E-->
                </view>
                <!-- 评论 可以组件 E-->
                <!-- 评论 S -->
                <view wx:if="{{showComment}}" class="comment-wrapper">
                    <view class="comment-form">
                        <form bindsubmit="submitComment">
                            <view class="comment-text">
                                <textarea auto-height="true" name="comment" placeholder="评论" />
                            </view>
                            <button form-type="submit" size="mini" class="btn-primary comment-btn" hover-class="btn-primary-hover"> 提交 </button>
                        </form>
                    </view>
                </view>
                <!-- 评论 E -->

            </scroll-view>
            <!--内部滚动 E-->
        </swiper-item>
        <!-- 书封底面 E-->


    </swiper>
</view>

/* listbook.wxss */
.swiper-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
}

.swiper-box, .book-page, .book-last-page {
  width: 100%;
  height: 100%;
}


/*封面 S*/
.cover-img{
    position: relative;
    height: 580rpx;
    width: 580rpx;
    margin: 0 auto;
    text-align: center;
}
.cover-img image{
    width: 580rpx;
    height: 580rpx;
}

.cover-br{
    position: absolute;
    top: 50rpx;
    left: 50rpx;
    width: 480rpx;
    height: 480rpx;
    border-radius: 100%;
    overflow: hidden;
    
}

.cover-br .cover{
    width: 480rpx;
    height: 480rpx;
}

.title{
    margin-top: 80rpx;
    text-align: center;
    font-size: 42rpx;
    color: #333;
}

.author{
    margin-top: 20rpx;
    text-align: center;
    font-size: 34rpx;
    color: #999999;
}
.author-avatar{
    margin: 150rpx;
    text-align: center;
}
.author-avatar image{
    width: 110rpx;
    height: 110rpx;
    border-radius: 50%;
}

/*封面 E*/

/*内容页 S*/
.bookpage-scroll{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 200rpx;
    padding: 50rpx 0;
}

.page-img{
    margin: 0 50rpx 38rpx 50rpx;
    height: 450rpx;
}

.page-img image{
    height: 450rpx;
}

.page-text{
   margin: 0 50rpx 0 50rpx; 
}

/*播放控制器*/
.ctl-box{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 200rpx;
    overflow: hidden;
}

.start-time{
    position: absolute;
    top: 24rpx;
    left: 26rpx;
}
.end-time{
    position: absolute;
    top: 24rpx;
    right: 26rpx;
}

.paly-btn{
    height: 60rpx;
    width: 60rpx;
    margin: 0 auto;
    vertical-align: middle;
}

.paly-btn image{
    height: 200rpx;
    width: 60rpx;
    line-height: 200rpx;
}

/*内容页 E*/


/* 封底排版 */

.book-last-page {
    padding-top: 15rpx;
    background: #fff;
}

.top-part{
    padding-bottom: 40rpx;
}

.book-cover-wp{
    position: relative;
    width: 598rpx;
    height: 514rpx;
    margin-top: 40rpx;
    margin-left:auto;
    margin-right:auto;
    border: 2rpx solid #bebdbd;
}

.book-cover-wp > image{
    width: 598rpx;
    height: 514rpx;
    filter: blur(10rpx);
    /*opacity:0.4;
    filter:alpha(opacity=40);*/
}

.book-cover-wp .book-cover{
    position: absolute;
    top: 24rpx;
    right: 48rpx;
    height: 462rpx;
    width: 462rpx;
    border: 2rpx solid #fff;
    border-radius: 100%;
    overflow: hidden;
}

.book-cover-wp .book-cover > image{
    height: 462rpx;
    width: 462rpx;
}

.book-cover-wp .cover-side{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 44rpx;
    border-right: 1rpx solid rgb(33, 33, 33);
    background: #808080;
    background: -moz-linear-gradient(bottom, rgba(67, 67, 67, 0.5), rgba(70, 67, 67, 1.0));
    background: -webkit-linear-gradient(bottom, rgba(67, 67, 67, 0.5), rgba(70, 67, 67, 1.0));
}

.book-cover-wp .cover-circle{
    position: absolute;
    top: 218rpx;
    right: 242rpx;
    width: 68rpx;
    height: 68rpx;
    border: 2rpx solid #fff;
    overflow: hidden;
    border-radius: 100%;
    /*background: rgba(255, 255, 255, 0.3);*/
}

.book-cover-wp .cover-circle > image{
    width: 68rpx;
    height: 68rpx;
    filter: blur(10rpx);
}

.book-title{
    margin-top: 25rpx;
    font-size: 34rpx;
    text-align: center;
}

.book-author{
    margin-top: 10rpx;
    font-size: 28rpx;
    color: #666;
    text-align: center;
}

.book-recommend{
    display: -webkit-box !important;
    margin-top: 20rpx;
    padding: 0 20rpx;
    text-indent: 2rem;
    overflow: hidden;  
    text-overflow: ellipsis;  
    word-break: break-all;  
    -webkit-box-orient: vertical;  
    -webkit-line-clamp: 2; 
    font-size: 24rpx;
    color: #999999;
}

/*点赞信息*/
.subinfo{
    display: flex;
    width: 588rpx;
    height: 50rpx;
    line-height: 50rpx;
    margin-top: 50rpx;
    margin-left: auto;
    margin-right: auto;
    font-size: 32rpx;
    color: #999;
}

.subinfo .item{
    flex: 1;
}

/*分享编辑菜单*/
.sub-nav{
    display: flex;
    width: 588rpx;
    height: 50rpx;
    margin-top: 30rpx;
    margin-left: auto;
    margin-right: auto;  
    line-height: 50rpx;
    font-size: 32rpx;
    color: #999;
}

.item{
    flex: 1;
}

.item image{
    display: inline-block;
    height: 40rpx;
    width: 40rpx;
}

/* 评论 */
.comment-panel {
    padding: 0 24rpx 40rpx 24rpx;
    background: #fff;
}

.comment-panel-head {
    height: 100rpx;
    padding-right: 20rpx;
    line-height: 100rpx;
    text-align: right;
    font-size: 28rpx;
    color: #38cfba;
}

.comment-panel-btn image {
    width: 50rpx;
    height: 40rpx;
    margin-right: 8rpx;
    vertical-align: middle;
}

/*无评论*/
.comment-none{
    padding-top: 100rpx;
    text-align: center;
    font-size: 30rpx;
    color: #999999;
}

.comment-item {
  display: flex;
  padding: 24rpx 12rpx 0 6rpx;
}

.comment-avatar {
  flex: 0 1 100rpx;
  width: 80rpx;
  height: 80rpx;
}

.comment-avatar image {
  width: 80rpx;
  height: 80rpx;
}

.comment-main {
  flex: 1;
  padding-right: 8rpx;
}

.comment-username {
  margin-bottom: 16rpx;
  font-size: 26rpx;
  color: #666;
}

.comment-content {
  margin-bottom: 28rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 30rpx;
  line-height: 1.75em;
  color: #333;
}

.comment-sub{
  display: flex;
  padding-bottom: 28rpx;
  border-bottom: 1rrpx solid #e4e4e4;
  font-size: 24rpx;
  color: #999;
}

.comment-time{
  flex:1;
  text-align: left;
}

.comment-replay-btn{
  flex:1;
  text-align: right;
}

.comment-replay-title{
  padding-left: 8rpx;
  margin-top: 28rpx;
  margin-bottom: 20rpx;
  border-left: 3rpx solid #38cfba;
  font-size: 30rpx;
  color: #999;
}

.comment-replay-content{
  font-size: 30rpx;
  color: #333;
  margin-bottom: 20rpx;
}

/*评论*/
.comment-wrapper{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: auto;
}
.comment-form{
  position: relative;
  background: #f8f8f8;
  border-top: 1rpx solid #dddddd;
}

 .comment-btn{
  position: absolute;
  bottom: 15rpx;
  right: 50rpx;
}

.comment-text{
  padding-right: 200rpx;
  padding: 15rpx;
}

.comment-text textarea{
  width: 490rpx;
  padding: 15rpx;
  border-radius: 4rpx;
  background: #fff;
}

// common utils.js
let utils = require('../../utils/util.js');

// 进度计算器  传入that 和页码index
function timeMeter(that, index) {
  that.data.pagesData[index].playProgress = (that.data.pagesData[index].playTime / that.data.pagesData[index].time) * 100;
  that.data.pagesData[index].playTimeFt = utils.durationFormat(that.data.pagesData[index].playTime);
  // 渲染
  that.setData({
    pages: that.data.pagesData
  });
  if (that.data.pagesData[index].playProgress >= 100) {
    that.setData({
      pages: that.data.pagesData
    });
    return;
  }
  setTimeout(function () {
    that.data.pagesData[index].playTime += 100;
    timeMeter(that, index)
  }, 100)
}

// 自动播放
function autoPlay(autoPlayArray, index) {
  console.log(index);
  console.log(autoPlayArray);
  console.log(autoPlayArray[index].audioUrl);
  let waitTime = 100;
  if (index > autoPlayArray.length) {
    return;
  }

  setTimeout(function (autoPlayArray, index) {
    if (autoPlayArray[index].audioUrl) {
      wx.playVoice({
        filePath: autoPlayArray[index].audioUrl,
        success: function (res) {
          console.log(res);
        }
      });
    }
    autoPlay(autoPlayArray, index+1);
  }, autoPlayArray[index].time);
}

// pages/book/book.js
Page({

  data: {
    bookInfo: {},  //书本信息
    bookInfoData: {}, // 书本信息不更新到页面

    pages: [],//音频数组，更新到页面
    pagesData: [], // 音频数组，不更新到页面
    pageIndex: -1, // 正在播放的页码
    isPlayingTime: {}, // settimeout
    autoPlay: [], // 自动播放

    swiperTime: 5000, // 轮播图切换时间

    bookId: {}, // 书本ID
    bookReader: {}, // 书本类型 
    // 评论
    commentPageNum: 1, // 评论页码
    comments: [], //评论数量
    isComment: 1, // 是否有评论，0 有， 1 无
    showComment: false // 输入评论
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let that = this;
    that.data.bookId = options.bookId;
    that.data.bookReader = options.reader;

    getApp().getAudio(that.data.bookId, function (data) {
      if (data.code == 0) {
        console.log(data);
        that.data.pagesData = data.payload.bookReadingInfo.pages;
        that.data.pagesData.forEach(function (val, index) {
          that.data.pagesData[index].time = val.duration;
          that.data.pagesData[index].isPlaying = false;
          that.data.pagesData[index].duration = utils.durationFormat(val.duration);
          that.data.pagesData[index].playProgress = 0;
          if (that.data.pagesData[index].time == 0) {
            that.data.pagesData[index].swiperTime = 1000;
          } else {
            that.data.pagesData[index].swiperTime = val.duration - 0 + 1000;
          }
          that.data.pagesData[index].playTime = 1;
          that.data.pagesData[index].playTimeFt = '00:00';
        }, this);
        that.setData({
          bookInfo: data.payload.bookReadingInfo,
          bookInfoData: data.payload.bookReadingInfo,
          pages: that.data.pagesData
        });
        wx.setNavigationBarTitle({
          title: that.data.bookInfo.title
        });

        // 循环下载文件到本地
        that.data.autoPlay = that.data.pagesData;
        that.data.pagesData.forEach(function (val, index) {
          if (val.audioUrl) {
            // 下载缓存到本地 并且播放
            wx.downloadFile({
              url: val.audioUrl,
              success: function (res) {
                // 保存到本地 替换原来远程地址
                that.data.autoPlay[index].audioUrl = res.tempFilePath;
              }
            });
          }
        });

        // 自动播放
        console.log(that.data.autoPlay);
        // autoPlay(that.data.autoPlay, 0);

      } else {
        console.log("error_code:" + data.msg);
      }
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    let that = this;
    // reader 0 书本  1 朗读 
    getApp().getCommentList(that.data.bookId, that.data.bookReader, that.data.commentPageNum, function (res) {
      console.log(that.data.autoPlay);
      if (res.payload.comments.length !== 0) {
        res.payload.comments.forEach(function (element, index) {
          res.payload.comments[index].ts = utils.formatTime(new Date(element.ts * 1000));
        }, this);
        that.setData({
          comments: res.payload.comments,
          isComment: 0
        });
      }
    });

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },

  //点击播放录音  
  onVicesTap: function (event) {
    let that = this;
    console.log(event.currentTarget.dataset.index);
    timeMeter(that, event.currentTarget.dataset.index);
    // 判断播放的页码是否同一
    if (that.data.pageIndex == event.currentTarget.dataset.index) {
      // 同一页面 暂停UI
      that.data.pagesData[event.currentTarget.dataset.index].isPlaying = false;
      that.setData({
        pages: that.data.pagesData
      });
    } else {
      // 不是同一页面 上一个页面关闭，这个页面开启
      if (that.data.pageIndex >= 0) {
        that.data.pagesData[that.data.pageIndex].isPlaying = false;
      }
      that.data.pagesData[event.currentTarget.dataset.index].isPlaying = true;
      that.setData({
        pages: that.data.pagesData
      });

      // 更新播放页面pageIndex
      that.data.pageIndex = event.currentTarget.dataset.index;

      // 清除 setTimeout
      clearTimeout(that.data.isPlayingTime);
      // 设置自动回复停播状态
      that.data.isPlayingTime = setTimeout(function () {
        that.data.pagesData[that.data.pageIndex].isPlaying = false;
        // 修改播放状态
        that.setData({
          pages: that.data.pagesData,
          pageIndex: -1
        });
      }, that.data.pagesData[that.data.pageIndex].time);
    }

    // 下载缓存到本地 并且播放 pagesData
    wx.playVoice({
      filePath: that.data.pagesData[that.data.pageIndex].audioUrl,
      success: function (res) {
        console.log(res);
      }
    });
  },

  // like动作
  likeIt: function (event) {
    let that = this;
    if (that.data.bookInfoData.hasLiked == 1) {
      that.data.bookInfoData.hasLiked = 0;
      that.data.bookInfoData.likeCnt = that.data.bookInfoData.likeCnt - 1;
      that.setData({
        bookInfo: that.data.bookInfoData
      });
      getApp().likeAct(that.data.bookInfo.bookId, that.data.bookInfo.reader, 0, function (res) {
        console.log('取消点赞');
      });
    } else {
      that.data.bookInfoData.hasLiked = 1;
      that.data.bookInfoData.likeCnt = (that.data.bookInfoData.likeCnt - 0) + 1;
      that.setData({
        bookInfo: that.data.bookInfoData
      });
      getApp().likeAct(that.data.bookInfo.bookId, that.data.bookInfo.reader, 1, function (res) {
        console.log('点赞成功');
      });
    }
  },

  // 评论
  palyComment: function () {
    let that = this;
    if (that.data.showComment) {
      that.setData({
        showComment: false
      });
    } else {
      that.setData({
        showComment: true
      });
    }
  },

  //提交评论
  submitComment: function (event) {
    let that = this;
    console.log(event.detail.value.comment);
    if (event.detail.value.comment) {
      getApp().addComment(that.data.bookId, that.data.bookReader, event.detail.value.comment, function (res) {
        if (res.code == 0) {
          res.payload.comment.ts = utils.formatTime(new Date(res.payload.comment.ts * 1000));
          let data = that.data.comments.concat(res.payload.comment);
          wx.showToast({
            title: '评论成功',
            icon: 'success',
            duration: 1000
          });
          that.setData({
            comments: data,
            showComment: false,
            isComment: 0
          });
        }
      });
    } else {
      wx.showToast({
        title: '请输入评论内容',
        icon: 'loading',
        duration: 1000
      })
    }
  }
})