<template>
    <view class="content flex">
        <view class="left">
			<view class="tab_item" v-for="(item,index) in tabList" :key="index"
			:class="{active:current == index}" @click="current = index">
				{{ item.title }}
			</view>
		</view>
		<!-- <view class="right"> -->
		<scroll-view scroll-y="true" class="right" @scrolltolower="lower">
			<view class="book_item flex ai_center mgb-20"  @click="navTo('/pages/bookDetail/index')"
			 v-for="(book,index) in tabList[current].children" :key="index">
				<view class="">
					<image class="w-120 h-160 radio-20" :src="book.bookImg"></image>
				</view>
				<view class="mgl-30">
					<view class="text-28 w flex jc_between ai_center line_1">
						{{ book.name }}
						<uni-icons v-if="index==0" customPrefix="iconfont" class="mgr-10" type="icon-no1" size="20" />
						<uni-icons v-else-if="index==1" customPrefix="iconfont" class="mgr-10" type="icon-dierming" size="20" />
						<uni-icons v-else-if="index==2" customPrefix="iconfont" class="mgr-10" type="icon-disanming" size="20" />
					</view>
					<view class="line_2 text-24 mgt-10 mgb-20 text-666">
						{{ book.content }}
					</view>
					<view class="flex jc_between">
						<view class="text-22">
							<text class="mgr-10 text-EE8030">
								{{ book.isFinish == 1 ?'已完结':'未完结' }} | 
							</text> 
							{{ book.author }}
						</view>
						<view class="text-22 text-999">
							{{ book.readNum }}万人阅读
						</view>
					</view>
				</view>
			</view>
		 </scroll-view>
		</view>
    </view>
</template>

