<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<!-- <public-module></public-module>	 -->	
		<!-- <z-nav-bar title="我的图书"></z-nav-bar> -->
		<view class="home_bg">
			<view class="" style=" ">
				<view class="icon_hua">
					<image src="../../static/icon/home_icon_3.png" mode="aspectFit" class="icon_hua_1"></image>
				</view>	
				<view class="hehan">
					<image src="../../static/icon/hehan.png" mode="aspectFit" class="icon_hua_1"></image>
				</view>	
				<view class="search_box flexbox" @click="onPageJump('../peanut/searchFor')">
					<view class="search">
						<text class="icon_search"></text>
						<text class="prompt">请输入想要搜索的书名</text>
					</view>				
				</view>
				<!-- <view class="searBtn flexbox">
					<text>搜索</text>
				</view> -->
			</view>		
			<!-- <view class="home_lunbo">
				<u-swiper :list="list3" indicator indicatorMode="line" circular style="height: 180rpx;"></u-swiper>
			</view> -->
		</view>
		<!-- <view class="contentButton">
			<u-tabs :scrollable="false" bg-color="#d4d4d4" active-color="#2979ff" inactive-color="#606266" bar-height="10" :list="contentButtonList" @click="contentButtonClick" lineWidth="42" :inactiveStyle="{fontSize:'32rpx'}" :activeStyle="{color: '#303133',fontWeight: 'bold', transform: 'scale(1.01)'}"></u-tabs>
		</view> -->
		<view class="" style="padding: 20rpx;">
		<view class="mytabs flexbox">
			<view :class="['item','item1', contentShow == 1 ? 'active' :'']" @click="setData(1)">
				已购图书
			</view>
			<view :class="['item','item2', contentShow == 2 ? 'active' :'']" @click="setData(2)">
				推荐图书
			</view>
		</view>
		</view>
		<view class="listenList" v-if="bookList.length > 0">
			<view class="wrap" v-if="contentShow == 1">						
					<u-row gutter="16" justify="flex-start">
						<u-col span="6" v-for="(item,index) in bookList" :key="index">
							<view >
							<view class="flexbox listenItem">
								<view class="info">
									<view class="videoBox demo-layout bg-purple" @click="goToListenFree(item)">
										<image :src="item.image" mode="scaleToFill" ></image>
									</view>									
								</view>
								
								<view class="btns">
									<!-- <view class="item flexbox" @click="">
										 <u-icon name="bookmark" color="#55aaff" size="24"></u-icon> 
										<image src="../../static/icon/tu1.png" mode="aspectFit"></image>
										<text >读 书</text>
									</view> -->
									<view class="item flexbox" @click="goToListenFree(item)">
										<!-- <u-icon name="volume" color="#71d5a1" size="24"></u-icon> -->
										<image  src="../../static/icon/tu2.png" mode="aspectFit"></image>
										<text>听 书</text>
									</view>
									<view class="item flexbox" @click="goPingshu(item.bookId)">
										<!-- <u-icon name="chat" color="#fcbd71" size="24"></u-icon> -->
										<image  src="../../static/icon/tu3.png" mode="aspectFit"></image>
										<text>评 书</text>
									</view>
								</view>
							</view>
							<view class="bookName">{{item.bookName}}</view>	
							</view>
						</u-col>						
					</u-row>					
				</view>			
				<view class="wrap" v-if="contentShow == 2">					
						<u-row gutter="16" justify="flex-start">
							<u-col span="6"  v-for="(item,index) in tjBookLIst" :key="index">
								<view class="flexbox listenItem">
									<view class="info">
										<view class="videoBox demo-layout bg-purple" @click="goDetail(item.product)">
											<image :src="item.product.productImages" mode="scaleToFill" ></image>											
										</view>
									</view>
									<view class="btns">
										<view class="item flexbox" @click="goDetail(item.product)">
											<image src="../../static/icon/tu1.png" mode="aspectFit"></image>
											<text>读 书</text>
										</view>
										<view class="item flexbox" @click="goToListen(item.product)">
											<image src="../../static/icon/tu2.png" mode="aspectFit"></image>
											<text>听 书</text>
										</view>
										<view class="item flexbox" @click="wgGoPingshu(item.product)">
											<image src="../../static/icon/tu3.png" mode="aspectFit"></image>
											<text>评 书</text>
										</view>
									</view>
								</view>
								<view class="bookName">{{item.product.productName}}</view>
							</u-col>						
						</u-row>						
					</view>	
		</view>
		<view>
			<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 class="shuwuLink">
			<image @click="" src="../../static/icon/shuwu.jpg" mode="aspectFit"></image>
		</view> -->
		<music-play :playData="playData"></music-play>
		<z-navigation></z-navigation>
	</view>
</template>

