import React, { useCallback, useEffect, useState } from 'react'
import styles from './index.module.scss'
import { Button, Radio } from 'antd'
import TextArea from 'antd/es/input/TextArea'
import MyPopconfirm from '@/components/MyPopconfirm'
import { MessageFu } from '@/utils/message'
import { I4tableType } from '../data'
import { I4_APIgetInfo, I4_APIsave } from '@/store/action/Isystem/I4processSet'

type Props = {
  sId: number
  closeFu: () => void
  succFu: () => void
}

function I4edit({ sId, closeFu, succFu }: Props) {
  const [info, setInfo] = useState({} as I4tableType)

  const getInfoFu = useCallback(async (id: number) => {
    const res = await I4_APIgetInfo(id)
    if (res.code === 0) {
      const data: I4tableType = res.data
      setInfo({
        ...data
      })
    }
  }, [])

  useEffect(() => {
    getInfoFu(sId)
  }, [getInfoFu, sId])

  const formChange = useCallback(
    (key: 'enabled' | 'remark', val: any) => {
      setInfo({
        ...info,
        [key]: val
      })
    },
    [info]
  )

  // 点击确定
  const btnOk = useCallback(async () => {
    const obj = {
      ...info
    }

    const res = await I4_APIsave(obj)
    if (res.code === 0) {
      MessageFu.success('编辑成功')
      succFu()
      closeFu()
    }
  }, [closeFu, info, succFu])

  return (
    <div className={styles.I4edit}>
      <div className='I4main'>
        <div className='I4RowBox'>
          <div className='I4row'>
            <div className='I4row1'>流程名称：</div>
            <div className='I4row2'>{info.name}</div>
          </div>

          <div className='I4row'>
            <div className='I4row1'>
              <span> * </span> 流程状态：
            </div>
            <div className='I4row2'>
              <Radio checked={info.enabled === 1} onClick={() => formChange('enabled', 1)}>
                启用
              </Radio>
              &emsp;
              <Radio checked={info.enabled === 0} onClick={() => formChange('enabled', 0)}>
                禁用
              </Radio>
            </div>
          </div>

          <div className='I4row'>
            <div className='I4row1'>流程说明：</div>
            <div className='I4row2'>
              <TextArea
                maxLength={500}
                showCount
                placeholder='请输入内容'
                value={info.remark}
                onChange={e => formChange('remark', e.target.value)}
              />
            </div>
          </div>
        </div>

        {/* 右侧按钮 */}
        <div className='I4btn'>
          <Button type='primary' onClick={btnOk}>
            保存
          </Button>{' '}
          &emsp;
          <MyPopconfirm txtK='取消' onConfirm={closeFu} />
        </div>
      </div>
    </div>
  )
}

const MemoI4edit = React.memo(I4edit)

export default MemoI4edit
