import { Component } from 'react'
import { View, Text, Image, Navigator } from '@tarojs/components'
import { observer, inject } from 'mobx-react'
import './index.less'
import BookHead from '@src/components/PupPetry/BookHead'
import { Store } from '@src/app'
import Taro from '@tarojs/taro'
import useApi from '@src/Hook/useApi'
import { share } from '@src/utils'
/**书详情 */

type state = {
}
interface Props {
    store: Store;
}
@inject('store')
@observer
class BookDetails extends Component<Props> {
    state: state = {
    }

    componentDidShow(options) {
        let params = Taro.getCurrentInstance()?.router?.params
        // 获取书籍详情
        if (params?.bookId || params?.sBookId || params?.lBookId) {
            let bookId = params?.bookId || params?.sBookId || params?.lBookId
            let { getBookInfo } = useApi()
            log("分享进入")
            getBookInfo(bookId)
            log(bookId)
        }
    }
    async onShareAppMessage() {
        // 获取当前页面栈
        const pages = Taro.getCurrentPages()
        // 获取栈顶的页面，即当前页面
        const currentPage = pages[pages.length - 1]
        // 获取页面的路径和参数
        const route = currentPage.route // 页面路径
        if (route) {
            let shareInfo = await share({ pagePath: route, bookId: this.props?.store?.bookStore?.openBookData?.bookId })
            let { sharePicUrl, shareTitles, pageName, pagePath } = shareInfo
            return {
                title: shareTitles || app.appInfo?.appName + '-' + pageName,
                path: pagePath || undefined,
                imageUrl: sharePicUrl || undefined
            }
        }
        return {}
    }
    render() {
        let { bookStore } = this.props.store
        let { openBookData } = bookStore
        let describe = `${openBookData?.wordCount ? (openBookData?.wordCount / 10000).toFixed(0) + "万字·" : ""}${openBookData?.bookStatus === 0 ? '连载' : '完本'}`
        return <>
            {
                <View className='book_details'>
                    <View className="details_top">
                        <View className='header'>
                            <View className="back">
                                <Image src={openBookData?.picUrl || ""} className="backImg" mode="widthFix" />
                            </View>
                            <View className="content">
                                <View className='left'>
                                    <Text className='title'>{openBookData?.bookName}</Text>
                                    <Text className='author'>{openBookData?.authorName}</Text>
                                    {/* bookDesc */}
                                    <Text className='author'>{describe}</Text>
                                    <View className='tags'>
                                        {
                                            openBookData?.labelInfoList?.map((item, index) => {
                                                return <Text className='tag' key={index}>{item.name}</Text>
                                            })
                                        }
                                    </View>
                                </View>
                                <View className='right'>
                                    <Image src={openBookData?.picUrl || ""} className={`img ${openBookData?.vipFree ? "isVip" : ""}`} />
                                </View>
                            </View>
                        </View>


                        <BookHead title="简介" ></BookHead>
                        <View className='center'>
                            <Text>{openBookData?.bookDesc?.replace(/\s/ig, '')}</Text>
                        </View>
                    </View>
                    <View className='btn' >
                        {/* <Navigator url={`/pages/book/bookArticle/index?bookId=${openBookData?.bookId}`} hoverClass="none"> */}
                        <Navigator url={`plugin-private://wx293c4b6097a8a4d0/pages/novel/index?bookId=A1HcfuuvKqNdTuMD9dMmQDxTuJ`} hoverClass="none">
                            {/* <Image src={require('../../../icon/btn.png')} className='img' /> */}
                            <View className='vip_btn' >开始阅读</View>
                        </Navigator>
                    </View>
                </View>
            }

        </>
    }
}


export default BookDetails