import React, { useCallback, useEffect, 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'
import { useParams } from 'react-router-dom'
import { A4_APIcheck, A4_APIgetList } from '@/store/action/all'
import { A4ListApiType, A4ListType, A4LookType } from './type'
import classNames from 'classnames'

function A4selectCourse() {
  // 获取路由参数
  const [urlObj, setUrlObj] = useState({
    bookDate: '',
    bookTime: '',
    id: 0
  })

  const urlObjTemp: any = useParams()

  useEffect(() => {
    // console.log(dayjs(Number(urlObjTemp.bookDate)).format('YYYY-MM-DD'))

    setUrlObj(urlObjTemp)
  }, [urlObjTemp])

  const [list, setList] = useState<A4ListType[]>([])

  // 获取列表信息
  const getListFu = useCallback(async () => {
    const res = await A4_APIgetList()
    if (res.code === 0) {
      const obj: any = {}

      const list: A4ListApiType[] = res.data.records

      list.forEach(v => {
        if (obj[v.dictTypeName]) obj[v.dictTypeName].push(v)
        else obj[v.dictTypeName] = [v]
      })

      const listTemp: A4ListType[] = []

      for (const key in obj) {
        listTemp.push({
          id: key,
          son: obj[key]
        })
      }
      setList(listTemp)
    }
  }, [])

  useEffect(() => {
    getListFu()
  }, [getListFu])

  // 点击预约课程
  const arrangeFu = useCallback(
    async (id: number) => {
      const res = await A4_APIcheck()
      if (res.code === 0) {
        // 跳预约页面
        // 0：未认证 | 1：已认证 | 2：认证中

        if (res.data === 1)
          history.push(`/order/${id}/${urlObj.bookDate}/${urlObj.bookTime}/${urlObj.id}`)
        else setTanShow(true) // 打开弹窗 提示去认证页面
      }
    },
    [urlObj]
  )

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

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

  // 判断是否3个富文本都没有内容
  const textFlag = useCallback((val1: string, val2: string, val3: string) => {
    let flag = false
    const obj1 = JSON.parse(val1)
    const obj2 = JSON.parse(val2)
    const obj3 = JSON.parse(val3)
    if (obj1.isTxtFlag && obj2.isTxtFlag && obj3.isTxtFlag) flag = true
    return flag
  }, [])

  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.id}
              </div>
              {/* 2级信息 */}
              {item1.son.map(item2 => (
                <div className='A4row2' key={item2.id}>
                  <div className='A4row2_1'>{item2.name}</div>
                  <div className='A4row2_2'>
                    <div className='A4row2_2Box'>
                      <div className='mySorrl'>
                        {item2.intro ? (
                          <>
                            <div className='A4row2_2tit'>课程简介：</div>
                            <p>{item2.intro}</p>
                          </>
                        ) : null}
                        {item2.team ? (
                          <>
                            <div className='A4row2_2tit'>授课团队：</div>
                            <p>{item2.team}</p>
                          </>
                        ) : null}
                        {item2.info ? (
                          <>
                            <div className='A4row2_2tit'>预约须知：</div>
                            <p>{item2.info}</p>
                          </>
                        ) : null}

                        {!item2.intro && !item2.team && !item2.info ? (
                          <div className='A4row2_2No'>暂无信息</div>
                        ) : null}
                      </div>
                    </div>
                  </div>
                  {/* 按钮 */}
                  <div className='A4row2_3'>
                    <div
                      onClick={() => setInfo(item2)}
                      className={classNames(
                        textFlag(item2.introRtf, item2.teamRtf, item2.infoRtf) ? 'A4row2_3No' : ''
                      )}
                    >
                      查看详情
                    </div>
                    <div onClick={() => arrangeFu(item2.id)}>预约课程</div>
                  </div>
                </div>
              ))}
            </div>
          ))}
        </div>
      ) : (
        <div className='A4No'>暂无数据</div>
      )}

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

      {/* 完成团体认证弹窗 */}
      {tanShow ? (
        <div className='A4tan' id='openDom'>
          <div>
            <h1>请先完成团体认证</h1>
            <div className='A4ttxt'>
              团体预约需先通过资质认证。 预约单位需取得授权。认证通过后，方可预约课程。
            </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
