import React, { useCallback, 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'

const list1 = [
  {
    id: 1,
    time: '11月21日上午',
    done: 1,
    title: '一是一段课程名称名称',
    name: '撒大苏打水水',
    phone: '18702025050',
    ID: '421083199504071216',
    num1: 999,
    num2: 999,
    jigou: '一是一段课程名称名称一是一段课程名称名称',
    miaoshu:
      '一是一段课程名称名称一是一段课程名称名称一是一段课程名称名称一是一段课程名称名称一是一段课程名称名称一是一段课程名称名称一是一段课程名称名称一是一段课程名称名称一是一段课程名称名称一是一段课程名称名称一是一段课程名称名称一是一段课程名称名称一是一段课程名称名称一是一段课程名称名称一是一段课程名称名称一是一段课程名称名称一是一段课程名称名称一是一段课程名称名称一是一段课程名称名称一是一段课程名称名称'
  },
  {
    id: 2,
    time: '11月22日上午',
    done: 2,
    title: '二课程名称',
    name: '撒大苏',
    phone: '18702025050',
    ID: '421083199504071216',
    num1: 0,
    num2: null,
    jigou: '一是一段课',
    miaoshu: ''
  },
  {
    id: 3,
    time: '11月22日上午',
    done: 3,
    title: '二课程名称',
    name: '撒大苏',
    phone: '18702025050',
    ID: '421083199504071216',
    num1: 0,
    num2: null,
    jigou: '一是一段课',
    miaoshu: ''
  },
  {
    id: 4,
    time: '11月22日上午',
    done: 0,
    title: '二课程名称',
    name: '撒大苏',
    phone: '18702025050',
    ID: '421083199504071216',
    num1: 0,
    num2: null,
    jigou: '一是一段课',
    miaoshu: ''
  }
]

const list2 = [
  {
    id: 1,
    title: '横琴粤澳深度合作区民生事务局',
    name: '撒大苏打水水',
    done: 1,
    phone: '18702025050',
    danwei:
      '为哇饿啊为为哇饿啊为为哇饿啊为为哇饿啊为为哇饿啊为为哇饿啊为为哇饿啊为为哇饿啊为为哇饿啊为为哇饿啊为',
    file: [
      {
        id: 1.1,
        name: 'xxxxxxxxxxxxxx啊实打实大撒大苏打撒旦苏打xxxx.pdf',
        src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
      },
      {
        id: 1.2,
        name: '666.jpg',
        src: ''
      }
    ]
  },
  {
    id: 2,
    title: '澳门街坊会联合总会广东办事处',
    name: '撒大苏',
    done: 2,
    phone: '18702025050',
    danwei: '为哇饿啊为为',
    file: [
      {
        id: 2.1,
        name: 'xxxxxxxxxxxxxx啊实打实大苏打xxxx.pdf',
        src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
      }
    ]
  },
  {
    id: 3,
    title: '澳门街坊会联合总会广东办事处',
    name: '撒大苏',
    done: 3,
    phone: '18702025050',
    danwei: '为哇饿啊为为',
    file: [
      {
        id: 3.1,
        name: 'xxxxxxxxxxxxxx啊实打实大苏打xxxx.pdf',
        src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
      }
    ]
  },
  {
    id: 4,
    title: '澳门街坊会联合总会广东办事处',
    name: '撒大苏',
    done: 0,
    phone: '18702025050',
    danwei: '为哇饿啊为为',
    file: [
      {
        id: 3.1,
        name: 'xxxxxxxxxxxxxx啊实打实大苏打xxxx.pdf',
        src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
      }
    ]
  }
]

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

  // 点击撤回
  const recallFu = useCallback((id: number) => {}, [])

  return (
    <div className={styles.A6my}>
      <TopCom txt='我的申请' />
      <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'>
                    {[0, 1].includes(item.done) ? (
                      <div
                        className='A6row1_1'
                        style={{
                          borderColor: item.done === 0 ? '#aeaeae' : '#f45151',
                          color: item.done === 0 ? '#fff' : '#f45151',
                          backgroundColor: item.done === 0 ? '#aeaeae' : ''
                        }}
                      >
                        {item.done === 0 ? '已失效' : '待审核'}
                      </div>
                    ) : (
                      <img src={item.done === 2 ? succImg : errImg} alt='' />
                    )}

                    <p>
                      <span>预约日期：</span>
                      {item.time}
                    </p>
                    <p>
                      <span>预约课程：</span>
                      {item.title}
                    </p>
                  </div>

                  <div className='A6row2'>
                    <div className='A6row2Tit'>负责人信息：</div>
                    <p>
                      <span>负责人姓名：</span>
                      {item.name}
                    </p>
                    <p>
                      <span>联系方式：</span>
                      {item.phone}
                    </p>
                    <p>
                      <span>身份证号：</span>
                      {item.ID}
                    </p>
                  </div>

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

                    <div className='A6row2_1 mySorrl'>
                      <p>
                        <span>参团学生人数：</span>
                        {item.num1}
                      </p>
                      <p>
                        <span>随堂老师人数：</span>
                        {item.num2 || 0}
                      </p>
                      <div>
                        <span>所属机构：</span>
                        {item.jigou}
                      </div>
                      {item.miaoshu ? (
                        <div>
                          <span>团队描述：</span>
                          {item.miaoshu}
                        </div>
                      ) : null}
                    </div>
                  </div>

                  <div className={classNames('A6row3', item.done !== 1 ? 'A6row3No' : '')}>
                    <MyPopconfirm
                      txtK='撤回'
                      onConfirm={() => recallFu(item.id)}
                      Dom={<div>撤回申请</div>}
                    />
                  </div>
                </div>
              ))}
            </>
          ) : (
            <div className='A6No'>暂无预约申请</div>
          )}
        </div>

        {/* 认证申请 */}
        <div className='A6list' hidden={topAc !== '认证申请'}>
          {list2.length ? (
            <>
              {list2.map(item => (
                <div className='A6_2row' key={item.id}>
                  <div className='A6_2Top'>
                    <p>认证单位</p>
                    <div>{item.title}</div>

                    {[0, 1].includes(item.done) ? (
                      <div
                        className='A6row1_1'
                        style={{
                          borderColor: item.done === 0 ? '#aeaeae' : '#fff',
                          backgroundColor: item.done === 0 ? '#aeaeae' : ''
                        }}
                      >
                        {item.done === 0 ? '已失效' : '待审核'}
                      </div>
                    ) : (
                      <img src={item.done === 2 ? 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.danwei}</p>
                    </div>
                  </div>

                  <div className='A6_2file'>
                    <div className='A6_2file1'>
                      <div className='A6_2file1_1'>授权或同意文件：</div>
                      {item.file.map(item2 => (
                        <div key={item2.id} className='A6_2fileRow'>
                          <div className='A6_2filell'>{item2.name}</div>
                          <a href={item2.src} className='A6_2filerr' download={item2.name}>
                            下载
                          </a>
                        </div>
                      ))}
                    </div>
                  </div>

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

const MemoA6my = React.memo(A6my)

export default MemoA6my
