<template>
	<!--父组件-->
	
	<view class="container" style="padding-bottom: 10rpx;">
		<!-- <view class="mini"></view> -->
		<view>
			<z-nav-bar title="讲书目录"></z-nav-bar>
			<!-- 基本信息 -->			
			<view class="book_neir">
				<view class="flexbox info">
					<view class="item">
						<image class="bn_img" v-if="bookInfo.images != ''" :src="bookInfo.images" mode="widthFix">
						</image>
						<image class="bn_img" style="border:1px solid #eee" v-else src="../../static/icon/wufeng.jpg"
							mode="widthFix"></image>
					</view>
					<!-- <img :src="bookInfo.images" class="bn_img"> -->
					<view class="item">
						<!-- <b class="leiXing" v-if="bookInfo.isVip==1" style="background: #c79119;">VIP</b>
					<b class="leiXing" v-if="bookInfo.isVip==2" style="background: #c74119;">付费</b> -->
						<view class="bn_nes">
							<view style="font-weight: bold;margin-bottom: 30rpx;">
								{{bookInfo.name}}
							</view>
							<view v-if="bookInfo.author != null"
								style="color: #9b9b9b;font-size: 28rpx;margin:20rpx 0 0 0;max-width: 400rpx;line-height: 38rpx;">
								<p @click="onAuCHJump(bookInfo.author.id,1)" style="margin-bottom: 20rpx;">
									{{bookInfo.author.authorName}} [著] >
								</p>
								<p @click="onAuCHJump(item.id,2)" v-for="item in this.bookInfo.publisherNIList">
									{{item.title}} >
								</p>
							</view>
							<view class="tags">
								<uni-tag class="tag" @click="toMore()" :inverted="true" text="书评"
									type="success"></uni-tag>
								<!-- 1:打卡，2不打卡 -->
								<uni-tag @click="gotoclock()" v-if="bookInfo.clockIn == 1" class="tag" :inverted="true"
									text="签到" type="warning"></uni-tag>
							</view>
						</view>
					</view>
				</view>

			</view>
			<!-- end -->
			<view class="playList" v-if="libLIst.length > 0">
				<view class="item" v-for="(item,index) in libLIst" :key="index">
					<view>
						<view @click="toDetail(item)" class="flexbox muluitem">
							<span>{{item.title}}</span>&nbsp;&nbsp;
							<view >
							<uni-tag v-if="item.voices != ''" class="tag" size="small" :inverted="true" text="音频"
								type="success" /></view>
							<view ><uni-tag v-if="item.content != ''" class="tag" size="small" :inverted="true" text="文字"
								type="primary" /></view>
							<!-- <image  class="playingFig" src="/static/playingGif.gif" mode="aspectFill"></image>	 -->
						</view>
					</view>
				</view>
				<view style="width: 100%;">
					<view v-if="status==0" style="text-align: center;">
						<u-loading-icon style="display: inline-block;"></u-loading-icon>
						<font style='vertical-align: super;margin-left: 10px;font-size: 26rpx;color: #909399;'>努力加载中</font>
					</view>
					<view v-if="status==1">
						<u-divider text="全部加载完成"></u-divider>
					</view>
				</view>				
			</view>
			<u-divider v-else text="暂无讲书目录"></u-divider>
			<music-play :playData="playData"></music-play>
			<!-- 公共组件-每个页面必须引入 -->
			<public-module></public-module>		
			<!-- <z-navigation></z-navigation> -->
		</view>
	</view>
</template>

<script>
	// import textScroll from '@/components/textScroll/index.vue'
	// import cxAdudioPlay from '@/components/cx-audio-play/cx-audio-play.vue'
	import musicPlay from '@/components/music.vue'
	import $http from '../../config/requestConfig';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			//  cxAdudioPlay,
			// textScroll,
			musicPlay
		},
		data() {
			return {
				isBuy: false, // true 已购买，false 未购买
				playData: {},				
				bookInfo: {
					author:{
						authorName:''
					}
				}, // 书籍详情
				bookid: null, // 书籍id
				status:3,				
				freeChapterCount: 0, // 免费章节数				
				libLIst: [], // 书籍目录
				videoList: [], //音频文件
				page:1,
				totalPage:0,
			}
		},
		onPullDownRefresh() {
			console.log('下拉刷新了')
			this.libLIst = []
			this.page = 1
			this.totalPage = 0
			this.getLibList()
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			console.log('到底了',this.page+1 , this.totalPage)
			
			if(this.page+1 <= this.totalPage){
				this.page++
				this.status = 0
				this.getLibList()
			}else{
				this.status = 1
			}
		},
		onHide() {
			this.libLIst = []
			this.page = 1
		},
		//第一次加载
		onLoad(e) {
			console.log('------------------')
			// 隐藏原生的tabbar
			console.log(e, 'e')
			uni.hideTabBar();
			this.bookid = e.bookid			
		},		
		onShow() {
			// this.libLIst = []
			// this.page = 1
			// this.totalPage = 0
			this.getLibList()
			this.getBookInfo()
			
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			...mapMutations(['setUserInfo']),

			// 查看本书更多书评
			toMore(val) {
				console.log(val, 'val')
				uni.navigateTo({
					url: '../comments/comments?bookid=' + this.bookid,
				});
			},
			// 去打卡
			gotoclock() {
				uni.navigateTo({
					url: '../clock/clock?bookid=' + this.bookid,
				});
			},
			getBookInfo() {
				// 获取书本基本信息
				this.$http					
					.post('book/book/getBookInfo', {
						'bookId': this.bookid,
						'userId': this.userInfo.id
					})
					.then(res => {
						if (res.code == 0) {
							console.log(res, 'res')
							this.bookInfo = res.book
							// this.isBuy = res.book.isBuy
							// this.freeChapterCount = res.book.freeChapterCount
						} else {
							console.log(res.msg)
						}
						console.log(res, 'res基本信息')
					}).catch((error) => {
						console.log(error)
					})
			},

			// 详细
			toDetail(item) {
				console.log('点击了', item)
				uni.navigateTo({
					url: './talkBookDetail?teachId=' + item.teachId +"&bookId="+item.bookId
				});
			},

			// 信息介绍跳转
			onAuCHJump(id, e) {
				uni.navigateTo({
					url: '../eBook/bookMessage?Id=' + id + '&typ=' + e
				});
			},
			// 获取章节列表
			getLibList() {
				this.$http
					.post('book/teach/getBookTeachItems', {
						'bookId': this.bookid,
						'limit': 20,
						'page': this.page
						// 'userid': this.userInfo.id,
						// 'bookid': 
						// 'id': this.playid
					})
					.then(res => {
						if (res.code == 0) {
							console.log(res, '章节目录')
							if (res.page.records.length > 0) {
								this.libLIst = this.libLIst.concat(res.page.records)
								this.status = 3
								this.totalPage = res.page.pages								
								if(this.totalPage = res.page.current){
									this.status = 1
								}						
							} else {
								this.libLIst = []
								this.totalPage = 0
							}
						}
					}).catch((e) => {
						console.log(e.msg)
					})
			},
			
		},
	}
