import Popup from "@/components/popup"
import { Textarea, View } from "@tarojs/components"
import { useCallback, useEffect, useState } from "react"
import styles  from './index.module.scss'

type Param = {
    onBlur?: (val:any) => void
    onSave?: (val: string) => void
    defaultValue?: string
}
export default ({onBlur, onSave, defaultValue = ''}:Param) => {
    const [descData, setDescData] = useState({
        number: 0,
        value: '',
        count: 200
    })

    useEffect(() => {
        getDesc(defaultValue)
    }, [defaultValue])

    const getDesc = (value) => {
        let res = value
        if(value.length > descData.count) {
            res = value.slice(0, descData.count)
        }
        setDescData({...descData, number:res.length, value: res})
    }

    const setSave = () => {
        onSave?.(descData.value)
    }
    return (
        <View className={styles.order_popup}>
            <View className={styles.order_popup_title}>编辑备注</View>
            <View className={styles.order_popup_input}>
                <Textarea placeholder="请添加备注" value={descData?.value} maxlength={descData.count} cursorSpacing={100} onInput={(e) => getDesc(e.detail.value)} onBlur={(e) => onBlur?.(e)}></Textarea>
                <View className={styles.descDataNum}>{descData.number}/{descData.count}</View>
            </View>
            <View className={styles.order_save_address} onClick={() => setSave()}>保存</View>
        </View>
    )
}