import { View, Text, Image, Navigator } from "@tarojs/components";
import React from "react";
import './index.less';
interface BookConfigPupProps {
    setOff: () => void,//设置开关
    setSize: (num: number) => void,//设置字体
    setLh: (str: string) => void,//设置行高
    setBg: (str: string) => void,//设置背景
    size: string,
    off_on: boolean,
    bg: string,
    lh: string,
    booKId?: number, // 书ID
    chapter?: number  // 章节ID
}
function BookConfigPuP(props: BookConfigPupProps) {
    let { setOff, setSize, setLh, setBg, size, off_on, bg, lh, booKId, chapter } = props
    let isLong = app?.appInfo?.appCategory === 1
    size = size?.split('_')[1]
    return <View className={off_on ? 'bottom_pup' : 'bottom_pup black'}>
        <View className='bg'>
            <Text className='txt'>背景</Text>
            <View className='btn'>
                <Text className={`b ${bg === 'bg_b' && off_on ? 'action' : ''}`} onClick={() => setBg('bg_b')} />
                <Text className={`h ${bg === 'bg_h' && off_on ? 'action' : ''}`} onClick={() => setBg('bg_h')} />
                <Text className={`l ${bg === 'bg_l' && off_on ? 'action' : ''}`} onClick={() => setBg('bg_l')} />
                <Text className={`hh`} onClick={setOff} />
            </View>
        </View>
        <View className='size'>
            <Text className='txt'>字号</Text>
            <View className='btn'>
                <Text className={`small ${size === '15' ? 'b_q' : ''}`} onClick={() => { size !== '15' && setSize(0) }}>A</Text>
                <Text className='number'>{size}</Text>
                <Text className={`big ${size === '29' ? 'b_q' : ''}`} onClick={() => { size !== '29' && setSize(1) }}>A</Text>
            </View>
        </View>
        <View className='lh'>
            <Text className='txt'>间距</Text>
            <View className='btn'>
                <View className={`x ${lh === 'lh_72' ? 'action' : ''}`} onClick={() => setLh('lh_72')}>
                    <Text />
                    <Text />
                    <Text />
                    <Text />
                </View>
                <View className={`z ${lh === 'lh_84' ? 'action' : ''}`} onClick={() => setLh('lh_84')}>
                    <Text />
                    <Text />
                    <Text />
                </View>
                <View className={`d ${lh === 'lh_96' ? 'action' : ''}`} onClick={() => setLh('lh_96')}>
                    <Text />
                    <Text />
                </View>
            </View>
        </View>
        <View className='xx' />
        <View className='cd' >
            <Navigator url='/pages/index/index' openType='switchTab' hoverClass="none"><View><Image src={require('../../icon/sc_h.png')} /> <Text>书城</Text></View></Navigator>
            <Navigator url={`/pages/book/bookDetails/index?book_id=${booKId}`} hoverClass="none"> <View><Image src={require('../../icon/xq_h.png')} /> <Text>详情</Text></View></Navigator>
            {/* 长篇小说展示目录按钮 */}
            {isLong && <Navigator url={`/pages/bookCatalog/index?id=${booKId}&chapter=${chapter}`} hoverClass="none">  <View><Image src={require('../../icon/ml_h.png')} /> <Text>目录</Text></View></Navigator>}
        </View>
    </View>
}

export default React.memo(BookConfigPuP)