import React, { useCallback, useEffect, useRef, useState } from 'react'
import styles from './index.module.scss'
import { Button, Input, Modal } from 'antd'
import MyPopconfirm from '@/components/MyPopconfirm'
import { MessageFu } from '@/utils/message'
import { UserTableListType } from '@/pages/Isystem/I7user/data'
import { A2_APIeditUser } from '@/store/action/Abench/A2bench'
import ZupOne from '@/components/ZupOne'

type Props = {
  closeFu: () => void
  userInfo: UserTableListType
  succFu: (obj: any) => void
}

function A2editUser({ closeFu, userInfo, succFu }: Props) {
  const [realName, setRealName] = useState('')

  // 头像的ref
  const ZupThumbRef = useRef<any>(null)

  useEffect(() => {
    setRealName(userInfo.realName)
    // 设置头像
    ZupThumbRef.current?.setFileComFileFu({
      fileName: '',
      filePath: userInfo.thumb,
      thumb: userInfo.thumb
    })
  }, [userInfo])

  const [fileCheck, setFileCheck] = useState(false)

  const btnOk = useCallback(async () => {
    setFileCheck(true)

    // 头像
    const coverUrl1 = ZupThumbRef.current?.fileComFileResFu()

    if (!coverUrl1.thumb) return

    const obj = {
      id: userInfo.id,
      realName,
      thumb: coverUrl1.thumb
    }

    const res = await A2_APIeditUser(obj)

    if (res.code === 0) {
      MessageFu.success('编辑成功')
      succFu(obj)
      closeFu()
    }
  }, [closeFu, realName, succFu, userInfo.id])

  return (
    <Modal
      wrapClassName={styles.A2editUser}
      destroyOnClose
      open={true}
      title='个人资料'
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className='A2Emain'>
        <div className='formRow'>
          <div className='formLeft'>
            <span> * </span>真实姓名：
          </div>
          <div className='formRight'>
            <Input
              style={{ width: 300 }}
              maxLength={10}
              showCount
              placeholder='请输入内容'
              value={realName}
              onChange={e => setRealName(e.target.value.replace(/\s+/g, ''))}
            />
          </div>
        </div>

        {/* 封面 */}
        <div className='formRow'>
          <div className='formLeft'>
            <span> * </span> 头像：
          </div>
          <div className='formRight'>
            <ZupOne
              ref={ZupThumbRef}
              isLook={false}
              fileCheck={fileCheck}
              dirCode='businessEditUser'
              myUrl='sys/user/upload'
              format={['image/jpeg', 'image/png']}
              formatTxt='png、jpg和jpeg'
              checkTxt='请上传头像!'
              upTxt='最多1张'
              myType='thumb'
              isTouXiang={true}
            />
          </div>
        </div>

        <div className='A2Ebtn'>
          <Button type='primary' onClick={btnOk}>
            提交
          </Button>
          &emsp;
          <MyPopconfirm txtK='取消' onConfirm={closeFu} />
        </div>
      </div>
    </Modal>
  )
}

const MemoA2editUser = React.memo(A2editUser)

export default MemoA2editUser
