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_APIcancel, B2_APIgetList } from '@/store/action/all'
import { B2ListType, B2SonListType } from './type'
import history from '@/utils/history'
import classNames from 'classnames'
import MyPopconfirm from '@/components/MyPopconfirm'
import { MessageFu } from '@/utils/message'
import { QRCode } from 'antd'
import { CloseCircleOutlined } from '@ant-design/icons'

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
  }, [])

  // 点击撤回预约
  const recallFu = useCallback(
    async (id: number) => {
      const res = await B2_APIcancel(id)
      if (res.code === 0) {
        MessageFu.success('撤回成功!')
        getListFu()
      }
    },
    [getListFu]
  )

  // 出示二维码
  const [code, setCode] = useState('')

  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>
                  <p style={{ width: '100%' }}>
                    <span>来自地区：</span>
                    {item.province + '-' + item.city}
                  </p>
                  <p>
                    <span>预约类型：</span>
                    {item.type === 'person' ? '个人预约' : '团体预约'}
                  </p>
                  <div className={classNames('B2row1Sta', item.status === 1 ? 'B2row1StaHe' : '')}>
                    {item.status === 0 ? '未核销' : '已核销'}
                  </div>
                </div>

                <div className='B2row2Box mySorrl'>
                  {sonList(item.rtf).map((item2, index2) => (
                    <div className='B2row2' key={index2}>
                      <div className='B2row2_1'>
                        {item.type === 'person' ? `参观人信息${index2 + 1}` : '负责人信息'}
                      </div>
                      <p>
                        {item.type === 'person' ? '参观人' : '负责人'}姓名：{item2.name}
                      </p>
                      <p>联系方式：{item2.phone}</p>
                      <p>
                        {item2.papers || '证件号码'}：{item2.identity}
                      </p>
                    </div>
                  ))}

                  {/* 团队预约才有的 */}
                  {item.type === 'team' ? (
                    <div className='B2row2 B2row2T'>
                      <p>参团人数：{item.pcs}</p>
                      {item.teamDesc ? (
                        <div className='B2row2Tdesc'>
                          <div className='B2row2Tdesc1'>团队描述：</div>
                          <div className='B2row2Tdesc2'>{item.teamDesc}</div>
                        </div>
                      ) : null}
                    </div>
                  ) : null}
                </div>

                <div className='B2rowCheBox'>
                  {item.status === 0 ? (
                    <>
                      <MyPopconfirm
                        txtK='撤回'
                        onConfirm={() => recallFu(item.id)}
                        Dom={<div className='B2rowChe'>撤回预约</div>}
                      />
                      <div
                        className='B2rowChe B2rowCodeBtn'
                        onClick={() => setCode(`HQ_CODE/${item.id}`)}
                      >
                        出示二维码
                      </div>
                    </>
                  ) : null}
                </div>
              </div>
            ))}
            <div className='B2dian'>联系方式：17722062600</div>
          </>
        ) : (
          <div className='B2No' hidden={!loding}>
            <img src={noImg} alt='' />
            <p>暂无预约信息</p>
          </div>
        )}
      </div>

      <ZexhiBtn onlyBack nextFu={() => {}} backFu={() => history.push('/exhi')} />

      {/* 出示二维码 */}
      {code ? (
        <div className='B2codeBox'>
          <QRCode value={code || '-'} size={240} />
          <CloseCircleOutlined onClick={() => setCode('')} />
        </div>
      ) : null}
    </div>
  )
}

const MemoB2myz = React.memo(B2myz)

export default MemoB2myz