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

        <view class="pdx-30 pdy-10 bg-white">
            <view class="flex ai_center jc_between p-rel">
                <view class="menu_item" v-for="(item, index) in menuList"
				 @click="currentIndex = index"
				 :class="{ active_menu: index == currentIndex }">
                    {{ item }}
                    <view v-if="index === currentIndex" class="active_bg"></view>
                    <view v-else class="active"></view>
                </view>
				<input shape="circle" fontSize="14" class="flex1 h-60 mgl-30 radio-60"
				style="background-color: #eeeeee;padding: 0 20rpx;"
				 placeholder="搜索书名或作者" @click="navTo('/pages/search/index')">
				</input>
				<uni-icons customPrefix="iconfont" class="p-abs top-12 right-20" type="icon-sousuo" color="#5e6d82" size="18" />
            </view>
        </view>

        <scroll-view scroll-y class="scroll_box">

            <view class="pdy-30 pdx-30 bg-white">
                <view class="">
                    <view class="flex ai_center jc_between">
                        <view class="flex ai_center text-32">
							<uni-icons customPrefix="iconfont" class="mgr-10" type="icon--huangguan" size="22" />
                            排行榜
                        </view>
                        <view class="flex ai_center" @click="toRanking">
                            查看全部榜单
							<uni-icons customPrefix="iconfont" type="icon-youjiantou" color="#b9b7c1" size="10" />
                        </view>
                    </view>
                    <view class="book_list mgt-30">
                        <view class="book_item"  @click="navTo('/pages/bookDetail/index')" v-for="item in 5">
                            <image style="width: 86rpx;height: 113rpx;background-color: skyblue;border-radius: 12rpx;"
                                src="" mode="scaleToFill" />
                            <view class="mgl-10 flex flex1 fd_c jc_center">
                                <view class="ellipsis"><text>1</text>斗破苍穹斗破苍穹斗破苍穹斗破苍穹</view>
                                <view class="text-24 mgt-10 text-600" style="color: #fedb65">888.88万人阅读</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <view class="pdy-30 pdx-30 bg-white mgt-30" v-for="item in 3">
                <view class="">
                    <view class="flex ai_center text-32">
                        全网精品
                    </view>
                    <view class="book_list_item mgt-30">
                        <view class="book_item"  @click="navTo('/pages/bookDetail/index')" v-for="item in 5">
                            <image class="img" src="" mode="scaleToFill" />
                            <view class="book_name">
                                斗破苍穹斗破苍穹斗破苍穹
                            </view>
                            <view class="hint">已完结</view>
                        </view>
                    </view>
                </view>
            </view>

            <view class="h-100 flex ai_center jc_center">
                到底啦~~
            </view>

        </scroll-view>
        <!-- 引入自定义 TabBar -->
        <custom-tabbar :currentIndex='1' />
    </view>
</template>
<script>
	import CustomTabbar from "@/components/custom-tabbar.vue";
	export default {
		components: {
			CustomTabbar
		},
		data(){
			return{
				statusBarHeight:0,
				navBarHeight:0,
				menuList:['名作','佳作'],
				value:'',
				currentIndex:0
			}
		},
		onBeforeMount(){
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
			// #ifndef H5
			const custom = uni.getMenuButtonBoundingClientRect();
			// 导航栏的高度 = 胶囊的高度 + （胶囊距离顶部的距离 - 状态栏的高度）* 2
			//                                   即胶囊的上下边距
			this.navBarHeight = custom.height + (custom.top - this.statusBarHeight) * 2;
			// #endif
		},
		methods: {
			toRanking(){
			    uni.navigateTo({ url: '/pages/tabBar/bookMall/bookRanking' })
			},
			navTo(url){
				uni.navigateTo({
					url
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
page {
    background-color: #f9f9f9;
}

.container {
    display: flex;
    flex-direction: column;
    .navBarBox {
        .navBar {
            width: 100%;
            height: 80rpx !important;
            line-height: 80rpx;
            padding-left: 30rpx;
            font-size: 32rpx;
            color: #333;
            font-weight: 600;
            background-color: #fff;
        }
    }
	.active_menu {
	    color: #fd4345 !important;
	}
    .menu_item {
        font-size: 28rpx;
        color: #9b9b9b;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 8rpx 16rpx;

        .active {
            margin-top: 8rpx;
            width: 30rpx;
            height: 6rpx;
            background-color: #fff;
            border-radius: 8rpx;
        }

        .active_bg {
            margin-top: 8rpx;
            width: 30rpx;
            height: 6rpx;
            border-radius: 8rpx;
            background-color: #fd4345;
        }
    }

    .input {
        flex: 1;
        margin: 0 20rpx;
        background-color: #f6f6f6;
        font-size: 26rpx;
        height: 50rpx !important;
        border-radius: 50rpx;
        padding-left: 30rpx;
        color: #9a9a9a;

    }

    .scroll_box {
        overflow-y: auto;
        height: calc(100vh - 160rpx);
    }

    .book_list {
        width: 100%;
        display: grid;
        justify-content: space-between;
        grid-template-columns: repeat(auto-fill, 44vw);
        grid-gap: 20rpx;

        .book_item {
            display: flex;
            width: 44vw;
        }
    }

    // 超出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;
    }

    .book_list_item {
        width: 100%;
        display: grid;
        justify-content: space-between;
        grid-template-columns: repeat(auto-fill, 216rpx);
        grid-gap: 20rpx;

        .book_item {
            position: relative;
            width: 216rpx;
            display: flex;
            flex-direction: column;

            .img {
                width: 216rpx;
                height: 300rpx;
                background-color: rgb(104, 122, 129);
                border-radius: 12rpx;
            }

            .book_name {
                font-style: 28rpx;
                color: #303030;
                margin-top: 10rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                line-clamp: 1;
                -webkit-line-clamp: 1;
                /* 限制显示1行 */
                -webkit-box-orient: vertical;
            }

            .hint {
                position: absolute;
                top: 0;
                left: 0;
                padding: 8rpx 16rpx;
                background-color: #7d8bfb;
                color: #fff;
                font-size: 24rpx;
                border-radius: 12rpx 0 12rpx 0;
            }
        }
    }
}
</style>