<script>
	import { onShow,onLoad } from "@dcloudio/uni-app";
	export default {
		components: {},
		data(){
			return{
				current:0,//当前tab
				tabList:[
				    {
				        title: '热读榜', children: [
				            {
				                name: '我不想做豪门',
				                bookImg: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png',
				                content: '我是小说内容我是小说内容我是小说内容我是小说内容我是小说内容我小说内容我',
				                isFinish: true,
				                author: '老虎',
				                readNum: 1751.8
				            },
				            {
				                name: '我不想做豪门',
				                bookImg: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png',
				                content: '我是小说内容我是小说内容我是小说内容我是小说内容我是小说内容我小说内容我',
				                isFinish: true,
				                author: '老虎',
				                readNum: 1751.8
				            },
				            {
				                name: '我不想做豪门',
				                bookImg: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png',
				                content: '我是小说内容我是小说内容我是小说内容我是小说内容我是小说内容我小说内容我',
				                isFinish: true,
				                author: '老虎',
				                readNum: 1751.8
				            },
				            {
				                name: '我不想做豪门',
				                bookImg: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png',
				                content: '我是小说内容我是小说内容我是小说内容我是小说内容我是小说内容我小说内容我',
				                isFinish: true,
				                author: '老虎',
				                readNum: 1751.8
				            },{
				                name: '我不想做豪门',
				                bookImg: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png',
				                content: '我是小说内容我是小说内容我是小说内容我是小说内容我是小说内容我小说内容我',
				                isFinish: true,
				                author: '老虎',
				                readNum: 1751.8
				            },
				            {
				                name: '我不想做豪门',
				                bookImg: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png',
				                content: '我是小说内容我是小说内容我是小说内容我是小说内容我是小说内容我小说内容我',
				                isFinish: true,
				                author: '老虎',
				                readNum: 1751.8
				            },
				            {
				                name: '我不想做豪门',
				                bookImg: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png',
				                content: '我是小说内容我是小说内容我是小说内容我是小说内容我是小说内容我小说内容我',
				                isFinish: true,
				                author: '老虎',
				                readNum: 1751.8
				            },{
				                name: '我不想做豪门',
				                bookImg: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png',
				                content: '我是小说内容我是小说内容我是小说内容我是小说内容我是小说内容我小说内容我',
				                isFinish: true,
				                author: '老虎',
				                readNum: 1751.8
				            },
				            {
				                name: '我不想做豪门',
				                bookImg: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png',
				                content: '我是小说内容我是小说内容我是小说内容我是小说内容我是小说内容我小说内容我',
				                isFinish: true,
				                author: '老虎',
				                readNum: 1751.8
				            },
				            {
				                name: '我不想做豪门',
				                bookImg: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png',
				                content: '我是小说内容我是小说内容我是小说内容我是小说内容我是小说内容我小说内容我',
				                isFinish: true,
				                author: '老虎',
				                readNum: 1751.8
				            },{
				                name: '我不想做豪门',
				                bookImg: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png',
				                content: '我是小说内容我是小说内容我是小说内容我是小说内容我是小说内容我小说内容我',
				                isFinish: true,
				                author: '老虎',
				                readNum: 1751.8
				            },
				            {
				                name: '我不想做豪门',
				                bookImg: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png',
				                content: '我是小说内容我是小说内容我是小说内容我是小说内容我是小说内容我小说内容我',
				                isFinish: true,
				                author: '老虎',
				                readNum: 1751.8
				            },
				            {
				                name: '我不想做豪门',
				                bookImg: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png',
				                content: '我是小说内容我是小说内容我是小说内容我是小说内容我是小说内容我小说内容我',
				                isFinish: true,
				                author: '老虎',
				                readNum: 1751.8
				            },{
				                name: '我不想做豪门',
				                bookImg: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png',
				                content: '我是小说内容我是小说内容我是小说内容我是小说内容我是小说内容我小说内容我',
				                isFinish: true,
				                author: '老虎',
				                readNum: 1751.8
				            },
				            {
				                name: '我不想做豪门',
				                bookImg: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png',
				                content: '我是小说内容我是小说内容我是小说内容我是小说内容我是小说内容我小说内容我',
				                isFinish: true,
				                author: '老虎',
				                readNum: 1751.8
				            },
				            {
				                name: '我不想做豪门',
				                bookImg: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png',
				                content: '我是小说内容我是小说内容我是小说内容我是小说内容我是小说内容我小说内容我',
				                isFinish: true,
				                author: '老虎',
				                readNum: 1751.8
				            },
				        ]
				    },
				    {
				        title: '追读榜', children: [
				            {
				                name: '我不想做豪门',
				                bookImg: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png',
				                content: '我是小说内容我是小说内容我是小说内容我是小说内容我是小说内容我小说内容我',
				                isFinish: true,
				                author: '老虎',
				                readNum: 1751.8
				            },
				            {
				                name: '我不想做豪门',
				                bookImg: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png',
				                content: '我是小说内容我是小说内容我是小说内容我是小说内容我是小说内容我小说内容我',
				                isFinish: true,
				                author: '老虎',
				                readNum: 1751.8
				            },
				        ]
				    },
				    {
				        title: '完结榜', children: [
				            {
				                name: '我不想做豪门',
				                bookImg: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png',
				                content: '我是小说内容我是小说内容我是小说内容我是小说内容我是小说内容我小说内容我',
				                isFinish: true,
				                author: '老虎',
				                readNum: 1751.8
				            },
				        ]
				    },
				]
			}
		},
		onLoad(){
			
		},
		methods: {
			lower(e) {
				console.log('e 触底了',e)
			},
			navTo(url){
				uni.navigateTo({
					url
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content{
		
	}
	.left{
		height: 93vh;
		min-width: 180rpx;
		background: #eee;
		.tab_item{
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
		}
		.active{
			background: #fff;
			color: #EE8030;
			position: relative;
		}
		.active::before{
			content: '';
			position: absolute;
			height: 100%;
			width: 10rpx;
			background: #EE8030;
			left: 0;
		}
	}
	.right{
		padding: 20rpx;
		max-height: 93vh;
		overflow-y: scroll;
		background-color: #fff;
	}
</style>
