import React, { useCallback, useEffect, useState } from 'react'
import styles from './index.module.scss'
import TopCom from '@/components/TopCom'
import classNames from 'classnames'
import { APIN_getList } from '@/store/action/all'
import { A3NlistType } from './type'
import ZFlooBtn from '@/components/ZFlooBtn'
import history from '@/utils/history'
import dayjs from 'dayjs'
const week = ['日', '一', '二', '三', '四', '五', '六']
const nowDay = dayjs().format('YYYY-MM-DD')

function A3selectDayNew() {
  const [list, setList] = useState<A3NlistType[]>([])

  const [loding, setLoding] = useState(false)

  const getListFu = useCallback(async () => {
    const res = await APIN_getList(7)
    if (res.code === 0) {
      setLoding(true)
      const obj: any = res.data.time || {}
      let arr: A3NlistType[] = []
      for (const k in obj) {
        arr.push({
          name: k,
          arr: obj[k]
        })
      }
      setList(arr)
    }
  }, [])

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

  const [acObj, setAcObj] = useState({ bookDate: '', bookTime: '', id: 0 })

  // 当天的日期过滤 已经超过现在的时间 返回true
  const timeFile = useCallback((date: string, time: string) => {
    let falg = false

    if (nowDay === date) {
      const nowTime = dayjs(date + ' ' + time).valueOf()
      if (Date.now() > nowTime) falg = true
    }
    return falg
  }, [])

  return (
    <div className={styles.A3selectDayNew}>
      <TopCom txt='选择日期' />
      <div className={classNames('A3main', acObj.bookDate ? '' : 'A3mainNoBtn')}>
        <div className='A3list'>
          {list.length ? (
            <div className='mySorrl'>
              {list.map(item => (
                <div className='A3row' key={item.name}>
                  <div className='A3R1'>
                    {item.name} {`星期${week[dayjs(item.name).day()]}`}
                  </div>
                  <div className='A3R2'>
                    {item.arr.map(vv => (
                      <div
                        key={vv.id}
                        onClick={() =>
                          setAcObj({
                            bookDate: item.name,
                            bookTime: `${vv.timeStart}-${vv.timeEnd}`,
                            id: vv.id
                          })
                        }
                        className={classNames(
                          acObj.id === vv.id ? 'A3ac' : '',
                          vv.pcs === 0 || timeFile(item.name, vv.timeStart) ? 'A3R2rowNo' : ''
                        )}
                      >
                        {vv.timeStart} - {vv.timeEnd}
                        {vv.pcs === 0 ? ' 已满' : ''}
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div className='A3listNo' hidden={!loding}>
              暂无可约日期
            </div>
          )}
        </div>

        <ZFlooBtn
          txt={acObj.bookDate ? '下一步' : '请选择日期'}
          clickFu={() =>
            history.push(`/selectCourse/${acObj.id}/${acObj.bookDate}/${acObj.bookTime}`)
          }
        />
      </div>
    </div>
  )
}

const MemoA3selectDayNew = React.memo(A3selectDayNew)

export default MemoA3selectDayNew