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'
import dayjs from 'dayjs'
import classNames from 'classnames'
import { Button } from 'antd'
import history from '@/utils/history'

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 [isNowDay, setIsNowDay] = useState(false)

  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))

        // 判断预约时间是不是当天
        const orderDay = dayjs(res.data.bookDate).format('MM_DD')
        const nowDay = dayjs().format('MM_DD')

        // 不是当天的日期
        if (orderDay !== nowDay) setIsNowDay(true)
      }
    },
    [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 === '查看' || isNowDay ? 'center' : 'space-between'
        }}
      >
        {type === '查看' || isNowDay ? null : (
          <div className='A1Lbtn1' onClick={() => updateFu(sId, 1)}>
            核销
          </div>
        )}

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

      {/* 预约时间不属于当天 */}
      <div className={classNames('A2noTime', isNowDay ? 'A2noTimeAc' : '')}>
        <div>
          <h3>无法核销</h3>
          <p>该二维码不属于今日预约，无法核销</p>
          <div className='A2noTimeBtn'>
            <Button onClick={() => history.replace('/')}>回到首页</Button>&emsp;
            <Button type='primary' onClick={() => history.replace('/code')}>
              继续扫码
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}

const MemoA2look = React.memo(A2look)

export default MemoA2look
