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

// 其他说明
interface Param {
  onChange: (val: string) => void
}
const OtherReason = ({ onChange }: Param) => {
  const [descData, setDescData] = useState({
    number: 0,
    value: '',
    count: 200,
    show: false,
  })
  const getDesc = (e) => {
    const 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 })
  }
  return (
    <View className={styles.other_desc}>
      <View className={styles.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 || '一般情况下选填，当退货说明=“其它问题”时，必填'}</View>
        }
        <View className={styles.descDataNum}>{`${descData.number}/${descData.count}`}</View>
      </View>
    </View>
  )
}
export default memo(OtherReason)
