import React, { useCallback, useEffect, useState } from 'react'
import styles from './index.module.scss'
import ZexhiBtn from '@/components/ZexhiBtn'

import noImg from '@/assets/img/exhibit/no.png'
import { B2_APIgetList } from '@/store/action/all'
import { B2ListType, B2SonListType } from './type'

function B2myz() {
  const [loding, setLoding] = useState(false)

  const [list, setList] = useState<B2ListType[]>([])

  const getListFu = useCallback(async () => {
    const res = await B2_APIgetList()
    if (res.code === 0) {
      setLoding(true)
      setList(res.data)
    }
  }, [])

  useEffect(() => {
    getListFu()
  }, [getListFu])

  const sonList = useCallback((val: string) => {
    let arr: B2SonListType[] = []
    arr = JSON.parse(val)
    return arr
  }, [])

  return (
    <div className={styles.B2myz}>
      <div className='B2main'>
        {list.length ? (
          <>
            {list.map(item => (
              <div className='B2row' key={item.id}>
                <div className='B2row1'>
                  <p>
                    <span>预约日期：</span>
                    {item.bookDate}
                  </p>
                  <p>
                    <span>入馆时间：</span>
                    {item.time}
                  </p>
                </div>

                {sonList(item.rtf).map((item2, index2) => (
                  <div className='B2row2' key={index2}>
                    <div className='B2row2_1'>参观人信息{index2 + 1}</div>
                    <p>参观人姓名：{item2.name}</p>
                    <p>联系方式：{item2.phone}</p>
                    <p>身份证号：{item2.identity}</p>
                  </div>
                ))}
              </div>
            ))}
          </>
        ) : (
          <div className='B2No' hidden={!loding}>
            <img src={noImg} alt='' />
            <p>暂无预约信息</p>
          </div>
        )}
      </div>

      <ZexhiBtn onlyBack nextFu={() => {}} />
    </div>
  )
}

const MemoB2myz = React.memo(B2myz)

export default MemoB2myz
