<template>
	<view class="commBookLeftRigth_content">
		<view>
			<view class="commBookLeftRigth_book_box">
				<view class="commBookLeftRigth_content_left">
					<image class="is_image" :src="bookImage"></image>
				</view>
				<view class="commBookLeftRigth_content_right">
					<view class="_content_right_title">{{bookName}}</view>
					<view class="_content_right_tips">{{bookTips}}</view>
					<view class="_content_right_introduction">{{bookIntroduction}}</view>
				</view>
			</view>
			<view class="_book_operate_all">
				<view v-if="bookcase == 1" :class="['operate_all_add_bookshelf', 'active' ]">
					已加入书架
				</view>
				<view v-else :class="['operate_all_add_bookshelf']" @tap="addBookshelf">
					加入书架
				</view>
				<view class="operate_all_start_read" @tap="toNovelReading">
					开始阅读
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			bookTips: {
				type: String,
				default: ''
			},
			bookName: {
				type: String,
				default: ''
			},
			bookImage: {
				type: String,
				default: ''
			},
			bookIntroduction: {
				type: String,
				default: ''
			},
			bookId: {
				type: [Number, String],
				default: ''
			},
			bookcase: {
				type: [Number, String],
				default: ''
			},

		},
		data() {
			return {
				addBookshelfFlag: false
			}
		},
		methods: {
			addBookshelf() {
				uni.showLoading({
					title: '加载中...'
				});
				const parameter = {
					custom: {
						token: true
					}
				}
				const data = {
					sid: this.bookId,
				}
				uni.$u.http.post('/addBookshelf', data, parameter).then((res) => {
					uni.hideLoading();
					if (res.status == 1) {
						this.$emit('addBookshelf', this.bookId);
						uni.showToast({
							title: '加入成功',
							icon: 'none'
						})
					}
				}).catch((err) => {
					uni.hideLoading();
					console.log(err, "========")
				})
			},
			toNovelReading() {
				const bookId = this.bookId;
				uni.navigateTo({
					url: `/pages/novelReading/novelReading?sid=${bookId}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.is_image {
		display: block;
		width: 100%;
		height: 100%;
	}

	.commBookLeftRigth_content {
		width: 100%;

		.commBookLeftRigth_book_box {
			width: 100%;
			display: flex;

			.commBookLeftRigth_content_left {
				width: 200rpx;
				height: 266rpx;
				flex: 0 0 auto;
				border-radius: 8rpx;
				overflow: hidden;
				box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.2);
			}

			.commBookLeftRigth_content_right {
				flex: 1;
				flex-shrink: 0;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 10rpx 0 10rpx 20rpx;
				overflow: hidden;

				._content_right_title {
					font-size: 34rpx;
					color: #1A1A1A;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				._content_right_tips {
					font-size: 30rpx;
					color: #999999;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				._content_right_introduction {
					font-size: 30rpx;
					color: #999999;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical;
				}
			}
		}

		._book_operate_all {
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin-top: 26rpx;

			.operate_all_add_bookshelf {
				width: 296rpx;
				height: 88rpx;
				line-height: 88rpx;
				background-color: #FFEDF0;
				border-radius: 20rpx;
				font-size: 30rpx;
				color: #FF728F;
				font-weight: 500;
				text-align: center;
			}

			.operate_all_add_bookshelf.active {
				background: #F1F1F1;
				color: #666666;
			}

			.operate_all_start_read {
				width: 358rpx;
				height: 88rpx;
				line-height: 88rpx;
				background-color: #FF728F;
				border-radius: 20rpx;
				font-size: 30rpx;
				color: #FFFFFF;
				font-weight: 500;
				text-align: center;
			}
		}
	}
</style>