import React, { useCallback, useEffect, useState } from 'react'
import styles from './index.module.scss'
import { A2SonListType } from './type'
import { A1_APIgetInfo, A1_APIupdate } from '@/store/action/A1list'
import { MessageFu } from '@/utils/message'

type Props = {
  sId: number
  closeFu: () => void
  type: '查看' | '核销'
  upTable: () => void
}

function A2look({ sId, closeFu, type, upTable }: Props) {
  const [list, setList] = useState<A2SonListType[]>([])

  const [info, setInfo] = useState({
    createTime: '',
    bookDate: '',
    time: '',
    type: '',
    pcs: 0,
    teamDesc: ''
  })

  const getInfoFu = useCallback(
    async (id: number) => {
      const res = await A1_APIgetInfo(id)
      if (res.code === 0) {
        if (res.data.status === 1 && type === '核销') {
          MessageFu.success('此二维码已经核销')
          upTable()
          closeFu()
          return
        }

        setInfo(res.data)
        setList(JSON.parse(res.data.rtf))
      }
    },
    [closeFu, type, upTable]
  )

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

  // 核销
  const updateFu = useCallback(
    async (id: number, status: 0 | 1) => {
      const res = await A1_APIupdate(id, status)
      if (res.code === 0) {
        MessageFu.success('核销成功!')
        upTable()
        closeFu()
      }
    },
    [closeFu, upTable]
  )

  return (
    <div className={styles.A2look}>
      <div className='A1top'>
        <h1>预约详情</h1>
        <span></span>
      </div>
      <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='A1Lbtn'
        style={{ justifyContent: type === '查看' ? 'center' : 'space-between' }}
      >
        {type === '查看' ? null : (
          <div className='A1Lbtn1' onClick={() => updateFu(sId, 1)}>
            核销
          </div>
        )}

        <div className='A1Lbtn2' onClick={closeFu}>
          {type === '查看' ? '返回' : '取消'}
        </div>
      </div>
    </div>
  )
}

const MemoA2look = React.memo(A2look)

export default MemoA2look