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 [info, setInfo] = useState({
    createTime: '',
    bookDate: '',
    time: '',
    type: '',
    pcs: 0,
    teamDesc: ''
  })

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

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

  return (
    <Modal
      wrapClassName={styles.B2look}
      open={true}
      title='查看'
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className='B2Lmain'>
        <div className='B2row B2rowOne'>
          <div className='B2box'>
            <div className='B2boxll'>预约类型：</div>
            <div className='B2boxrr'>
              {info.type === 'person' ? '个人预约' : '团队预约'}
            </div>
          </div>
          <div className='B2box'>
            <div className='B2boxll'>申请时间：</div>
            <div className='B2boxrr'>{info.createTime}</div>
          </div>
          <div className='B2box'>
            <div className='B2boxll'>预约日期：</div>
            <div className='B2boxrr'>{info.bookDate}</div>
          </div>

          <div className='B2box'>
            <div className='B2boxll'>预约时段：</div>
            <div className='B2boxrr'>{info.time}</div>
          </div>
        </div>

        {list.map((item, index) => (
          <div className='B2row' key={index}>
            <div className='B2box'>
              <div className='B2boxll'>
                {info.type === 'person' ? '参观人' : '负责人'}姓名：
              </div>
              <div className='B2boxrr'>{item.name}</div>
            </div>
            <div className='B2box'>
              <div className='B2boxll'>
                {info.type === 'person' ? '参观人' : '负责人'}电话：
              </div>
              <div className='B2boxrr'>{item.phone}</div>
            </div>
            <div className='B2box'>
              <div className='B2boxll B2boxllZZ'>
                {item.papers || '证件号码'}：<span>{item.identity}</span>
              </div>
            </div>
          </div>
        ))}
        {info.type === 'team' ? (
          <div className='B2row B2row2'>
            <div className='B2box'>
              <div className='B2boxll'>参团人数：</div>
              <div className='B2boxrr'>{info.pcs}</div>
            </div>
            {info.teamDesc ? (
              <div className='B2box B2box2'>
                <div className='B2boxll'>团队描述：</div>
                <div className='B2boxrr'>{info.teamDesc}</div>
              </div>
            ) : null}
          </div>
        ) : null}
      </div>

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

const MemoB2look = React.memo(B2look)

export default MemoB2look