<script>
	 import musicPlay from '@/components/music.vue'
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				list3: [
					// '../../static/icon/home_ban_1.jpg',
					'../../static/icon/home_ban_2.jpg',
					'../../static/icon/home_ban_3.jpg',
				],
				showEbook:false,
				playData:{},
				loadingNow : false,
				bookList:[],
				contentShow:1,
				page:1, // 页码
				status: 3,
				ygtotalPage:1,
				tjPage:1,
				tjTotalPage:1,
				tjBookLIst:[],
				contentButtonList: [{
						name: '已购图书'
					},
					{
						name: '推荐图书'
					}
				],
			}
		},
		onLoad() {
			this.getListDate()
			this.getfreeBook()
		},
		onPullDownRefresh() {
			console.log('下拉刷新了')
			uni.stopPullDownRefresh(); 
			   if(this.contentShow == 1){
				   // this.page=1, // 页码			   
				   this.bookList = []
				   this.getfreeBook()
			   }
			   else if(this.contentShow == 2){
			   	// this.tjPage=1, // 页码
			   	this.tjBookLIst = []
			   	this.getListDate()
			   }
		},
		onReachBottom() {
			this.loadingNow = true
			console.log('到底了')
			
			// if(this.contentShow == 1){	
			// 	//console.log(this.page , this.ygtotalPage)
			// 	if(this.page < this.ygtotalPage){	
			// 		this.page++
			// 		console.log('加载',this.page)
			// 		this.status = 0
			// 		this.getfreeBook()
					
			// 	}else{
			// 		this.status = 1
			// 		console.log('加载完成了',this.page)
			// 		return
			// 	}
				
			// }else if(this.contentShow == 2){				
			// 	if(this.tjPage < this.tjTotalPage){
			// 		this.tjPage++
			// 		console.log('加载',this.tjPage)
			// 		this.status = 0
			// 		this.getListDate()
					
			// 	}else{
			// 		this.status = 1
			// 		console.log('加载完成了',this.tjPage)
			// 		return
			// 	}
			// }
		},
		components:{
			musicPlay
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {	
			setData(e){
				this.contentShow = e
			},
			// 未购买图书，评书跳转
			wgGoPingshu(item){
				console.log('未购买评书',item)
					uni.navigateTo({
						 url: '../comments/comments?bookid='+item.bookId,
						// url:'../bookShop/commodityDetail'
						
					});
				
			},
			// 跳转到评书
			goPingshu(val){
				console.log('评书',val)
				uni.navigateTo({
					 url: '../comments/comments?bookid='+val,
				});
			},			
			contentButtonClick(e){
				this.contentShow = e.index
			},
			// 获取已购买书籍
			getfreeBook(){
				console.log('获取已购买书籍')
				this.$http
					.post('book/userebookbuy/buylist', {
					// .post('book/buyorderdetail/querybuy', {
						'id': this.userInfo.id,
						'page':this.page,
						'limit':10
					})
					.then(res => {
						
						if(res.code == 0){
							// this.ygtotalPage = res.page.totalPage
							//var arr = res.page
							 res.page.forEach(item => {
								 if(item.canListen){
									 this.bookList.push(item)
								 }
							 })
							// console.log(this.bookList,'arr')
							//this.bookList = arr
							// this.bookList = this.bookList.concat(res.page.list)
							 console.log(res,'已购买')
							this.status = 3
						}					
						
					});
			},
			
			// 获取推荐图书（未购买）
			getListDate(){
				console.log('获取推荐图书（未购买）')
				this.loadingNow = false
				// 获取书架列表
				this.$http
					.post('book/shopproduct/booklist', {
						'userId': this.userInfo.id,
						'limit':10,
						'page':this.tjPage
					})
					.then(res => {
						console.log(res,'获取推荐图书（未购买）')
						if(res.code == 0){
							// this.tjTotalPage = res.pages.totalPage
							var arr = []
							if(res.pages.length > 0){
							// 	for (var i=0; i<res.pages.list.length; i++ ) {
							// 		var booidArr = []
							// 		if(res.pages.list[i].bookId != null){
							// 			booidArr = res.pages.list[i].bookId.split(',')										
							// 			//res.pages.list[i].bookId = booidArr										
							// 			res.pages.list[i].bookId = booidArr
							// 		}else{
							// 			res.pages.list[i].bookId = []
							// 		}
							// }							
							//console.log(res.pages,'res.pages.list')
							// var arr = res.pages.list
								this.tjBookLIst = res.pages			
							 // this.tjBookLIst = this.tjBookLIst.concat(res.pages.list)
							// console.log(this.tjBookLIst[0])
							this.status = 3
						}	}			
						
					});
			},
		
			// 跳转详情页
			goDetail(item) {
				console.log(item,'goDetail-----')				
				uni.navigateTo({
					url: '../bookShop/commodityDetail?id=' + item.productId
				});
			},
			goToListen(item){	
				console.log(item,'item')
				
					uni.navigateTo({						
						url: "../listen/listen?bookid="+item.bookId		
					});
								
			},
			// 跳转到听书详情
			goToListenFree(item){
				// console.log(item,'item')								
				uni.navigateTo({
					url: "../listen/listen?bookid="+item.bookId+"&fengImg="+item.image   // 前台播放版本
				});
			},
			// 跳转11
			onPageJump(url) {
				uni.navigateTo({
					url: url
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/style/mixin.scss';
	.hehan{width: 80%; margin: 0 auto;}
	.home_lunbo {
		margin: 40rpx 30rpx 0 30rpx;
	}
	.mytabs{
		// background: url('@/static/icon/bgtushu.png') no-repeat left top;
		 height:110rpx ;  margin-bottom: 50rpx;
		.item{
				border-radius: 10rpx;background-color: #adb6b7; width: 48%; margin: 0 10rpx; text-align: center; color:#fff ; font-size: 36rpx; line-height:110rpx ;
		}		
		.item.active{
			background-color: #73837b;
		}
		.item1{
			background-color: #adb6b7;
		}
	}
	.listenItem{
		.btns{margin-top: 60rpx; margin-left: 20rpx;   font-size: 34rpx; justify-content: space-between;
			.item{ margin-bottom:30rpx;
				image{
					width: 24px !important;height:24px;display: block; margin-right: 10rpx;
				}
			}
		}
		.info{width: 50%;
		image{width:100% ; height: 280rpx; border-radius: 20rpx;}
		}
	}
	.shuwuLink{ padding: 0 20rpx;
		image{border-radius: 30rpx;}
	}
	.contentButton{margin:50rpx 0;}
	
	.quesheng{text-align: center; margin-top: 100rpx; color: #8b8a91;}
	.bookName{	 margin-top:10rpx;	display: block;  
		white-space: nowrap;	 font-weight: bold;				
		overflow-x: hidden;
		text-overflow: ellipsis;
		font-size: 30rpx; color: #333; padding: 10rpx 0;
	}
	// .videoBox{position: relative;}
	
	.playButton{position: absolute; z-index: 1; right: 4px; bottom: 4px;  padding: 5px; border-radius: 100%;  }
	uni-image {
	    width:auto !important;
	    height: 350rpx;
	}
	.u-row{flex-wrap: wrap;}
	.u-col{overflow: hidden;  margin-bottom: 30rpx; overflow: hidden;}
	.listenList{padding: 10rpx; box-sizing: border-box; width: calc(100% - 10rpx);}
	.flexbox{display: flex;}
	.scroll-Y {
			height: 300rpx;
		}
		.scroll-view_H {
			white-space: nowrap;
			width: 100%;
		}
		.scroll-view-item {
			height: 300rpx;
			line-height: 300rpx;
			text-align: center;
			font-size: 36rpx;
		}
		.scroll-view-item_H {
			display: inline-block;
			width: 60%;
			height: 300rpx;
			line-height: 300rpx;
			text-align: center;
			font-size: 36rpx;
		}
	.head_line {
		margin: 50rpx 0;
	
	
		b {
			display: inline-block;
			width: 12rpx;
			height: 40rpx;
			background-color: #54a966;
			vertical-align: bottom;
			margin: 0 20rpx 0 0;
		}
	
		text {
			font-size: 32rpx;
			font-weight: bold;
		}
	
		i {
			float: right;
			font-style: normal;
			color: #8b8a91;
			font-size: 24rpx;
			margin: 5rpx 35rpx 0 0;
		}
	}
	.home_bg {
			background-image: url('@/static/icon/home_bg.jpg'); 
			background-position: center center;
			background-repeat: no-repeat;
			background-size: cover;
			padding: 20rpx;
			position: relative; margin-bottom:60rpx;
		    // height: 400rpx; margin-bottom: 130rpx;
			.icon_hua_1 {
				// margin: 0 auto;
				width: 100%; text-align: center;
				height: 150rpx;
				image{width: 150rpx; height: 150rpx;}
			}
			.icon_hua{width: 100%; text-align: center; display: block;
			image{width: 150rpx; height: 150rpx;  margin: 0 auto;}
			}
			.search_box { margin: 0 auto; margin-top: 20rpx;  align-items: center;
				width: calc(100% - 30rpx);  margin-top: 0;
    margin-bottom: 20rpx;
				
				.search{height: 80upx; 
					display: flex;
					width: 100%;
					align-items: center;
					padding: 0upx 40upx;
					background-color: #fff;
					border-radius: 20upx;
					box-shadow: 0 0px 10px 1px #54a96633;
				}
				.prompt {
					color: #838383; font-size: 24rpx;
		
				}
		
				.icon_search {
					background-image: url('@/static/icon/map_ic_search.png');
					background-position: center center;
					background-repeat: no-repeat;
					background-size: cover;
					width:36upx;
					height: 36upx;
					margin-right: 20upx;
				}
			}
			.searBtn{
				width: 80rpx; align-items: center;
				font-size: 30rpx; color: #fff; 
			}
	}
</style>
