<template>
	<view style="background-color: #fff;padding: 30rpx;">
		<z-nav-bar title="电子书详情"></z-nav-bar>
		<view class="book_neir">
			<img :src="bookMessage.images" class="bn_img">
			<b class="leiXing" v-if="bookMessage.isVip==1" style="background: #c79119;">VIP</b>
			<b class="leiXing" v-if="bookMessage.isVip==2" style="background: #c74119;">付费</b>
			<view class="bn_nes">
				<view style="font-weight: bold;margin-bottom: 30rpx;">
					{{bookMessage.name}}
				</view>
				<view style="color: #9b9b9b;font-size: 28rpx;margin:20rpx 0 0 0;max-width: 400rpx;line-height: 38rpx;">
					<p @click="onAuCHJump(bookMessage.authorId,1)" style="margin-bottom: 20rpx;">
						{{bookMessage.authorName}} [著] >
					</p>
					<p @click="onAuCHJump(item.id,2)" v-for="item in this.bookMessage.publisherNIList">
						{{item.title}} >
					</p>
				</view>
				<view v-if="this.bookMessage.chapterNum!=null"
					style="color: #cdcdcd;font-size: 20rpx;margin:20rpx 0 0 0;max-width: 400rpx;line-height: 36rpx;">
					上次阅读到{{this.bookCatalogue[this.bookMessage.chapterNum-1].chapterName}}
				</view>
			</view>
			<br clear="both">
		</view>
		<view class="book_dredge" @click="onPageJump('../peanut/opeVip')" v-if="bookMessage.isVip!=0&&this.userMes.vip==0">
			<image src="../../static/icon/mine_p.png" alt=""></image>
			开通会员，免费读本书
			<b>></b>
		</view>
		<view class="book_dredge book_vip" v-if="this.userMes.vip==1">
			<image src="../../static/icon/mine_v.png" alt=""></image>
			尊享会员权益中
		</view>
		<view class="book_tab">
			<view>
			<u-tabs :list="tab_list" @click="tab_click" lineColor="#54a966  100% 100%"
				:activeStyle="{color: '#303133',fontWeight: 'bold',transform: 'scale(1.1)'}"></u-tabs>
				</view>
			<view class="bt_cont">
				<view v-if="tab_muJian==0" class="bt_jian">
					<text>
						{{bookMessage.description}}
					</text>
				</view>
				<view v-if="tab_muJian==1">
					<p style="text-align: right;color: #a5a5a5;margin-bottom: 10rpx;">
						共{{bookCatalogue.length}}章</p>
					<view class="bt_nulu" v-for='(item,index) in bookCatalogue'>
						<!-- 最近阅读的 -->
						<view @click="onBokReadJump(index)" v-if="bookMessage.isBuy==1" style="display: flex;justify-content: space-between;">
							{{item.chapterName}}
							<font v-if="bookMessage.chapterId==index">最近阅读</font>
						</view>
						<view v-if="bookMessage.isBuy==0">
							<view @click="onBokReadJump(index)" v-if="index<bookMessage.freeChapterCount">
								{{item.chapterName}}
								<font v-if="bookMessage.chapterId==index">最近阅读</font>
							</view>
							<view v-if="index>=bookMessage.freeChapterCount" @click="collectFee()">
								<!-- 不是会员显示锁 -->
								<font style=" color:#bfa853;margin-left: 20rpx;">
									<u-icon  name="lock" color="#ccc"  size="20" v-if="bookMessage.isBuy!==1"></u-icon>
								</font>
								{{item.chapterName}}
							</view>
							<view 
						</view>
					</view>
					<view style="height: 60rpx;"></view>
				</view>
			</view>
		</view>
		<view class="book_caozuo">
			<view v-if="this.bookMessage.flag" style="color: #aaa;">已加入书架</view>
			<view v-if="!this.bookMessage.flag" @click="joInshelf">加入书架</view>
		    <view @click="onBokReadJump(0)" v-if="this.bookMessage.isBuy==1&&this.bookMessage.chapterId==null">开始阅读</view>
					<view @click="onBokReadJump(bookMessage.chapterNum-1)" v-if="this.bookMessage.isBuy==1&&this.bookMessage.chapterId!=null">
				继续阅读
			</view>
			<view @click="onBokReadJump(0)" v-if="this.bookMessage.isBuy==0&&this.bookMessage.chapterNum==null&&this.bookMessage.freeChapterCount!=0">开始试读</view>
			<view @click="onBokReadJump(bookMessage.chapterNum-1)" v-if="this.bookMessage.isBuy==0&&this.bookMessage.chapterNum!=null&&this.bookMessage.freeChapterCount!=0">继续试读</view>
			<view v-if="this.bookMessage.isBuy==0&&this.bookMessage.freeChapterCount==0">购买阅读</view>
			<view @click="buyShowFun" v-if="bookMessage.isBuy==0" style="background-color: #d85f54;">立即购买</view>
			<view v-if="bookMessage.isBuy==1&&bookMessage.isVip!=0" style="background-color: #bfa853;">已购买</view>
			<view v-if="bookMessage.isVip==0">本书免费</view>
		</view>


		<!-- 购买 -->
		<u-popup :show="buyShow" :round="10" @close="buyShow=false" :closeable='true'>
			<view class="tanchu">
				<view class="by_title">购买</view>
				<view class="by_package">
					<view v-if="userMes.vip==0" :class="typeFen== 1?'Tab_by by_fen':'by_fen'" @click="chBuyType(1)">
						<view class="biao">开通会员</view>
						<view class="wenz">
							连续包月
							<text>节省{{bookMessage.salePrice}}疯币</text>
						</view>
					</view>
					<br>
					<view :class="typeFen== 2?'Tab_by by_fen':'by_fen'" @click="chBuyType(2)">
						<view class="biao" v-if="userMes.vip==0">直接购买</view>
						<view class="biao" v-if="userMes.vip==1">会员权益购买</view>
						<view class="benl">	
							<b v-if="useCouponAmount != ''">{{useCouponAmount}}</b>
							<span v-else>
							<b v-if="bookMessage.isSale==1">{{bookMessage.salePrice}}</b>
							<b v-if="bookMessage.isSale==0||bookMessage.isSale==null">{{bookMessage.price}}</b></span>
							疯币
							<text>{{bookMessage.price}}疯币</text>
						</view>						
					</view>
					<!-- 优惠券 ------------------------>
					<view class="yq_youhui" @click="CyouhuiShow" style="margin-top:20px;">
						<u-icon name="red-packet-fill" color="#e74141" size="18" class="yqLeft"></u-icon>
						优惠券
						<u-icon name="arrow-right" color="#aaa" size="18" class="yqRight"></u-icon>
						<text class="dagnqian"
							v-if="youhuiList.length>0&&youhuiContent.id==undefined">当前可选{{this.youhuiList.length}}张</text>
						<text class="dagnqian" v-if="youhuiList.length==0&&youhuiContent.id==undefined"
							style="background-color: #999;">暂无优惠券</text>
						<text class="dagnqian" v-if="youhuiContent.id!=undefined">						
							- ￥{{youhuiContent.coupons.couponAmount}}</text>
					</view>
				</view>
				<view style="height: 1px;width: 100%;background-color: #eee;margin-top: 50rpx;"></view>
				<view style="margin: 40rpx 10rpx 20rpx 10rpx;font-size: 30rpx;">
					<view style="float: left;">余额</view>
					<view style="float: right;color: #999;">
						{{userMes.peanutCoin}} 疯币
						<view class="chongBtn" @click="buPoint()">充值疯币</view>
					</view>
					<br clear="both">
				</view>

				<view style="color: #c3c3c3;font-size: 20rpx;margin: 30rpx 0;">支付成功后，立即解锁已购内容</view>

				<view @click="buyVip()" v-if="typeFen== 1" class="by_btn">查看套餐开通VIP</view>
				<view @click="buyMoneTip()" v-if="typeFen== 2" class="by_btn">购买本书</view>
			</view>
		</u-popup>

		<u-modal :show="buysignShow" :content="buysignContent" :showCancelButton="true" @cancel="cancelMoney"
			@confirm="buyMoney">
		</u-modal>

		<view>
			<u-back-top :scroll-top="scrollTop" bottom="60" :customStyle='bgiStyle' :iconStyle="iconStyle"></u-back-top>
		</view>
