import {Textarea, View } from "@tarojs/components";
import { memo, useMemo, useState } from "react";
import styles  from './index.module.scss'
import classnames from "classnames";

//其他说明
type Param = {
    title?: string,
    onChange?: (val: string) => void,
    placeholder?: string
}
export default memo(({onChange, title = '', placeholder = '请输入'}:Param) => {
    const [descData, setDescData] = useState({
        number: 0,
        value: '',
        count: 200,
        show: false
    })
    const getDesc = (e) => {
        let value = e.detail.value
        let res = value
        if(value.length > descData.count) {
            res = value.slice(0, descData.count)
        }
        setDescData({...descData, number:res.length, value: res})
        onChange?.(res)
    }

    const toggleShowRealTextarea = (show) => {
        setDescData({...descData, show:show})
    }
    return (
        <View className={styles.other_desc}>
            <View className={styles.title}>{title}</View>
            <View className={styles.textarea}>
                {descData.show&&<Textarea autoFocus value={descData.value} onBlur={() => toggleShowRealTextarea(false)} className={styles.textarea_con} cursorSpacing={100} maxlength={descData.count} onInput={(e) => getDesc(e)}></Textarea>||
                    <View className={classnames(styles.textarea_con_pretend, descData.value&&styles.textarea_con_pretend_ed)} onClick={() => toggleShowRealTextarea(true)}>{descData.value||placeholder}</View>
                }
                <View className={styles.descDataNum}>{descData.number +'/'+ descData.count}</View>
            </View>
        </View>
    )
})