<template>
	<view class="container">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="header">
			<!-- 顶部导航栏 -->
			<z-nav-bar title="医案"></z-nav-bar>
		</view>
        <view>
			<view class="" style="padding:40rpx 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="mainContainer">
				<view class="item" v-if="yianList.length > 0">
					<u-row gutter="16" justify="flex-start">
						<u-col span="4" v-for="(item,index) in yianList" :key="index">
							<view>
								<view class="videoBox demo-layout bg-purple" @click="toMore(item)">
									<image v-if="item.images != ''" :src="item.images" mode="scaleToFill"></image>
									<image v-else src="../../static/icon/wufeng.jpg" mode="scaleToFill"></image>
								</view>
								<text class="bookName">{{item.name}}</text>
							</view>
						</u-col>
					</u-row>
				</view>
				<u-divider v-else text="暂无数据"></u-divider>
				<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>
        </view>
		
		<music-play :playData="playData"></music-play>
	</view>
</template>

<script>
	import $http from '@/config/requestConfig.js';
	import emotion from '@/bkhumor-emojiplus/components/bkhumor-emojiplus/bkhumor-emojiplus.vue';
   import musicPlay from '@/components/music.vue'
import { data } from 'jquery';
   import {
   	mapState, mapMutations
   } from 'vuex';
   import {
   	checkBookRight
   } from '@/config/utils';
	export default {
		data() {
			return {
				playData:{},
				windowWidth:0,
				bookid:null,
				page:1,
				pageSize:10,
				total:0,
				status:3,
                booksetpage: 1,
                yianList:[],
				contentShow: 1,

			}
		},
		onPullDownRefresh() {
			console.log('下拉刷新了')
			uni.stopPullDownRefresh(); 
			  
            this.booksetpage = 1
            this.yianList = []
            this.getYianList(false)
			   
		},
		onReachBottom() {
            this.booksetpage++
            this.getYianList(false)
		},
		onLoad(e) {
			this.windowWidth = uni.getSystemInfoSync().windowWidth;
			console.log(e,'onload')
			// this.bookid = e.bookid
			this.getYianList(false)
		},
		computed:{
			...mapState(['userInfo']),
		},
		methods: {
			...mapMutations(['setLoadingShow']),
			setData(e) {
				this.contentShow = e
				this.getYianList(true)
			},
			// 查看本书更多书评
			toMore(val){
				if (this.contentShow == 1) {
					uni.navigateTo({
						url: '../yian/yianList?bookid='+val.id + '&bookname='+val.name,
					})
				}
				if (this.contentShow == 2) {
					uni.navigateTo({
						url: '../eBook/bookContent?Id=' + val.id
					});
				}
				// console.log(val,'val')
			},
			// // 医案详情
			// toDetail1(val){
			// 	// console.log(val,'val')
			// 	let data = {
			// 		'userId': this.userInfo.id,
			// 		'bookId': val.bookid
			// 	}
			// 	checkBookRight(data,res=>{
			// 		console.log(res)
			// 		if(res.success){
			// 			uni.navigateTo({
			// 				url: '../yian/yianDetail?medicalRecordsId='+val.medicalRecordsId
			// 			})
			// 		}else{
			// 			uni.showToast({
			// 				title:'购买本书后方可查看此内容!',
			// 				icon:'none'
			// 			})
			// 		}
			// 	})
				
			// },
			getYianList(tushuflag){
				
				// uni.showLoading({
				// 	title: '加载中'
				// });			
				
                var httpurl = "" 
				if(tushuflag){ // 点击切换已购和推荐
					this.booksetpage = 1
					this.yianList = []
				}
				if(this.contentShow == 2){
					httpurl = "book/bookMedicalRecords/userEbookBuyList"
				} else {
					httpurl = "book/bookMedicalRecords/recommendBookList"
				}
				
				$http.request({
					url: httpurl,
					method: "POST", 
					data: {
						"page": this.booksetpage,
						"limit": 10,
						"userId": this.userInfo.id
					},
					header: { //默认 无 说明：请求头
						'Content-Type': 'application/json'
					},
				}).then(res => {
					this.yianList = this.yianList.concat(res.page.records)
					console.log(this.yianList,'this.yianList')
					if(res.page.records.length != 10){
						this.status = 1
					} else {
						this.status = 0
					}	
				}).catch(e => {
					console.log(e)
				})
				
			},
			
		},
		components:{
			musicPlay,			
			emotion			
		}
	}
</script>

<style lang="scss" scoped>
.mytabs {
		// background: url('@/static/icon/bgtushu.png') no-repeat left top;
		height: 80rpx;
		// margin-bottom: 30rpx;

		.item {
			border-radius: 10rpx;
			background-color: #c6ead0;
			width: 48%;
			// margin: 0 10rpx;
			text-align: center;
			color: #3c7f56;
			font-size: 36rpx;
			line-height: 80rpx;
		}

		.item.active {
			background-color: #3c7f56;
			color: #fff;
		}

		.item1 {
			margin-right: 20rpx;
		}
	}

	.tip {
		padding: 20rpx;
		background-color: #fff;

		text {
			font-size: 36rpx;
		}
	}

	.flexbox {
		display: flex;
	}

	.container {
		padding: 10px;
	}

	.bookName {
		white-space: nowrap;
		overflow-x: hidden;
		text-overflow: ellipsis;
		font-size: 30rpx;
		color: #333;
		padding: 10rpx 0;
	}

	uni-image {
		width: auto !important;
		height: 350rpx;
	}

	.listenList {
		padding: 10rpx;
		box-sizing: border-box;
		width: calc(100% - 10rpx);
	}

	.u-row {
		flex-wrap: wrap;
	}

	.u-col {
		overflow: hidden;
		margin-bottom: 20rpx;
	}

	.mb30 {
		margin-bottom: 30rpx;
		overflow: hidden;
	}
</style>
