import React, { useCallback, useEffect, useRef, useState } from 'react'
import styles from './index.module.scss'
import classNames from 'classnames'
import { D1EditInfoType } from '../data'
import { Form, FormInstance, Divider, Button } from 'antd'
import { D1_APIgetInfo } from '@/store/action/D1feedback'
import { D1tableType } from '@/types'

type Props = {
  editInfo: D1EditInfoType
  closeFu: () => void
  addTableFu: () => void
  editTableFu: () => void
}

function D1Export({ editInfo, closeFu, addTableFu, editTableFu }: Props) {
  // 表单的ref
  const FormBoxRef = useRef<FormInstance>(null)

  // 回显数据的方法调用
  const dataShow = useCallback((info: D1tableType) => {
    FormBoxRef.current?.setFieldsValue(info)
  }, [])

  const [values, setValues] = useState<any>({})

  // 查看 进入页面 获取信息
  const getInfoFu = useCallback(
    async (id: number) => {
      if (editInfo.info) dataShow(editInfo.info)
      else {
        const res = await D1_APIgetInfo(id)
        if (res.code === 0) {
          dataShow(res.data)
          setValues(res.data)
        }
      }
    },
    [dataShow, editInfo.info]
  )

  // 查看填入数据
  useEffect(() => {
    if (editInfo.id > 0) {
      getInfoFu(editInfo.id)
    }
  }, [editInfo.id, getInfoFu])

  return (
    <div className={styles.D1Export}>
      <div className={classNames('D1ExportMain')}>
        <Form
          ref={FormBoxRef}
          name='basic'
          labelCol={{ span: 3 }}
          autoComplete='off'
          scrollToFirstError
        >
          <Form.Item label='提交时间' name='createTime'>
            {values.createTime}
          </Form.Item>

          <Form.Item label='姓名' name='name'>
            {values.name}
          </Form.Item>

          <Form.Item label='邮箱' name='email'>
            {values.email}
          </Form.Item>

          <Form.Item label='标题' name='title'>
            {values.title}
          </Form.Item>

          <Form.Item label='内容' name='content'>
            {values.content}
          </Form.Item>

          <Divider />

          {/* 确定和取消按钮 */}
          <Form.Item className='D1abtn'>
            <div className='D1abtnBox'>
              <Button type='primary' onClick={closeFu}>
                返回
              </Button>
            </div>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}

const MemoD1Export = React.memo(D1Export)

export default MemoD1Export
