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

import { Text, View, Image, Navigator } from "@tarojs/components";
import React from 'react'
import './index.less'
export interface BookboxRowBigProps {
    bookId: number,//书ID
    authorName:string,//作者
    bookName: string,//书名称
    bookDesc:string,//描述
    picUrl: string,//封面
    bookStatus: number,//完本|连载状态
    wordCount: number,//字数
    labelInfoList:{name:string}[],//标签
}
function BookboxRowBig(props: BookboxRowBigProps) {
    const { bookName, picUrl, bookDesc, labelInfoList, authorName, bookId, wordCount, bookStatus } = props
    let describe = ""
    if(wordCount && bookStatus) {
        describe = `${bookName}·${(wordCount/10000).toFixed(0)}万字·${bookStatus === 0 ? '连载' : '完本'}`
    }
    const click = () => {
        // BookStore.setData({ openBookData: props })
    }
    return <View className='book_box_row_big' 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'>{describe || authorName}</Text>
                            {
                                labelInfoList.length > 0 && <Text className='label'>{labelInfoList[0].name}</Text>
                            }
                        </View>
                    </View>
                </View>
            </View>
        </Navigator>
    </View>
}

export default React.memo(BookboxRowBig)