import React, { useCallback, useState } from 'react'
import styles from './index.module.scss'
import TopCom from '@/components/TopCom'

import xingImg from '@/assets/img/selectCourse/xing.png'
import A4look from './A4look'
import history from '@/utils/history'
import { Button } from 'antd'

export type SonType = {
  id: number
  name: string
  txt1: string
  txt2: string
  txt3: string
}

const list = [
  {
    id: 1,
    tyle: '幼儿课程',
    son: [
      {
        id: 1.1,
        name: '1课程课程课程课程课程课程课程课程课程课程课程课程',
        txt1: '本园特设健康科普常识课程，旨在通过趣味互动的方式，向孩子们介绍食物金字塔、人体结构等基础科学知识。我们相信，从小培养科学素养，能激发孩子们的好奇心和探索欲。',
        txt2: '我们的授课团队由经验丰富的幼教专家和专业科普讲师组成，他们热情、耐心，擅长以孩子们喜闻乐见的形式传授知识，确保每个孩子都能在轻松愉快的氛围中学习成长。',
        txt3: '为确保教学质量，我们的课程实行预约制。家长可通过电话或网站预约，选择孩子感兴趣的课程和时间。请至少提前一周预约，并在预约成功后按时参加，如有变动，请及时通知我们，以便安排其他家庭。'
      },
      {
        id: 1.2,
        name: '课程222',
        txt1: '',
        txt2: '',
        txt3: ''
      }
    ]
  },
  {
    id: 2,
    tyle: '英语课程英语课程英语',
    son: [
      {
        id: 2.1,
        name: '啊沙发上',
        txt1: '本园特设健康科普常识课程。',
        txt2: '',
        txt3: '为确保教学质量，我们的课程实行预约制'
      },
      {
        id: 2.2,
        name: '课程2阿三大苏打22',
        txt1: '',
        txt2: '啊实打实大苏打啊实打实大苏打啊实打实大苏打啊实打实大苏打啊实打实大苏打啊实打实大苏打啊实打实大苏打啊实打实大苏打啊实打实大苏打啊实打实大苏打啊实打实大苏打啊实打实大苏打',
        txt3: ''
      }
    ]
  }
]

function A4selectCourse() {
  // 点击预约课程
  const arrangeFu = useCallback(() => {
    if (1 + 1 !== 2) {
      // 跳预约页面
      history.push('/order')
    } else {
      // 打开弹窗 提示去认证页面
      setTanShow(true)
    }
  }, [])

  // 点击查看详情
  const [info, setInfo] = useState({} as SonType)

  // 弹窗
  const [tanShow, setTanShow] = useState(false)

  return (
    <div className={styles.A4selectCourse}>
      <TopCom txt='选择课程' />
      {list.length ? (
        <div className='A4main'>
          {list.map(item1 => (
            <div className='A4row' key={item1.id}>
              {/* 1级标题 */}
              <div className='A4row1'>
                <img src={xingImg} alt='' />
                {item1.tyle}
              </div>
              {/* 2级信息 */}
              {item1.son.map(item2 => (
                <div className='A4row2' key={item2.id}>
                  <div className='A4row2_1'>{item2.name}</div>
                  <div className='A4row2_2'>
                    <div>
                      {item2.txt1 ? (
                        <>
                          <div className='A4row2_2tit'>课程简介：</div>
                          <p>{item2.txt1}</p>
                        </>
                      ) : null}
                      {item2.txt2 ? (
                        <>
                          <div className='A4row2_2tit'>授课团队：</div>
                          <p>{item2.txt2}</p>
                        </>
                      ) : null}
                      {item2.txt3 ? (
                        <>
                          <div className='A4row2_2tit'>预约须知：</div>
                          <p>{item2.txt3}</p>
                        </>
                      ) : null}

                      {!item2.txt1 && !item2.txt2 && !item2.txt3 ? (
                        <div className='A4row2_2No'>暂无信息</div>
                      ) : null}
                    </div>
                  </div>
                  {/* 按钮 */}
                  <div className='A4row2_3'>
                    <div
                      onClick={() => setInfo(item2)}
                      className={!item2.txt1 && !item2.txt2 && !item2.txt3 ? 'A4row2_3No' : ''}
                    >
                      查看详情
                    </div>
                    <div onClick={arrangeFu}>预约课程</div>
                  </div>
                </div>
              ))}
            </div>
          ))}
        </div>
      ) : (
        <div className='A4No'>暂无数据</div>
      )}

      {/* 查看详情 */}
      {info.id ? <A4look info={info} closeFu={() => setInfo({} as SonType)} /> : null}

      {/* 完成团体认证弹窗 */}
      {tanShow ? (
        <div className='A4tan' id='openDom'>
          <div>
            <h1>请先完成团体认证</h1>
            <div className='A4ttxt'>
              团体预约需先通过资质认证。 预约单位需取得<span>横琴粤澳深度合作区民生事务局</span>或
              <span>澳门街坊会联合总会广东办事处</span>的授权。认证通过后，方可预约课程。
            </div>
            <div className='A4tbtn'>
              <Button size='large' onClick={() => setTanShow(false)}>
                取消
              </Button>
              &emsp;
              <Button size='large' type='primary' onClick={() => history.push('/team')}>
                去认证
              </Button>
            </div>
          </div>
        </div>
      ) : null}
    </div>
  )
}

const MemoA4selectCourse = React.memo(A4selectCourse)

export default MemoA4selectCourse