<!-- 优惠券弹1出 -->
		<u-popup :show="youhuiShow" :round="10" @close="hideyouhui">
			<view class="tanchu">
				<view class="dp_title">请选择优惠券</view>
				<view style="max-height: 1000rpx;overflow-y: scroll;">
					<span @click="clearYouhui" style="font-size: 14px;  display:inline-block;border: 1px solid #c74119; border-radius: 5px; float: right; color:#c74119; padding: 5px; margin-bottom: 10px;">不使用优惠券</span>
					<view :class="youhuiIndex === index ? 'youhuiItem youItem_style' : 'youhuiItem'"
						v-for="(item,index) in youhuiList" :key="index" @click="choseYouhui(index)">
						<view style="width: 25%;color:#fd6004;text-align: center;">
							<text>￥</text>
							<b style="font-size: 45rpx;">{{item.coupons.couponAmount}}</b>
							<text
								style="display: block;color: #666;font-size: 25rpx;margin-top: 10rpx;">满{{item.coupons.useLevel}}元可用</text>
						</view>
						<view style="width: 68%;padding-left: 5%;">
							<text>{{item.coupons.couponName}}</text>
							<text
								style="display: block;font-size: 20rpx;color: #999;margin-top: 10rpx;">到期时间：{{item.coupons.expirationDate}}</text>
						</view>
						<view style="width: 7%;">
							<text
								style="border: 1px solid #d9d9d9;width: 35rpx;height:35rpx;display:inline-block;border-radius: 30rpx;"
								v-if="youhuiIndex !== index"></text>
							<u-icon name="checkmark-circle-fill" color="#fd6004" size="20" v-if="youhuiIndex === index">
							</u-icon>
						</view>
						<br clear="both">
					</view>
				</view>
				<view style="font-size: 20rpx;color: #aaa;margin-top: 30rpx;">* 每笔订单只能使用一张优惠价</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import $http from '@/config/requestConfig.js';
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				youhuiShow:false,
				youhuiIndex:'',
				youhuiList:[], // 优惠券列表
				couponMz: 0, // 优惠券钱数
				useCouponAmount: '' , // 使用的优惠券金额
				bookJiageA: 0,
				youhuiContent: {
					coupons:{
						id:'0'
					}
				},
				scrollTop: 0,
				tab_list: [{
					name: '简介',
				}, {
					name: '目录',
				}],
				userMes: {},
				bokMesDet: {},
				tab_muJian: 0,
				bookId: '',
				bookMessage: {
					flag: false
				},
				bookCatalogue: [],
				bgiStyle: {
					background: '#2ab58833'
				},
				iconStyle: {
					fontSize: '40rpx',
					fontWeight: 'bold',
					color: '#54a966',
				},
				typeFen: 1,
				buyShow: false,
				buysignShow: false,
				buysignContent: ''
			};
		},

		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},

		//第一次加载
		onLoad(e) {
			this.bookId = e.Id

		},
		computed: {
			...mapState(['userInfo'])
		},
		//页面显示
		onShow() {
			this.getData();
		},
		//方法
		methods: {
			getData() {
				// 获取电子书详情
				this.$http
					.post('book/book/appinfo/' + this.bookId + '/' + this.userInfo.id)
					.then(res => {
						this.bookMessage = res.book
						this.bokMesDet.bookId = res.book.id
						this.bokMesDet.bookName = res.book.name,
						this.bokMesDet.images = res.book.images					
						if (this.bookMessage.isSale == 1) {
							this.buysignContent = '您确定要花费' + this.bookMessage.salePrice + '疯币购买' + this.bokMesDet
								.bookName + '吗？'
						} else {
							this.buysignContent = '您确定要花费' + this.bookMessage.price + '疯币购买' + this.bokMesDet
								.bookName + '吗？'
						}

						this.bokMesDet.userId = this.userInfo.id

						if (this.bookMessage.publisherName.indexOf(',') > 0) {
							this.bookMessage.publisherName = this.bookMessage.publisherName.split(',')
							this.bookMessage.publisherId = this.bookMessage.publisherId.split(',')
							this.bookMessage.publisherNIList = []
							for (let i in this.bookMessage.publisherName) {
								this.bookMessage.publisherNIList.push({
									title: this.bookMessage.publisherName[i]
								})
							}
							for (let j in this.bookMessage.publisherId) {
								this.bookMessage.publisherNIList[j].id = this.bookMessage.publisherId[j]
							}
						} else {
							this.bookMessage.publisherNIList = []
							this.bookMessage.publisherNIList.push({
								'title': this.bookMessage.publisherName,
								'id': this.bookMessage.publisherId
							})
						}
					});

				// 获取电子目录
				this.$http
					.post('book/book/getBookCatalogue', {
						'bookid': this.bookId
					})
					.then(res => {
						this.bookCatalogue = res.bookCatalogue
					});



				// 用户详情
				if (this.userInfo.id != undefined) {
					this.$http
						.post('book/user/info/' + this.userInfo.id)
						.then(res => {
							this.userMes = res.user
							if (this.userMes.vip != 0) {
								this.typeFen = 2
							}
						});
				}
			},

			// 加入书架
			joInshelf() {
				const that = this;
				$http.request({
					url: "book/bookshelf/save",
					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
					data: that.bokMesDet,
					header: { //默认 无 说明：请求头
						'Content-Type': 'application/json'
					},
				}).then(function(res) {
					if (res.code == 0) {
						uni.showToast({
							title: '加入书架成功'
						})
						that.bookMessage.flag = true
					}
				}).catch(function(error) {
					//这里只会在接口是失败状态返回，不需要去处理错误提示
					console.log(error);
				});
			},

			// 点击tab
			tab_click(e) {
				this.tab_muJian = e.index
			},
			CyouhuiShow(){
				this.youhuiShow = true
				this.getCourpe()
				this.buyShow = false   // 隐藏购买弹窗
			},
			buyShowFun(){
				this.buyShow = true
				this.getCourpe()
			},
			hideyouhui(){
				this.youhuiShow = false,
				this.buyShow = true   // 隐藏购买弹窗
			},
			clearYouhui(){
				this.youhuiContent = {}
				this.youhuiIndex = ''
				this.useCouponAmount = ''
				this.getData()
				this.youhuiShow = false
				this.buyShow = true   // 隐藏购买弹窗
				//this.couponMz = 0
				
			},
			
			// 选择优惠券
			choseYouhui(e) {
				this.youhuiIndex = e
				this.youhuiContent = this.youhuiList[this.youhuiIndex]
				console.log(this.youhuiContent, 'youhuiContent')	
				//this.couponMz = this.youhuiContent.coupons.couponAmount
				
				if (this.bookMessage.isSale == 0) {
					this.useCouponAmount = this.bookMessage.price - this.youhuiContent.coupons.couponAmount	
				} else {
					this.useCouponAmount = this.bookMessage.salePrice - this.youhuiContent.coupons.couponAmount					
				}
				this.buysignContent = '您确定要花费' + this.useCouponAmount + '疯币购买' + this.bokMesDet.bookName + '吗？'
				// this.getData()
				this.youhuiShow = false	
				this.buyShow = true   // 隐藏购买弹窗
				
			},
			// 获取优惠券列表
			getCourpe() {	
				let bookJiage = 0
				if (this.bookMessage.isSale == 0) {
					bookJiage = this.bookMessage.price
				} else {
					bookJiage = this.bookMessage.salePrice
				}
				this.bookJiageA = bookJiage
				this.$http
					.post('book/couponhistory/appGetUserCoupon?userId=' + this.userInfo.id + '&amount=' + this.bookJiageA + '&type=1' )
					.then(res => {
						this.youhuiList = res.userCoupons
					});
			},
			// 跳转
			onPageJump(url) {
				uni.navigateTo({
					url: url
				});				
				
			},
			// 电子书阅读跳转
			onBokReadJump(e) {
				const that = this;
				
				// 加入阅读记录
				$http.request({
					// 存数据
					url: "book/bookbrowserecords/save",
					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
					data: that.bokMesDet,
					header: { //默认 无 说明：请求头
						'Content-Type': 'application/json'
					},
				}).then(function(res) {
					if (res.code == 0) {
						console.log(res,'========');
						if (res.browseRecordsId) {
							$http.request({
								// 更新
								url: "book/bookbrowserecords/update",
								method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
								data: {
									'bookShelfId': res.browseRecordsId
								},
								header: { //默认 无 说明：请求头
									'Content-Type': 'application/json'
								},
							}).then(function(res) {
								if (res.code == 0) {
									uni.navigateTo({
										url: '../yRead/angbook?Id=' + that.bookId + '&cha=' + e
									});
								}
							}).catch(function(error) {
								//这里只会在接口是失败状态返回，不需要去处理错误提示
								console.log(error);
							});
						} else {
							uni.navigateTo({
								url: '../yRead/angbook?Id=' + that.bookId + '&cha=' + e
							});
						}
					}
				}).catch(function(error) {
					//这里只会在接口是失败状态返回，不需要去处理错误提示
					console.log(error);
				});
			},

			// 信息介绍跳转
			onAuCHJump(id, e) {
				uni.navigateTo({
					url: './bookMessage?Id=' + id + '&typ=' + e
				});
			},

			// 提示购买
			collectFee() {
				uni.showToast({
					icon: 'none',
					title: '请购买本书'
				})
			},

			// 充值疯币
			buPoint() {
				uni.navigateTo({
					url: '../peanut/reCharge'
				});
			},

			// 选择vip还是直接购买
			chBuyType(e) {
				let that = this
				that.typeFen = e
			},

			// 开通VIP
			buyVip() {
				uni.navigateTo({
					url: '../peanut/opeVip'
				});
			},

			// 购买本书
			buyMoneTip() {
				let bookJiage = 0
				if (this.bookMessage.isSale == 0) {
					bookJiage = this.bookMessage.price
				} else {
					bookJiage = this.bookMessage.salePrice
				}
				// this.bookJiageA = bookJiage
				if (bookJiage > this.userMes.peanutCoin) {
					uni.showToast({
						icon: 'none',
						title: '余额不足，请充值'
					})
				} else {
					this.buysignShow = true
					this.buyShow = false
				}

			},
			buyMoney() {				
				let couponId = ''
				if(this.youhuiContent.coupons.id != 0){ // 使用了优惠券
					couponId = this.youhuiContent.coupons.id
				}else{  // 未使用
					couponId = '0'
				}
				console.log(this.youhuiIndex, this.youhuiContent.coupons.id, couponId)				
				this.$http
					.post('book/user/buyEbook?bookId=' + this.bokMesDet.bookId + '&userId=' + this.userInfo.id + '&couponId=' + couponId)
					.then(res => {
						if (res.code == 0) {
							if (res.status == 'error') {
								uni.showToast({
									icon: 'none',
									title: res.msg
								})
							} else {
								uni.showToast({
									title: '购买成功'
								})
								this.buyShow = false
								this.buysignShow = false
								this.getData();
							}
						}
					});
			},

			cancelMoney() {
				this.buysignShow = false
				this.buyShow = true
			},



		},
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';
.yq_youhui {
			.yqLeft {
				display: inline-block;
				margin-right: 10rpx;
			}

			.yqRight {
				float: right;
			}

			.dagnqian {
				float: right;
				font-size: 22rpx;
				background-color: #dd1919;
				color: #fff;
				border-radius: 20rpx;
				padding: 5rpx 10rpx;
			}
		}
		.yq_yunfei {
			.yqLeft {
				display: inline-block;
				margin-right: 10rpx;
			}
		
			text {
				float: right;
			}
		}
	.book_neir {
		margin: 20rpx 0 0 0;
		position: relative;


		.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;
		}
	}

	.book_dredge {
		font-size: 26rpx;
		color: #e4b58a;
		margin: 40rpx 0 0 0;
		padding: 20rpx 30rpx 25rpx 30rpx;
		background-image: url('../../static/icon/mine_back.png');
		background-size: 100% auto;

		image {
			width: 46rpx;
			height: 40rpx;
			display: inline-block;
			vertical-align: text-bottom;
			margin: 0 10rpx 0 0;
		}

		b {
			float: right;
			font-size: 35rpx;
			font-weight: bold;
			line-height: 40rpx;
		}
	}
	
	.book_vip{
		background: url('../../static/icon/mine_card.png') top center no-repeat;
		color: #87510d;
		font-weight: bold;
	}
	


	.book_tab {
		margin: 20rpx 0 0 0;

		.bt_cont {
			font-size: 26rpx;
			line-height: 42rpx;
			color: #666;
			padding: 0 10rpx;

			.bt_jian {
				padding-top: 30rpx;
				margin-bottom: 15rpx;
			}

			.bt_nulu {
				border-bottom: 1px solid #eee;
				padding: 20rpx 0;

				font {
					color: #54a966;
					float: right;
					font-size: 20rpx;
				}

			}
		}
	}

	.book_caozuo {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;

		view {
			display: inline-block;
			width: 33.3%;
			text-align: center;
			padding: 28rpx 0;
			font-size: 35rpx;
			border-top: 1px solid #eee;
		}

		view:nth-child(3) {
			background-color: #54a966;
			color: #fff;
		}
	}


	.tanchu {
		padding: 30rpx 50rpx 60rpx 50rpx;

		.by_title {
			font-size: 32rpx;
			margin: 0 0 80rpx 0;
			text-align: center;
		}

		.by_package {
			font-size: 28rpx;

			.by_fen {
				box-shadow: 0 0 20rpx 0 #0000001a;
				padding: 20rpx 30rpx;
				background-color: #fff;
				border-radius: 20rpx;
				margin-bottom: 10rpx;

				.biao {
					font-weight: bold;
					font-size: 32rpx;
				}

				.wenz {
					color: #b1b1b1;
					margin-top: 20rpx;

					text {
						color: #fe6e09;
						margin-left: 20rpx;
					}
				}

				.benl {
					margin-top: 20rpx;
					color: #d75f54;
					font-size: 31rpx;

					text {
						font-size: 30rpx;
						text-decoration: line-through;
						color: #c1c1c1;
						margin-left: 20rpx;
					}
				}

			}

			.Tab_by {
				box-shadow: 0 0 20rpx 0 #fe700bcc;
				color: #7b4c0a;

			}


		}

		.by_btn {
			background-image: linear-gradient(90deg, #ed7161 0%, #efa574 100%);
			color: #fff;
			width: 100%;
			margin: 50rpx auto 0 auto;
			text-align: center;
			font-size: 18px;
			font-weight: bold;
			padding: 20rpx 0;
			border-radius: 50rpx;
		}

		.chongBtn {
			background-color: #54a966;
			color: #fff;
			margin-left: 20rpx;
			border-radius: 10rpx;
			padding: 2rpx 10rpx;
			font-size: 20rpx;
			display: inline-block;
		}
	}
	.youhuiItem {
		border: 1px solid #d9d9d9;
		border-radius: 10rpx;
		width: 100%;
		display: flex;
		padding: 20rpx 10rpx;
		margin: 25rpx 0 0 0;
		align-items: center;
		background-color: #fff;
		font-size: 30rpx;
	}
	
	.youhuiItem>view {
		float: left;
	}
	
	.youhuiItem.youItem_style {
		border-color: #fd6004;
	}
</style>
