<template>
	<view class="list_content">
		<view class="item" v-for="(item,index) in dataList" :key="index"
		@click="clickItem(item)">
			<view class="item__book-cover">
			    <image class="image" :src="item.book_cover" mode="aspectFill"></image>
			</view>
			<view class="item__info">
				<text class="item__info__book-name" v-html="highlightText(item.book_name)"></text>
				<view class="item__info__author">
					{{item.author_name}} 著 | {{item.book_is_action==1?'完结':'连载'}}
				</view>
				<view class="item__info__brief">
					{{item.book_brief}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
    import { book_item_data } from '../../data/data';	
    import { tools } from '../../framework/tools';
	const props = defineProps({
		searchContent:String,
		dataList: Object,
	})
	
	function highlightText(text:string) {
	    let searchText = props.searchContent.toLowerCase()
	    if (searchText && text.toLowerCase().includes(searchText)) {
	      const replaceText = text.toLowerCase().replace(new RegExp(searchText, 'gi'), match => `<span style="color: #FE4977;">${match}</span>`);
	      return replaceText
	    }
	    return text
	}
	
	function clickItem(book_data:book_item_data) {
		tools.gotoBookdetails(book_data.book_id)
	}
	
</script>

<style lang="scss">
	.list_content{
		display: flex;
		flex-direction: column;
		
	    .item{
			display: flex;
			flex-direction: row;
			padding: 20rpx 20rpx;
			// background-color: green;
			&__book-cover{
				width: 194rpx;
				height: 259rpx;
				flex-shrink: 0; //设置flex元素所有比例.默认是1,为0的时候不进行缩放
				.image {
					width: 100%;
					height: 100%;
				}
			}
			&__info {
				display: flex;
				flex-direction: column;
				margin-left: 20rpx;
				&__book-name{
					margin-top: 10rpx;
					font-size: 20px;
					color: #000000;
				}
				&__author{
					margin-top: 30rpx;
					font-size: 15px;
					color: #6F6F6F;
				}
				&__brief{
					margin-top: 30rpx;
					display: -webkit-box;
					font-size: 15px;
					color: #6F6F6F;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}
</style>