</script>

<style lang="less">
	.muluitem{
		span{
			white-space: nowrap;
			overflow-x: hidden;
			text-overflow: ellipsis;
		}
	}
	.playingFig {
		width: 100rpx;
		height: 100rpx;
		display: inline-block;
		vertical-align: middle;
	}

	.price {
		margin-top: 160rpx;
		overflow: hidden;

		.light {
			font-size: 50rpx;
			font-weight: bold;
			color: #f05654;
		}
	}

	.tags {
		.tag {
			margin-left: 0;
			margin-right: 10rpx;
		}
	}

	.charType {
		display: inline;
		width: 20px !important;
	}

	.graytitle {
		color: #999;
	}

	.yigoumai {
		background-color: #ffc773;
	}

	.shiting {
		background-color: #f47983;
	}

	.playing {
		color: #1daa5c;
	}

	.chaoshi {
		background-color: #1daa5c;
	}

	.home_nar {
		margin: 30rpx 0;
		justify-content: space-between;
	}

	.hn_cl_tit {
		width: 48%;
		text-align: center;
		border-radius: 20rpx;
		padding-top: 10rpx;
		// line-height: 110upx;
		display: flex;
		align-content: center;
		justify-content: center;

		image {

			width: 80upx;
			height: 80upx;
			display: inline-block;
			// margin: 0 auto;
			// margin: 0 20rpx;
		}

		text {
			height: 100upx;
			display: inline-block;
			line-height: 80upx;
			color: #fff;
			font-size: 38rpx;
		}
	}

	.flexbox {
		display: flex;
	}

	.book_neir {
		margin-top: 80rpx;
		padding: 20rpx;

		.bn_img {
			width: 300rpx !important;
		}
	}

	.info {
		overflow: hidden;
		width: 100%;
	}

	.book_neir {
		margin: 20rpx 0 0 0;
		position: relative;

		.item {
			display: inline-block;
			float: left;
			width: 50%;
			overflow: hidden;
		}

		.bn_img {
			float: left;
			width: 250upx;
			height: 320upx;
		}

		.bn_nes {
			float: left;
			font-size: 36rpx;
			margin-left: 40rpx;

			view {
				margin: 20rpx 0 0 0;
			}
		}

		.leiXing {
			display: block;
			padding: 5rpx 10rpx;
			border-radius: 10rpx;
			text-align: center;
			color: #fff;
			font-weight: normal;
			background: #27b386;
			position: absolute;
			left: -15upx;
			top: 10upx;
			font-size: 16rpx;
		}
	}

	.container {
		background-color: #fff;
	}

	.playTitle {
		width: 80%;
		margin: 20rpx auto;
		margin-top: 50rpx;
	}

	.libTitle {
		font-size: 40rpx;
		margin: 40rpx 0;
		display: block;
		text-align: center;
	}

	.tanchu {
		padding: 40rpx 30rpx 40rpx 30rpx;
	}

	.playList {
		padding: 20rpx;
		color: #666;
	}

	.playList .item {
		display: block;
		line-height: 80rpx;
		white-space: nowrap;
		overflow-x: hidden;
		font-size: 36rpx;
		text-overflow: ellipsis;
	}

	.tag {
		margin-left: 20rpx;
	}

	.playNow {
		color: #27b386;
	}

	.pageTabBox {
		width: 150px;
		margin: 20rpx auto;
		font-size: 60rpx;
	}

	.cxAdudioPlay {
		position: fixed;
		bottom: 150rpx;
		left: 0;
	}
</style>