import { Text, View } from "@tarojs/components"
import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useState } from "react"
import {formatKbPrice} from '@/common/common'
import classnames from "classnames";
import styles  from './index.module.scss'
import AmountShow from "../amountShow";
import Taro from "@tarojs/taro";

type Param = {
    style?: Object,
    number?: number,
    title?: string,
    titleStatus?: true|false, //true 标题加大加深
    numberStatus?: 0|1|2, //数字尺寸
    messageTitle?: string,
    messageWidth?: number,
    messageShow?: true|false,
}
export default memo(({number = 0, titleStatus = true, title = '', messageTitle = '', numberStatus = 1,  messageWidth = 430, messageShow = false}:Param) => {
    const [show, setShow] = useState(messageShow)
    const onClose = () => {
        setShow(false)
    }
    const openShow = () => [
        setShow(true)
    ]

    const [style, setStyle] = useState<{top: string}>()

    useEffect(() => {
        if(show) {
            getDomDes('#message')
        } else {
            setStyle(() => ({top: '0'}))
        }
    }, [show])
    //设置弹出层高度
    const getDomDes = (id) => {
        setTimeout(() => {
            let query = Taro.createSelectorQuery();
            query.select(id).boundingClientRect(rect=>{
                let height = rect.height * 2 + 15;
                setStyle((e) => ({...e, top: `-${height}rpx`, opacity: 1}))
            }).exec();
        }, 0)
    }
    return (
        <>  
            <View className={styles.order_price}>
                <View className={classnames(styles.order_price_text, titleStatus&&styles.emphasis)} onClick={() => openShow()}>
                    <Text>{title}</Text>
                    <View className={styles.iconfont_msg}>
                        {show&&<View style={{...style, width: `${messageWidth}rpx`}} id='message' className={classnames(styles.message)}>{messageTitle}</View>}
                        <Text className={classnames(styles.miconfont, 'iconfont icon-zhushi')}></Text>
                    </View>
                </View>
                <AmountShow status={numberStatus} number={number}/>
                {show&&<View className={styles.close} catchMove onClick={onClose}></View>}
            </View>
        </>
    )
})