import React, { useCallback, useRef } from 'react'
import styles from './index.module.scss'
import { Button, Form, FormInstance, Input, Modal, Select } from 'antd'
import MyPopconfirm from '@/components/MyPopconfirm'
import TextArea from 'antd/es/input/TextArea'
import Z3upFiles from '@/components/Z3upFiles'
import ZRichTexts from '@/components/ZRichTexts'

type Props = {
  sId: number
  info: any
  closeFu: () => void
  succFu: () => void
  look?: boolean
}

function B1MoAdd({ sId, info, closeFu, succFu, look = false }: Props) {
  // 设置表单初始数据（区分编辑和新增）
  const FormBoxRef = useRef<FormInstance>(null)

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

  // 通过校验点击确定
  const onFinish = useCallback(async (values: any) => {
    // const rtf1 = ZRichTextRef.current?.fatherBtnOkFu() || { flag: true }
    // console.log('申请信息富文本', JSON.stringify(rtf1.val || ''))
  }, [])

  // 上传附件的ref
  const filesRef = useRef<any>(null)
  // const filesRes = filesRef.current.filesIdRes();

  // 富文本的ref
  const ZRichTextRef = useRef<any>(null)

  // 设置富文本
  //  ZRichTextRef.current?.ritxtShowFu(JSON.parse(data.rtf))

  return (
    <Modal
      wrapClassName={styles.B1MoAdd}
      destroyOnClose
      open={true}
      title={`征集线索-${look ? '查看' : info.id > 0 ? '编辑' : '新增'}`}
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className='B1Mmain'>
        <Form
          scrollToFirstError={true}
          ref={FormBoxRef}
          name='basic'
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete='off'
        >
          <div className='B1MformBox'>
            <Form.Item
              label='线索名称'
              name='aaaa'
              rules={[{ required: true, message: '请输入线索名称' }]}
            >
              <Input readOnly={look} maxLength={30} showCount placeholder='请输入内容' />
            </Form.Item>

            <Form.Item label='线索类别' name='bbbb'>
              <Select disabled={look} placeholder='请选择' />
            </Form.Item>

            <Form.Item label='联系人' name='aaaa'>
              <Input readOnly={look} maxLength={30} showCount placeholder='请输入内容' />
            </Form.Item>
            <Form.Item label='联系电话' name='aaaa'>
              <Input readOnly={look} maxLength={30} showCount placeholder='请输入内容' />
            </Form.Item>
            <Form.Item label='联系地址' name='aaaa'>
              <TextArea readOnly={look} maxLength={500} showCount placeholder='请输入内容' />
            </Form.Item>

            <div className='B1Mrow'>
              <div className='B1Mrowll'>附件：</div>
              <div className='B1Mrowrr'>
                <Z3upFiles
                  max={10}
                  isLook={look}
                  ref={filesRef}
                  fileCheck={false}
                  dirCode={'xxxxxxx'}
                  myUrl='xxxxxxxxxxxx'
                  lookData={[]}
                  size={500}
                />
              </div>
            </div>

            <div className='B1Mrow'>
              <div className='B1Mrowll'>备注：</div>
              <div className='B1Mrowrr'>
                <ZRichTexts
                  check={false}
                  dirCode={'xxxxxxxx'}
                  isLook={look}
                  ref={ZRichTextRef}
                  myUrl='xxxxxxxxxx'
                  isOne={true}
                  upAudioBtnNone={true}
                />
              </div>
            </div>
          </div>

          {/* 确定和取消按钮 */}
          <Form.Item className='B1Mbtn'>
            {look ? (
              <Button onClick={closeFu}>关闭</Button>
            ) : (
              <>
                <Button type='primary' htmlType='submit'>
                  提交
                </Button>
                &emsp;
                <MyPopconfirm txtK='取消' onConfirm={closeFu} />
              </>
            )}
          </Form.Item>
        </Form>
      </div>
    </Modal>
  )
}

const MemoB1MoAdd = React.memo(B1MoAdd)

export default MemoB1MoAdd
