<template>
	<view class="container">
		<view class="navBarBox">
			<!-- 状态栏占位 -->
			<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
			<!-- 真正的导航栏内容 -->
			<view class="navBar text-600">
				书架
			</view>
		</view>

		<view class="pdy-30 pdx-30 flex fd_c">
			<view class="flex ai_center">
				<view class="text-32 text-400">最近阅读</view>
				<text class="text-gray mgl-20" @click="changeEdit">
					<uni-icons customPrefix="iconfont" class="mgr-10" type="icon-fenlei" size="16" />
					{{ !editStatus?'管理':'完成' }}</text>
				<!-- <view class="mgl-20">
					<checkbox-group class="mgl-30 flex ai_center">
						<checkbox value="cb" iconColor="#000" :checked="true" />全选
					</checkbox-group>
				</view> -->
			</view>
			<scroll-view scroll-y class="scroll">
				<view class="book_list">
					<view v-for="item in 15" class="book_item" @click="editStatus?'':toBookdetail()">
						<!-- <checkbox-group class="check">
								<checkbox value="cb" backgroundColor="transparent" activeBackgroundColor="transparent"
									borderColor="#dfe2e5" iconColor="#FFF" :checked="true" />
						</checkbox-group> -->
						<uni-icons v-if="editStatus" @click="delBook(item)" customPrefix="iconfont" class="check" type="icon-shanchu" size="20"/></text>
						<view class="book_top">
							<image class="book_img" src="" mode="scaleToFill" />
							<view class="book_history">读到1000章</view>

						</view>
						<view class="book_name ellipsis">斗破苍穹斗破苍穹斗破苍穹斗破苍穹斗破苍穹</view>
						<view class="book_author ellipsis">天蚕土豆</view>
					</view>
				</view>
				<view class="scroll_bottom">已经是全部了~~</view>
			</scroll-view>
		</view>
		<!-- 引入自定义 TabBar -->
		<custom-tabbar :currentIndex='0' />
	</view>
</template>
<script>
	import CustomTabbar from "@/components/custom-tabbar.vue";
	import { onShow,onLoad } from "@dcloudio/uni-app";
	export default {
		components: {
			CustomTabbar
		},
		data() {
			return{
				statusBarHeight:0,
				navBarHeight:0,
				editStatus:false,
			}
		},
		mounted(){
			// #ifdef QUICKAPP-WEBVIEW-UNION
				console.log('eeeeQUICKAPP-WEBVIEW-UNION 启动。。')
				qa.getBatteryInfo({
					success(res){
						console.log('res',res)
					},
					fail(err){
						console.log('err',err)
					}
				})
				// qa.vibrateLong({
				// 	success(res){
				// 		console.log('res',res)
				// 	},
				// 	fail(err){
				// 		console.log('err',err)
				// 	}
				// })
			// #endif
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
			// #ifndef H5
				const custom = uni.getMenuButtonBoundingClientRect();
				// 导航栏的高度 = 胶囊的高度 + （胶囊距离顶部的距离 - 状态栏的高度）* 2
				// 即胶囊的上下边距
				this.navBarHeight = custom.height + (custom.top - this.statusBarHeight) * 2;
			// #endif
		},
		onShow(){
			console.log('--- onpageshow')
		},
		onLoad(){
			console.log('--- onLoad')
		},
		methods: {
			changeEdit(){
				this.editStatus = !this.editStatus
			},
			delBook(){
				uni.showModal({
					title: '温馨提示',
					content: '确定删除选中书籍？',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			toBookdetail(){
				uni.navigateTo({ url: '/pages/redBook/index' })
			}
			
		},
	}
</script>

<style lang="scss" scoped>
.container {
	// overflow: hidden;
	min-height: 100vh;
	.navBarBox {
		.navBar {
			width: 100%;
			height: 80rpx !important;
			line-height: 80rpx;
			padding-left: 30rpx;
			font-size: 32rpx;
			color: #333;
		}
	}

	.scroll {
		margin-top: 30rpx;
		width: 100%;
		overflow-y: auto;
		height: calc(100vh - 200rpx);

		.book_list {
			display: grid;
			justify-content: space-between;
			grid-template-columns: repeat(auto-fill, 172rpx);
			grid-gap: 10px;
			// padding-bottom: 100rpx;

			.book_item {
				position: relative;
				width: 172rpx;
				padding: 10rpx 0 20rpx 0;

				.check {
					position: absolute;
					right: 6rpx;
					top: 15rpx;
					z-index: 99;
					width: auto;
				}

				.book_top {
					width: 172rpx; //86
					height: 226rpx; //113
					border-radius: 10rpx;
					position: relative;

					.book_img {
						width: 100%;
						height: 100%;
						background-color: rgb(120, 140, 148);
						border-radius: 10rpx;
					}

					.book_history {
						position: absolute;
						right: 0;
						bottom: 0;
						font-size: 16rpx;
						color: #fff;
						padding: 8rpx 16rpx;
						background-color: rgba(0, 0, 0, 0.3);
						border-radius: 10rpx;

					}
				}



				.book_name {
					margin-top: 16rpx;
					font-size: 28rpx;
					color: #333;
				}

				.book_author {
					margin-top: 6rpx;
					font-size: 22rpx;
					color: #c4c4c4;

				}

				// 超出2行 
				.ellipsis {
					line-height: 1.2;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					line-clamp: 2;
					-webkit-line-clamp: 2;
					/* 限制显示2行 */
					-webkit-box-orient: vertical;
				}
			}
		}

		.scroll_bottom {
			width: 100%;
			height: 200rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #aaa5a5;
		}
	}
}
</style>
