import { Input, View } from '@tarojs/components'
import { useEffect, useState } from 'react'
import styles from './index.module.scss'

export interface Param {
  show: boolean
  title: string
  onConfirm?: (val: string) => void
  onCancel?: () => void
  defaultValue?: string
  onClose?: () => void
}
export default (props: Param) => {
  const { show = false, title = '', onConfirm, onCancel, defaultValue = '', onClose } = props
  const [value, setValue] = useState('')
  const [openStatus, setOpenStatus] = useState(false)
  useEffect(() => {
    if (value !== defaultValue) { setValue(() => defaultValue) }
  }, [defaultValue])
  useEffect(() => {
    if (show !== openStatus) { setOpenStatus(() => show) }
  }, [show])

  const onInputEven = (e) => {
    const res = e.detail.value
    setValue(res)
  }
  const onCancelEven = () => {
    onCancel?.()
    onCloseEven()
  }
  const onCloseEven = () => {
    onClose?.()
    setOpenStatus(false)
  }
  const onConfirmEven = (val) => {
    onClose?.()
    onConfirm?.(val)
  }
  return (
    <>
      {openStatus && <View className={styles.popup_modal_main}>
        <View className={styles.popup_modal_con}>
          <View className={styles.popup_modal_title}>{title}</View>
          <View className={styles.popup_modal_input}>
            <View className={styles.input}>
              <Input onInput={onInputEven} value={value} />
            </View>
          </View>
          <View className={styles.popup_modal_btn}>
            <View className={styles.popup_modal_btn_item} onClick={onCancelEven}>取消</View>
            <View className={styles.popup_modal_btn_item} onClick={() => onConfirmEven(value)}>确认修改</View>
          </View>
        </View>
        <View className={styles.mask} catchMove onClick={onCloseEven}></View>
      </View>}
    </>
  )
}