import React, { useCallback, useEffect, useRef } from 'react'
import styles from './index.module.scss'
import { Button, Form, FormInstance, Input, InputNumber, Modal } from 'antd'
import MyPopconfirm from '@/components/MyPopconfirm'
import { A2_APIgetInfo2, A2_APIsave2 } from '@/store/action/A2classify'
import { MessageFu } from '@/utils/message'

type Props = {
  tab2Id: number
  addFu: (flag: boolean) => void
  closeFu: () => void
}

function A2add2({ tab2Id, addFu, closeFu }: Props) {
  // 设置表单初始数据（区分编辑和新增）
  const FormBoxRef = useRef<FormInstance>(null)

  const getInfoFu = useCallback(async (id: number) => {
    const res = await A2_APIgetInfo2(id)
    if (res.code === 0) {
      FormBoxRef.current?.setFieldsValue({
        ...res.data
      })
    }
  }, [])
  useEffect(() => {
    if (tab2Id > 0) getInfoFu(tab2Id)
    else {
      FormBoxRef.current?.setFieldsValue({
        sort: 999
      })
    }
  }, [getInfoFu, tab2Id])

  // 没有通过校验
  const onFinishFailed = useCallback(() => {
    // return MessageFu.warning("有表单不符号规则!");
  }, [])

  // 通过校验点击确定
  const onFinish = useCallback(
    async (values: any) => {
      const res = await A2_APIsave2({
        ...values,
        id: tab2Id > 0 ? tab2Id : null
      })
      if (res.code === 0) {
        MessageFu.success(tab2Id > 0 ? '编辑成功!' : '新增成功!')
        addFu(tab2Id > 0 ? true : false)
        closeFu()
      }
    },
    [addFu, closeFu, tab2Id]
  )
  return (
    <Modal
      wrapClassName={styles.A2add}
      open={true}
      title={`${tab2Id > 0 ? '编辑' : '新增'} - 展示分类`}
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className='A2aMain'>
        <Form
          scrollToFirstError={true}
          ref={FormBoxRef}
          name='basic'
          labelCol={{ span: 3 }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete='off'
        >
          <Form.Item
            label='分类名称'
            name='name'
            rules={[{ required: true, message: '请输入分类名称!' }]}
            getValueFromEvent={e => e.target.value.replace(/\s+/g, '')}
          >
            <Input maxLength={20} showCount placeholder='请输入内容' />
          </Form.Item>

          <div className='fromRow2'>
            <Form.Item
              label='排序值'
              name='sort'
              rules={[{ required: true, message: '请输入排序值!' }]}
            >
              <InputNumber min={1} max={999} precision={0} placeholder='请输入' />
            </Form.Item>
            <div className='fromRowTit'>
              请输入1~999的数字。数字越小，排序越靠前。数字相同时，更新发布的内容排在前面
            </div>
          </div>

          {/* 确定和取消按钮 */}
          <br />
          <Form.Item wrapperCol={{ offset: 9, span: 16 }}>
            <Button type='primary' htmlType='submit'>
              提交
            </Button>
            &emsp;
            <MyPopconfirm txtK='取消' onConfirm={closeFu} />
          </Form.Item>
        </Form>
      </div>
    </Modal>
  )
}

const MemoA2add2 = React.memo(A2add2)

export default MemoA2add2
