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

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

  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)
  }
  useEffect(() => {
    getDesc(defaultValue)
  }, [defaultValue])
  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>
  )
}

export default Remark
