import React, { useCallback, useEffect, useRef } from 'react'
import styles from './index.module.scss'
import { Button, Form, FormInstance, Modal, Select } from 'antd'
import { A1_APIlogGetInfo, A1_APIlogSave } from '@/store/action/A1record'
import { MessageFu } from '@/utils/message'
import { useSelector } from 'react-redux'
import { RootState } from '@/store'
import MyPopconfirm from '@/components/MyPopconfirm'
import TextArea from 'antd/es/input/TextArea'
import Z3upFiles from '@/components/Z3upFiles'

export type A3T3addInfoType = {
  txt: '查看' | '编辑' | '新增' | ''
  id: number
}

type Props = {
  addInfo: A3T3addInfoType
  closeFu: () => void
  upTableFu: () => void
  bridgeId: number
}

function A1T3add({ addInfo, closeFu, upTableFu, bridgeId }: Props) {
  const listObj = useSelector((state: RootState) => state.A3dict.listObj)

  // 表单的ref
  const FormBoxRef = useRef<FormInstance>(null)

  const listFilesRef = useRef<any>(null)

  // 编辑进来获取详情
  const getInfoFu = useCallback(async (id: number) => {
    const res = await A1_APIlogGetInfo(id)

    if (res.code === 0) {
      const data = res.data

      listFilesRef.current.showList(data.file)

      FormBoxRef.current?.setFieldsValue(data)
    }
  }, [])

  useEffect(() => {
    if (addInfo.txt !== '新增') getInfoFu(addInfo.id)
  }, [getInfoFu, addInfo])

  // 没有通过校验
  const onFinishFailed = useCallback(() => {}, [])

  //  通过校验点击确定
  const onFinish = useCallback(
    async (values: any) => {
      const listFilesRes = listFilesRef.current.filesIdRes()

      const obj = {
        ...values,
        id: addInfo.txt === '新增' ? null : addInfo.id,
        bridgeId,
        fileIds: listFilesRes.join(',')
      }

      // if (1 + 1 === 2) {
      //   console.log('------222', obj)
      //   return
      // }

      const res = await A1_APIlogSave(obj)

      if (res.code === 0) {
        MessageFu.success(`${addInfo.txt}成功`)
        upTableFu()
        closeFu()
      }
    },
    [addInfo.id, addInfo.txt, bridgeId, closeFu, upTableFu]
  )

  return (
    <Modal
      wrapClassName={styles.A1T3add}
      open={true}
      title={`${addInfo.txt}记录`}
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <Form
        ref={FormBoxRef}
        name='basic'
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete='off'
        scrollToFirstError
      >
        <Form.Item
          label='维护类型'
          name='dictId'
          rules={[{ required: true, message: '请选择维护类型' }]}
        >
          <Select
            disabled={addInfo.txt === '查看'}
            placeholder='请选择'
            options={listObj.maintain.map(v => ({ value: v.id, label: v.name }))}
          />
        </Form.Item>

        <Form.Item label='维护详情' name='intro'>
          <TextArea
            readOnly={addInfo.txt === '查看'}
            placeholder={addInfo.txt === '查看' ? '（空）' : '请输入'}
            maxLength={2000}
            showCount
          />
        </Form.Item>

        <div className='formRow'>
          <div className='formRowll'>附件：</div>
          <div className='formRowrr'>
            <Z3upFiles
              accept='*'
              isLook={addInfo.txt === '查看'}
              ref={listFilesRef}
              fileCheck={false}
              dirCode='A1recordTab3File'
              myUrl='cms/maintain/upload'
              tips=''
            />
          </div>
        </div>

        {/* 确定和取消按钮 */}
        <Form.Item className='A1T3btn'>
          {addInfo.txt === '查看' ? (
            <Button onClick={closeFu}>关闭</Button>
          ) : (
            <>
              <Button type='primary' htmlType='submit'>
                提交
              </Button>
              <br />
              <br />
              <MyPopconfirm txtK='取消' onConfirm={closeFu} />
            </>
          )}
        </Form.Item>
      </Form>
    </Modal>
  )
}

const MemoA1T3add = React.memo(A1T3add)

export default MemoA1T3add
