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

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

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

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

  // 回显数据的方法调用
  const dataShow = useCallback((info: B2tableType) => {
    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.B2look}>
      <div className={classNames('B2Main')}>
        <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?.pcs}</Form.Item>

          <Form.List name='visitors'>
            {() =>
              itemData?.visitors.map((item, index) => (
                <div key={index}>
                  <Divider />
                  <Form.Item label='活动名称' key={index + 'activityTitle'}>
                    {itemData.activityTitle}
                  </Form.Item>
                  <Form.Item label='参观人姓名' key={index + 'name'}>
                    {item.name}
                  </Form.Item>
                  <Form.Item label='参观人电话' key={index + 'phone'}>
                    {item.phone}
                  </Form.Item>
                  <Form.Item label='身份证号' key={index + 'idCard'}>
                    {item.idCard}
                  </Form.Item>
                </div>
              ))
            }
          </Form.List>

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

const MemoB2look = React.memo(B2look)

export default MemoB2look
