import React, { useCallback, useEffect, useState } from 'react'
import styles from './index.module.scss'
import { Button, Modal } from 'antd'
import { B2_APIgetInfo } from '@/store/action/B2exhiLog'
import { B2SonListType } from './type'

type Props = {
  sId: number
  closeFu: () => void
}

function B2look({ sId, closeFu }: Props) {
  const [list, setList] = useState<B2SonListType[]>([])

  const getInfoFu = useCallback(async (id: number) => {
    const res = await B2_APIgetInfo(id)
    if (res.code === 0) {
      setList(JSON.parse(res.data.rtf))
    }
  }, [])

  useEffect(() => {
    getInfoFu(sId)
  }, [getInfoFu, sId])

  return (
    <Modal
      wrapClassName={styles.B2look}
      open={true}
      title='查看'
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className='B2row B2rowOne'>
        <div className='B2box'>
          <div className='B2boxll'>申请时间：</div>
          <div className='B2boxrr'>2024-10-30 09:59:05</div>
        </div>
        <div className='B2box'>
          <div className='B2boxll'>预约日期：</div>
          <div className='B2boxrr'>2024-10-30</div>
        </div>

        <div className='B2box'>
          <div className='B2boxll'>预约时段：</div>
          <div className='B2boxrr'>08:00-09:00</div>
        </div>
      </div>

      {list.map((item, index) => (
        <div className='B2row' key={index}>
          <div className='B2box'>
            <div className='B2boxll'>参观人姓名：</div>
            <div className='B2boxrr'>{item.name}</div>
          </div>
          <div className='B2box'>
            <div className='B2boxll'>参观人电话：</div>
            <div className='B2boxrr'>{item.phone}</div>
          </div>
          <div className='B2box'>
            <div className='B2boxll'>身份证号：</div>
            <div className='B2boxrr'>{item.identity}</div>
          </div>
        </div>
      ))}

      <div className='B2Lbtn'>
        <Button onClick={closeFu}>关闭</Button>
      </div>
    </Modal>
  )
}

const MemoB2look = React.memo(B2look)

export default MemoB2look
