import { Text, View } from '@tarojs/components'
import { useEffect, useState } from 'react'
import classNames from 'classnames'
import styles from './index.module.scss'
import Remark from '@/components/remark'

interface Param {
  onSave?: (val: string) => void
  defaultValue: string
}
export default (props: Param) => {
  const [showRemark, setShowRemark] = useState(false)
  const [data, setData] = useState('')
  const getOnSave = (e: string) => {
    setData(e)
    props.onSave?.(e)
    setShowRemark(false)
  }
  useEffect(() => {
    setData(props.defaultValue)
  }, [props.defaultValue])
  return <>
    <View className={styles.remarks} onClick={() => setShowRemark(true)}>
      <View className={styles.remarks_header}>
        <Text>备注信息</Text>
        <Text>填写/修改备注</Text>
      </View>
      <View className={styles.remarks_message}>
        <Text className={classNames(data ? styles.valuable : '')}>{data || '尚未备注信息'}</Text>
      </View>
    </View>
    <Remark show={showRemark} onSave={getOnSave} onClose={() => setShowRemark(false)} />
  </>
}
