import React, { useCallback, useEffect, useState } from 'react'
import styles from './index.module.scss'
import TopCom from '@/components/TopCom'
import classNames from 'classnames'
import MyPopconfirm from '@/components/MyPopconfirm'
import succImg from '@/assets/img/my/succ.png'
import errImg from '@/assets/img/my/err.png'
import succImg2 from '@/assets/img/my/succ2.png'
import errImg2 from '@/assets/img/my/err2.png'
import { A6_APIcancelAuth, A6_APIgetListRenZheng, A6_APIgetListYuYue } from '@/store/action/all'
import { A6tableType1, A6tableType2 } from './type'
import { FileType } from '@/types'
import { baseURL } from '@/utils/http'
import { MessageFu } from '@/utils/message'
import history, { wxDownFu } from '@/utils/history'
import { ImageViewer } from 'antd-mobile'
import useWxXcx from '@/components/AownUse/useWxXcx'

function A6my() {
  // 是否是微信小程序
  const { isWXxcx } = useWxXcx()

  const [topAc, setTopAc] = useState(
    window.location.hash.includes('?m=1') ? '认证申请' : '预约申请'
  )

  const [list1, setList1] = useState<A6tableType1[]>([])
  const [loding1, setLoding1] = useState(false)

  // 获取预约申请
  const getList1 = useCallback(async () => {
    const res = await A6_APIgetListYuYue()
    if (res.code === 0) {
      setLoding1(true)
      setList1(res.data)
    }
  }, [])

  const [list2, setList2] = useState<A6tableType2[]>([])
  const [loding2, setLoding2] = useState(false)

  // 获取认证申请
  const getList2 = useCallback(async () => {
    const res = await A6_APIgetListRenZheng()
    if (res.code === 0) {
      setLoding2(true)
      setList2(res.data)
    }
  }, [])

  useEffect(() => {
    getList1()
    getList2()
  }, [getList1, getList2])

  // 点击撤回
  const recallFu = useCallback(
    async (id: number, type: 'apply' | 'auth') => {
      const res = await A6_APIcancelAuth(id, type)
      if (res.code === 0) {
        MessageFu.success('撤回申请成功!')
        if (type === 'apply') getList1()
        else getList2()
      }
    },
    [getList1, getList2]
  )

  const lookImgFu = useCallback((url: string) => {
    MessageFu.info('可长按图片保存')
    ImageViewer.show({ image: baseURL + url })
  }, [])

  return (
    <div className={styles.A6my}>
      <TopCom txt='我的申请' backFu={() => history.push('/')} />
      <div className='A6main'>
        <div className='A6top'>
          {['预约申请', '认证申请'].map(item => (
            <div
              onClick={() => setTopAc(item)}
              className={classNames('A6tRow', topAc === item ? 'A6tRowAc' : '')}
              key={item}
            >
              {item}
            </div>
          ))}
        </div>

        {/* 预约申请 */}
        <div className='A6list' hidden={topAc !== '预约申请'}>
          {list1.length ? (
            <>
              {list1.map(item => (
                <div className='A6row' key={item.id}>
                  <div className='A6row1'>
                    {[3, 0].includes(item.status) ? (
                      <div
                        className='A6row1_1'
                        style={{
                          borderColor: item.status === 3 ? '#aeaeae' : '#f45151',
                          color: item.status === 3 ? '#fff' : '#f45151',
                          backgroundColor: item.status === 3 ? '#aeaeae' : ''
                        }}
                      >
                        {item.status === 3 ? '已失效' : '待审核'}
                      </div>
                    ) : (
                      <img src={item.status === 1 ? succImg : errImg} alt='' />
                    )}

                    <p>
                      <span>预约日期：</span>
                      {item.bookDate}
                      {item.bookTime === 'am' ? '上午' : '下午'}
                    </p>
                    <p>
                      <span>预约课程：</span>
                      {item.subjectName}
                    </p>
                  </div>

                  <div className='A6row2'>
                    <div className='A6row2Tit'>负责人信息：</div>
                    <p>
                      <span>负责人姓名：</span>
                      {item.name}
                    </p>
                    <p>
                      <span>联系方式：</span>
                      {item.phone}
                    </p>
                    <p>
                      <span>{item.papers || '证件号码'}：</span>
                      {item.identity}
                    </p>
                  </div>

                  <div className='A6row2'>
                    <div className='A6row2Tit'>团队信息：</div>

                    <div className='A6row2_1 mySorrl'>
                      <p>
                        <span>参团学生人数：</span>
                        {item.pcsStudent}
                      </p>
                      <p>
                        <span>随堂老师人数：</span>
                        {item.pcsTeacher || 0}
                      </p>
                      <div>
                        <span>所属机构：</span>
                        {item.unit}
                      </div>
                      {item.remark ? (
                        <div>
                          <span>团队描述：</span>
                          {item.remark}
                        </div>
                      ) : null}
                      <div>
                        <span>来自地区：</span>
                        {item.province + '-' + item.city}
                      </div>
                    </div>
                  </div>

                  <div className={classNames('A6row3', item.status !== 0 ? 'A6row3No' : '')}>
                    <MyPopconfirm
                      txtK='撤回'
                      onConfirm={() => recallFu(item.id, 'apply')}
                      Dom={<div>撤回申请</div>}
                    />
                  </div>
                </div>
              ))}
              <div className='B2dian' hidden>
                联系方式：17722062600
              </div>
            </>
          ) : (
            <div className='A6No' hidden={!loding1}>
              暂无预约申请
            </div>
          )}
        </div>

        {/* 认证申请 */}
        <div className='A6list' hidden={topAc !== '认证申请'}>
          {list2.length ? (
            <>
              {list2.map(item => (
                <div className='A6_2row' key={item.id}>
                  <div className='A6_2Top'>
                    <p style={{ opacity: 0 }}>认证单位</p>
                    <div style={{ opacity: 0 }}>
                      {item.type === 'neighbour'
                        ? '澳门街坊会联合总会广东办事处'
                        : '横琴粤澳深度合作区民生事务局'}
                    </div>

                    {[3, 0].includes(item.status) ? (
                      <div
                        className='A6row1_1'
                        style={{
                          borderColor: item.status === 3 ? '#aeaeae' : '#fff',
                          backgroundColor: item.status === 3 ? '#aeaeae' : ''
                        }}
                      >
                        {item.status === 3 ? '已失效' : '待审核'}
                      </div>
                    ) : (
                      <img src={item.status === 1 ? succImg2 : errImg2} alt='' />
                    )}
                  </div>

                  <div className='A6_2main'>
                    <div className='A6_2tit'>负责人信息：</div>
                    <p>
                      <span>负责人姓名：</span>
                      {item.name}
                    </p>
                    <p>
                      <span>联系方式：</span>
                      {item.phone}
                    </p>
                    <div>
                      <span>单位名称：</span>
                      <p>{item.unit}</p>
                    </div>
                  </div>

                  <div className='A6_2file'>
                    <div className='A6_2file1'>
                      <div className='A6_2file1_1'>授权或同意文件：</div>
                      {item.file.map((item2: FileType) => (
                        <div key={item2.id} className='A6_2fileRow'>
                          <div className='A6_2filell'>{item2.fileName}</div>

                          {item2.fileName.endsWith('.pdf') || item2.fileName.endsWith('.PDF') ? (
                            isWXxcx ? (
                              <div className='A6_2filerr' onClick={() => wxDownFu(item2.filePath)}>
                                下载
                              </div>
                            ) : (
                              <a
                                href={baseURL + item2.filePath}
                                className='A6_2filerr'
                                download={item2.fileName}
                              >
                                下载
                              </a>
                            )
                          ) : (
                            <div className='A6_2filerr' onClick={() => lookImgFu(item2.filePath)}>
                              查看
                            </div>
                          )}
                        </div>
                      ))}
                    </div>
                  </div>

                  <div className={classNames('A6_2btn', item.status !== 0 ? 'A6_2btnNo' : '')}>
                    <MyPopconfirm
                      txtK='撤回'
                      onConfirm={() => recallFu(item.id, 'auth')}
                      Dom={<div>撤回申请</div>}
                    />
                  </div>
                </div>
              ))}
            </>
          ) : (
            <div className='A6No' hidden={!loding2}>
              暂无认证申请
            </div>
          )}
        </div>
      </div>
    </div>
  )
}

const MemoA6my = React.memo(A6my)

export default MemoA6my