import React, { useCallback, useEffect, useState } from 'react'
import styles from './index.module.scss'
import classNames from 'classnames'
import { B1EditInfoType } from '../data'
import { Button, Form, Divider } from 'antd'

import { B_APIgetInfo } from '@/store/action/Breserve'
import { B1tableType } from '@/types'

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

function B1add({ editInfo, closeFu, addTableFu, editTableFu }: Props) {
  const [itemData, setItemData] = useState<B1tableType>()

  // 回显数据的方法调用
  const dataShow = useCallback((info: B1tableType) => {
    setItemData(info)
  }, [])

  // 查询数据
  const getInfoFu = useCallback(
    async (id: number) => {
      if (editInfo.info) dataShow(editInfo.info)
      else {
        const res = await B_APIgetInfo(id)
        if (res.code === 0) {
          dataShow(res.data)
        }
      }
    },
    [dataShow, editInfo.info]
  )

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

  return (
    <div className={styles.B1add}>
      <div className={classNames('B1aMain')}>
        <Form name='basic' labelCol={{ span: 3 }} autoComplete='off' scrollToFirstError>
          <Form.Item label='申请时间'>{itemData?.createTime}</Form.Item>

          <Form.Item label='预约日期'>{itemData?.appointmentTime}</Form.Item>

          <Form.Item label='预约时段'>{itemData?.time}</Form.Item>

          <Form.Item label='预约人数'>{itemData?.pcs}</Form.Item>

          <Form.List name='visitors'>
            {() =>
              itemData?.visitors.map((item, index) => (
                <div key={index}>
                  <Divider />
                  <Form.Item
                    label='参观人姓名'
                    key={index + 'name'}
                    rules={[{ required: true, message: '请输入参观人姓名' }]}
                  >
                    {item.name}
                  </Form.Item>
                  <Form.Item
                    label='参观人电话'
                    key={index + 'phone'}
                    rules={[{ required: true, message: '请输入参观人电话' }]}
                  >
                    {item.phone}
                  </Form.Item>
                  <Form.Item
                    label='身份证号'
                    key={index + 'idCard'}
                    rules={[{ required: true, message: '请输入身份证号' }]}
                  >
                    {item.idCard}
                  </Form.Item>
                </div>
              ))
            }
          </Form.List>

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

const MemoB1add = React.memo(B1add)

export default MemoB1add
