/**分类书籍的box容器 横大*/

import { Text, View, Image, Navigator } from "@tarojs/components";
import React from 'react'
import './index.less'
export interface BookboxRowMiddleProps {
    bookId: number,//书ID
    authorName: string,//作者
    bookName: string,//书名称
    bookDesc: string,//描述
    picUrl: string,//封面
    bookStatus: number,//完本|连载状态
    wordCount: number,//字数
    labelInfoList: { name: string }[],//标签
}
function BookboxRowMiddle(props: BookboxRowMiddleProps) {
    const { bookName, picUrl, bookDesc, labelInfoList, authorName, bookId, wordCount, bookStatus } = props
    const click = () => {
        // BookStore.setData({ openBookData: props })
    }
    return <View className='book_box_row_middle'  onClick={click}>
        <Navigator url={'/pages/book/bookDetails/index?bookId=' + bookId} hoverClass="none">
            <Image src={picUrl || ''} className='img'></Image>
            <View className='right'>
                <Text className='title'>{bookName}</Text>
                <View className='content'>
                    <View className='left'>
                        <Text className='details'>{bookDesc?.replace(/\s/ig,'')}</Text>
                        <View className='bottom'>
                            <Text className='describe'>{authorName}</Text>
                            <Text className='label'>{labelInfoList?.[0].name}</Text>
                        </View>
                    </View>
                </View>
            </View>
        </Navigator>
    </View>
}

export default React.memo(BookboxRowMiddle)